Lavender and cream, generous rounding, friendly and approachable.
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.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
1---2name: "Soft Pastel SaaS"3description: "Lavender and cream, generous rounding, friendly and approachable."4tags: [saas, playful, minimal, modern]5colors:6 primary: "#1F1B2E"7 secondary: "#6B6280"8 tertiary: "#A78BFA"9 neutral: "#FEF7ED"10 surface: "#FFFFFF"11typography:12 display: Inter13 body: Inter14 mono: "JetBrains Mono"15radius:16 sm: 8px17 md: 10px18 lg: 12px19buttons:20 primary:21 background: #A78BFA22 color: #1F1B2E23 border: none24 shape: rounded25 padding: 12px 20px26 font: 60027 shadow: 0 1px 2px rgba(167,139,250,0.25)28 secondary:29 background: #FEF7ED30 color: #1F1B2E31 border: none32 shape: rounded33 padding: 12px 20px34 font: 60035 outline:36 background: #FFFFFF37 color: #1F1B2E38 border: 1px solid #EFE6D839 shape: rounded40 padding: 12px 20px41 font: 60042 ghost:43 background: transparent44 color: #A78BFA45 border: none46 shape: rounded47 padding: 10px 14px48 font: 60049fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"50dependencies: ["lucide-react"]51---52 53# Soft Pastel SaaS54 55## AI Build Instructions56 57> **Read this section before writing any code.** The rules below58> are non-negotiable. Every value used in the UI must come from this59> file's frontmatter — never substitute, approximate, or invent new60> colors, fonts, radii, or shadows. If a value is missing, ask the61> user before adding one.62 63### 1 · Your role64 65You are building UI for a project that has adopted **Soft Pastel SaaS** as its66design system. Treat `DESIGN.md` as the single source of truth.67Your job is to translate the user's product requirements into68components and pages that look like they were designed by the same69person who authored this file.70 71### 2 · Token compliance72 73- Pull every color, font family, radius, shadow, and spacing value74 from the frontmatter at the top of this file.75- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never76 hard-code hex values that bypass the system.77- When a token can be expressed as a CSS variable, declare it once78 in your global stylesheet and reference it everywhere downstream.79- The Google Fonts `<link>` is provided in the Typography section.80 Add it to `<head>` before any component renders.81 82### 3 · Component recipes83 84Use these recipes verbatim when building the corresponding component.85 86#### Buttons87 88Four variants are defined. Pick one — never blend variants or invent a fifth.89 90- **Primary** — rounded shape, bg `#A78BFA`, text `#1F1B2E`, padding `12px 20px`, weight `600`, shadow `0 1px 2px rgba(167,139,250,0.25)`.91- **Secondary** — rounded shape, bg `#FEF7ED`, text `#1F1B2E`, padding `12px 20px`, weight `600`.92- **Outline** — rounded shape, bg `#FFFFFF`, text `#1F1B2E`, border `1px solid #EFE6D8`, padding `12px 20px`, weight `600`.93- **Ghost** — rounded shape, text `#A78BFA`, padding `10px 14px`, weight `600`.94 95Reach for **primary** as the single dominant CTA per screen.96**Secondary** for the supporting action. **Outline** for tertiary97actions in toolbars. **Ghost** for inline links and table actions.98 99#### Cards100 101- Background: `#FFFFFF`102- Radius: `radius.lg` (`12px`)103- Internal padding: `20px` for compact cards, `24–28px` for content cards.104 105#### Typography pairings106 107- **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks.108- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.109- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.110 111### 4 · Hard constraints112 113Never do any of the following without explicit instruction from the user:114 115- Introduce a new color, font, radius, or shadow that isn't declared above.116- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).117- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.118- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.119- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.120 121### 5 · Before you finish — verify122 123Run through this checklist for every screen you produce:124 125- [ ] Every color used appears in the Colors table above.126- [ ] Headlines use the display font; body copy uses the body font.127- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).128- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.129- [ ] Cards and dividers use the declared border + shadow tokens.130- [ ] No values were invented; if you needed something missing, you stopped and asked.131 132---133 134## Overview135A modern SaaS aesthetic with warmth. Pastel lavender on cream — approachable but professional. Rounded corners and soft shadows give the UI a tactile, friendly feel.136 137## Colors138- **Primary #1F1B2E** — deep aubergine, used for text.139- **Secondary #6B6280** — muted text.140- **Tertiary #A78BFA** — lavender accent. Used on primary CTAs and highlights.141- **Neutral #FEF7ED** — cream background.142- **Surface #FFFFFF** — cards.143 144## Typography145**Inter** for everything. Tight tracking on display, comfortable line-height on body.146 147## Spacing1484px grid. Generous: aim for 88px between sections.149 150## Components151Soft 12px radii. Light shadows. Lavender CTAs with dark text for contrast.152 153## Icons154`lucide-react`, stroke width 1.5, 20px default. Inherit text color.155 156## Do's and Don'ts157- ✅ Use lavender on primary actions.158- ✅ Soft shadows (max 4–6px blur).159- ❌ Don't use sharp corners.160- ❌ Don't pair with bright saturated colors.161 162---163 164## Tokens165 166> Generated from the same source the live preview renders from.167> Treat the values below as the contract — never substitute approximations.168 169### Colors170 171| Role | Value |172|-----------|-------|173| primary | `#1F1B2E` |174| secondary | `#6B6280` |175| tertiary | `#A78BFA` |176| neutral | `#FEF7ED` |177| surface | `#FFFFFF` |178 179### Typography180 181- **Display:** Inter182- **Body:** Inter183- **Mono:** JetBrains Mono184 185### Radius186 187- sm: `8px`188- md: `10px`189- lg: `12px`190 191### Buttons192 193Four variants, each fully tokenized. The preview renders from these exact values.194 195#### Primary196 197| Property | Value |198|----------|-------|199| shape | `rounded` |200| background | `#A78BFA` |201| color | `#1F1B2E` |202| border | `none` |203| padding | `12px 20px` |204| fontWeight | `600` |205| shadow | `0 1px 2px rgba(167,139,250,0.25)` |206 207#### Secondary208 209| Property | Value |210|----------|-------|211| shape | `rounded` |212| background | `#FEF7ED` |213| color | `#1F1B2E` |214| border | `none` |215| padding | `12px 20px` |216| fontWeight | `600` |217 218#### Outline219 220| Property | Value |221|----------|-------|222| shape | `rounded` |223| background | `#FFFFFF` |224| color | `#1F1B2E` |225| border | `1px solid #EFE6D8` |226| padding | `12px 20px` |227| fontWeight | `600` |228 229#### Ghost230 231| Property | Value |232|----------|-------|233| shape | `rounded` |234| background | `transparent` |235| color | `#A78BFA` |236| border | `none` |237| padding | `10px 14px` |238| fontWeight | `600` |239 # 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.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Inter"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1F1B2E', secondary: '#6B6280', accent: '#A78BFA', neutral: '#FEF7ED', surface: '#FFFFFF', }, borderRadius: { sm: '8px', md: '10px', lg: '12px', }, }, },};Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm.
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.
Warm vellum paper canvas, humanist sans at quiet sizes, refined 6px corners, no shadows — only a faint warm hairline. One deep moss accent. Calibrated to feel like a well-set page in a notebook.
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.