Design system
The building blocks of Vosna
Every part comes from a single design system: dark tech-premium, with Space Grotesk for headlines and Inter for the rest. That keeps every page consistent.
01
Typography
Space Grotesk for headlines, Inter for all functional text.
Digitaal uit handen genomen
Iets werkends, snel
Zo werken we
Een kleine kop
Een website, een tool of een heel systeem.
Gewoon Nederlands, korte zinnen, niets ingewikkelds.
Helper-tekst en kleine details.
Bijschrift of metadata.
02
Buttons
Everything is a pill. Filled for the primary action, outlined for the second, light inverted for extra punch.
03
Labels and badges
The eyebrow sets the tone above a heading. Badges show status or category.
Digitaal partner voor ondernemers
De eyebrow boven een kop.
04
Cards
We separate big blocks with elevation or a light inverted surface, calm and with class.
Verhoogd donker vlak met lichte tekst.
Licht inverted vlak met donkere tekst.
Hogere elevatie boven de canvas.
Example
An elevated card on dark
Elevation and a hairline separate the blocks. It stays calm, even without much colour.
05
Colours
Dark neutrals as the base, with deep emerald and warm gold as accents.
canvas
#060607
surface
#101013
surface-hi
#17171b
line
#222226
emerald-tint
#15112a
emerald-deep
#0e6b4d
emerald
#7c5cff
emerald-bright
#9d85ff
gold
#d9b36a
gold-deep
#c6a15b
ink-soft
#9ba7a0
ink
#f4f5f2
06
Organisme
De levende weergave van alle onderdelen, zoals in de admin en het klantportaal. Dit is voorbeelddata.
Klanten2
accounts
Projecten3
in beheer
Berichten1
nieuw
Facturen2
open
Documenten4
gedeeld
Contracten1
actief
Agents
team
conceptVoorbeeldklant A
Voorbeeldklant B
Vosna
kern