Design System

FANATICS Design System

Alle UI-componenten, design tokens en typografie die we gebruiken op fanatics.nl. Gebouwd op CSS custom properties voor maximale consistentie.

Naar fanatics.nl
Foundation

Backgrounds & surfaces

Vier surfaces dekken de hele site. Eén grid-pattern als optionele textuur op hero-secties en achter illustraties. Geen gradients. Volledige policy in docs/03-design-system.md.

4 surface-niveaus

page --color-bg-page cream-500 · #f4f4ed
raised --color-bg-surface-raised white · #ffffff
muted --color-bg-muted cream-600 · #ebe9d8
inverse --color-bg-inverse navy-500 · #044a91

Grid pattern — alleen op hero + onder illustraties

Dit blok heeft .surface-grid. 24px navy-lijntjes op 4% alpha, gefade naar de randen via mask-image. Tekst en interactieve elementen erop blijven volledig opaque.

Chevron list — Fanatics signature voor bullets

Op cream / white

  • Checklists voor elk Odoo-proces
  • De TARGET-formule uitgelegd
  • Alle do's en don'ts
  • Hoe houd je het project binnen budget?
  • Wat is jouw rol als opdrachtgever?

Op navy — chevron via --chevron-color override

  • Edge-deployed via Cloudflare
  • Forms direct in Odoo als lead
  • AI-zoek in de knowledge base
  • Lighthouse 90+ op alle metrics

<ul class="chevron-list"> — werkt op <ul> en <ol>. Default kleur = --color-action-primary (oranje). Override met --chevron-color: var(--color-cream-500) op donkere panelen.

Component

Button

4 varianten · 3 sizes · disabled state · element-agnostic (a/button).

Variants (size: md)

Sizes (variant: primary)

Disabled

As link (renders <a>)

External link Internal link

With icon (now via astro-icon + lucide)

Component

Badge

Kleine status- of categorielabel. 4 varianten.

Variants

Navy Orange Teal Outline

In context (naast tekst)

Phase 1 is in volle gang In progress — slice 1 (Button, Card, Badge) staat. Slice 2 Pending komt in de volgende sessie.

Component

Card

2 varianten · composeerbaar met CardHeader / CardBody / CardFooter.

Default — standalone

Een eenvoudige card

Default variant: subtiele rand, zachte schaduw. Bedoeld voor de meeste content.

Met brand-accent

Brand variant: navy rand + solid offset teal schaduw — de Fanatics-signature voor opvallende cards (hero, key-feature, conversie).

Met Header / Body / Footer

Feature

Multi-stop timesheets

Per regel een ander project kiezen. Standaard staat een werkbriefje op één project per week — multi-stop opent het keuze-veld per dag.

Nieuw

AI-zoek in knowledge base

Stel een vraag in normaal Nederlands en krijg een antwoord uit de hele KB — inclusief de bron-artikelen.

Component

Form fields

Input, Textarea, Select, Checkbox, Radio en Label. Allemaal gebouwd op native form-elementen — keyboard-, screenreader- en validation-API werken standaard. Foutstaat via de error prop of aria-invalid="true".

Input — variants en states

Geldig telefoonnummer vereist.

Wordt automatisch toegekend.

Textarea

Minimaal 20 tekens.

Select

Checkbox & Radio

Layout

Layout primitives

Container (max-width wrapper), Stack (verticaal), Inline (horizontaal), Section (verticale padding). Gebruik deze i.p.v. losse margins/paddings — houdt het spacing-ritme consistent en in tokens.

Stack — 6 gap-niveaus

gap="xs"

gap="sm"

gap="md"

gap="lg"

gap="xl"

gap="2xl"

Inline — alignment + justify

align="center" justify="between"

Item 1 Item 2 Item 3 Item 4

gap="lg" wrap — knapt af bij smal scherm

Container — max-width 1240px, gecentreerd

Deze Card zit in een Container. Op brede schermen pakt hij maximaal 1240px en blijft gecentreerd; op smalle viewports vult hij de breedte met --container-padding-x aan beide kanten.

Section — verticale padding-schalen

padding="sm" — gebruikt --section-padding-y-sm als boven- en onderpadding.

padding="md" — gebruikt --section-padding-y-md als boven- en onderpadding.

padding="lg" — gebruikt --section-padding-y-lg als boven- en onderpadding.

System

Icons (Lucide via astro-icon)

Iconen geleverd door astro-icon + het Lucide iconset. SVGs worden bij build-time inline gezet — geen runtime fetch. Gebruik in templates: <Icon name="lucide:arrow-right" />. Het volledige Lucide-set (~1500 icons) is doorzoekbaar op lucide.dev.

Veelgebruikte iconen op brand-kleuren

arrow-right
check
x
mail
phone
user
users
briefcase
calendar
clock
file-text
settings
search
save
download
external-link
chevron-down
chevron-right
plus
trash-2

Sizes

Media

Video embed (lazy facade)

YouTube embed via VideoEmbed. Eerste paint = poster + play-button; iframe wordt pas geladen na klik. Component emit ook VideoObject JSON-LD voor video-rich-snippet in Google. Pattern in docs/03-design-system.md §6.

Default (16:9, geen caption)

Met caption

Updoo Timesheets · demo

Loom-provider (poster verplicht)

Architecture

Token-propagatie test

Iedere component op deze pagina leest uit packages/tokens/src/component.css (laag 3), die op zijn beurt verwijst naar semantic.css (laag 2), die naar primitive.css (laag 1) verwijst. Wijzig op één plek, zie het overal terugkomen.

Snelle zelftest

  1. Open packages/tokens/src/primitive.css en wijzig --color-orange-500 bijvoorbeeld naar #e91e63 (roze).
  2. Sla op. Astro HMR herlaadt deze pagina.
  3. Alle primary buttons, de orange badge, en het oranje accent in het token-blokje op de homepage verschuiven naar roze. Geen jacht door componenten nodig.
  4. Undo — we zijn niet hier om écht roze te worden.