Vosna

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.

text-display

Digitaal uit handen genomen

text-heading-lg

Iets werkends, snel

text-heading

Zo werken we

text-heading-sm

Een kleine kop

text-subheading

Een website, een tool of een heel systeem.

text-body

Gewoon Nederlands, korte zinnen, niets ingewikkelds.

text-body-sm

Helper-tekst en kleine details.

text-caption

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.

WebsiteTool op maatAutomatiserenLive in een dag

04

Cards

We separate big blocks with elevation or a light inverted surface, calm and with class.

tone=dark

Verhoogd donker vlak met lichte tekst.

tone=light

Licht inverted vlak met donkere tekst.

tone=cloud

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

#0b1310

surface

#121e18

surface-hi

#1b2a24

line

#26302b

emerald-tint

#12251d

emerald-deep

#0e6b4d

emerald

#15966b

emerald-bright

#34c98d

gold

#d9b36a

gold-deep

#c6a15b

ink-soft

#9ba7a0

ink

#f4f5f2