Design System
Style Guide
The canonical typography, colors, spacing, and components used across the ICFS OKR dashboard. Reuse these exact patterns — do not introduce new variants.
01
Typography
Quicksand for headings and display statements, Plus Jakarta Sans for everything else. Both are self-hosted variable fonts — no external font CDN. Headings are sentence case; all-caps is reserved for short metadata.
Headings: Quicksand · Body: Plus Jakarta Sans
The quick brown fox
Utility .display-xl — fluid Quicksand 600.
Section heading
Utility .display-lg
Subsection heading
text-lg font-semibold tracking-tight
Regular paragraph copy sits at 14px with relaxed leading for scannable dashboard content.
text-sm leading-relaxed
Secondary text, hints, meta — always text-muted-foreground.
Eyebrow label
Utility .eyebrow — 11px, 700, uppercase, primary color.
Section label
Utility .section-label — same as eyebrow but muted.
Utility .btn-mono for identifiers and numbers.
02
Color
The official ICF palette: Deep Blue #212251, Blue #2B379B, Light Blue #5778FA, Yellow #EFCB30, Bone #F8F0E4, White. Always use the semantic tokens — never hardcode hex or Tailwind color classes in components. Yellow is used sparingly; Light Blue carries focus and selection, not body text.
--color-background--color-foreground--color-card--color-muted--color-primary--color-highlight--color-accent--color-secondary--color-hero--color-border--color-ring--color-chip--color-pillar-sg--color-pillar-oe--color-pillar-ce03
Spacing & radius
Use the Tailwind 4px scale. Cards use rounded-2xl; controls use rounded-md; chips use rounded-full.
Page content: mx-auto max-w-7xl px-8. Section rhythm: space-y-12.
04
Logo usage
Always the ICF Switzerland Charter Chapter mark on the indigo hero. Height 80px (h-20). Do not recolor, crop, or place on light backgrounds.
Import from @/assets/icf-switzerland-charter-chapter.png.asset.json.
05
Header
Every page uses the same indigo hero with logo (top-left), controls cluster (top-right: TopNav, language, auth), and eyebrow + H1 + subtitle stacked left.
Eyebrow
Page title
One-line subtitle that explains the page.
06
Navigation
Pill nav on white/10 background. Active pill is solid white with primary text. Language switcher follows the same pattern at 24px height.
Use <HeaderControls /> from @/components/okr/HeaderControls in every page header: it renders this cluster on desktop and collapses to a single menu button below md. Do not build ad-hoc nav bars.
07
Buttons
One button component with two variants in use: default (primary) and outline. Sizes: default and sm. Icon buttons use the same component with an icon child.
Import Button from @/components/ui/button. Do not restyle with arbitrary classes.
08
Cards
Rounded 2xl card on card background, 1px border at border/70, subtle two-layer shadow. Padding p-4 for toolbars, p-6 for content.
Objective 1
Growth & Belonging
Standard content card. Use for OKRs, KRs, and initiative panels.
Toolbar card
09
Forms
Labels are 11px semibold uppercase muted. Inputs and selects share height 36px (h-9). Group inline controls with 12px gap.
Editable inline text uses <EditableText />. Modals use <Sheet /> or <Dialog /> from the ui library.
10
Footer
A slim indigo bar at the bottom of every page with copyright left and quick links right.