BV
--:--:-- · Lommel, BE

Design System · vndl.dev

The visual language behind the site.

Tokens, components, and motion specs — all built on a single CSS custom properties system. Download the token files to use in Figma or your own project.

Download tokens.cssDownload tokens.json

Color

12 tokens

Background

--color-bg

Background Subtle

--color-bg-subtle

Surface

--color-surface

Text

--color-text

Text Secondary

--color-text-secondary

Text Tertiary

--color-text-tertiary

Border

--color-border

Border Strong

--color-border-strong

Accent

--color-accent

Accent Strong

--color-accent-strong

Accent Subtle

--color-accent-subtle

On Accent

--color-on-accent

Typography

Schibsted Grotesk + JetBrains Mono
Display / H1Building maintainable software
Heading / H2Selected work
Heading / H3Full-Stack Developer
Body LargeShipped across web, mobile and desktop.
Body BaseWriting clean, maintainable code at every layer.
Body SmallReact · TypeScript · Node.js · GraphQL
Mono LabelFULL-STACK DEVELOPER · LOMMEL, BE

Spacing

4px base · 10 steps
4px
--space-1
8px
--space-2
12px
--space-3
16px
--space-4
24px
--space-5
32px
--space-6
48px
--space-7
64px
--space-8
96px
--space-9
128px
--space-10

Radii & Elevation

4 radii · 3 shadows

4px

--radius-sm

8px

--radius-md

14px

--radius-lg

999px

--radius-full

Shadow SM

Shadow MD

Shadow LG

Components

Live specimens

Buttons

Chips

ReactTypeScriptNext.jsPrismaGraphQL

Link

Animated underline on hover

Mono Label

Full-Stack Developer · Lommel, Belgium

Motion

--ease-outcubic-bezier(0.16, 1, 0.3, 1)Entrances, reveals, button hovers
Veil/Sweep easecubic-bezier(0.76, 0, 0.24, 1)Preloader, page veil, row sweeps
--duration-fast150msHover states
--duration-base300msTheme switch, underlines
--duration-slow700msEntrances, scroll reveals