Utility-first interface system

Build exactly the interface you imagined.

A developer-first visual catalog of cyan actions, exact 4px rhythm, mono code surfaces, crisp grid lines, pill controls, and docs-ready product examples.

/* component-first proof */
<div class="grid gap-4 rounded-xl border p-6">
  <h2 class="text-4xl tracking-tighter">
    Ship the system
  </h2>
  <button class="rounded-full bg-gray-950">Start</button>
</div>

Live preview

Responsive card

Generated from utility classes and tokenized into a reusable surface.

30Colors

13Type levels

16Components

65+Tokens

01 / Colors

Actions, code, and quiet structure.

The palette is mostly white, near-black, and gray, with cyan as the action system and syntax colors as brand signatures.

primary#00a5ef

Action links, active docs states, focus rings.

accent#38bdf8

Logo wave and bright sky highlights.

ink#030712

Headings, primary buttons, authority text.

body#4a5565

Readable prose and descriptions.

surface#f9fafb

Search fields and subtle panels.

border#e5e7eb

Hairlines, cards, nav dividers.

codeBg#1e2939

Dark code panels and snippets.

token function#fb64b6

Syntax and category accent.

token string#77d4ff

Code strings and utility values.

indigo signature#625fff

Feature category accents.

success#00bb7f

Inserted diffs and confirmations.

error#e40014

Validation and destructive feedback.

02 / Typography

Tight headlines, relaxed docs.

Inter carries the interface. IBM Plex Mono signals code, utility classes, versions, and technical proof.

Display system

display — 72px / 600 / 1 / -0.05em / Inter

Hero headline

hero — 56px / 600 / 1.07 / -0.05em / Inter

Beautifully designed UI blocks.

headline-lg — 40px / 500 / 1.1 / -0.05em / Inter

Installation and setup

title-lg — 30px / 600 / 1.2 / -0.025em / Inter

Component preview title

title-md — 20px / 500 / 1.6 / 0em / Inter

Tailwind works by scanning templates for class names and generating only the CSS you use.

body — 16px / 400 / 1.75 / 0em / Inter

FRAMEWORK GUIDES

label — 13px / 500 / 1.85 / 0.1em / IBM Plex Mono

npm install tailwindcss @tailwindcss/cli

code — 13px / 400 / 1.75 / 0em / IBM Plex Mono

$299

pricing-display — 60px / 300 / 1 / -0.025em / Inter

03 / Buttons

Pill actions with minimal chrome.

button-primary

button-primary-active

button-accent

button-secondary

button-ghost

button-icon

04 / Cards & Surfaces

Border-led surfaces over fake depth.

Cards use fine lines, modest radii, code proof, and selective dark emphasis.

Feature card

White surface, 1px border, compact heading, and a link-like action.

Read the docs →

Docs callout

Cyan-soft guidance for compatibility notes and installation steps.

Check requirements →

Code surface

Dark slate panel with subtle top-edge depth and bright syntax accents.

Copy snippet →

Template category

A pink signature wash marks product/category modules without taking over.

Explore templates →

Preview frame

Elevation is reserved for floating search, demos, and browser frames.

Open preview →

Pricing card

Generous internal spacing, calm borders, and strong numeric hierarchy.

05 / Brand-Specific Product Patterns

Code, docs, gallery, pricing.

These mini interfaces are the fingerprint: utility classes directly shaping visible UI.

Docs shell

InstallationTailwind CLIVitePlay CDN

01 Install Tailwind CSS

npm install tailwindcss

On this pageInstallImportWatch

Utility class cloud

rounded-xltext-gray-950bg-sky-500grid-cols-3tracking-tighterring-1dark:bg-gray-950font-mono

Code to preview

Component gallery

Plus pricing

Personal

$299

Lifetime access to UI blocks, templates, and Catalyst.

Syntax legend

/* tokens as identity */
function Card() {
return "rounded-xl border p-6"
}

06 / Forms

Search-like, compact, focused.

Default input

Focused input

Select

Error state

Textarea

Dark mode React Vue

07 / Spacing

Four-pixel rhythm.

xs 4px

sm 8px

md 16px

lg 24px

xl 40px

2xl 64px

section 96px

08 / Radius

Pills for controls, modest panels.

4px

small code details

6px

compact fields

8px

small panels

12px

code panels

16px

pricing cards

9999px

buttons/search

09 / Elevation

Depth by rings first.

Shadows exist, but hierarchy usually comes from borders, surfaces, and code-dark contrast.

0 1px 2px #0000000d

subtle card lift

floating menu

browser preview

inset dark

top edge highlight

10 / Extracted Component Tokens

CSS custom properties.

:root {
  --brand-primary: #00a5ef;
  --brand-accent: #38bdf8;
  --brand-ink: #030712;
  --brand-body: #4a5565;
  --brand-muted: #6a7282;
  --brand-canvas: #ffffff;
  --brand-surface: #f9fafb;
  --brand-border: #e5e7eb;
  --brand-code-bg: #1e2939;
  --brand-token-function: #fb64b6;
  --brand-token-string: #77d4ff;
  --brand-dark-canvas: #030712;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius-pill: 9999px;
  --radius-panel: 12px;
  --spacing-unit: 4px;
  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}