Skip to content
Verdanta Design System

Token Reference

Generated: 2026-03-02 11:04:33 UTC

Primitives (127 tokens)

color

white
black
green
50
100
200
300
400
500
600
700
800
900
lime
50
100
200
300
400
500
600
700
800
900
neutral
50
100
200
300
400
500
600
700
800
900
red
50
500
700
amber
50
500
700
orange
50
500
700
blue
50
500
700
purple
50
500
700
slate
50
100
200
300
400
500
600
700
800
900
teal
50
100
200
300
400
500
600
700
800
900
TokenPreviewValue
--color-whiteoklch(1 0 0)
--color-blackoklch(0 0 0)
--color-green-50oklch(0.911 0.013 149.6)
--color-green-100oklch(0.823 0.026 149.2)
--color-green-200oklch(0.73 0.04 148.8)
--color-green-300oklch(0.634 0.049 148.9)
--color-green-400oklch(0.538 0.058 149.6)
--color-green-500oklch(0.457 0.077 149.1)
--color-green-600oklch(0.366 0.087 149.7)
--color-green-700oklch(0.328 0.074 149.5)
--color-green-800oklch(0.296 0.061 149.1)
--color-green-900oklch(0.265 0.05 150.3)
--color-lime-50oklch(0.98 0.034 145.4)
--color-lime-100oklch(0.961 0.067 146.4)
--color-lime-200oklch(0.944 0.097 146.9)
--color-lime-300oklch(0.925 0.135 146.9)
--color-lime-400oklch(0.91 0.167 147.1)
--color-lime-500oklch(0.895 0.201 147.4)
--color-lime-600oklch(0.881 0.23 147.8)
--color-lime-700oklch(0.777 0.198 147.8)
--color-lime-800oklch(0.669 0.163 148)
--color-lime-900oklch(0.564 0.134 147.3)
--color-neutral-50oklch(0.937 0.013 71.3)
--color-neutral-100oklch(0.904 0.016 73.6)
--color-neutral-200oklch(0.835 0.021 69.9)
--color-neutral-300oklch(0.554 0.005 56.1)
--color-neutral-400oklch(0.446 0.007 43.1)
--color-neutral-500oklch(0.33 0.008 43.1)
--color-neutral-600oklch(0.222 0.011 60.8)
--color-neutral-700oklch(0.2 0.01 60.8)
--color-neutral-800oklch(0.18 0.008 60.8)
--color-neutral-900oklch(0.15 0.006 60.8)
--color-red-50oklch(0.942 0.031 2.4)
--color-red-500oklch(0.676 0.217 11.9)
--color-red-700oklch(0.547 0.172 11.7)
--color-amber-50oklch(0.974 0.026 90.1)
--color-amber-500oklch(0.843 0.151 88.3)
--color-amber-700oklch(0.681 0.12 88.6)
--color-orange-50oklch(0.96 0.03 70)
--color-orange-500oklch(0.79 0.15 60)
--color-orange-700oklch(0.64 0.12 55)
--color-blue-50oklch(0.941 0.028 270.4)
--color-blue-500oklch(0.617 0.206 265.7)
--color-blue-700oklch(0.502 0.163 265.8)
--color-purple-50oklch(0.95 0.025 300)
--color-purple-500oklch(0.62 0.2 300)
--color-purple-700oklch(0.5 0.16 300)
--color-slate-50oklch(0.95 0.003 260)
--color-slate-100oklch(0.92 0.003 255)
--color-slate-200oklch(0.91 0.004 260)
--color-slate-300oklch(0.82 0.006 255)
--color-slate-400oklch(0.70 0.009 255)
--color-slate-500oklch(0.60 0.012 255)
--color-slate-600oklch(0.50 0.016 255)
--color-slate-700oklch(0.42 0.02 255)
--color-slate-800oklch(0.32 0.025 255)
--color-slate-900oklch(0.20 0.005 260)
--color-teal-50oklch(0.98 0.012 175)
--color-teal-100oklch(0.96 0.02 175)
--color-teal-200oklch(0.95 0.025 175)
--color-teal-300oklch(0.91 0.04 175)
--color-teal-400oklch(0.87 0.06 175)
--color-teal-500oklch(0.82 0.08 175)
--color-teal-600oklch(0.77 0.10 175)
--color-teal-700oklch(0.72 0.12 175)
--color-teal-800oklch(0.62 0.10 175)
--color-teal-900oklch(0.52 0.08 175)

duration

TokenPreviewValue
--duration-fast100ms
--duration-normal200ms
--duration-slow300ms
--duration-slower500ms

easing

TokenPreviewValue
--easing-defaultease
--easing-inease-in
--easing-outease-out
--easing-in-outease-in-out

radius

none 0px
sm 4px
md 8px
lg 12px
xl 16px
full 9999px
TokenPreviewValue
--radius-none0px
--radius-sm4px
--radius-md8px
--radius-lg12px
--radius-xl16px
--radius-full9999px

shadow

sm
md
lg
TokenPreviewValue
--shadow-sm0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1)
--shadow-md0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1)
--shadow-lg0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1)

spacing

--spacing-0
0px
--spacing-1
4px
--spacing-2
8px
--spacing-3
12px
--spacing-4
16px
--spacing-5
20px
--spacing-6
24px
--spacing-7
28px
--spacing-8
32px
--spacing-9
36px
--spacing-10
40px
--spacing-12
48px
--spacing-14
56px
--spacing-16
64px
--spacing-20
80px
--spacing-24
96px
--spacing-0-5
2px
--spacing-1-5
6px
--spacing-2-5
10px
--spacing-3-5
14px
TokenPreviewValue
--spacing-00px
--spacing-14px
--spacing-28px
--spacing-312px
--spacing-416px
--spacing-520px
--spacing-624px
--spacing-728px
--spacing-832px
--spacing-936px
--spacing-1040px
--spacing-1248px
--spacing-1456px
--spacing-1664px
--spacing-2080px
--spacing-2496px
--spacing-0-52px
--spacing-1-56px
--spacing-2-510px
--spacing-3-514px

font

TokenPreviewValue
--font-sans'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
--font-size-xs11px
--font-size-sm12px
--font-size-base14px
--font-size-md16px
--font-size-lg18px
--font-size-xl22px
--font-size-2xl28px
--font-size-3xl34px
--font-weight-regular400
--font-weight-medium500
--font-weight-semibold600
--font-weight-bold700

line

TokenPreviewValue
--line-height-tight1.2
--line-height-snug1.3
--line-height-normal1.5
--line-height-relaxed1.8

z

TokenPreviewValue
--z-base0
--z-dropdown100
--z-sticky200
--z-modal300
--z-toast400
--z-tooltip500

Semantic (41 tokens)

color

background
background
surface
surface
alt
muted
text
primary
muted
subtle
inverse
action
primary
primary-hover
secondary
border
default
subtle
strong
status
success
success-soft
success-strong
error
error-soft
error-strong
warning
warning-soft
warning-strong
info
info-soft
info-strong
link
link
hover
TokenPreviewValue
--color-backgroundoklch(1 0 0)
--color-surfaceoklch(1 0 0)
--color-surface-altoklch(0.937 0.013 71.3)
--color-surface-mutedoklch(0.904 0.016 73.6)
--color-text-primaryoklch(0.222 0.011 60.8)
--color-text-mutedoklch(0.446 0.007 43.1)
--color-text-subtleoklch(0.554 0.005 56.1)
--color-text-inverseoklch(0.937 0.013 71.3)
--color-action-primaryoklch(0.366 0.087 149.7)
--color-action-primary-hoveroklch(0.457 0.077 149.1)
--color-action-secondaryoklch(0.881 0.23 147.8)
--color-border-defaultoklch(0.904 0.016 73.6)
--color-border-subtleoklch(0.835 0.021 69.9)
--color-border-strongoklch(0.554 0.005 56.1)
--color-status-successoklch(0.881 0.23 147.8)
--color-status-success-softoklch(0.98 0.034 145.4)
--color-status-success-strongoklch(0.669 0.163 148)
--color-status-erroroklch(0.676 0.217 11.9)
--color-status-error-softoklch(0.942 0.031 2.4)
--color-status-error-strongoklch(0.547 0.172 11.7)
--color-status-warningoklch(0.843 0.151 88.3)
--color-status-warning-softoklch(0.974 0.026 90.1)
--color-status-warning-strongoklch(0.681 0.12 88.6)
--color-status-infooklch(0.617 0.206 265.7)
--color-status-info-softoklch(0.941 0.028 270.4)
--color-status-info-strongoklch(0.502 0.163 265.8)
--color-linkoklch(0.366 0.087 149.7)
--color-link-hoveroklch(0.457 0.077 149.1)

elevation

sm
md
lg
TokenPreviewValue
--elevation-sm0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1)
--elevation-md0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1)
--elevation-lg0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1)

type

caption The quick brown fox jumps over the lazy dog
body-sm The quick brown fox jumps over the lazy dog
body The quick brown fox jumps over the lazy dog
body-lg The quick brown fox jumps over the lazy dog
label The quick brown fox jumps over the lazy dog
title-sm The quick brown fox jumps over the lazy dog
title The quick brown fox jumps over the lazy dog
title-lg The quick brown fox jumps over the lazy dog
heading The quick brown fox jumps over the lazy dog
heading-lg The quick brown fox jumps over the lazy dog
TokenPreviewValue
--type-caption400 11px/1.5 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
--type-body-sm400 12px/1.8 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
--type-body400 14px/1.8 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
--type-body-lg400 16px/1.3 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
--type-label500 14px/1.3 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
--type-title-sm600 14px/1.3 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
--type-title600 18px/1.3 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
--type-title-lg600 22px/1.3 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
--type-heading700 28px/1.3 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
--type-heading-lg700 34px/1.2 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

Component (29 tokens)

button

TokenPreviewValue
--button-primary-bgoklch(0.366 0.087 149.7)
--button-primary-bg-hoveroklch(0.457 0.077 149.1)
--button-primary-fgoklch(1 0 0)
--button-primary-radius9999px
--button-primary-padding-x24px
--button-primary-padding-y16px
--button-primary-height56px
--button-outline-borderoklch(0.835 0.021 69.9)
--button-outline-fgoklch(0.366 0.087 149.7)
--button-outline-radius9999px
--button-outline-padding-x24px
--button-outline-padding-y16px
--button-outline-height56px
--button-ghost-fgoklch(0.366 0.087 149.7)
--button-ghost-radius8px

card

Monstera Deliciosa
Tropische kamerplant met iconische bladeren
Ficus Lyrata
Grote bladeren, statement plant voor elke ruimte
TokenPreviewValue
--card-bgoklch(1 0 0)
--card-borderoklch(0.904 0.016 73.6)
--card-radius16px
--card-shadownone

input

Email
info@verdanta.eu
Wachtwoord
••••••••
Postcode
123
Voer een geldig postcode in
TokenPreviewValue
--input-bgoklch(0.937 0.013 71.3)
--input-borderrgba(0, 0, 0, 0)
--input-border-focusoklch(0.366 0.087 149.7)
--input-border-erroroklch(0.676 0.217 11.9)
--input-textoklch(0.222 0.011 60.8)
--input-placeholderoklch(0.554 0.005 56.1)
--input-radius12px
--input-padding-x20px
--input-padding-y16px
--input-focus-ring-width2px