DTK Design System

Design tokens and component library

Colors

Color primitives organized into scales. Each scale has numbered shades from light to dark, plus semantic variants (muted, subtle) for transparency effects.

Blue

--color-blue-*
25 #F9F9FE
50 #E5E5FE
100 #BCBEFE
200 #989CFE
300 #666AFE
400 #5157FE
500 #3e44fe
600 #2E34E5
700 #1217B2
800 #11145f
900 #090b34
Default:
#3e44fe

Purple

--color-purple-*
25 #FDFAFF
50 #F7EBFF
100 #EBCCFF
200 #D599FF
300 #C26BFF
400 #B752FF
500 #aa33ff
600 #8829CC
700 #600F99
800 #400A66
900 #200533
Default:
#aa33ff

Neutral

--color-neutral-*
25 #F3F3F8
50 #E4E4F0
100 #D8D8E8
200 #C0C0D1
300 #AAAABD
400 #8B8B9E
500 #676776
600 #4A4A57
700 #3C3C48
800 #25252E
900 #1E1F28
950 #181921
1000 #13141C
Default:
#676776

Warning

--color-warning-*
25 #fffdfa
50 #fff9f2
100 #ffecd9
200 #ffd9b2
300 #ffc68c
400 #ffb266
500 #ff9f40
600 #d97716
700 #99520b
800 #592e04
900 #331900
Default:
#ff9f40

Success

--color-success-*
25 #FAFFFB
50 #F2FFF6
100 #D4FAE0
200 #ABF5C1
300 #84f0a4
400 #5eeb88
500 #33cc61
600 #13bf47
700 #008c2a
800 #00591b
900 #00330f
Default:
#33cc61

Info

--color-info-*
25 #FAFCFF
50 #F2F7FF
100 #D7E6FD
200 #afcdfa
300 #88b4f7
400 #629cf5
500 #3d85f2
600 #1358bf
700 #0a3e8c
800 #042659
900 #001433
Default:
#3d85f2

Error

--color-error-*
25 #FFFAFA
50 #FFF2F2
100 #FDD7D7
200 #FAAFAF
300 #F78888
400 #F56262
500 #f23d3d
600 #BF1313
700 #8C0A0A
800 #590404
900 #330000
Default:
#F23D3D

Base Colors

Fundamental color values

black #13141c
white #ffffff
transparent #00000000

Spacing

Consistent spacing scale based on a base unit. Use these tokens for margins, padding, and gaps.

--spacing-0 0px
--spacing-1 8px
--spacing-2 16px
--spacing-3 24px
--spacing-4 32px
16px - standard padding (4 × 4px base)
--spacing-5 40px
--spacing-6 48px
--spacing-8 64px
--spacing-10 80px
--spacing-12 96px
--spacing-offset-1 0px
--spacing-offset-2 0px
--spacing-offset-3 0px
--spacing-offset-4 0px
--spacing-component-spacing 0px
--spacing-column-count 4px
--spacing-gutter 16px
--spacing-margin 24px
--spacing-top-bottom-padding 40px
--spacing-2-col-offset-min-width 280px
--spacing-4-col-offset-min-width 300px
--spacing-1-col-offset-min-width 300px
--spacing-3-col-offset-min-width 300px
--spacing-min-width 340px
--spacing-default-width 360px
--spacing-max-width 767px

Corner Radius

Border radius values for rounding corners. Applied consistently across the design system.

--corner-medium 8px
--corner-full 400px
--corner-large 12px
--corner-small 4px

Shadows

Elevation shadows create depth and hierarchy. Use sparingly - shadows are more prominent in light mode.

none
--shadow-none
focus
--shadow-focus
focusDanger
--shadow-focus-danger
large
--shadow-large
medium
--shadow-medium
small
--shadow-small
glow
--shadow-glow

Typography

Type system including font families, sizes, weights, and line heights.

Text Styles

Composite typography tokens combining font properties into ready-to-use styles.

body --text-style-body
Font "AvenirNextLTPro", sans-serif
Weight 400
Base Size 16px
Line Height 1.5
Spacing 0em
The quick brown fox jumps over the lazy dog
body-1 --text-style-body-1
Font "AvenirNextLTPro", sans-serif
Weight 400
Base Size 1rem
small 1rem
medium 1rem
large 1.25rem
xlarge 1.5rem
Line Height 1.6
Spacing normal
The quick brown fox jumps over the lazy dog
body-2 --text-style-body-2
Font "AvenirNextLTPro", sans-serif
Weight 400
Base Size .875rem
small .875rem
medium .875rem
large 1rem
xlarge 1rem
Line Height 1.6
Spacing normal
The quick brown fox jumps over the lazy dog
body-3 --text-style-body-3
Font "AvenirNextLTPro", sans-serif
Weight 400
Base Size .875rem
small .875rem
medium .875rem
large .875rem
xlarge .875rem
Line Height 1.6
Spacing normal
The quick brown fox jumps over the lazy dog
caption --text-style-caption
Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size .75rem
small .75rem
medium .75rem
large .75rem
xlarge .75rem
Line Height 1
Spacing normal
The quick brown fox jumps over the lazy dog
eyebrow --text-style-eyebrow
Font "AvenirNextLTPro", sans-serif
Weight 400
Base Size .75rem
small .75rem
xlarge .875rem
large .875rem
medium .75rem
Line Height 1
Spacing normal
The quick brown fox jumps over the lazy dog
h1 --text-style-h1
Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size 2.5rem
small 2.5rem
medium 3rem
large 4rem
xlarge 5rem
Line Height 1.2
Spacing normal
The quick brown fox jumps over the lazy dog
h2 --text-style-h2
Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size 2rem
small 2rem
medium 2.5rem
large 3rem
xlarge 4rem
Line Height 1.2
Spacing normal
The quick brown fox jumps over the lazy dog
h3 --text-style-h3
Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size 1.75rem
small 1.75rem
medium 2rem
large 2.5rem
xlarge 3rem
Line Height 1.3
Spacing normal
The quick brown fox jumps over the lazy dog
h4 --text-style-h4
Font "AvenirNextLTPro", sans-serif
Weight 400
Base Size 1.5rem
small 1.5rem
medium 1.75rem
large 2rem
xlarge 2.5rem
Line Height 1.3
Spacing normal
The quick brown fox jumps over the lazy dog
h5 --text-style-h5
Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size 1.25rem
small 1.25rem
medium 1.5rem
large 1.75rem
xlarge 2rem
Line Height 1.3
Spacing normal
The quick brown fox jumps over the lazy dog
h6 --text-style-h6
Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size 1rem
small 1rem
medium 1.25rem
large 1.5rem
xlarge 1.5rem
Line Height 1.4
Spacing normal
The quick brown fox jumps over the lazy dog
h7 --text-style-h7
Font "AvenirNextLTPro", sans-serif
Weight 600
Base Size 1rem
small 1rem
medium 1rem
large 1.25rem
xlarge 1.25rem
Line Height 1.4
Spacing normal
The quick brown fox jumps over the lazy dog

Type Hierarchy

Display (h1)
Design Tokens
Heading (h3)
Section heading for content areas
Body (body-1)
Body text forms the foundation of any interface. It needs to be readable at various screen sizes, from compact mobile layouts to expansive desktop monitors. Good body typography balances line length, line height, and font size to maintain comfortable reading across all breakpoints. This paragraph demonstrates how body text reflows and scales as the viewport changes — notice how the text remains legible and well-spaced regardless of screen width.
Caption (caption)
Small text for captions, labels, and supporting information

Font Families

The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
base --typography-font-family-base Primary font for body text and UI "AvenirNextLTPro", sans-serif
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
mono --typography-font-family-mono "monospace", sans-serif
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
fontfamily --typography-font-family-fontfamily "AvenirNextLTPro", sans-serif

Font Sizes

--typography-font-size-x-small 0.5rem
medium 0.5rem large 0.5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-small 0.75rem
medium 0.6875rem large 0.75rem
The quick brown fox jumps over the lazy dog
--typography-font-size-base 1.5rem Base size - body text
medium 1.375rem large 1.5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-large 1.5rem
medium 1.25rem large 1.5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-x-large 2rem
medium 1.75rem large 2rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h1 2.5rem
small 2.5rem medium 3rem large 4rem xlarge 5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h2 2rem
small 2rem medium 2.5rem large 3rem xlarge 4rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h3 1.75rem
small 1.75rem medium 2rem large 2.5rem xlarge 3rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h4 1.5rem
small 1.5rem medium 1.75rem large 2rem xlarge 2.5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h5 1.25rem
small 1.25rem medium 1.5rem large 1.75rem xlarge 2rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h6 1rem
small 1rem medium 1.25rem large 1.5rem xlarge 1.5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-body 1rem Body text
medium 1rem large 1rem
The quick brown fox jumps over the lazy dog
--typography-font-size-caption .75rem
small .75rem medium .75rem large .75rem xlarge .75rem
The quick brown fox jumps over the lazy dog
--typography-font-size-overline 0.625rem Overline labels
medium 0.625rem large 0.625rem
The quick brown fox jumps over the lazy dog
--typography-font-size-body-1 1rem
small 1rem medium 1rem large 1.25rem xlarge 1.5rem
The quick brown fox jumps over the lazy dog
--typography-font-size-body-2 .875rem
small .875rem medium .875rem large 1rem xlarge 1rem
The quick brown fox jumps over the lazy dog
--typography-font-size-body-3 .875rem
small .875rem medium .875rem large .875rem xlarge .875rem
The quick brown fox jumps over the lazy dog
--typography-font-size-h7 1rem
small 1rem medium 1rem large 1.25rem xlarge 1.25rem
The quick brown fox jumps over the lazy dog
--typography-font-size-eyebrow .75rem
small .75rem xlarge .875rem large .875rem medium .75rem
The quick brown fox jumps over the lazy dog

Font Weights

The quick brown fox
--typography-font-weight-light light (300) 300 weight - light text
The quick brown fox
--typography-font-weight-regular regular (400)
The quick brown fox
--typography-font-weight-semibold semibold (600) 600 weight - buttons, labels
The quick brown fox
--typography-font-weight-medium medium (500) 500 weight
The quick brown fox
--typography-font-weight-bold bold (700)

Line Heights

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-100 100 (100%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-120 120 (120%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-130 130 (130%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-140 140 (140%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-160 160 (160%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-normal normal (150%) Normal leading - body text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-relaxed relaxed (200%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-tight tight (100%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-body body (150%)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
--typography-line-height-overline overline (120%)

Letter Spacings

Aa Bb Cc
--typography-letter-spacing-normal normal (0em) Normal letter spacing
Aa Bb Cc
--typography-letter-spacing-tight tight (-0.025em) Tighter - large headings
Aa Bb Cc
--typography-letter-spacing-wide wide (0.05em) Wider - overlines, all-caps

Borders

Composite border tokens combining width, style, and color.

--border-standard standard Standard 1px solid border
--border-transparent transparent
--border-error error
--border-dashed dashed

Opacity

Opacity levels for creating tinted variants and transparency effects.

--opacity-soft soft (15%)
--opacity-muted muted (50%) Half opacity (50%)
--opacity-subtle subtle (25%) Mostly transparent (25%)
--opacity-strong strong (60%)

Animation

Motion tokens for consistent, purposeful animations across the UI.

Duration

Hover to preview
--duration-normal normal (200ms) Normal - button feedback, tooltips

Easing

Hover to preview
--easing-ease ease cubic-bezier(0.25, 0.1, 0.25, 1) General purpose easing

Theme Tokens

Semantic tokens that adapt to light/dark mode. These reference primitive tokens but switch values based on the active theme.

Surfaces

Layered backgrounds for creating depth

Light
#ffffff
Dark
#13141C
--theme-surface-1 1 Base canvas - the lowest layer
Light
#E4E4F0
Dark
#25252E
--theme-surface-2 2 Raised surface - cards, panels
Light
#D8D8E8
Dark
#3C3C48
--theme-surface-3 3 Overlay surface - modals, popovers
Light
#F3F3F8
Dark
#1E1F28
--theme-surface-default default
Light
#F3F3F8
Dark
#181921
--theme-surface-alternative alternative
Light
#C0C0D1
Dark
#3C3C48
--theme-surface-interactive-default default
Light
#8B8B9E
Dark
#676776
--theme-surface-interactive-hover hover
Light
#F3F3F8
Dark
#3C3C48
--theme-background-subtle subtle
Light
#D8D8E8
Dark
#4A4A57
--theme-background-hover hover
Light
#ffffff
Dark
#13141C
--theme-background-site site

Text Colors

Light
#13141c
Dark
#ffffff
--theme-text-inverse inverse
Light
#3C3C48
Dark
#AAAABD
--theme-text-secondary secondary
Light
#4A4A57
Dark
#8B8B9E
--theme-text-muted textMuted
Light
#1E1F28
Dark
#F3F3F8
--theme-text-default default

Border Colors

Light
#C0C0D1
Dark
#3C3C48
--theme-border border
Light
#D8D8E8
Dark
#25252E
--theme-border-subtle borderSubtle

Feedback States

Light
#33cc61
Dark
#5eeb88
--theme-color-success success
Light
#1358bf
Dark
#3d85f2
--theme-color-info info
Light
#f23d3d
Dark
#F56262
--theme-color-error error

Elevation

--theme-elevation-1 1 Subtle lift - cards
Light
0px 1px 2px 0px rgba(0,0,0,0.05)
Dark
0px 0px 0px 0px transparent
--theme-elevation-2 2 Medium lift - dropdowns
Light
0px 4px 6px 0px rgba(0,0,0,0.1)
Dark
0px 0px 0px 0px transparent
--theme-elevation-3 3 High lift - modals
Light
0px 10px 15px 0px rgba(0,0,0,0.1)
Dark
0px 10px 15px 0px rgba(0,0,0,0.1)

Color

Light
#aa33ff
Dark
#B752FF
--theme-color-accent-default default
Light
#8829CC
Dark
#aa33ff
--theme-color-accent-hover hover
Light
#D599FF
Dark
#600F99
--theme-color-accent-low-contrast lowContrast
Light
#2E34E5
Dark
#5157FE
--theme-color-primary-hover hover

Stroke

Light
#666AFE
Dark
#989CFE
--theme-stroke-focus-border focusBorder
Light
#AAAABD
Dark
#8B8B9E
--theme-stroke-high-contrast-default default
Light
#8B8B9E
Dark
#C0C0D1
--theme-stroke-high-contrast-hover hover
Light
#1E1F28
Dark
#F3F3F8
--theme-stroke-high-contrast-active active
Light
#13141c
Dark
#ffffff
--theme-stroke-high-contrast-inverse inverse
Light
#AAAABD
Dark
#8B8B9E
--theme-stroke-soft-contrast-default default
Light
#8B8B9E
Dark
#C0C0D1
--theme-stroke-soft-contrast-hover hover
Light
#8B8B9E
Dark
#8B8B9E
--theme-stroke-soft-contrast-active active
Light
#D8D8E8
Dark
#25252E
--theme-stroke-soft-contrast-divider divider

Border

Light
ref
1px solid {color.neutral.600}
Dark
ref
1px solid {color.neutral.200}
--border-standard standard Standard 1px solid border