1---
2name: "Pastel Mesh"
3description: "The design.md house style — Source Serif 4 with blue italic accent words, soft pastel mesh background (peach, lavender, mint), translucent glass panes with hairline borders, and a single deep editorial blue pill CTA."
4tags: [minimal, light, premium, glass, modern]
5colors:
6  primary:   "#15192B"
7  secondary: "#697084"
8  tertiary:  "#0071E3"
9  neutral:   "#F8F9FB"
10  surface:   "#FFFFFF"
11typography:
12  display: "Source Serif 4"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.5rem / 1.02 / 600 / -0.02em"
17    h1:   "2.75rem / 1.05 / 600 / -0.02em"
18    h2:   "1.5rem / 1.25 / 600 / -0.015em"
19    body: "1.0625rem / 1.6 / 400 / -0.005em"
20radius:
21  sm: 6px
22  md: 10px
23  lg: 16px
24  pill: 9999px
25shadows:
26  card:   "inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 12px -4px rgba(15, 23, 42, 0.04)"
27  button: none
28borders:
29  card:    "1px solid rgba(15, 23, 42, 0.08)"
30  divider: "rgba(15, 23, 42, 0.06)"
31glass:
32  surface: "rgba(255, 255, 255, 0.62)"
33  blur:    20px
34  saturate: 160%
35  border:  "1px solid rgba(15, 23, 42, 0.08)"
36  shadow:  "0 2px 12px -4px rgba(15, 23, 42, 0.04)"
37  inner_highlight: "inset 0 1px 0 rgba(255, 255, 255, 0.50)"
38  backdrop: "radial-gradient(ellipse 80% 50% at 15% 0%, rgba(186, 213, 255, 0.45) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 85% 10%, rgba(255, 200, 230, 0.38) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(190, 240, 220, 0.35) 0%, transparent 70%), #F8F9FB"
39buttons:
40  primary:
41    background: #0071E3
42    color: #FFFFFF
43    border: 1px solid #0071E3
44    shape: pill
45    padding: 13px 24px
46    font: 500 / 0.9375rem / -0.005em
47  secondary:
48    background: rgba(255, 255, 255, 0.62)
49    color: #15192B
50    border: 1px solid rgba(15, 23, 42, 0.08)
51    shape: pill
52    padding: 13px 24px
53    font: 500 / 0.9375rem / -0.005em
54    backdrop_blur: 12px
55    backdrop_saturate: 140%
56  outline:
57    background: rgba(255, 255, 255, 0.45)
58    color: #15192B
59    border: 1px solid rgba(15, 23, 42, 0.10)
60    shape: pill
61    padding: 12px 22px
62    font: 500 / 0.9375rem / -0.005em
63    backdrop_blur: 12px
64    backdrop_saturate: 140%
65  ghost:
66    background: transparent
67    color: #0071E3
68    border: none
69    shape: pill
70    padding: 11px 6px
71    font: 500 / 0.9375rem / -0.005em
72    hover: underline
73charts:
74  variant: line
75  stroke_width: 2
76  gridlines: false
77  highlight: last
78  dot_marker: true
79  axis_color: "#697084"
80  palette: ["#0071E3", "#15192B", "#697084"]
81fonts_url: "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
82dependencies: ["lucide-react"]
83---
84 
85# Pastel Mesh
86 
87## AI Build Instructions
88 
89> **Read this section before writing any code.** The rules below
90> are non-negotiable. Every value used in the UI must come from this
91> file's frontmatter — never substitute, approximate, or invent new
92> colors, fonts, radii, or shadows. If a value is missing, ask the
93> user before adding one.
94 
95### 1 · Your role
96 
97You are building UI for a project that has adopted **Pastel Mesh** as its
98design system. Treat `DESIGN.md` as the single source of truth.
99Your job is to translate the user's product requirements into
100components and pages that look like they were designed by the same
101person who authored this file.
102 
103### 2 · Token compliance
104 
105- Pull every color, font family, radius, shadow, and spacing value
106  from the frontmatter at the top of this file.
107- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
108  hard-code hex values that bypass the system.
109- When a token can be expressed as a CSS variable, declare it once
110  in your global stylesheet and reference it everywhere downstream.
111- The Google Fonts `<link>` is provided in the Typography section.
112  Add it to `<head>` before any component renders.
113 
114### 3 · Component recipes
115 
116Use these recipes verbatim when building the corresponding component.
117 
118#### Buttons
119 
120Four variants are defined. Pick one — never blend variants or invent a fifth.
121 
122- **Primary** — pill shape, bg `#0071E3`, text `#FFFFFF`, border `1px solid #0071E3`, padding `13px 24px`, weight `500`.
123- **Secondary** — pill shape, bg `rgba(255, 255, 255, 0.62)`, text `#15192B`, border `1px solid rgba(15, 23, 42, 0.08)`, padding `13px 24px`, weight `500`.
124- **Outline** — pill shape, bg `rgba(255, 255, 255, 0.45)`, text `#15192B`, border `1px solid rgba(15, 23, 42, 0.10)`, padding `12px 22px`, weight `500`.
125- **Ghost** — pill shape, text `#0071E3`, padding `11px 6px`, weight `500`.
126 
127Reach for **primary** as the single dominant CTA per screen.
128**Secondary** for the supporting action. **Outline** for tertiary
129actions in toolbars. **Ghost** for inline links and table actions.
130 
131#### Cards
132 
133- Background: `#FFFFFF`
134- Border: `1px solid rgba(15, 23, 42, 0.08)`
135- Shadow: `inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 12px -4px rgba(15, 23, 42, 0.04)`
136- Radius: `radius.lg` (`16px`)
137- Internal padding: `20px` for compact cards, `24–28px` for content cards.
138 
139> This system ships a **glass treatment** — see the Glass token table.
140> Apply `backdrop-filter: blur(20px)` to translucent panes.
141> The page must have a backdrop (gradient mesh / blurred orbs) for glass to refract.
142 
143#### Charts
144 
145- Bar/line variant: `line`
146- No gridlines — let the bars/lines carry the data.
147- Highlight strategy: `last` — emphasize a single bar/point per chart.
148- Use the declared palette in order: `#0071E3`, `#15192B`, `#697084`.
149 
150#### Typography pairings
151 
152- **Display (`Source Serif 4`)** — h1, h2, hero headlines, brand wordmarks.
153- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
154- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
155 
156### 4 · Hard constraints
157 
158Never do any of the following without explicit instruction from the user:
159 
160- Introduce a new color, font, radius, or shadow that isn't declared above.
161- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
162- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
163- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
164- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
165 
166### 5 · Before you finish — verify
167 
168Run through this checklist for every screen you produce:
169 
170- [ ] Every color used appears in the Colors table above.
171- [ ] Headlines use the display font; body copy uses the body font.
172- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
173- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
174- [ ] Cards and dividers use the declared border + shadow tokens.
175- [ ] No values were invented; if you needed something missing, you stopped and asked.
176 
177---
178 
179## Overview
180Pastel Mesh is the in-house language of **design.md** itself — a modern minimal hybrid built on a soft pastel mesh background, translucent glass panes with hairline borders, and a single deep editorial blue accent that lives in italic display words and the primary CTA.
181 
182The whole system runs on **three quiet ideas**:
1831. A near-white canvas with a soft pastel mesh (peach + lavender + mint radial blooms) sitting above it.
1842. Translucent white glass panes (62% white + 20px blur + 1px hairline) for every surface.
1853. **One** blue. It appears as italic Source Serif accent words, the primary pill CTA, the mono eyebrow tags, and the chart line. Nowhere else.
186 
187This is for product marketing, design tooling, modern editorial, and any brand that wants to feel calm, precise, and a little bit premium.
188 
189## The Mesh Background
190The signature backdrop is a three-radial pastel mesh on a near-white canvas. It's faint — never above 45% opacity on any single bloom. Use it on the page `<body>`, fixed-attachment, no repeat:
191 
192```css
193body {
194  background-color: #F8F9FB;
195  background-image:
196    radial-gradient(ellipse 80% 50% at 15% 0%,   rgba(186, 213, 255, 0.45), transparent 60%),
197    radial-gradient(ellipse 70% 50% at 85% 10%,  rgba(255, 200, 230, 0.38), transparent 60%),
198    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(190, 240, 220, 0.35), transparent 70%);
199  background-attachment: fixed;
200  background-repeat: no-repeat;
201}
202```
203 
204The blooms live at the **edges** — top-left blue, top-right pink, bottom-center mint. The center stays clean so reading is never compromised.
205 
206## The Italic Accent (signature)
207Source Serif 4 italic in **editorial-blue #0071E3** is the system's voice. It appears in hero headlines as the closing phrase, and occasionally inside section titles:
208 
209> Free design.md files library *for your coding tool.*
210 
211> Three steps. *No setup.*
212 
213Apply it with a normal-weight italic span — never bold, never roman:
214 
215```tsx
216<h1 className="font-display font-semibold tracking-tight">
217  Free design.md files library{" "}
218  <em className="italic font-normal text-[#0071E3]">for your coding tool.</em>
219</h1>
220```
221 
222The italic should be the **last 2–4 words** of the headline. It's the rhythmic closer.
223 
224## Color
225- **Near-Black #15192B** — primary text. Cool cast harmonizes with the blue accent.
226- **Slate #697084** — captions, meta, axis labels.
227- **Editorial Blue #0071E3** — the single accent. Italic display, primary CTA, mono eyebrows.
228- **Off-White #F8F9FB** — page canvas (the mesh sits above it).
229- **Paper #FFFFFF** — pure white card fill.
230 
231**No second accent exists.** editorial blue carries everything chromatic.
232 
233## Typography
234- **Display: Source Serif 4** at 4.5rem / 600, -2% tracking. The italic style at 400 weight is reserved for the blue accent.
235- **Body: Inter** at 1.0625rem with **1.6 leading**.
236- **Mono: JetBrains Mono** at 0.6875rem, +18% tracking, uppercase, in editorial blue. Used for eyebrow tags like `00 · THE DIRECTORY`.
237 
238| Role | Font | Size | Weight | Style |
239|------|------|------|--------|-------|
240| Hero | Source Serif 4 | 4.5rem | 600 | Roman + 400 italic blue accent |
241| H1 | Source Serif 4 | 2.75rem | 600 | Same |
242| H2 | Source Serif 4 | 1.5rem | 600 | Same |
243| Body | Inter | 1.0625rem | 400 | -0.005em / 1.6 |
244| Eyebrow | JetBrains Mono | 0.6875rem | 500 | UPPER, +0.18em, blue |
245 
246## Glass Panes
247Three glass tiers, all on the mesh backdrop:
248 
249- **Subtle** — 45% white, 12px blur, 140% saturate. For headers, secondary buttons.
250- **Default** — 62% white, 20px blur, 160% saturate. For cards, How-It-Works strips.
251- **Strong** — 78% white, 28px blur, 180% saturate. For modals, popovers.
252 
253Every glass surface carries:
254- 1px hairline border at `rgba(15, 23, 42, 0.08)`.
255- An inner top highlight: `inset 0 1px 0 rgba(255, 255, 255, 0.5)`.
256- A whisper drop shadow: `0 2px 12px -4px rgba(15, 23, 42, 0.04)`.
257 
258Never use heavy shadows. The hairline + the inner highlight IS the elevation.
259 
260## Buttons
261All four are **pills** (9999px radius). The editorial-blue primary is the only solid fill in the system.
262 
263- **Primary** — solid editorial blue, white label, no shadow. The single chromatic moment.
264- **Secondary** — translucent glass pill (62% white, 12px blur), hairline slate border.
265- **Outline** — softer glass pill (45% white) with a slightly firmer hairline.
266- **Ghost** — bare editorial-blue label, hover underline.
267 
268**No drop shadows on any button.** The pill form + the hairline carries the gesture.
269 
270## Cards
271Default glass pane (62% white + 20px blur + hairline). Radius is **24px** on hero strips, **16px** on standard cards. Cards lift with the inner highlight, never with a halo.
272 
273## Charts & Data
274A single 2px editorial-blue line over the mesh. **No gridlines, no fills.** A small blue dot at the latest reading. Axis labels in slate.
275 
276## Do's and Don'ts
277- ✅ The mesh background is mandatory. It's the system's atmosphere.
278- ✅ Italic Source Serif blue closes every hero headline. 2–4 words, always italic, always 400 weight.
279- ✅ Mono eyebrow numerals in editorial blue: `00 · SECTION NAME`. Section markers.
280- ✅ Pill buttons everywhere. The 9999px radius is the system.
281- ❌ No second accent color. editorial blue is alone.
282- ❌ No deep drop shadows. Hairline + inner highlight IS the elevation.
283- ❌ No bold italic. The italic accent is always 400 weight.
284- ❌ No mesh in the center of the page — the blooms live at edges so reading stays clean.
285 
286---
287 
288## Tokens
289 
290> Generated from the same source the live preview renders from.
291> Treat the values below as the contract — never substitute approximations.
292 
293### Colors
294 
295| Role      | Value |
296|-----------|-------|
297| primary   | `#15192B` |
298| secondary | `#697084` |
299| tertiary  | `#0071E3` |
300| neutral   | `#F8F9FB` |
301| surface   | `#FFFFFF` |
302 
303### Typography
304 
305- **Display:** Source Serif 4
306- **Body:** Inter
307- **Mono:** JetBrains Mono
308 
309| Role | size / leading / weight / tracking |
310|------|------------------------------------|
311| Hero | 4.5rem / 1.02 / 600 / -0.02em |
312| H1   | 2.75rem / 1.05 / 600 / -0.02em |
313| H2   | 1.5rem / 1.25 / 600 / -0.015em |
314| Body | 1.0625rem / 1.6 / 400 / -0.005em |
315 
316### Radius
317 
318- sm: `6px`
319- md: `10px`
320- lg: `16px`
321- pill: `9999px`
322 
323### Shadows
324 
325- **card:** `inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 12px -4px rgba(15, 23, 42, 0.04)`
326- **button:** `none`
327 
328### Borders
329 
330- **card:** `1px solid rgba(15, 23, 42, 0.08)`
331- **divider:** `rgba(15, 23, 42, 0.06)`
332 
333### Glass
334 
335Translucent panes with backdrop-filter — the preview renders cards from these exact values.
336 
337| Property | Value |
338|----------|-------|
339| surface | `rgba(255, 255, 255, 0.62)` |
340| blur | `20px` |
341| saturate | `160%` |
342| border | `1px solid rgba(15, 23, 42, 0.08)` |
343| shadow | `0 2px 12px -4px rgba(15, 23, 42, 0.04)` |
344| innerHighlight | `inset 0 1px 0 rgba(255, 255, 255, 0.50)` |
345| backdrop | `radial-gradient(ellipse 80% 50% at 15% 0%, rgba(186, 213, 255, 0.45) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 85% 10%, rgba(255, 200, 230, 0.38) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(190, 240, 220, 0.35) 0%, transparent 70%), #F8F9FB` |
346 
347### Buttons
348 
349Four variants, each fully tokenized. The preview renders from these exact values.
350 
351#### Primary
352 
353| Property | Value |
354|----------|-------|
355| shape | `pill` |
356| background | `#0071E3` |
357| color | `#FFFFFF` |
358| border | `1px solid #0071E3` |
359| padding | `13px 24px` |
360| fontWeight | `500` |
361| fontSize | `0.9375rem` |
362| tracking | `-0.005em` |
363 
364#### Secondary
365 
366| Property | Value |
367|----------|-------|
368| shape | `pill` |
369| background | `rgba(255, 255, 255, 0.62)` |
370| color | `#15192B` |
371| border | `1px solid rgba(15, 23, 42, 0.08)` |
372| padding | `13px 24px` |
373| fontWeight | `500` |
374| fontSize | `0.9375rem` |
375| tracking | `-0.005em` |
376| backdropBlur | `12px` |
377| backdropSaturate | `140%` |
378 
379#### Outline
380 
381| Property | Value |
382|----------|-------|
383| shape | `pill` |
384| background | `rgba(255, 255, 255, 0.45)` |
385| color | `#15192B` |
386| border | `1px solid rgba(15, 23, 42, 0.10)` |
387| padding | `12px 22px` |
388| fontWeight | `500` |
389| fontSize | `0.9375rem` |
390| tracking | `-0.005em` |
391| backdropBlur | `12px` |
392| backdropSaturate | `140%` |
393 
394#### Ghost
395 
396| Property | Value |
397|----------|-------|
398| shape | `pill` |
399| background | `transparent` |
400| color | `#0071E3` |
401| border | `none` |
402| padding | `11px 6px` |
403| fontWeight | `500` |
404| fontSize | `0.9375rem` |
405| tracking | `-0.005em` |
406| hoverHint | `underline` |
407 
408### Charts
409 
410| Property | Value |
411|----------|-------|
412| variant | `line` |
413| strokeWidth | `2` |
414| gridlines | `false` |
415| highlight | `last` |
416| dotMarker | `true` |
417| axisColor | `#697084` |
418| palette | `#0071E3`, `#15192B`, `#697084` |
419