Home
DESIGN.mdStar on GitHub

Rapidly build modern websites without ever leaving your HTML.

A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

Signature — Utility playground
Ship it in HTML
No stylesheet, no context switch.
Toggle utilities → the element restyles live and the class string rebuilds. This is the whole Tailwind loop.
Colors
Brand — sky
sky-400#38BDF8Accent, mark, links
sky-500#0EA5E9Hover
sky-600#0284C7On-light accent
sky-300#7DD3FCSoft accent
Surfaces — slate
slate-950#020617Page
slate-900#0F172APanels
slate-800#1E293BRaised, code
slate-700#334155Borders
The scale — sky (50 → 950)
50
100
200
300
400
500
600
700
800
900
950
Typography — Inter · IBM Plex Mono
text-6xl
Inter · 800
Build anything
60px800
text-2xl
Inter · 700
Never leave your HTML
24px700
text-base
Inter · 400
Compose utility classes to build any design, directly in your markup.
16px400
font-mono
IBM Plex Mono
class="bg-sky-400 p-6 rounded-2xl shadow-lg"
14pxmono
Components
Buttons
Spacing scale
p-2p-4p-6p-8p-12gap-4
Guardrails
DO
Keep the mark's wave in sky #38BDF8; let the wordmark adapt to the theme.
Build surfaces from the slate scale; use sky as the single accent.
Use dark text on the sky button — sky is too bright for white text.
Put utility class names and code in IBM Plex Mono.
Reach for real scale tokens (slate-800, sky-400, p-6) — not off-scale values.
DON'T
Don't introduce a second brand accent — sky owns it.
Don't use pure black #000 for surfaces — darkest is slate-950 #020617.
Don't put white text on #38BDF8.
Don't recolor the sky wave in the mark.
Don't set body copy in the mono face — Inter for text, Plex Mono for code.