Freedom Income Options – Design System

Internal Document

Freedom Income Options
Design System v1.0

Philosophy:

“The Anti-Hype”

Institutional. Calm. Mathematical.

1. Color Palette

Brand Navy

Primary Background

#0B1120

Use for: Heros, Footers, Dark Cards

Brand Green

Primary Action / Success

#10B981

Use for: Main Buttons, Money Data

Brand Blue

Secondary Accent

#2563EB

Use for: Icons, Links, Highlights

Slate Neutrals

Structure & Text

BG: #F8FAFC (Slate-50)
Border: #E2E8F0 (Slate-200)
Text: #475569 (Slate-600)

2. Typography

Font Family

Inter

Google Font: weights 300, 400, 500, 600, 700, 900

H1 / Hero Title

Trade Like The House.

font-black text-5xl tracking-tight

H2 / Section Title

Stop Fighting the Math

font-bold text-3xl

H3 / Card Title

The “High Probability” Trap

font-bold text-xl

Body Text (Regular)

Most credit spreads fail because they are structured with a negative expectancy from the moment the order is filled. Our scanner acts as a sophisticated sieve.

text-slate-600 text-base leading-relaxed

Micro Copy / Footer

Risk Disclaimer: Options involve risk.

text-xs text-slate-400 uppercase tracking-wider

3. UI Components

Buttons

bg-brand-green
hover:bg-brand-greenDark
rounded-xl shadow-lg

bg-white border-2
border-slate-200
text-brand-navy

Text Link

text-brand-blue
font-bold hover:underline

Cards & Badges

Standard Card

rounded-2xl border border-slate-200 shadow-xl

Success Badge

Neutral Badge

4. Developer Config

Paste this into tailwind.config.js to inherit all brand settings:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
      colors: {
        brand: {
          navy: '#0B1120',
          blue: '#2563EB',
          green: '#10B981',
          greenDark: '#059669',
        }
      },
      backgroundImage: {
        'grid-pattern': "radial-gradient(#ffffff1a 1px, transparent 1px)",
      }
    }
  }
}

5. Logo

Standard Logo

https://freedomincomeoptions.com/wp-content/uploads/2025/03/Freedom-income-options-440-x-100.png

Light Logo (For Dark Backgrounds)

https://freedomincomeoptions.com/wp-content/uploads/2026/01/light-logo-.png