Design Tokens

Editable

CSS custom properties extracted from the OFS Design Kit Figma file. Click any color swatch to customize it using the Tailwind color palette.

Preset Themes

Curated themes showcasing different design personalities. Click to apply instantly.

Semantic Colors

Click any swatch to customize. Light mode (left) and dark mode (right).

--background

Page background

--foreground

Primary text

--card

Card background

--card-foreground

Card text

--popover

Popover background

--popover-foreground

Popover text

--primary

Primary actions

--primary-foreground

Primary action text

--secondary

Secondary elements

--secondary-foreground

Secondary text

--muted

Muted backgrounds

--muted-foreground

Muted text

--accent

Accent backgrounds

--accent-foreground

Accent text

--destructive

Error/danger

--destructive-foreground

Destructive text

--border

Border color

--input

Input borders

--ring

Focus rings

Chart Colors

Harmonious color palette for data visualization, designed to work with the primary terracotta accent.

--chart-1

Chart primary

--chart-2

Chart secondary

--chart-3

Chart tertiary

--chart-4

Chart quaternary

--chart-5

Chart quinary

Sidebar Colors

Colors specifically for sidebar navigation components.

--sidebar

Sidebar background

--sidebar-foreground

Sidebar text

--sidebar-primary

Sidebar primary

--sidebar-primary-foreground

Sidebar primary text

--sidebar-accent

Sidebar accent

--sidebar-accent-foreground

Sidebar accent text

--sidebar-border

Sidebar border

--sidebar-ring

Sidebar ring

Typography

Font sizes following the Tailwind CSS type scale. Uses DM Sans as the primary font family.

text-xs

The quick brown fox

12px / 16px

Captions, badges

text-sm

The quick brown fox

14px / 20px

Body text, labels

text-base

The quick brown fox

16px / 24px

Default body

text-lg

The quick brown fox

18px / 28px

Section headings

text-xl

The quick brown fox

20px / 28px

Card titles

text-2xl

The quick brown fox

24px / 32px

Page headings

text-3xl

The quick brown fox

30px / 36px

Hero headings

text-4xl

The quick brown fox

36px / 40px

Display text

Spacing

Spacing scale based on a 4px base unit, matching Tailwind's default spacing system.

0

0px

p-0, m-0, gap-0

0.5

2px

p-0.5, m-0.5, gap-0.5

1

4px

p-1, m-1, gap-1

1.5

6px

p-1.5, m-1.5, gap-1.5

2

8px

p-2, m-2, gap-2

3

12px

p-3, m-3, gap-3

4

16px

p-4, m-4, gap-4

5

20px

p-5, m-5, gap-5

6

24px

p-6, m-6, gap-6

8

32px

p-8, m-8, gap-8

10

40px

p-10, m-10, gap-10

12

48px

p-12, m-12, gap-12

Border Radius

Consistent corner radii from the Figma design system. Base radius is 10px (--radius).

rounded-sm

6px

Small elements

rounded-md

8px

Buttons, inputs

rounded-lg

10px

Cards, dialogs

rounded-xl

14px

Large containers

rounded-full

9999px

Pills, avatars

Shadows

Elevation shadows for creating depth and visual hierarchy.

shadow-xs

Subtle elevation

shadow-sm

Buttons, inputs

shadow-md

Cards, dropdowns

shadow-lg

Modals, popovers

Usage

How to use these tokens in your code

CSS Custom Properties

.my-element {
  background-color: var(--background);
  color: var(--foreground);
  border-radius: var(--radius-md);
}

Tailwind Classes

<div className="bg-background text-foreground rounded-md">
  <button className="bg-primary text-primary-foreground">
    Click me
  </button>
</div>