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 Typografie & gewichten
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.

Pattern

Stat-strip (hero stats)

Vijf trust-indicatoren als tekstgrafiek, geen fotostrip. Oranje accentlijn + mono-label, hover toont de waarde in oranje. Live op de homepage-hero; teksten uit i18n/*.ts onder home.stats.

Trust-timing + stat-strip

Eerste proof of concept in 4 weken · Hele project op papier vóór we starten · Stap-voor-stap live, geen verrassingen

  • 80+Odoo-projecten
  • 20+Jaar ERP-ervaring
  • 95%Klanten blijven
  • 4,8 / 5Google reviews
  • 2023Best Starter Europe

Eén item met tooltip (altijd zichtbaar voor review)

  • 95% Klanten blijven Negen op de tien klanten blijven jaar na jaar. Bekijk cases →
Patterns

Tekstbrekers

Tien grafische elementen om lange tekst te breken zonder foto's: puur type, line-art en de accentlijn. Allemaal token-driven.

01 · Pull-quote / statement

Standaard waar het kan, maatwerk waar het moet. De rest is ruis.
AI verschoof de grens van wat de moeite waard is om te bouwen.

02 · Stat inline in de tekst

Bij een team van veertig verdween het papier volledig.

11%meer orders op tijd afgerond, na invoering van het tabletscherm.

03 · Stappen-flow (1 - 2 - 3)

  1. 1

    Scan

    We brengen je proces en data in kaart.

  2. 2

    Bouwen

    Eerste werkende versie binnen weken.

  3. 3

    Live

    Stap voor stap, geen big-bang.

04 · Vergelijking: vroeger / nu

Vroeger
  • Maatwerk alleen voor grote bedrijven
  • Een paar dagen, twee specialisten
  • Goede ideeën sneuvelden op budget
Nu
  • Maatwerk past in een mkb-budget
  • Een middag werk
  • "Leuk maar te duur" kan ineens wel

05 · Feature-grid met icoon

Productie

Planning, voorraad en werkvloer in één systeem.

E-commerce

Webshop, voorraad en backoffice op één database.

Dienstverlening

Projecten, uren en facturen die niet uit elkaar lopen.

06 · Mono terminal-blok

$ updoo build --module "klantspecifieke-prijslijst"
# gegenereerd in 4 uur, niet in 4 dagen
✓ live op de webshop

07 · Verticale tijdlijn

  • Week 1

    Scan en scope op papier.

  • Week 2 - 3

    Eerste werkende versie.

  • Week 4

    Proof of concept live.

08 · Accent-callout

Wanneer je dit níét moet doen: als standaard Odoo je proces al dekt. Elke aanpassing is iets dat onderhouden moet worden.

Begin klein: één proces dat pijn doet en waar de data al klopt. Bewijs het daar eerst.

09 · Groot typografisch anker

Past Odoo bij jouw bedrijf?

Het eerlijke antwoord hangt af van je proces, niet van de software. Daarom beginnen we met een scan.

10 · Klant-woordwall

Vertrouwd door
  • Decilux
  • Keizer International
  • Hart Haarlem
  • Wijnwinkel Barneveld
  • IDD Parts
  • Studio Marcel Wanders
  • Ons Broodje Bonaire
  • Agrowteam
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

Pattern · Disclosure

Filter dropdown

Multi-select facet filter, gebouwd op native <details> zodat het zonder framework werkt en toetsenbord-toegankelijk is. Gebruikt o.a. op /cases voor sector, modules, integraties, maatwerk-niveau en migratiebron.

Verplicht gedrag (MANDATORY)

  • Auto-close op buiten-klik. Native <details> sluit níet vanzelf wanneer focus ergens anders naartoe gaat. Wire daarom altijd een document-level click-listener die open-dropdowns sluit waarvan event.target niet in de dropdown zit.
  • ESC sluit alle open dropdowns. Toetsenbordgebruikers moeten met één toets terug naar de inhoud kunnen.
  • Eén tegelijk open. Wanneer een dropdown opent, sluiten de andere. Luister op toggle en haal open van de siblings. Zo blijft de filter-bar smal en consistent.
  • Active-count zichtbaar. Een (n)-badge in de summary toont hoeveel filters per dimensie aan staan. Update synchroon met de checkbox-state.
  • Wis-knop verschijnt alleen bij actieve filters. hidden wanneer er niets aan staat, anders zichtbaar naast de result-counter.

Referentie-implementatie

Zie de IIFE onderin src/components/CasesIndexPage.astro. Outside-click + Escape + single-open zitten daar in ~30 regels vanilla JS. Kopieer dat patroon bij elke nieuwe filter-bar (modules-overzicht, cases-listing op industries-pages, etc.).

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.