/
design.md
Back to directory
gradient · pastel · soft · minimal · wellness · premium

Sorbet Tonal.

A multi-stop pastel gradient runs across the page — desaturated lavender, peach, seafoam, cream — every stop at ~25% chroma so it reads as soft sorbet rather than rainbow. Pure paper-white cards, ink text, hairlines. Calm and considered.

01 · Preview

The kitchen sink.

Sorbet.app
ProductPricingDocsAbout
Sign inGet started
gradient · pastel · soft

Build with Sorbet Tonal.

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
#1C1B22
secondary
#6B6973
tertiary
#A088B8
neutral
#F4EFE9
surface
#FFFFFF
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
14px
md
20px
lg
28px
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 · The file

DESIGN.md

markdown
1---
2name: "Sorbet Tonal"
3description: "A multi-stop pastel gradient runs across the page — desaturated lavender, peach, seafoam, cream — every stop at ~25% chroma so it reads as soft sorbet rather than rainbow. Pure paper-white cards, ink text, hairlines. Calm and considered."
4tags: [gradient, pastel, soft, minimal, wellness, premium]
5colors:
6  primary:   "#1C1B22"
7  secondary: "#6B6973"
8  tertiary:  "#A088B8"
9  neutral:   "#F4EFE9"
10  surface:   "#FFFFFF"
11typography:
12  display: Manrope
13  body:    Manrope
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.75rem / 1.05 / 600 / -0.035em"
17    h1:   "2.75rem / 1.1 / 600 / -0.028em"
18    h2:   "1.5rem / 1.3 / 600 / -0.015em"
19    body: "1.0625rem / 1.7 / 400 / -0.003em"
20radius:
21  sm: 14px
22  md: 20px
23  lg: 28px
24  pill: 9999px
25shadows:
26  card:   "0 18px 48px -24px rgba(40, 35, 60, 0.14), 0 1px 3px rgba(40, 35, 60, 0.05)"
27  button: "0 6px 18px -8px rgba(28, 27, 34, 0.22)"
28borders:
29  card:    "1px solid rgba(28, 27, 34, 0.06)"
30  divider: "rgba(28, 27, 34, 0.08)"
31glass:
32  surface: "#FFFFFF"
33  blur:    0px
34  border:  "1px solid rgba(28, 27, 34, 0.06)"
35  shadow:  "0 18px 48px -24px rgba(40, 35, 60, 0.14)"
36  backdrop: "radial-gradient(at 8% 12%, rgba(195, 178, 222, 0.55) 0px, transparent 42%), radial-gradient(at 90% 18%, rgba(245, 210, 198, 0.55) 0px, transparent 45%), radial-gradient(at 78% 92%, rgba(196, 224, 215, 0.55) 0px, transparent 48%), radial-gradient(at 14% 88%, rgba(238, 226, 200, 0.50) 0px, transparent 45%)"
37buttons:
38  primary:
39    background: #1C1B22
40    color: #FFFFFF
41    border: 1px solid #1C1B22
42    shape: pill
43    padding: 13px 26px
44    font: 600 / 0.9375rem / -0.005em
45    shadow: 0 6px 18px -8px rgba(28, 27, 34, 0.22)
46  secondary:
47    background: #FFFFFF
48    color: #1C1B22
49    border: 1px solid rgba(28, 27, 34, 0.10)
50    shape: pill
51    padding: 13px 26px
52    font: 500 / 0.9375rem / -0.005em
53  outline:
54    background: transparent
55    color: #1C1B22
56    border: 1px solid rgba(28, 27, 34, 0.16)
57    shape: pill
58    padding: 12px 25px
59    font: 500 / 0.9375rem / -0.005em
60  ghost:
61    background: transparent
62    color: #6B6973
63    border: none
64    shape: pill
65    padding: 12px 6px
66    font: 500 / 0.9375rem / -0.005em
67    hover: underline
68charts:
69  variant: area
70  stroke_width: 2
71  fill_opacity: 0.2
72  gridlines: false
73  highlight: last
74  dot_marker: true
75  axis_color: "#6B6973"
76  palette: ["#A088B8", "#C7B4D8", "#E0D2EA"]
77fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap"
78dependencies: ["lucide-react"]
79---
80 
81# Sorbet Tonal
82 
83## AI Build Instructions
84 
85> **Read this section before writing any code.** The rules below
86> are non-negotiable. Every value used in the UI must come from this
87> file's frontmatter — never substitute, approximate, or invent new
88> colors, fonts, radii, or shadows. If a value is missing, ask the
89> user before adding one.
90 
91### 1 · Your role
92 
93You are building UI for a project that has adopted **Sorbet Tonal** as its
94design system. Treat `DESIGN.md` as the single source of truth.
95Your job is to translate the user's product requirements into
96components and pages that look like they were designed by the same
97person who authored this file.
98 
99### 2 · Token compliance
100 
101- Pull every color, font family, radius, shadow, and spacing value
102  from the frontmatter at the top of this file.
103- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
104  hard-code hex values that bypass the system.
105- When a token can be expressed as a CSS variable, declare it once
106  in your global stylesheet and reference it everywhere downstream.
107- The Google Fonts `<link>` is provided in the Typography section.
108  Add it to `<head>` before any component renders.
109 
110### 3 · Component recipes
111 
112Use these recipes verbatim when building the corresponding component.
113 
114#### Buttons
115 
116Four variants are defined. Pick one — never blend variants or invent a fifth.
117 
118- **Primary** — pill shape, bg `#1C1B22`, text `#FFFFFF`, border `1px solid #1C1B22`, padding `13px 26px`, weight `600`, shadow `0 6px 18px -8px rgba(28, 27, 34, 0.22)`.
119- **Secondary** — pill shape, bg `#FFFFFF`, text `#1C1B22`, border `1px solid rgba(28, 27, 34, 0.10)`, padding `13px 26px`, weight `500`.
120- **Outline** — pill shape, text `#1C1B22`, border `1px solid rgba(28, 27, 34, 0.16)`, padding `12px 25px`, weight `500`.
121- **Ghost** — pill shape, text `#6B6973`, padding `12px 6px`, weight `500`.
122 
123Reach for **primary** as the single dominant CTA per screen.
124**Secondary** for the supporting action. **Outline** for tertiary
125actions in toolbars. **Ghost** for inline links and table actions.
126 
127#### Cards
128 
129- Background: `#FFFFFF`
130- Border: `1px solid rgba(28, 27, 34, 0.06)`
131- Shadow: `0 18px 48px -24px rgba(40, 35, 60, 0.14), 0 1px 3px rgba(40, 35, 60, 0.05)`
132- Radius: `radius.lg` (`28px`)
133- Internal padding: `20px` for compact cards, `24–28px` for content cards.
134 
135> This system ships a **glass treatment** — see the Glass token table.
136> Apply `backdrop-filter: blur(0px)` to translucent panes.
137> The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract.
138 
139#### Charts
140 
141- Bar/line variant: `area`
142- No gridlines — let the bars/lines carry the data.
143- Highlight strategy: `last` — emphasize a single bar/point per chart.
144- Use the declared palette in order: `#A088B8`, `#C7B4D8`, `#E0D2EA`.
145 
146#### Typography pairings
147 
148- **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks.
149- **Body (`Manrope`)** — paragraphs, labels, button text, form inputs.
150- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
151 
152### 4 · Hard constraints
153 
154Never do any of the following without explicit instruction from the user:
155 
156- Introduce a new color, font, radius, or shadow that isn't declared above.
157- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
158- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
159- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
160- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
161 
162### 5 · Before you finish — verify
163 
164Run through this checklist for every screen you produce:
165 
166- [ ] Every color used appears in the Colors table above.
167- [ ] Headlines use the display font; body copy uses the body font.
168- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
169- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
170- [ ] Cards and dividers use the declared border + shadow tokens.
171- [ ] No values were invented; if you needed something missing, you stopped and asked.
172 
173---
174 
175## Overview
176Sorbet Tonal is built on one decision: a multi-stop pastel gradient runs across the entire page background — pale lavender, peach, seafoam, cream — but every stop is held at ~25% chroma. The desaturation is what makes it premium. Without it the system would read as a rainbow; with it, the page reads as soft sorbet.
177 
178Cards sit on top in pure paper white. The contrast between the soft gradient page and the bright white cards is the entire design. For wellness brands, mindfulness apps, premium consumer products, journaling tools, anything that should feel calm and considered.
179 
180## The Gradient Recipe
181Four soft radial blobs at the corners, each ~50-55% alpha, layered over a warm cream base:
182 
183```css
184body {
185  background:
186    radial-gradient(at 8% 12%,  rgba(195, 178, 222, 0.55) 0, transparent 42%),  /* lavender */
187    radial-gradient(at 90% 18%, rgba(245, 210, 198, 0.55) 0, transparent 45%),  /* peach */
188    radial-gradient(at 78% 92%, rgba(196, 224, 215, 0.55) 0, transparent 48%),  /* seafoam */
189    radial-gradient(at 14% 88%, rgba(238, 226, 200, 0.50) 0, transparent 45%),  /* cream */
190    #F4EFE9;
191}
192```
193 
194The stops sit at the four corners — never centered, never edge-to-edge — so the gradient feels like ambient light rather than a poster. The 25% chroma cap is non-negotiable; pushing any stop higher tips the page into "vibecoded gradient."
195 
196## Color
197- **Ink #1C1B22** — primary text and primary CTA.
198- **Graphite #6B6973** — secondary text, axis labels.
199- **Mauve #A088B8** — chromatic accent (active state, chart line). Sits inside the gradient family.
200- **Cream #F4EFE9** — page canvas base.
201- **Paper #FFFFFF** — pure white card surface. The contrast is the design.
202 
203## Typography
204**One family — Manrope.** Display, body, all weights covered. The single-family decision keeps the system quiet so the gradient can sing.
205 
206| Role | Size | Weight | Tracking |
207|------|------|--------|----------|
208| Hero | 4.75rem | 600 | -0.035em |
209| H1 | 2.75rem | 600 | -0.028em |
210| H2 | 1.5rem | 600 | -0.015em |
211| Body | 1.0625rem | 400 | -0.003em / 1.7 |
212 
213## Geometry
214- **Radii: 14 / 20 / 28, plus pill.** Generous and soft throughout. The whole system is rounded.
215- **Section gap: 128px** desktop, 80px mobile. The gradient needs room to breathe.
216- **12-column grid** with 28px gutters.
217 
218## Buttons
219- **Primary** — solid ink pill. The gradient is the protagonist; the CTA stays quiet.
220- **Secondary** — pure white pill with a hairline.
221- **Outline** — bare hairline pill.
222- **Ghost** — bare graphite label, hover underline.
223 
224## Cards
225**Pure white surface** on the gradient — no translucency, no glass. The contrast is the entire point. 20px corner radius, 1px ink hairline at 6% opacity, single soft pillowy shadow. Padding 32px minimum.
226 
227## Charts & Data
228Mauve area chart, 2px stroke, 20% fill opacity, no gridlines. End-of-line dot marker. The chart sits inside a white card so the gradient stays in the background.
229 
230## Do's and Don'ts
231- ✅ The gradient is mandatory. The whole identity rests on it.
232- ✅ Hold every gradient stop at ~25% chroma. Desaturation is what makes it premium.
233- ✅ Cards are pure white — never tinted, never glass. The contrast IS the design.
234- ✅ One family (Manrope) for everything. The discipline keeps the gradient as the only voice.
235- ❌ No high-chroma gradient stops. The moment a stop goes saturated, the system dies.
236- ❌ No translucent or tinted cards. White only.
237- ❌ No second chromatic accent beyond mauve.
238- ❌ No sharp corners. The system is soft from canvas to button.
239 
240---
241 
242## Tokens
243 
244> Generated from the same source the live preview renders from.
245> Treat the values below as the contract — never substitute approximations.
246 
247### Colors
248 
249| Role      | Value |
250|-----------|-------|
251| primary   | `#1C1B22` |
252| secondary | `#6B6973` |
253| tertiary  | `#A088B8` |
254| neutral   | `#F4EFE9` |
255| surface   | `#FFFFFF` |
256 
257### Typography
258 
259- **Display:** Manrope
260- **Body:** Manrope
261- **Mono:** JetBrains Mono
262 
263| Role | size / leading / weight / tracking |
264|------|------------------------------------|
265| Hero | 4.75rem / 1.05 / 600 / -0.035em |
266| H1   | 2.75rem / 1.1 / 600 / -0.028em |
267| H2   | 1.5rem / 1.3 / 600 / -0.015em |
268| Body | 1.0625rem / 1.7 / 400 / -0.003em |
269 
270### Radius
271 
272- sm: `14px`
273- md: `20px`
274- lg: `28px`
275- pill: `9999px`
276 
277### Shadows
278 
279- **card:** `0 18px 48px -24px rgba(40, 35, 60, 0.14), 0 1px 3px rgba(40, 35, 60, 0.05)`
280- **button:** `0 6px 18px -8px rgba(28, 27, 34, 0.22)`
281 
282### Borders
283 
284- **card:** `1px solid rgba(28, 27, 34, 0.06)`
285- **divider:** `rgba(28, 27, 34, 0.08)`
286 
287### Glass
288 
289Translucent panes with backdrop-filter — the preview renders cards from these exact values.
290 
291| Property | Value |
292|----------|-------|
293| surface | `#FFFFFF` |
294| blur | `0px` |
295| border | `1px solid rgba(28, 27, 34, 0.06)` |
296| shadow | `0 18px 48px -24px rgba(40, 35, 60, 0.14)` |
297| backdrop | `radial-gradient(at 8% 12%, rgba(195, 178, 222, 0.55) 0px, transparent 42%), radial-gradient(at 90% 18%, rgba(245, 210, 198, 0.55) 0px, transparent 45%), radial-gradient(at 78% 92%, rgba(196, 224, 215, 0.55) 0px, transparent 48%), radial-gradient(at 14% 88%, rgba(238, 226, 200, 0.50) 0px, transparent 45%)` |
298 
299### Buttons
300 
301Four variants, each fully tokenized. The preview renders from these exact values.
302 
303#### Primary
304 
305| Property | Value |
306|----------|-------|
307| shape | `pill` |
308| background | `#1C1B22` |
309| color | `#FFFFFF` |
310| border | `1px solid #1C1B22` |
311| padding | `13px 26px` |
312| fontWeight | `600` |
313| fontSize | `0.9375rem` |
314| tracking | `-0.005em` |
315| shadow | `0 6px 18px -8px rgba(28, 27, 34, 0.22)` |
316 
317#### Secondary
318 
319| Property | Value |
320|----------|-------|
321| shape | `pill` |
322| background | `#FFFFFF` |
323| color | `#1C1B22` |
324| border | `1px solid rgba(28, 27, 34, 0.10)` |
325| padding | `13px 26px` |
326| fontWeight | `500` |
327| fontSize | `0.9375rem` |
328| tracking | `-0.005em` |
329 
330#### Outline
331 
332| Property | Value |
333|----------|-------|
334| shape | `pill` |
335| background | `transparent` |
336| color | `#1C1B22` |
337| border | `1px solid rgba(28, 27, 34, 0.16)` |
338| padding | `12px 25px` |
339| fontWeight | `500` |
340| fontSize | `0.9375rem` |
341| tracking | `-0.005em` |
342 
343#### Ghost
344 
345| Property | Value |
346|----------|-------|
347| shape | `pill` |
348| background | `transparent` |
349| color | `#6B6973` |
350| border | `none` |
351| padding | `12px 6px` |
352| fontWeight | `500` |
353| fontSize | `0.9375rem` |
354| tracking | `-0.005em` |
355| hoverHint | `underline` |
356 
357### Charts
358 
359| Property | Value |
360|----------|-------|
361| variant | `area` |
362| strokeWidth | `2` |
363| fillOpacity | `0.2` |
364| gridlines | `false` |
365| highlight | `last` |
366| dotMarker | `true` |
367| axisColor | `#6B6973` |
368| palette | `#A088B8`, `#C7B4D8`, `#E0D2EA` |
369
03 · 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.
04 · Required setup

Three snippets.

Google Fonts link

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

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Manrope"', 'serif'],
        sans:    ['"Manrope"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#1C1B22',
        secondary: '#6B6973',
        accent:    '#A088B8',
        neutral:   '#F4EFE9',
        surface:   '#FFFFFF',
      },
      borderRadius: {
        sm: '14px',
        md: '20px',
        lg: '28px',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Dark Terminal

Emerald on near-black. Monospace developer aesthetic with thin borders.

darkminimalbrutalist
Dark.app
ProductPricingDocsAbout
Sign inGet started
dark · minimal · brutalist

Build with Dark Terminal.

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

Kinfolk Stone

Wabi-sabi calm. Warm stone and oat tones, asymmetric editorial layout, crimson hairline accent, classical serif lyrics. Slow, considered, quietly luxurious.

editorialminimallightmagazine
Kinfolk.app
ProductPricingDocsAbout
Sign inGet started
editorial · minimal · light

Build with Kinfolk Stone.

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