uicraft

Colors

Neutral grey palette with accent colors and semantic design tokens from Figma.

Architecture

Three-layer color system: Palette → Tokens → Component.

Palette
--grey-950
--green-500
--red-600
Tokens
--mains-primary: grey-950
--accents-green: green-500
--accents-red: red-500
Component
text-mains-primary
bg-neutrals-surface
border-border

Grey Scale

Neutral grey with subtle blue-violet tint in mid-range. Includes step 75 for finer control.

Grey

--grey-*
50
75
100
200
300
400
500
600
700
800
900
950

Accent Colors

Full scales for brand, success, info, error and warning states.

Green

--green-*
50
100
200
300
400
500
600
700
800
900
950

Blue

--blue-*
50
100
200
300
400
500
600
700
800
900
950

Red

--red-*
50
100
200
300
400
500
600
700
800
900
950

Orange

--orange-*
50
100
200
300
400
500
600
700
800
900
950

Generic

Pure white and black. Constant across all themes.

0
1000

Design Tokens

Exported from Figma. Each token maps to palette values for light and dark modes.

Generics

Constants — same in any theme
Light Dark Token
--generics-white
--generics-black

Mains

Text & icon colors only
Light Dark Token
--mains-primary
--mains-secondary
--mains-tertiary
--mains-quaternary

Neutrals

Surface & card fills
Light Dark Token
--neutrals-background
--neutrals-surface
--neutrals-light-grey
--neutrals-medium-grey
--neutrals-dark-grey

Border

Stroke & divider colors
Light Dark Token
--border-light
--border-dark

Accents

Brand & functional colors
Light Dark Token
--accents-green
--accents-blue
--accents-red
--accents-orange

Backgrounds

Tinted backgrounds for alerts & badges
Light Dark Token
--backgrounds-red
--backgrounds-green
--backgrounds-blue

Usage

How to use colors in your components.

Tailwind classes (tokens)
text-mains-primary bg-neutrals-surface border-border
CSS variables (tokens)
hsl(var(--accents-red))
Raw palette (use sparingly)
hsl(var(--grey-800))