Design system

Styleguide

Living document — visuele en component-richtlijnen voor de Creative Business partnerwebsite. Swiss-grid is leidend; onderstaande secties en insights worden door het team bijgewerkt na feedback en design reviews.

Living documentv1.6.2Bijgewerkt 29 jun 2026

Best practices & feedback Versiegeschiedenis

01Visuele lagen

Wanneer welk systeem?

Meng geen systemen op één pagina — kies één visuele laag per route.

Swiss-grid

Home, Opleidingen, Samenwerken, Community, Praktisch, Contact

Primair — Outfit/Inter, overview-first

SAR editorial

Blog, cases, legacy routes (migratie)

Montserrat, magenta #e5007d

Kinetic / lab

Scroll-verhalen, /lab/

GSAP, MCO-pixel #fa640a

02Kleur

Swiss-grid tokens

brand-deep

#0f172a

Tekst, footer

brand-primary

#2563eb

Links, kickers, CTA

brand-accent

#f43f5e

Secundair accent

brand-surface

#f8fafc

Pagina-achtergrond

03Typografie

Outfit & Inter

Creative Business

Bodytekst in Inter — rustig, leesbaar, geschikt voor langere partnercopy en praktische informatie.

01 · Sectielabel

Typografisch Stramien

Kop 1 (Display)

Outfit Bold

font-display text-5xl md:text-6xl font-bold tracking-tight leading-[1.05]

Creative Business

Kop 2 (Sectie)

Outfit Bold

font-display text-3xl font-bold

Samenwerken aan Innovatie

Kop 3 (Sub)

Outfit Bold

font-display text-xl font-bold

Associate Degree Opleiding

Introductietekst

Inter Regular

text-lg text-brand-deep/70 leading-relaxed

Ontdek de creatieve industrie in Leeuwarden door middel van praktijkgerichte projecten en authentieke samenwerkingen met partners.

Standaardtekst

Inter Regular

text-sm sm:text-base text-brand-deep/70 leading-relaxed

Dit is de standaard bodytekst. We gebruiken deze voor algemene informatie, details van opleidingen en partnerverhalen. De regelafstand is ruim ingesteld voor maximale leesbaarheid op schermen.

Secundaire Tekst

Inter Regular

text-xs text-brand-deep/60

Kleine details, copyrightvermeldingen en secundaire metadata onderaan kaarten of formulieren.

04Layout

Grid & spacing

Container max-w-7xl, horizontale padding px-6. Secties met genummerde labels; pagina-header met index + kicker links, titel rechts.

Responsieve Kolommen

Demonstratie van het flexibele 12-koloms raster dat zich aanpast aan de viewport.

Mobile (1-2)Tablet (6)Desktop (12)

C10

C11

C12

1. Container & Marges

Alle pagina-inhoud leeft binnen een centrale container met een maximale breedte van `max-w-7xl` (1280px). De standaard horizontale padding is `px-6` (24px) op alle apparaten.

2. Verticale Afstanden

Grote paginasecties worden gescheiden met royale marges zoals `space-y-16` of `py-24`. Dit zorgt voor ademruimte ("whitespace") passend bij de minimalistische Zwitserse esthetiek.

3. Breakpoints & Flex

Ontwerpen schalen van mobile-first naar desktop met Tailwind-breakpoints. Gebruik `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` voor een 3-koloms layout.

Zwitserse Precisie: CSS Subgrid

Lijn titels, teksten en actieknoppen horizontaal uit over afzonderlijke kaarten heen.

Zonder Subgrid (Variabel)Flex / Standard Grid

Opleiding A

Korte introductie.

→ Bekijk

Opleiding B

Een veel langere tekst die meerdere regels in beslag neemt om te demonstreren hoe de uitlijning verschuift.

→ Bekijk

Met CSS Subgrid (Uitgelijnd)grid-rows-[subgrid]

Opleiding A

Korte introductie.

→ Bekijk

Opleiding B

Een veel langere tekst die meerdere regels in beslag neemt om te demonstreren hoe de uitlijning verschuift.

→ Bekijk

05Componenten

Patronen

Kennismaking plannen Bekijk opleidingen

Programme card

Bachelor

BA / AD / MA leiden het modulaire menu — rustig, overzicht-first.

Knoppen & Interactieve Staten (Swiss Context)

Type	Rest / Normaal	Hover / Focus	Actief / Pressed	Uitgeschakeld	Laden
Primary CTA
Secondary Link
Badge / Tag	Creative	Creative	Creative	Creative	Creative

06Formulieren

Formulieren & Inputs

01 · VOLLEDIGE NAAM

02 · E-MAILADRES

Voer een geldig e-mailadres in.

Team avatar

Vaste 56px cirkel met shrink-0 en object-cover. Gebruik placeholder-SVG's tot CMS-foto's beschikbaar zijn.

Gemeenschappelijke Richtlijnen

03 · BERICHT / TOELICHTING

Ik ga akkoord met het opslaan en verwerken van mijn gegevens conform de privacyverklaring.

Ontwerpoverwegingen

—Labels zijn altijd zichtbaar en staan boven de input.
—Placeholder-tekst toont het verwachte formaat (bijv. voorbeeld@mail.com).
—Foutmeldingen worden inline onder de input getoond met een waarschuwende kleur.

07Monoline

50 ZER-iconen

Fill-based SVG's via currentColor. Gebruik één bibliotheek — geen losse icon sets op Swiss-pagina's.

Volledige monoline-bibliotheek →

Iconografie Formaat & Toegankelijkheid

We gebruiken gestandaardiseerde formaten voor al onze monoline iconen om visuele hiërarchie en consistentie te behouden:

w-5 h-5 (20px)Inline text/knoppen

w-8 h-8 (32px)Kleine kaarten

w-12 h-12 (48px)Lijst-elementen

w-16 h-16 (64px)Hero secties

Toegankelijkheidsrichtlijnen

—Decorative: Gebruik altijd `aria-hidden="true"` op het SVG element wanneer het icoon puur decoratief is (tekst ernaast legt de betekenis uit).
—Interactive: Als het icoon zelfstandig fungeert als knop of link, geef het dan een duidelijke `title` tag of `aria-label`.
—Coloring: We mappen de kleur via `currentColor` zodat iconen soepel mee veranderen bij hover of actieve staten van knoppen.

08Fluid Art

Organische abstractie

Fluid art gebruikt organische vloeistof-achtergronden. Elk niveau heeft een eigen kleurenpalet en betekenis.

Brand / Algemeen

Accent: #2563EB

Deep: #0F172A

Bachelor

Accent: #2563EB

Deep: #0B1E4D

Associate Degree

Accent: #F43F5E

Deep: #3B0A22

Master

Accent: #7C3AED

Deep: #1E1B4B

09Motion & a11y

Rustig en toegankelijk

Cursor trail standaard uit — geen afleidende menu-card animaties.
prefers-reduced-motion schakelt menu-animaties uit.
Semantische landmarks: header, main, nav, footer.
WCAG 2.1 AA — contrast op brand-deep / brand-surface.

Best practices & feedback

Bekijk onze living insights, best practices en ontwerpoverwegingen.

Bekijk insights →

Versiegeschiedenis

Volg de versiehistorie, wijzigingen en updates van de stijlgids.

Bekijk changelog →

10Bijdragen

Styleguide actueel houden

Iedereen in het team kan voorstellen doen. Wijzigingen gaan via git zodat de publieke pagina en documentatie synchroon blijven.

Voeg een insight toe in src/lib/swiss/styleguide/insights.ts (nieuwste bovenaan).
Werk changelog + manifest bij (version / lastUpdated).
Open een PR — na merge volgt build + deploy voor de live pagina.
Uitgebreide richtlijnen: agent-context/runbooks/design/styleguide/HOW-TO-UPDATE.md

src/lib/swiss/styleguide/