← All UI styles
Compact Quiet
Dense as a pro tool, quiet as a document — a lot fits without shouting.
TintedminimalInbox-style productsTask listsPersonal dashboards
Construction · Tinted
Surfaces are a wash of the accent over the page — no border, no shadow, only a shift in tone saying where one group ends.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Compact Quiet style. Row heights and type sizes are small, but the palette and borders stay soft. Density without visual noise, for people who scan long lists calmly. Build every surface
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- small rows with soft edges
- density without noise
- muted accent
- calm scanning
What this style refuses
- hard borders
- saturated status colors
- large headings
- roomy padding
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#fafafa#0c0c0dSurface
#ffffff#131315Border
#e7e7e9#252528Text
#17171a#f1f1f3Muted text
#5b5b61#9a9aa1Accent
#3f6f5f#7cbfa8On accent
#ffffff#04160fShape and type
Radius4 / 6 / 8 px
Bordernone
Shadownone
Displaysystem-ui
Bodysystem-ui
Monoui-monospace
Type scale10 · 11 · 13 · 15 · 19 · 26 px
Weights400 / 600 / 600
Line height1.4
Tracking0em
Spacing4px grid · compact
Surfacetinted
Accentfilled
Separatornone
Labelssentence case
Blurnone
Measured contrast — body 17.14:1 light, 17.33:1 dark; secondary text 6.46:1 and 6.99:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Compact Quiet
*
* Dense as a pro tool, quiet as a document — a lot fits without shouting.
*
* One complete product screen, rendered from the token object below —Nearby styles
Borderless TintNo borders anywhere — surfaces separate themselves with a tint instead.Cream PlushWarm milk surfaces on one soft shadow, corners rounded until nothing has an edge — it should feel upholstered.Document CalmA page that behaves like a document: almost no chrome, and hover reveals the rest.