Docz.me just launched — 14 days free on any paid plan. See pricing →

Docz Design System

Docz Design System

Token-driven UI built on shadcn primitives. The --docz-* namespace is the source of truth — shadcn variables resolve to docz tokens inside the .docz-theme scope. No component forks.

Color — Foundation

Raw scale values. Constant across light and dark modes.

Surface ladder

--docz-bg-base

bg-base

#fbfcfd

--docz-bg-faint

bg-faint

#f7f8fa

--docz-bg-mist

bg-mist

#f4f5f9

--docz-bg-subtle

bg-subtle

#eef0f4

--docz-bg-heavy

bg-heavy

#1a2332

Text

--docz-fg-base

fg-base

#0a2540

--docz-fg-muted

fg-muted

#425466

--docz-fg-inverse

fg-inverse

#ffffff

Borders

--docz-border-base

border-base

#e2e7ed

--docz-border-emphasis

border-emphasis

#cbd6e0

Color — Semantic

Intent-mapped tokens: accent (brand action), alert (destructive), positive (success).

Accent / brand

--docz-accent-bg-base

accent-bg-base

#0073e6

--docz-accent-bg-emphasis

accent-bg-emphasis

#005bb5

--docz-accent-bg-muted

accent-bg-muted

#dbeafe

--docz-accent-bg-subtle

accent-bg-subtle

#eaf3fb

Alert (destructive)

--docz-alert-bg-base

alert-bg-base

#ff5996

--docz-alert-fg-base

alert-fg-base

#ff5996

--docz-alert-border-base

alert-border

#ff5996

Positive (success)

--docz-positive-bg-base

positive-bg-base

#16a34a

--docz-positive-fg-base

positive-fg-base

#16a34a

--docz-positive-fg-on-positive

positive-fg-on-positive

#ffffff

Action / form controls

--docz-action-bg-default

action-bg

#ffffff

--docz-action-border-default

action-border

#e2e7ed

--docz-action-border-error

action-border-err

#ff5996

--docz-action-focus-ring

action-focus-ring

#0073e6

Color — Charts

5-hue visualization palette. Base + faint. Consistent across light and dark modes.

--docz-chart-blue-base

blue-base

#0073e6

--docz-chart-green-base

green-base

#16a34a

--docz-chart-orange-base

orange-base

#f97316

--docz-chart-red-base

red-base

#dc2626

--docz-chart-yellow-base

yellow-base

#ca8a04

--docz-chart-blue-faint

blue-faint

#dbeafe

--docz-chart-green-faint

green-faint

#dcfce7

--docz-chart-orange-faint

orange-faint

#fff7ed

--docz-chart-red-faint

red-faint

#fee2e2

--docz-chart-yellow-faint

yellow-faint

#fef9c3

Typography

Mona Sans (body) · Sharp Grotesk (headings). 5-step text scale, 4-step heading scale.

--docz-font-sans · Mona Sans

The quick brown fox

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0123456789

--docz-font-heading · Sharp Grotesk

The quick brown fox

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0123456789

Font weights

Regular

--docz-font-weight-regular · 400

Medium

--docz-font-weight-medium · 500

Bold

--docz-font-weight-bold · 600

Text scale

The quick brown fox jumps over the lazy dog--docz-text-size-xx-sm
11px / 16px
The quick brown fox jumps over the lazy dog--docz-text-size-x-sm
12px / 16px
The quick brown fox jumps over the lazy dog--docz-text-size-sm
13px / 18px
The quick brown fox jumps over the lazy dog--docz-text-size-base
14px / 20px
The quick brown fox jumps over the lazy dog--docz-text-size-lg
16px / 24px

Heading scale

Design system heading--docz-heading-size-xx-sm
16px / 20px
Design system heading--docz-heading-size-x-sm
20px / 24px
Design system heading--docz-heading-size-sm
24px / 28px
Design system heading--docz-heading-size-base
32px / 36px

Spacing

9-step scale (cdl-derived). Used for padding, gap, margin across all components.

--docz-spacing-xxx-sm2px
--docz-spacing-xx-sm4px
--docz-spacing-x-sm6px
--docz-spacing-sm8px
--docz-spacing-md12px
--docz-spacing-lg16px
--docz-spacing-x-lg24px
--docz-spacing-xx-lg32px
--docz-spacing-xxx-lg48px

Radius

6-step scale from none to full circle.

none
0
x-sm
4px
sm
6px
md
8px
lg
12px
circle
9999px

Shadow

3 elevation tiers. Consistent shadow color — only opacity scales.

Subtle card lift

--docz-elevation-base

Hover + focused card

--docz-shadow-subtle

Dropdown / popover / dialog

--docz-shadow-overlay

Motion

Single base duration token. Respects prefers-reduced-motion.

--docz-transition-duration-base

150ms

Hover me

Hover the tile to see the base transition in action.
@media (prefers-reduced-motion: reduce) collapses duration to 0ms.

Components

Curated representative samples. See full state matrix in Storybook.

Badge

DefaultSecondaryDestructiveOutline

Button

The bottom-heavy border (border-b-2, collapses to border-b on :active) is a foundation behavior on all buttons — not a special variant.

Card

Basic card

Card body with some content.

Card with action

Footer contains a primary action.

Input

This field is required.

Select

Form inputs (money / country / grouped select)

Money input

USD

USD US dollar

EUR

EUR euro

VND

VND Vietnamese đồng

Locale-aware separators, currency-prefixed, hidden form value submitted in chosen units.

Country select (typeahead, keyboard nav)

Active currency: USD — the money input above could re-bind to this.

Form select (grouped options)

Table

ClientTypeAmountStatus
Acme CorpInvoice$4,200Paid
Globex IncContract$8,500Active
Initech LLCInvoice$1,350Overdue
Umbrella CoInvoice$2,800Draft
HooliContract$12,000Active

Dialog

Confirm action

This is a standard dialog. It uses the native <dialog> element with focus-trap, Escape-key dismiss, and unsaved-changes guard built in. Styled via docz tokens. Footer slot renders a hairline-divided action row right-aligned.

Toast

Dropdown Menu

Patterns

Reusable compositions. Use these verbatim — they encode accessibility and UX decisions.

Form pattern

As it appears on your invoice.

We'll send the invoice here.

Empty state

No clients yet

Add your first client to start sending invoices and tracking projects.

Confirmation dialog (destructive)

Delete contract?

This will permanently delete the contract with Acme Corp and all associated files. This action cannot be undone.

Destructive trigger → confirmation copy states the object name + consequence → explicit destructive CTA.