UI KIT DESIGN SYSTEM

Dark Theme Toolkit

A complete dark theme design system — semantic color tokens, typography, buttons, gradient cards, and gradient styles. Built on Tailwind CSS v4, use directly via className.

Semantic Color Tokens

Surface

Surface/ground

bg-surface-ground

Surface/card

bg-surface-card

Surface/weak

bg-surface-weak

Surface/overlay

bg-surface-overlay

Surface/brand

bg-surface-brand

Surface/accent-green

bg-surface-accent-green

Surface/accent-purple

bg-surface-accent-purple

Text

Text/primary

text-text-primary

Text/secondary

text-text-secondary

Text/weak

text-text-weak

Text/brand

text-text-brand

Text/negative

text-text-negative

Icon

Icon/primary

text-icon-primary

Icon/secondary

text-icon-secondary

Icon/weak

text-icon-weak

Icon/brand

text-icon-brand

Border

Border/weak

border-border-weak

Border/focus

border-border-focus

Blue Scale

#e6f2ff

#cce0ff

#99cdfe

#67b3fe

#349afd

#0181fd

#0167ca

#014d9b

#003465

#00274c

#001a33

100

200

300

400

500

600

700

800

900

950

Border Radius

Tag

6px

rounded-tag

Card Inner

8px

rounded-card-inner

Card

16px

rounded-card

Button/Input

100px

rounded-button-input