design.md
Back to directory
fintech · minimal · premium · modern · dashboard

Ledger Quiet.

A trading desk that whispers. Off-white surfaces with hairline-only chrome, IBM Plex Sans for prose, IBM Plex Mono with tabular numerals for every figure, a single forest-green accent reserved for positive deltas. Built for fintech dashboards, treasury tools, and any product where the numbers must be the loudest thing on the screen.

01 · Preview

The kitchen sink.

Ledger.app
ProductPricingDocsAbout
Sign inGet started
fintech · minimal · premium

Build with Ledger Quiet.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#0E1116
secondary
#5B6370
tertiary
#0E1116
neutral
#EEF0F2
surface
#F8F9FA
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
3px
md
5px
lg
7px
pill
9999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · Pro tokens

The states behind the resting style.

ArchetypeEditorial

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Ledger Quiet"
3description: "A trading desk that whispers. Off-white surfaces with hairline-only chrome, IBM Plex Sans for prose, IBM Plex Mono with tabular numerals for every figure, a single forest-green accent reserved for positive deltas. Built for fintech dashboards, treasury tools, and any product where the numbers must be the loudest thing on the screen."
4tags: [fintech, minimal, premium, modern, dashboard]
5colors:
6  primary:   "#0e1116"
7  secondary: "#5b6370"
8  tertiary:  "#0e1116"
9  neutral:   "#eef0f2"
10  surface:   "#f8f9fa"
11typography:
12  display: "IBM Plex Sans"
13  body:    "IBM Plex Sans"
14  mono:    "IBM Plex Mono"
15  scale:
16    hero: "3rem / 1.08 / 600 / -0.025em"
17    h1:   "2rem / 1.18 / 600 / -0.02em"
18    h2:   "1.375rem / 1.3 / 600 / -0.012em"
19    body: "0.9375rem / 1.55 / 400 / 0"
20radius:
21  sm: 3px
22  md: 5px
23  lg: 7px
24  pill: 9999px
25shadows:
26  card:   "rgba(14,17,22,0.04) 0 1px 2px"
27  button: none
28borders:
29  card:    "1px solid rgba(14,17,22,0.08)"
30  divider: rgba(14,17,22,0.08)
31buttons:
32  primary:
33    background: #0e1116
34    color: #f8f9fa
35    border: none
36    shape: rounded
37    padding: 9px 18px
38    font: 500 / 0.8125rem
39  secondary:
40    background: #ffffff
41    color: #0e1116
42    border: 1px solid rgba(14,17,22,0.14)
43    shape: rounded
44    padding: 9px 18px
45    font: 500 / 0.8125rem
46  outline:
47    background: transparent
48    color: #0e1116
49    border: 1px solid rgba(14,17,22,0.18)
50    shape: rounded
51    padding: 9px 18px
52    font: 500 / 0.8125rem
53  ghost:
54    background: transparent
55    color: #5b6370
56    border: none
57    shape: rounded
58    padding: 9px 14px
59    font: 500 / 0.8125rem
60charts:
61  variant: "thin-bars"
62  stroke_width: 1.25
63  fill_opacity: 0.05
64  gridlines: true
65  bar_gap: 8px
66  highlight: single
67  dot_marker: true
68fonts_url: "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Ledger Quiet
73 
74## AI Build Instructions
75 
76> **Read this section before writing any code.** The rules below
77> are non-negotiable. Every value used in the UI must come from this
78> file's frontmatter — never substitute, approximate, or invent new
79> colors, fonts, radii, or shadows. If a value is missing, ask the
80> user before adding one.
81 
82### 1 · Your role
83 
84You are building UI for a project that has adopted **Ledger Quiet** as its
85design system. Treat `DESIGN.md` as the single source of truth.
86Your job is to translate the user's product requirements into
87components and pages that look like they were designed by the same
88person who authored this file.
89 
90### 2 · Token compliance
91 
92- Pull every color, font family, radius, shadow, and spacing value
93  from the frontmatter at the top of this file.
94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
95  hard-code hex values that bypass the system.
96- When a token can be expressed as a CSS variable, declare it once
97  in your global stylesheet and reference it everywhere downstream.
98- The Google Fonts `<link>` is provided in the Typography section.
99  Add it to `<head>` before any component renders.
100 
101### 3 · Component recipes
102 
103Use these recipes verbatim when building the corresponding component.
104 
105#### Buttons
106 
107Four variants are defined. Pick one — never blend variants or invent a fifth.
108 
109- **Primary** — rounded shape, bg `#0e1116`, text `#f8f9fa`, padding `9px 18px`, weight `500`.
110- **Secondary** — rounded shape, bg `#ffffff`, text `#0e1116`, border `1px solid rgba(14,17,22,0.14)`, padding `9px 18px`, weight `500`.
111- **Outline** — rounded shape, text `#0e1116`, border `1px solid rgba(14,17,22,0.18)`, padding `9px 18px`, weight `500`.
112- **Ghost** — rounded shape, text `#5b6370`, padding `9px 14px`, weight `500`.
113 
114Reach for **primary** as the single dominant CTA per screen.
115**Secondary** for the supporting action. **Outline** for tertiary
116actions in toolbars. **Ghost** for inline links and table actions.
117 
118#### Cards
119 
120- Background: `#f8f9fa`
121- Border: `1px solid rgba(14,17,22,0.08)`
122- Shadow: `rgba(14,17,22,0.04) 0 1px 2px`
123- Radius: `radius.lg` (`7px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
129 
130#### Charts
131 
132- Bar/line variant: `thin-bars`
133- Highlight strategy: `single` — emphasize a single bar/point per chart.
134 
135#### Typography pairings
136 
137- **Display (`IBM Plex Sans`)** — h1, h2, hero headlines, brand wordmarks.
138- **Body (`IBM Plex Sans`)** — paragraphs, labels, button text, form inputs.
139- **Mono (`IBM Plex Mono`)** — code, eyebrows, metadata, numerals in tables.
140 
141### 4 · Hard constraints
142 
143Never do any of the following without explicit instruction from the user:
144 
145- Introduce a new color, font, radius, or shadow that isn't declared above.
146- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
147- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
148- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
149- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
150 
151### 5 · Before you finish — verify
152 
153Run through this checklist for every screen you produce:
154 
155- [ ] Every color used appears in the Colors table above.
156- [ ] Headlines use the display font; body copy uses the body font.
157- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
158- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
159- [ ] Cards and dividers use the declared border + shadow tokens.
160- [ ] No values were invented; if you needed something missing, you stopped and asked.
161 
162---
163 
164## 1. Atmosphere
165 
166Ledger Quiet is a trading desk that whispers. The page is off-white `#f8f9fa` with cards lifted to pure white — a tonal-shift system where every surface differs by 1-2% lightness. IBM Plex Sans handles prose, IBM Plex Mono handles every figure with tabular numerals so columns of numbers align to the pixel. Chrome is hairlines at 8% ink. The single accent is a deep forest-green `#1f7a4d` that appears only on positive deltas (+2.4%), the active tab underline, and the chart highlight bar. Negative deltas use ink, never red — this system trusts the reader to read the sign.
167 
168The discipline is in the typographic split: prose in sans, every numeral in mono with tabular alignment. The page reads as a serious P&L, not a marketing dashboard.
169 
170**Signature moves**
171- IBM Plex Mono with `font-variant-numeric: tabular-nums` on every figure — columns align perfectly
172- Forest-green `#1f7a4d` only on positive deltas + active tab underline + chart highlight
173- Negative deltas in ink (with minus sign), never in red — quiet conviction
174- Hairline-only chrome at 8% ink — no shadows beyond the 1px lift
175- Tonal-shift surfaces: `#f8f9fa` page → `#ffffff` card → `#eef0f2` table header
176 
177## 2. Palette
178 
179### Surfaces
180- **Page** `#f8f9fa` — primary background (cool off-white)
181- **Card** `#ffffff` — elevated surface, 1px hairline border
182- **Header / Bone** `#eef0f2` — table headers, secondary surfaces
183 
184### Ink
185- **Ink** `#0e1116` — text, headings, primary CTA fill, negative deltas
186- **Ink 60** `#5b6370` — secondary text, mono labels
187- **Hairline** `rgba(14,17,22,0.08)` — every divider, every card edge
188 
189### Accent
190- **Forest** `#1f7a4d` — positive delta, active tab underline, chart highlight
191- **Forest Soft** `rgba(31,122,77,0.10)` — focus ring, hovered tab background
192 
193## 3. Typography
194 
195| Role | Font | Size | Weight | Leading | Tracking |
196|------|------|------|--------|---------|----------|
197| Hero | IBM Plex Sans | 48px | 600 | 1.08 | -0.025em |
198| H1 | IBM Plex Sans | 32px | 600 | 1.18 | -0.02em |
199| H2 | IBM Plex Sans | 22px | 600 | 1.3 | -0.012em |
200| Body | IBM Plex Sans | 15px | 400 | 1.55 | 0 |
201| UI / Button | IBM Plex Sans | 13px | 500 | 1.4 | 0 |
202| Figure / KPI | IBM Plex Mono | 28px | 600 | 1.0 | 0 tabular-nums |
203| Label | IBM Plex Mono | 11px | 500 | 1.0 | 0.06em uppercase |
204| Delta | IBM Plex Mono | 13px | 500 | 1.0 | 0 tabular-nums |
205 
206Plex Mono everywhere a number lives — KPIs, deltas, table cells, axis labels. The tabular-nums variant is what makes the system read as professional finance vs. marketing copy.
207 
208## 4. Buttons
209 
210### Primary (Ink)
211```css
212background: #0e1116;
213color: #f8f9fa;
214padding: 9px 18px;
215border-radius: 5px;
216font-weight: 500;
217```
218 
219### Secondary (Card White)
220- Pure white, 1px hairline at 14% ink, ink text — same shape, same padding
221 
222### Outline & Ghost
223- Outline: transparent, 1px hairline at 18% ink
224- Ghost: no border, ink-60, hover lifts to ink
225 
226## 5. Cards
227 
228```css
229background: #ffffff;
230border: 1px solid rgba(14,17,22,0.08);
231border-radius: 7px;
232box-shadow: rgba(14,17,22,0.04) 0 1px 2px;
233```
234 
235The single 1px shadow is the maximum lift. Every card carries a 1px hairline header divider beneath the title — that internal rule is the signature of a trading-pane card.
236 
237## 6. Charts
238 
239Thin precise bars (3px wide, 8px gap) with dashed gridlines at 6% ink. One bar in forest, others in 22% ink. Line charts at 1.25px ink with a 5% forest fill, ending in a forest dot marker. Y-axis labels in IBM Plex Mono uppercase 11px aligned to the right edge.
240 
241## 7. Tabs
242 
243Underline 1.5px in forest for the active state. Inactive tabs are ink-60 in IBM Plex Sans 500. Hover = forest-soft background wash. Tabs sit on a 1px hairline baseline.
244 
245## 8. Spacing
246 
247- Base 4px (KPI-card aware)
248- Scale: `4, 8, 12, 16, 20, 24, 32, 40, 56, 80`
249- Section padding: 80px desktop, 32px mobile
250 
251## 9. Do's & don'ts
252 
253✅ **Do**
254- Use IBM Plex Mono with tabular-nums on every figure — column alignment IS the brand
255- Reserve forest for positive deltas + active tab + chart highlight only
256- Keep negative deltas in ink with a minus sign — never red
257- Hold tonal-shift surfaces (page → card → header), each step 1-2% lightness
258 
259❌ **Don't**
260- Use red for negative deltas — the system trusts the minus sign
261- Use a second accent color — forest alone, on three specific surfaces
262- Add a heavy shadow — 1px lift is the maximum
263- Use proportional figures for numbers — tabular-nums always
264 
265---
266 
267## Tokens
268 
269> Generated from the same source the live preview renders from.
270> Treat the values below as the contract — never substitute approximations.
271 
272### Colors
273 
274| Role      | Value |
275|-----------|-------|
276| primary   | `#0e1116` |
277| secondary | `#5b6370` |
278| tertiary  | `#0e1116` |
279| neutral   | `#eef0f2` |
280| surface   | `#f8f9fa` |
281 
282### Typography
283 
284- **Display:** IBM Plex Sans
285- **Body:** IBM Plex Sans
286- **Mono:** IBM Plex Mono
287 
288| Role | size / leading / weight / tracking |
289|------|------------------------------------|
290| Hero | 3rem / 1.08 / 600 / -0.025em |
291| H1   | 2rem / 1.18 / 600 / -0.02em |
292| H2   | 1.375rem / 1.3 / 600 / -0.012em |
293| Body | 0.9375rem / 1.55 / 400 / 0 |
294 
295### Radius
296 
297- sm: `3px`
298- md: `5px`
299- lg: `7px`
300- pill: `9999px`
301 
302### Shadows
303 
304- **card:** `rgba(14,17,22,0.04) 0 1px 2px`
305- **button:** `none`
306 
307### Borders
308 
309- **card:** `1px solid rgba(14,17,22,0.08)`
310- **divider:** `rgba(14,17,22,0.08)`
311 
312### Buttons
313 
314Four variants, each fully tokenized. The preview renders from these exact values.
315 
316#### Primary
317 
318| Property | Value |
319|----------|-------|
320| shape | `rounded` |
321| background | `#0e1116` |
322| color | `#f8f9fa` |
323| border | `none` |
324| padding | `9px 18px` |
325| fontWeight | `500` |
326| fontSize | `0.8125rem` |
327 
328#### Secondary
329 
330| Property | Value |
331|----------|-------|
332| shape | `rounded` |
333| background | `#ffffff` |
334| color | `#0e1116` |
335| border | `1px solid rgba(14,17,22,0.14)` |
336| padding | `9px 18px` |
337| fontWeight | `500` |
338| fontSize | `0.8125rem` |
339 
340#### Outline
341 
342| Property | Value |
343|----------|-------|
344| shape | `rounded` |
345| background | `transparent` |
346| color | `#0e1116` |
347| border | `1px solid rgba(14,17,22,0.18)` |
348| padding | `9px 18px` |
349| fontWeight | `500` |
350| fontSize | `0.8125rem` |
351 
352#### Ghost
353 
354| Property | Value |
355|----------|-------|
356| shape | `rounded` |
357| background | `transparent` |
358| color | `#5b6370` |
359| border | `none` |
360| padding | `9px 14px` |
361| fontWeight | `500` |
362| fontSize | `0.8125rem` |
363 
364### Charts
365 
366| Property | Value |
367|----------|-------|
368| variant | `thin-bars` |
369| strokeWidth | `1.25` |
370| fillOpacity | `0.05` |
371| gridlines | `true` |
372| barGap | `8px` |
373| highlight | `single` |
374| dotMarker | `true` |
375 
376---
377 
378## Pro tokens
379 
380> Production-fidelity tokens. States, density, motion, elevation,
381> content rules and a measured WCAG contract — derived from the
382> resting tokens unless explicitly authored.
383 
384### States
385 
386#### Button
387 
388- **hover** — bg: `rgba(14, 17, 22, 0.92)`, shadow: `0 4px 20px -8px rgba(14, 17, 22, 0.4)`
389- **focus** — outline: `1.5px solid #0e1116`, outline-offset: `4px`
390- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
391- **disabled** — opacity: `0.45`
392- **loading** — opacity: `0.7`
393- **selected** — bg: `#0e1116`, color: `#f8f9fa`
394 
395#### Input
396 
397- **hover** — border: `1px solid #0e1116`
398- **focus** — border: `1px solid #0e1116`, shadow: `0 1px 0 0 #0e1116`
399- **disabled** — opacity: `0.45`
400- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
401 
402#### Card
403 
404- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
405- **selected** — border: `1px solid #0e1116`
406 
407#### Tab
408 
409- **hover** — color: `#0e1116`
410- **focus** — outline: `1.5px solid #0e1116`, outline-offset: `3px`
411- **selected** — color: `#0e1116`, border: `0 0 2px 0 solid #0e1116`
412 
413### Density
414 
415| Mode | padding × | row × | body | radius × | Use for |
416|------|-----------|-------|------|----------|---------|
417| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
418| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
419| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
420 
421### Motion
422 
423**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
424 
425```css
426transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
427```
428 
429| Token | Value |
430|-------|-------|
431| duration.instant | `80ms` |
432| duration.fast | `180ms` |
433| duration.base | `320ms` |
434| duration.slow | `500ms` |
435| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
436| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
437| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
438| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
439 
440### Elevation
441 
442Five-level scale, system-specific recipe.
443 
444| Level | Shadow | Recipe |
445|-------|--------|--------|
446| level0 | `none` | Hairline only — typical editorial resting state. |
447| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
448| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
449| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
450| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
451 
452### Content
453 
454- **measure:** `60ch` (max line length for body prose)
455- **paragraph spacing:** `1.5em`
456- **list indent:** `1.75em`
457- **list gap:** `0.55em`
458- **link:** color `#0e1116`, underline `always`
459- **blockquote:** border `4px solid #0e1116`, padding `0.4em 0 0.4em 1.5em`
460- **code:** background `rgba(14, 17, 22, 0.06)`, color `#0e1116`
461 
462### Accessibility (WCAG 2.1)
463 
464**Overall:** AA
465 
466| Pair | Ratio | Required | Grade | Suggested fix |
467|------|-------|----------|-------|---------------|
468| Body text on surface | 17.94:1 | AA | AAA | — |
469| Body text on canvas | 16.55:1 | AA | AAA | — |
470| Muted text on surface | 5.75:1 | AA | AA | — |
471| Accent on surface | 17.94:1 | AA-Large | AAA | — |
472| Accent on canvas | 16.55:1 | AA-Large | AAA | — |
473
04 · How to use it

Wire it into your agent.

markdown
# CLAUDE.md
 
Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.
05 · Required setup

Three snippets.

Google Fonts link

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"IBM Plex Sans"', 'serif'],
        sans:    ['"IBM Plex Sans"', 'sans-serif'],
        mono:    ['"IBM Plex Mono"', 'monospace'],
      },
      colors: {
        primary:   '#0e1116',
        secondary: '#5b6370',
        accent:    '#0e1116',
        neutral:   '#eef0f2',
        surface:   '#f8f9fa',
      },
      borderRadius: {
        sm: '3px',
        md: '5px',
        lg: '7px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Dawn Quartz

A soft tonal gradient that stays in one hue. Quartz-pink shading down to bone-white across the page, Manrope for UI, Fraunces for display, graphite ink, a single muted plum accent reserved for the primary CTA and the active step indicator. Built for early-stage product pages, wellness brands, and onboarding flows that need warmth without sweetness.

gradientwarmminimalpremiummodern
Dawn.app
ProductPricingDocsAbout
Sign inGet started
gradient · warm · minimal

Build with Dawn Quartz.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational

Terra Bone

Radical two-color: deep terracotta and warm bone, nothing else. Humanist serif display at scale, soft 12px corners, generous body. Earthen and quiet — for artisan brands, ceramics, slow-food, hospitality.

duotonewarmminimaleditorialartisan
Terra.app
ProductPricingDocsAbout
Sign inGet started
duotone · warm · minimal

Build with Terra Bone.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational