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

A

Text/primary

text-text-primary

A

Text/secondary

text-text-secondary

A

Text/weak

text-text-weak

A

Text/brand

text-text-brand

A

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
50
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
Solokit - Open Source AI Component Library for React & Next.js