← All UI styles
Sand Neutral
Warm greige throughout, with a clay accent and no grey in sight.
PrintminimalLifestyle brandsCommerceSlow productivity tools
Construction · Print
Ink on stock: a grain over the whole page, edges that are drawn lines, fills that are screens or solids, and no depth anywhere.
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 Sand Neutral style. Every neutral is warm — sand, oat, clay — with no cool grey anywhere. Contrast is gentle but never below what text needs. Build every surface the Print way: Ink on
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- warm neutrals only
- clay accent
- no cool grey
- gentle contrast
What this style refuses
- cool grey neutrals
- pure white surfaces
- high-chroma accents
- hard black text
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
#f7f4ef#14120fSurface
#fdfbf7#1b1815Border
#e0d9cd#302b24Text
#242019#f2eee7Muted text
#5f584c#a1988aAccent
#9a5b3d#d99070On accent
#ffffff#1c0c04Shape and type
Radius6 / 10 / 16 px
Border1px solid
Shadownone
DisplayTrebuchet MS
Bodysystem-ui
Monoui-monospace
Type scale11 · 12 · 15 · 17 · 21 · 30 px
Weights400 / 600 / 700
Line height1.55
Tracking0em
Spacing4px grid · roomy
Surfacegrain
Accentfilled
Separatorhairline
Labelssentence case
Blurnone
Measured contrast — body 14.77:1 light, 16.17:1 dark; secondary text 6.41:1 and 6.57:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Sand Neutral
*
* Warm greige throughout, with a clay accent and no grey in sight.
*
* One complete product screen, rendered from the token object below —