Style guide

Design system reference

Preview @ 1920px
Style / sampleFont familySizeWeightLine heightLetter spacingUsed in
Hero H1

Verified Trader

—————PageHero title
Section H2

Choose your challenge

—————SectionHeading
Subsection H3

Trading objectives

—————Subsection headings
Card title H4

Monthly payout publication

—————Card subtitles
Body base

Body base — default paragraph copy.

—————Default paragraphs
Body small

Body small — used inside cards and dense layouts.

—————Footer, FAQ, body small
Caption / fine print

Caption / fine print example.

—————Card meta, captions
Lead paragraph

Lead paragraph under section heading.

—————Section intros
Muted body

Muted secondary descriptive text.

—————Secondary text
Eyebrow badge
Section eyebrow		—————SectionTag, page eyebrows
Gold uppercase tag
Most popular
—————"Most popular" / status tags
Muted uppercase tag
Your share
—————Card sub-labels
Button label
Start $100K — $299
—————Pricing / payouts CTAs
Gold shimmer
Gold shimmer headline
—————Premium accents
Brand
Navy (background / primary)
--background
…
Surface (card / mid navy)
--surface
…
Surface elevated
--surface-elevated
…
Accent (green)
--accent
…
Gold
--gold
…
Text
Foreground (headings)
--foreground
…
Muted foreground / body
--muted-foreground
…
Text secondary
--text-secondary
…
Surfaces
Card
--card
…
Popover
--popover
…
Border
--border
…
Input
--input
…
Ring
--ring
…
State
Success
--success
…
Destructive
--destructive
…
Gradients & effects
Preview @ 1920px

Buttons

Badges

Default
Secondary
Outline
Destructive
⭐ Most popular

Card

Card title

Card body inside a bg-surface-elevated container. On mobile, card text scales 1.2× and small text snaps to 12px.

Pricing card

⭐ Most popular
$100K
Evaluation fee: $299
Profit target$6,000
Daily loss$2,000
Profit split85%

Form fields

Accordion (FAQ)

Banded callout

Heads up: bordered callout used for inline notes inside sections.