text-8xl text-white tracking-tighter text-balance

Rapidly build modern websites without ever leaving your HTML.

text-lg text-white font-medium

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Get started⚲ Quick search ⌘K
1
2
3
4
5
<div class="flex flex-col items-center rounded-2xl">
  <div class="p-6">
    <img class="size-48 shadow-xl" alt="" src="/img/cover.png" />
  </div>
  <!-- compose utilities, never leave your markup -->
// components

Built for the modern web.

rounded-2xl border p-6

Utility-first

Style elements by composing classes right in your markup — no context switching.

dark:bg-gray-950

Dark by default

The whole page is a gray-950 artboard ruled with a faint grid and hatch gutters.

font-mono text-white/25

Self-documenting

Every block is annotated in the gutter with the exact utility string that made it.

bg-gray-700 rounded-full px-4 py-2Get started
text-cyan-400 font-monoflex items-center gap-2
text-sky-300Plus →
// controls

Ship faster and smaller.

Get started Docs Disabled v4.3 flex pt-4
⚲ Quick search Focused input

Controls are pills: primary is gray-700 #364153 at weight 600, padding 8px 16px, radius 32px, no shadow. The design is flat — depth comes from 1px rgba(255,255,255,.10) grid hairlines, and the focus ring is a cyan #00bcff outline.

// typography

Two families, one low weight ceiling.

Hero · Inter · 96/96 · 400 · -0.05emRapidly build
Section · Inter · 40/40 · 500 · -0.05emBuilt for the modern web.
Sub · Inter · 18/28 · 500 · gray-400A utility-first CSS framework.
Body · Inter · 16/24 · 400Compose utilities directly in your markup.
Nav · Inter · 14 · 400Docs · Blog · Showcase · Partners
Annotation · IBM Plex Mono · 12 · 25% whitetext-8xl tracking-tighter
Code · IBM Plex Mono · 13/24 · 400div class="flex"
// palette

Colour, rationed.

Canvas & surfaces
canvas#030712
button#364153
ghost#fff / 5%
border#fff / 10%
Text
text#ffffff
muted#99a1af
slate#90a1b9
label#fff / 25%
Accent & syntax
cyan-400#00bcff
sky-300#74d4ff
pink-400#fb64b6
teal-300#96f7e4
slate-200#cad5e2
blue-200#bedbff
logo wavesky→cyan ≈ #38bdf8
// depth & motion

Flat by design.

8px panel
14px card
32px pill
no shadow — grid hairline only

Motion: hover colour/opacity transitions ~150ms ease on links and buttons; no hero entrance choreography, CSS-native, never bouncy. Depth is a 1px rgba(255,255,255,.10) grid line, not elevation.