Kleuren
Brand, ink, surface, de grijsramp en semantische rol-kleuren.
brand
primary
primary-deep
accent-blue
ink
base
muted
surface
base
subtle
dark
gray
0
25
50
100
200
300
400
500
600
700
800
900
950
neutral
white
grey-100
grey-200
grey-500
grey-700
black
feedback
success
success-tint
warning
warning-tint
danger
danger-tint
info
info-tint
a11y
focus
Typografie
Type-schaal, families en gewichten uit de tokens.
specimens (font.family.base · maten uit font.size.*)
font-families
font-weights
Spacing
De 4px-grid spacing-schaal.
xs
sm
md
lg
xl
2xl
3xl
4xl
Radius & elevation
Hoekradii en gelaagde schaduwen.
radius
xs
sm
md
lg
pill
schaduwen
sm
md
lg
Branding
Logo-lockup, brand-statement en gradient-brandband.
Logo-lockup
Brand-statement
Wij bouwen aan een digitale organisatie die meegroeit.
Brandband
Eén partner van strategie tot beheer
Een full-bleed gradient-band voor merkmomenten en krachtige call-to-actions.
Vraag een demoMotion
Duur- en easing-tokens met live demo.
Hover over het vlak — beweging volgt --ac-motion-ease-standard over --ac-motion-duration-base.
durations
fast
base
slow
easing
Knoppen
Varianten, maten en states — met lift, focus-ring en pijl-CTA.
Hover en tab door de knoppen — subtiele lift, zachte schaduw en een zichtbare focus-ring. Geen scale.
varianten
maten
states
Formulieren
Inputs, select, checkbox/radio/switch, segmented, slider, dropzone.
Overlays
Tooltip, popover, dropdown-menu, drawer, command palette, tabs.
tooltip · popover · dropdown-menu
Popover-titel
Een paneel met vrije inhoud, gesloten met Escape of buiten-klik.
drawer · command palette
Drawer-paneel
Een zijpaneel voor filters, details of formulieren. Sluit met Escape, de scrim of de knop.
Geen resultaten
tabs-varianten
Pill-variant.
Tweede paneel.
Derde paneel.
Enclosed-variant.
Tweede paneel.
Data display
Avatars, datatable, KPI’s, progress, timeline, code.
avatars
KPI-cards
Omzet
€48k
12%Gebruikers
2.418
8%Bounce
31%
▼ 3%datatable (sorteerbaar · selecteerbaar)
| Status | ||||
|---|---|---|---|---|
| Jane Doe | Beheerder | 92 | Actief | |
| John Roe | Redacteur | 78 | Inactief | |
| Alex Poe | Gast | 85 | Wacht |
lijst · description-list
- AEerste item
- BTweede item
- CDerde item
- Plan
- Pro
- Status
- Actief
- Verlengt
- 1 jan 2027
progress · spinner
timeline
Account aangemaakt
Eerste project
Upgrade naar Pro
code · kbd
npm install @ac/ui-kit
Open de command palette met ⌘ K.
Navigatie & shells
Navbars, mega-menu, sidebar-shell, page-header, footer.
navbar (marketing)
navbar (app · donker)
app-shell (sidebar — klik om in/uit te klappen)
Dashboard
Omzet
€48k
Orders
312
footer
Marketing-secties
Hero’s, feature-grids, bento, FAQ, pricing met billing-toggle.
announcement-bar
Nieuw: reference-grade UI-kit — bekijk de release
hero (centered)
Bouw sneller, consistenter en mooier
Een complete, token-gedreven componentbibliotheek voor high-end websites — van marketing tot dashboard.
hero (split)
Alles op één plek
Tekst links, media rechts — de klassieke split-hero voor productpagina's.
feature-grid
Snel van start
Plak een component en pas tokens aan — klaar.
Veilig by design
WCAG 2.2 AA en security-gates in de pipeline.
Volledig token-gedreven
Eén bron van waarheid voor kleur, type en spacing.
feature-row (alternerend)
Tekst en beeld naast elkaar
Beschrijf een feature met ondersteunende media. Even/oneven rijen wisselen automatisch van kant.
bento-grid
Groot vlak
Span 2 kolommen.
Cel
Cel
Breed
pricing (met maand/jaar-toggle)
FAQ
Hoe werkt de componentbibliotheek?
Kies een component, kopieer de code en pas tokens aan — alles beweegt mee.
Is het toegankelijk?
Ja, WCAG 2.2 AA is de release-gate: contrast, focus en toetsenbordbediening.
Werkt dark mode?
De tokens zijn dark-ready; de toggle volgt in een latere fase.
Sectieblokken
Pricing, testimonials, stats, team, steps, logo-wall, CTA.
pricing
testimonials
“Sneller en consistenter bouwen dan ooit — dit systeem verdient zichzelf terug.”
Functie, Bedrijf
“De componentenbibliotheek bespaart ons elke sprint uren werk.”
Functie, Bedrijf
stats
team
Naam één
Rol
Naam twee
Rol
Naam drie
Rol
Naam vier
Rol
stappen
Kies een component
Blader door de bibliotheek en kies wat je nodig hebt.
Kopieer & plak
Plak de Elementor-code op je pagina.
Pas tokens aan
Alles beweegt mee met de design tokens.
logo-wall
cta-banner
Enterprise-secties
Vergelijkingsmatrix, bento 2.0, proces-tijdlijn, integratie-grid, trust-badges, resource-kaarten, call-outs, team-bio.
vergelijkingsmatrix
| Functie | Starter€9 /mnd | Pro€29 /mnd | EnterpriseOp maat |
|---|---|---|---|
| Projecten | 1 | 10 | Onbeperkt |
| Alle componenten | |||
| SSO & SAML | |||
| SLA & support | 24/7 |
bento-grid 2.0 (media / stat / quote)
ISO 27001
Gecertificeerd.
Europese datacenters
Data blijft binnen de EU.
proces-tijdlijn (horizontaal)
Intake
Doelen en scope vastleggen.
Ontwerp
Tokens, componenten, templates.
Bouw
Branch → MR → pipeline.
Livegang
Geverifieerd deployen.
proces-tijdlijn (verticaal)
Aanvraag
Klant levert merk + content.
Configuratie
Kit-kleuren + logo toepassen.
Oplevering
Binnen één dag live.
integratie-grid met categorieën
Communicatie
Data & analytics
trust / security-badges
resource- / download-kaarten
Enterprise-architectuur in 2026
BekijkenRFP-checklist voor inkoop
BekijkenOn-demand productdemo
Bekijkencall-out-varianten
Goed om te wetenInformatieve call-out met een neutrale boodschap.
GeluktSucces-variant voor positieve bevestigingen.
Let opWaarschuwing voor aandachtspunten.
CTA-callout (banner)
Klaar om te starten?Zet vandaag nog een complete site live.
Plan een demoteam-grid met bio-overlay (hover / focus)
Ontwerpt schaalbare integraties voor enterprise-klanten.
Naam één
Solutions Architect
15 jaar ervaring met design-systemen en performance.
Naam twee
Lead Engineer
Borgt WCAG 2.2 AA in elke oplevering.
Naam drie
Accessibility Lead
Begeleidt livegang en onboarding.
Naam vier
Customer Success
Data-visualisatie
Geanimeerde stat-counters (tellen op in beeld) en een toegankelijke quote-carousel.
geanimeerde stat-counters (tellen op in beeld)
quote-carousel (scroll-snap + vorige/volgende + dots)
“De boilerplate bespaarde ons weken werk — een nieuwe klantsite staat in een dag.”
“Toegankelijkheid en consistentie zijn nu standaard in plaats van een nazorgpunt.”
“Eén bron van waarheid voor design én code. Precies wat we zochten.”
Content-secties
Split media+tekst (alternerend) en spotlight-quote.
Van strategie naar werkend platform
Een media-/tekst-blok voor diepgang: leg een propositie uit naast een visual, met bewijspunten.
- Agile opgeleverd in korte cycli
- Integraties met je kernsystemen
- Toegankelijk en onderhoudbaar
Betrouwbaar, ook na livegang
Met --reverse staat de visual links — ideaal voor afwisselende content-ritmes.
Eén partner van strategie tot beheer — sneller live, minder gedoe en een meetbaar beter resultaat.
Data & feedback
Tabel, lege staat, toasts, modal, skeleton.
data-tabel
| Naam | Rol | Status | Laatst actief |
|---|---|---|---|
| Jane Doe | Beheerder | Actief | 2 min geleden |
| John Roe | Redacteur | Inactief | 3 dagen geleden |
| Alex Poe | Gast | Wacht | 1 week geleden |
lege staat
Nog niets hier
Er zijn nog geen items. Maak je eerste item aan om te beginnen.
toasts
modal
skeleton (laadstaat)
Artikel
Volledig artikel met alle content-vormen (.ac-prose).
Een representatief artikel met alle content-vormen
Deze lead-paragraaf vat het artikel samen in één of twee zinnen — groter en rustiger dan de bodytekst, zodat de lezer meteen de kern pakt.
Een gewone paragraaf met een inline-link, vetgedrukte en cursieve tekst, plus een stukje inline code. Lopende tekst staat op een prettige regellengte en regelafstand voor comfortabel lezen.
Een kop op niveau twee
Onder een H2 volgt weer bodytekst. De verticale ritmiek tussen koppen, paragrafen en lijsten komt volledig uit de spacing-tokens.
- Ongeordend lijstitem met wat tekst.
- Tweede item, iets langer zodat je de regelafstand binnen een item ziet.
- Derde item.
Een standaard blockquote — citaat of nadruk, met een brand-accent aan de linkerkant.
Een pull-quote trekt een kernzin groot en gecentreerd uit de tekst.— Naam Bron
Subkop op niveau drie
- Eerste stap in een geordende lijst.
- Tweede stap.
- Derde stap.
// codeblok
function token($name) {
return "var(--ac-{$name})";
}| Token | Waarde | Gebruik |
|---|---|---|
| spacing.md | 16px | standaard gap |
| radius.md | 12px | cards, inputs |
| duration.base | 200ms | transities |
Goed om te weten
Een callout binnen de tekst — handig voor tips of waarschuwingen.
Klaar om dit component te gebruiken?
Naar de library