design.md
Back to directory
saas · playful · minimal · modern

Soft Pastel SaaS.

Lavender and cream, generous rounding, friendly and approachable.

01 · Preview

The kitchen sink.

Soft.app
ProductPricingDocsAbout
Sign inGet started
saas · playful · minimal

Build with Soft Pastel SaaS.

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
#1F1B2E
secondary
#6B6280
tertiary
#A78BFA
neutral
#FEF7ED
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
8px
md
10px
lg
12px
pill
999px
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 · Pro tokens

The states behind the resting style.

ArchetypeSoft

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected
Account
sam@studio.com
dragging

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
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: Inter
13  body:    Inter
14  mono:    "JetBrains Mono"
15radius:
16  sm: 8px
17  md: 10px
18  lg: 12px
19buttons:
20  primary:
21    background: #A78BFA
22    color: #1F1B2E
23    border: none
24    shape: rounded
25    padding: 12px 20px
26    font: 600
27    shadow: 0 1px 2px rgba(167,139,250,0.25)
28  secondary:
29    background: #FEF7ED
30    color: #1F1B2E
31    border: none
32    shape: rounded
33    padding: 12px 20px
34    font: 600
35  outline:
36    background: #FFFFFF
37    color: #1F1B2E
38    border: 1px solid #EFE6D8
39    shape: rounded
40    padding: 12px 20px
41    font: 600
42  ghost:
43    background: transparent
44    color: #A78BFA
45    border: none
46    shape: rounded
47    padding: 10px 14px
48    font: 600
49fonts_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 SaaS
54 
55## AI Build Instructions
56 
57> **Read this section before writing any code.** The rules below
58> are non-negotiable. Every value used in the UI must come from this
59> file's frontmatter — never substitute, approximate, or invent new
60> colors, fonts, radii, or shadows. If a value is missing, ask the
61> user before adding one.
62 
63### 1 · Your role
64 
65You are building UI for a project that has adopted **Soft Pastel SaaS** as its
66design system. Treat `DESIGN.md` as the single source of truth.
67Your job is to translate the user's product requirements into
68components and pages that look like they were designed by the same
69person who authored this file.
70 
71### 2 · Token compliance
72 
73- Pull every color, font family, radius, shadow, and spacing value
74  from the frontmatter at the top of this file.
75- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
76  hard-code hex values that bypass the system.
77- When a token can be expressed as a CSS variable, declare it once
78  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 recipes
83 
84Use these recipes verbatim when building the corresponding component.
85 
86#### Buttons
87 
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 tertiary
97actions in toolbars. **Ghost** for inline links and table actions.
98 
99#### Cards
100 
101- Background: `#FFFFFF`
102- Radius: `radius.lg` (`12px`)
103- Internal padding: `20px` for compact cards, `24–28px` for content cards.
104 
105#### Typography pairings
106 
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 constraints
112 
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 — verify
122 
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## Overview
135A 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## Colors
138- **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## Typography
145**Inter** for everything. Tight tracking on display, comfortable line-height on body.
146 
147## Spacing
1484px grid. Generous: aim for 88px between sections.
149 
150## Components
151Soft 12px radii. Light shadows. Lavender CTAs with dark text for contrast.
152 
153## Icons
154`lucide-react`, stroke width 1.5, 20px default. Inherit text color.
155 
156## Do's and Don'ts
157- ✅ 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## Tokens
165 
166> Generated from the same source the live preview renders from.
167> Treat the values below as the contract — never substitute approximations.
168 
169### Colors
170 
171| Role      | Value |
172|-----------|-------|
173| primary   | `#1F1B2E` |
174| secondary | `#6B6280` |
175| tertiary  | `#A78BFA` |
176| neutral   | `#FEF7ED` |
177| surface   | `#FFFFFF` |
178 
179### Typography
180 
181- **Display:** Inter
182- **Body:** Inter
183- **Mono:** JetBrains Mono
184 
185### Radius
186 
187- sm: `8px`
188- md: `10px`
189- lg: `12px`
190 
191### Buttons
192 
193Four variants, each fully tokenized. The preview renders from these exact values.
194 
195#### Primary
196 
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#### Secondary
208 
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#### Outline
219 
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#### Ghost
230 
231| Property | Value |
232|----------|-------|
233| shape | `rounded` |
234| background | `transparent` |
235| color | `#A78BFA` |
236| border | `none` |
237| padding | `10px 14px` |
238| fontWeight | `600` |
239 
240---
241 
242## Pro tokens
243 
244> Production-fidelity tokens. States, density, motion, elevation,
245> content rules and a measured WCAG contract — derived from the
246> resting tokens unless explicitly authored.
247 
248### States
249 
250#### Button
251 
252- **hover** — shadow: `0 8px 24px -10px rgba(167, 139, 250, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)`
253- **focus** — outline: `2px solid rgba(167, 139, 250, 0.4)`, outline-offset: `3px`
254- **active** — transform: `translateY(0) scale(0.98)`
255- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
256- **loading** — opacity: `0.65`
257- **selected** — bg: `rgba(167, 139, 250, 0.18)`, color: `#A78BFA`
258 
259#### Input
260 
261- **hover** — bg: `rgba(167, 139, 250, 0.03)`, border: `1px solid rgba(167, 139, 250, 0.4)`
262- **focus** — border: `1px solid rgba(167, 139, 250, 0.6)`, shadow: `0 0 0 4px rgba(167, 139, 250, 0.12)`
263- **disabled** — opacity: `0.4`
264- **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)`
265 
266#### Card
267 
268- **hover** — shadow: `0 16px 40px -16px rgba(167, 139, 250, 0.3)`, transform: `translateY(-3px)`
269- **selected** — bg: `rgba(167, 139, 250, 0.04)`, border: `1px solid rgba(167, 139, 250, 0.5)`
270- **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92`
271 
272#### Tab
273 
274- **hover** — bg: `rgba(167, 139, 250, 0.08)`, color: `#A78BFA`
275- **focus** — outline: `2px solid rgba(167, 139, 250, 0.4)`, outline-offset: `2px`
276- **selected** — bg: `rgba(167, 139, 250, 0.16)`, color: `#A78BFA`
277 
278### Density
279 
280| Mode | padding × | row × | body | radius × | Use for |
281|------|-----------|-------|------|----------|---------|
282| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
283| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
284| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
285 
286### Motion
287 
288**Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive.
289 
290```css
291transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
292```
293 
294| Token | Value |
295|-------|-------|
296| duration.instant | `120ms` |
297| duration.fast | `240ms` |
298| duration.base | `400ms` |
299| duration.slow | `600ms` |
300| easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` |
301| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
302| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
303| easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` |
304 
305### Elevation
306 
307Five-level scale, system-specific recipe.
308 
309| Level | Shadow | Recipe |
310|-------|--------|--------|
311| level0 | `none` | Flat — the tone separates, not the shadow. |
312| level1 | `0 2px 6px -2px rgba(167, 139, 250, 0.12)` | Soft tinted lift. |
313| level2 | `0 8px 24px -10px rgba(167, 139, 250, 0.2)` | Floating card — pastel-tinted shadow. |
314| level3 | `0 16px 48px -16px rgba(167, 139, 250, 0.28)` | Sheet — visible tinted glow. |
315| level4 | `0 32px 80px -24px rgba(167, 139, 250, 0.4)` | Modal — tinted wash, scrim required. |
316 
317### Content
318 
319- **measure:** `64ch` (max line length for body prose)
320- **paragraph spacing:** `1.35em`
321- **list indent:** `1.5em`
322- **list gap:** `0.6em`
323- **link:** color `#A78BFA`, underline `hover`
324- **blockquote:** border `2px solid rgba(167, 139, 250, 0.5)`, padding `0.9em 1.2em`
325- **code:** background `rgba(167, 139, 250, 0.1)`, color `#1F1B2E`
326 
327### Accessibility (WCAG 2.1)
328 
329**Overall:** FAIL
330 
331| Pair | Ratio | Required | Grade | Suggested fix |
332|------|-------|----------|-------|---------------|
333| Body text on surface | 16.74:1 | AA | AAA | — |
334| Body text on canvas | 15.74:1 | AA | AAA | — |
335| Muted text on surface | 5.7:1 | AA | AA | — |
336| Accent on surface | 2.72:1 | AA-Large | FAIL | `#7a50f7` → 4.86:1 (AA) |
337| Accent on canvas | 2.56:1 | AA-Large | FAIL | `#7a50f7` → 4.57:1 (AA) |
338
04 · 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.
05 · Required setup

Three snippets.

Google Fonts link

html
<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" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export 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',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Tide Material

tonal-surface with a teal seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The tonal-surface spec applied to a calm aqua palette.

saasmaterialminimalmodernlight
Tide.app
ProductPricingDocsAbout
Sign inGet started
saas · material · minimal

Build with Tide Material.

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

Indigo Bone

Radical two-color: deep indigo and warm bone, nothing else. Cool but editorial — never electric. Considered serif/sans pairing, refined 6px corners, no shadows. Discipline and quiet authority.

duotoneeditorialminimalpremiummodern
Indigo.app
ProductPricingDocsAbout
Sign inGet started
duotone · editorial · minimal

Build with Indigo Bone.

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