Design tokens

CSS custom properties from @duo/tokens for spacing, color, typography, and elevation.

Usage

Install @duo/tokens and import the base stylesheet. Use var(--duo-*) in your product CSS — prefer semantic tokens (for example --duo-color-text, --duo-space-m) over primitive palettes.

Install

Terminal window
npm install @duo/tokens

Import

import "@duo/tokens/css";

Example

padding: var(--duo-space-l);
color: var(--duo-color-text);
border-radius: var(--duo-border-radius-s);

Package details: @duo/tokens README.

Catalogue

Semantic --duo-* variables in the base token build, grouped by type. Primitive palettes are omitted — use roles such as --duo-color-text in product UI. Previews use live values from @duo/tokens/css; descriptions come from @duo/tokens/json.

75 tokens

Color

Example Description Token

#090312

Color Accent

Accent color. Used for: primary button background color, selected state background color for checkbox and toggle. Selected state for radio. Focus outline color.

 
var(--duo-color-accent)
Copy

#FFFFFF

Color Background

Default background color.

 
var(--duo-color-background)
Copy

#DEDFFF

Color Background Feedback Highlight

Banner or chip background color for highlighted attention.

 
var(--duo-color-background-feedback-highlight)
Copy

#CEE3FE

Color Background Feedback Informative

Banner or chip background color for informative attention.

 
var(--duo-color-background-feedback-informative)
Copy

#FFDACF

Color Background Feedback Negative

Banner or chip background color for error, rejection, etc.

 
var(--duo-color-background-feedback-negative)
Copy

#E2E2E2

Color Background Feedback Neutral

Banner or chip background color for neutral, attention

 
var(--duo-color-background-feedback-neutral)
Copy

#D7E7CE

Color Background Feedback Positive

Banner or chip background color for success, confirmation, approval, etc.

 
var(--duo-color-background-feedback-positive)
Copy

#FAE08A

Color Background Feedback Warning

Banner or chip background color for warning, caution, etc.

 
var(--duo-color-background-feedback-warning)
Copy

#D3D3D3

Color Border

Default border color. Used for buttons, inputs, etc.

 
var(--duo-color-border)
Copy

#EC5732

Color Border Error

Error border color for input error states.

 
var(--duo-color-border-error)
Copy

#898989

Color Border Strong

Strong border color. input border on hover: radio, text, select, checkbox etc.

 
var(--duo-color-border-strong)
Copy

#BD2600

Color Button Danger

Destructive button background color. Focus outline for destructive button.

 
var(--duo-color-button-danger)
Copy

#FBFBFF

Color On Accent

On accent color. Used for: primary button text color, selected state checkmark color for checkbox and toggle. Toggle thumb color when toggled.

 
var(--duo-color-on-accent)
Copy

#FCFCFC

Color Surface

Default surface color. Used for table headers, etc. requires often a border color to be used with it. Input background color. Radio, checkbox, select, textarea, textfield, etc.

 
var(--duo-color-surface)
Copy

#F6F6F6

Color Surface Raised

Raised surface color. Used for larger containers, cards, etc.

 
var(--duo-color-surface-raised)
Copy

#292929

Color Text

Default text color.

 
var(--duo-color-text)
Copy

#D3D3D3

Color Text Disabled

Disabled text color.

 
var(--duo-color-text-disabled)
Copy

#BD2600

Color Text Error

Error text color for iniput error states.

 
var(--duo-color-text-error)
Copy

#484480

Color Text Feedback Highlight

Banner or chip text/icon color to be used with background-feedback-highlight.

 
var(--duo-color-text-feedback-highlight)
Copy

#0E4A8F

Color Text Feedback Informative

Banner or chip text/icon color to be used with background-feedback-informative.

 
var(--duo-color-text-feedback-informative)
Copy

#9C0000

Color Text Feedback Negative

Banner or chip text/icon color to be used with background-feedback-negative.

 
var(--duo-color-text-feedback-negative)
Copy

#4B4B4C

Color Text Feedback Neutral

Banner or chip text/icon color to be used with background-feedback-neutral.

 
var(--duo-color-text-feedback-neutral)
Copy

#596651

Color Text Feedback Positive

Banner or chip text/icon color to be used with background-feedback-positive.

 
var(--duo-color-text-feedback-positive)
Copy

#684400

Color Text Feedback Warning

Banner or chip text/icon color to be used with background-feedback-warning.

 
var(--duo-color-text-feedback-warning)
Copy

#484480

Color Text Link

Link text/icon color.

 
var(--duo-color-text-link)
Copy

#232323

Color Text Strong

Strong text color.

 
var(--duo-color-text-strong)
Copy

#3E3E3E

Color Text Weak

Weak text color.

 
var(--duo-color-text-weak)
Copy

#626262

Color Text Weakest

Weakest text color.

 
var(--duo-color-text-weakest)
Copy

Space

Example Description Token

0px

Space 0

No spacing.

 
var(--duo-space-0)
Copy

24px

Space L

Large spacing.

 
var(--duo-space-l)
Copy

16px

Space M

Medium spacing.

 
var(--duo-space-m)
Copy

12px

Space S

Small spacing.

 
var(--duo-space-s)
Copy

32px

Space Xl

Extra large spacing.

 
var(--duo-space-xl)
Copy

8px

Space Xs

Extra small spacing.

 
var(--duo-space-xs)
Copy

64px

Space Xxl

Extra extra large spacing.

 
var(--duo-space-xxl)
Copy

4px

Space Xxs

Extra extra small spacing.

 
var(--duo-space-xxs)
Copy

Border radius

Example Description Token

8px

Border Radius M

Medium corner radius.

 
var(--duo-border-radius-m)
Copy

999px

Border Radius Pill

Fully rounded radius.

 
var(--duo-border-radius-pill)
Copy

5px

Border Radius S

Small corner radius.

 
var(--duo-border-radius-s)
Copy

3px

Border Radius Xs

Extra small corner radius.

 
var(--duo-border-radius-xs)
Copy

Font

Example Description Token
Quick brown fox

normal 400 0.875rem/1.25rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Body

Default body typography.

 
var(--duo-font-body)
Copy
Quick brown fox

normal 400 0.875rem/1.25rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Form

Form field typography.

 
var(--duo-font-form)
Copy
Quick brown fox

normal 700 1.75rem/2.5rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Heading

Default heading typography.

 
var(--duo-font-heading)
Copy
Quick brown fox

normal 700 2.25rem/3rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Headline 1

Headline 1 typography.

 
var(--duo-font-headline-1)
Copy
Quick brown fox

normal 700 2rem/2.75rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Headline 2

Headline 2 typography.

 
var(--duo-font-headline-2)
Copy
Quick brown fox

normal 700 1.75rem/2.5rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Headline 3

Headline 3 typography.

 
var(--duo-font-headline-3)
Copy
Quick brown fox

normal 700 1.5rem/2.25rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Headline 4

Headline 4 typography.

 
var(--duo-font-headline-4)
Copy
Quick brown fox

normal 700 1.25rem/2rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Headline 5

Headline 5 typography.

 
var(--duo-font-headline-5)
Copy
Quick brown fox

normal 700 1rem/1.75rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Headline 6

Headline 6 typography.

 
var(--duo-font-headline-6)
Copy
Quick brown fox

normal 600 1.25rem/1.4 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font L

Large typography.

 
var(--duo-font-l)
Copy
Quick brown fox

normal 600 1rem/1.5rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Lead

Lead body-copy typography.

 
var(--duo-font-lead)
Copy
Quick brown fox

normal 400 1rem/1.5 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font M

Medium typography.

 
var(--duo-font-m)
Copy
Quick brown fox

normal 700 1.75rem/2.5rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Primary

Default heading typography.

 
var(--duo-font-primary)
Copy
Quick brown fox

normal 400 0.875rem/1.5 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font S

Small typography.

 
var(--duo-font-s)
Copy
Quick brown fox

normal 400 0.75rem/1rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Small

Small body-copy typography.

 
var(--duo-font-small)
Copy
Quick brown fox

normal 400 0.625rem/0.875rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Tiny

Tiny body-copy typography.

 
var(--duo-font-tiny)
Copy
Quick brown fox

normal 600 1.125rem/1.75rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Title

Title body-copy typography.

 
var(--duo-font-title)
Copy
Quick brown fox

normal 600 1.625rem/2rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Xl

Extra large typography.

 
var(--duo-font-xl)
Copy
Quick brown fox

normal 400 0.75rem/1rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Xs

Extra small typography.

 
var(--duo-font-xs)
Copy
Quick brown fox

normal 600 2rem/1.25 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Xxl

Extra extra large typography.

 
var(--duo-font-xxl)
Copy
Quick brown fox

normal 400 0.625rem/1rem 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Xxs

Extra extra small typography.

 
var(--duo-font-xxs)
Copy
Quick brown fox

normal 600 2.5rem/1.2 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Xxxl

Extra extra extra large typography.

 
var(--duo-font-xxxl)
Copy

Font family

Example Description Token
Aa

'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Family Body

Body font family.

 
var(--duo-font-family-body)
Copy
Aa

'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

Font Family Heading

Heading font family.

 
var(--duo-font-family-heading)
Copy
Aa

'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace

Font Family Mono

Monospace font family.

 
var(--duo-font-family-mono)
Copy

Font weight

Example Description Token
Aa

700

Font Weight Bold

Bold weight.

 
var(--duo-font-weight-bold)
Copy
Aa

400

Font Weight Regular

Regular weight.

 
var(--duo-font-weight-regular)
Copy

Box shadow

Example Description Token

0 0 0 0.25rem #F4F4FF

Box Shadow Button Focus

Box shadow for button focus state.

 
var(--duo-box-shadow-button-focus)
Copy

0 0 0 0.25rem #F4F4FF

Box Shadow Input Focus

Box shadow for text input focus state.

 
var(--duo-box-shadow-input-focus)
Copy

0 0 0 0.25rem #F4F4FF

Box Shadow Input Hover

Box shadow for text input hover state.

 
var(--duo-box-shadow-input-hover)
Copy

0 0 0 0.25rem #F4F4FF

Box Shadow Inset Focus

Box shadow for inset focus state.

 
var(--duo-box-shadow-inset-focus)
Copy

Other

Example Description Token

1.25rem

Size Icon L

Large icon size.

 
var(--duo-size-icon-l)
Copy

1rem

Size Icon M

Medium icon size.

 
var(--duo-size-icon-m)
Copy

0.875rem

Size Icon S

Small icon size.

 
var(--duo-size-icon-s)
Copy

1.5rem

Size Icon Xl

Extra large icon size.

 
var(--duo-size-icon-xl)
Copy