Fypon

Draft

Fypon brand theme: color palettes and semantic token mapping.

Brand palettes

Core

Navy

Gold

Supporting

Blue

Light Blue

Teal

Maroon

Neutral

Charcoal

Gray

Stone

Linen

Cream

Black

White

Semantic tokens

Which brand color each semantic role resolves to. Components reference the role, so they pick up the brand automatically.

Set by this brand

The semantic colors this brand changes. Every other color keeps the core default or follows one of these.

Color	Token / CSS	Points to	Hex
Brand primary	`color.brand.primary`	`fypon.color.navy`	`#000036`
Brand secondary	`color.brand.secondary`	`fypon.color.gold`	`#C28710`
Text primary	`color.text.primary`	`fypon.color.navy`	`#000036`
Text secondary	`color.text.secondary`	`fypon.color.gray`	`#545454`
Action primary foreground	`color.action.primary.foreground`	`fypon.color.white`	`#FFFFFF`
Action primary background	`color.action.primary.background`	`fypon.color.navy`	`#000036`
Action primary border	`color.action.primary.border`	`fypon.color.navy`	`#000036`
Action primary hover background	`color.action.primary.hover.background`	`fypon.color.blue`	`#0079C1`
Action primary hover border	`color.action.primary.hover.border`	`fypon.color.blue`	`#0079C1`
Surface secondary	`color.surface.secondary`	`fypon.color.cream`	`#F9F7F4`
Surface inverse	`color.surface.inverse`	`fypon.color.navy`	`#000036`
Surface inverse secondary	`color.surface.inverseSecondary`	`fypon.color.charcoal`	`#333132`
Surface highlight	`color.surface.highlight`	`fypon.color.linen`	`#EFECE4`
Focus outline	`color.focus.outline`	`fypon.color.blue`	`#0079C1`

All semantic colors

Every semantic color as it resolves for this brand, grouped as on Colors.

Brand

The brand’s main colors. Most other roles point to these.

Color	Hex	Token / CSS
Primary		`color.brand.primary`
Secondary		`color.brand.secondary`

Text

Body copy, secondary text and accents.

Color	Hex	Token / CSS
Primary		`color.text.primary`
Secondary		`color.text.secondary`
Subtle		`color.text.subtle`
Accent		`color.text.accent`

Surface

Section and component backgrounds.

Color	Hex	Token / CSS
Primary		`color.surface.primary`
Secondary		`color.surface.secondary`
Inverse		`color.surface.inverse`
Inverse secondary		`color.surface.inverseSecondary`
Highlight		`color.surface.highlight`

Link

Inline text links and their states.

Color	Hex	Token / CSS
Foreground		`color.link.foreground`
Decoration		`color.link.decoration`
Hover foreground		`color.link.hover.foreground`
Hover decoration		`color.link.hover.decoration`
Active foreground		`color.link.active.foreground`
Active decoration		`color.link.active.decoration`
Visited foreground		`color.link.visited.foreground`
Visited decoration		`color.link.visited.decoration`

Action

Buttons and CTAs, by variant and state.

Color	Hex	Token / CSS
Primary foreground		`color.action.primary.foreground`
Primary background		`color.action.primary.background`
Primary border		`color.action.primary.border`
Primary interactive		`color.action.primary.interactive`
Primary hover foreground		`color.action.primary.hover.foreground`
Primary hover background		`color.action.primary.hover.background`
Primary hover border		`color.action.primary.hover.border`
Primary active foreground		`color.action.primary.active.foreground`
Primary active background		`color.action.primary.active.background`
Primary active border		`color.action.primary.active.border`
Secondary foreground		`color.action.secondary.foreground`
Secondary background		`color.action.secondary.background`
Secondary border		`color.action.secondary.border`
Secondary interactive		`color.action.secondary.interactive`
Secondary hover foreground		`color.action.secondary.hover.foreground`
Secondary hover background		`color.action.secondary.hover.background`
Secondary hover border		`color.action.secondary.hover.border`
Secondary active foreground		`color.action.secondary.active.foreground`
Secondary active background		`color.action.secondary.active.background`
Secondary active border		`color.action.secondary.active.border`
Tertiary foreground		`color.action.tertiary.foreground`
Tertiary background		`color.action.tertiary.background`
Tertiary border		`color.action.tertiary.border`
Tertiary hover foreground		`color.action.tertiary.hover.foreground`
Tertiary hover background		`color.action.tertiary.hover.background`
Tertiary hover border		`color.action.tertiary.hover.border`
Tertiary active foreground		`color.action.tertiary.active.foreground`
Tertiary active background		`color.action.tertiary.active.background`
Tertiary active border		`color.action.tertiary.active.border`
Plain foreground		`color.action.plain.foreground`
Plain background		`color.action.plain.background`
Plain border		`color.action.plain.border`
Plain hover foreground		`color.action.plain.hover.foreground`
Plain hover background		`color.action.plain.hover.background`
Plain hover border		`color.action.plain.hover.border`
Plain active foreground		`color.action.plain.active.foreground`
Plain active background		`color.action.plain.active.background`
Plain active border		`color.action.plain.active.border`
Link foreground		`color.action.link.foreground`
Link background		`color.action.link.background`
Link border		`color.action.link.border`
Link hover foreground		`color.action.link.hover.foreground`
Link hover background		`color.action.link.hover.background`
Link hover border		`color.action.link.hover.border`
Link active foreground		`color.action.link.active.foreground`
Link active background		`color.action.link.active.background`
Link active border		`color.action.link.active.border`

Control

Form fields, by state.

Color	Hex	Token / CSS
Foreground		`color.control.foreground`
Background		`color.control.background`
Border		`color.control.border`
Placeholder		`color.control.placeholder`
Hover foreground		`color.control.hover.foreground`
Hover background		`color.control.hover.background`
Hover border		`color.control.hover.border`
Focus foreground		`color.control.focus.foreground`
Focus background		`color.control.focus.background`
Focus border		`color.control.focus.border`
Selected foreground		`color.control.selected.foreground`
Selected background		`color.control.selected.background`
Selected border		`color.control.selected.border`
Selected indicator		`color.control.selected.indicator`
Disabled foreground		`color.control.disabled.foreground`
Disabled background		`color.control.disabled.background`
Disabled border		`color.control.disabled.border`
Invalid foreground		`color.control.invalid.foreground`
Invalid background		`color.control.invalid.background`
Invalid border		`color.control.invalid.border`
Success foreground		`color.control.success.foreground`
Success background		`color.control.success.background`
Success border		`color.control.success.border`
Track inactive		`color.control.track.inactive`
Track active		`color.control.track.active`

Interactive

Small interactive parts such as carousel dots and pagination.

Color	Hex	Token / CSS
Default		`color.interactive.default`
Hover		`color.interactive.hover`
Active		`color.interactive.active`

Accent

Highlights that aren’t a full brand color.

Color	Hex	Token / CSS
Primary		`color.accent.primary`
Secondary		`color.accent.secondary`

Focus

The keyboard focus outline. See Focus.

Color	Hex	Token / CSS
Outline		`color.focus.outline`

Selection

Text the user has highlighted.

Color	Hex	Token / CSS
Foreground		`color.selection.foreground`
Background		`color.selection.background`

Spinner

The loading spinner.

Color	Hex	Token / CSS
Background		`color.spinner.background`

Overlay

The dark layer behind dialogs and over media. Pair it with an opacity token.

Color	Hex	Token / CSS
Overlay		`color.overlay`

Font families

The fonts this brand's text styles use. Each brand's fonts.css loads them; the tokens below decide where each one is used.

Font	Stack	Token / CSS	Used by
Archivo	`"Archivo", "Helvetica Neue", "Arial", sans-serif`	`fypon.font.family.archivo`	Display, Subheading, Eyebrow, Body, Body Small, Label, Supporting, Action, Control, Badge
Montserrat	`"Montserrat", "Helvetica Neue", "Arial", sans-serif`	`fypon.font.family.montserrat`	Headline

Text styles

Each text style as it resolves for this brand. Hover a value to see its token.

Style	Family	Size	Large screens	Weight	Line height	Letter spacing
`Display`	`var(--nbhd-typography-display-fontFamily)`	`3rem`	—	`400`	`1.2`	—
`Headline`	`var(--nbhd-typography-headline-fontFamily)`	`1.5rem`	`2.125rem`	`500`	`1.2`	—
`Subheading`	`var(--nbhd-typography-subheading-fontFamily)`	`1.125rem`	—	`400`	`1.3`	—
`Eyebrow`	`var(--nbhd-typography-eyebrow-fontFamily)`	`0.8125rem`	—	`400`	`1.4`	`5px`
`Body`	`var(--nbhd-typography-body-fontFamily)`	`1rem`	—	`400`	`1.5`	—
`Body Small`	`var(--nbhd-typography-bodySmall-fontFamily)`	`0.875rem`	—	`400`	`1`	—
`Label`	`var(--nbhd-typography-label-fontFamily)`	`1rem`	—	`700`	`1`	—
`Supporting`	`var(--nbhd-typography-supporting-fontFamily)`	`0.8125rem`	—	`400`	`1`	—
`Action`	`var(--nbhd-typography-action-fontFamily)`	`0.6875rem`	`0.6875rem`	`400`	`1`	`2px`
`Control`	`var(--nbhd-typography-control-fontFamily)`	`1.125rem`	—	`700`	`1`	—
`Badge`	`var(--nbhd-typography-badge-fontFamily)`	`0.625rem`	—	`400`	`1`	—