design.md
Back to directory
saas · warm · minimal · modern · premium

Mallow SaaS.

A soft modern SaaS surface with the warmth of a marshmallow. Cream-mallow page background, butter-soft cards with generous radius, Manrope for UI and DM Mono for figures, a single muted lavender accent reserved for the primary CTA and the active sidebar item. Built for early-stage product pages, friendly B2C dashboards, and onboarding flows that need to feel approachable without going saccharine.

01 · Preview

The kitchen sink.

Mallow.app
ProductPricingDocsAbout
Sign inGet started
saas · warm · minimal

Build with Mallow 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
#231F2A
secondary
#76707D
tertiary
#231F2A
neutral
#ECE4D9
surface
#F4ECE0
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
14px
lg
20px
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 · 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: "Mallow SaaS"
3description: "A soft modern SaaS surface with the warmth of a marshmallow. Cream-mallow page background, butter-soft cards with generous radius, Manrope for UI and DM Mono for figures, a single muted lavender accent reserved for the primary CTA and the active sidebar item. Built for early-stage product pages, friendly B2C dashboards, and onboarding flows that need to feel approachable without going saccharine."
4tags: [saas, warm, minimal, modern, premium]
5colors:
6  primary:   "#231f2a"
7  secondary: "#76707d"
8  tertiary:  "#231f2a"
9  neutral:   "#ece4d9"
10  surface:   "#f4ece0"
11typography:
12  display: Manrope
13  body:    Manrope
14  mono:    "DM Mono"
15  scale:
16    hero: "4.5rem / 1.05 / 700 / -0.03em"
17    h1:   "2.75rem / 1.12 / 700 / -0.022em"
18    h2:   "1.625rem / 1.25 / 600 / -0.012em"
19    body: "1.0625rem / 1.62 / 400 / -0.005em"
20radius:
21  sm: 8px
22  md: 14px
23  lg: 20px
24  pill: 9999px
25shadows:
26  card:   "rgba(35,31,42,0.04) 0 1px 2px, rgba(35,31,42,0.04) 0 8px 28px -10px"
27  button: none
28borders:
29  card:    "1px solid rgba(35,31,42,0.06)"
30  divider: rgba(35,31,42,0.10)
31buttons:
32  primary:
33    background: #5d4a8a
34    color: #f4ece0
35    border: none
36    shape: rounded
37    padding: 11px 22px
38    font: 600 / 0.875rem
39  secondary:
40    background: #ffffff
41    color: #231f2a
42    border: 1px solid rgba(35,31,42,0.10)
43    shape: rounded
44    padding: 11px 22px
45    font: 500 / 0.875rem
46  outline:
47    background: transparent
48    color: #231f2a
49    border: 1px solid rgba(35,31,42,0.16)
50    shape: rounded
51    padding: 11px 22px
52    font: 500 / 0.875rem
53  ghost:
54    background: transparent
55    color: #76707d
56    border: none
57    shape: rounded
58    padding: 11px 16px
59    font: 500 / 0.875rem
60charts:
61  variant: "rounded-bars"
62  stroke_width: 1.5
63  fill_opacity: 0.1
64  gridlines: false
65  bar_gap: 6px
66  highlight: single
67  dot_marker: true
68fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Mallow SaaS
73 
74## AI Build Instructions
75 
76> **Read this section before writing any code.** The rules below
77> are non-negotiable. Every value used in the UI must come from this
78> file's frontmatter — never substitute, approximate, or invent new
79> colors, fonts, radii, or shadows. If a value is missing, ask the
80> user before adding one.
81 
82### 1 · Your role
83 
84You are building UI for a project that has adopted **Mallow SaaS** as its
85design system. Treat `DESIGN.md` as the single source of truth.
86Your job is to translate the user's product requirements into
87components and pages that look like they were designed by the same
88person who authored this file.
89 
90### 2 · Token compliance
91 
92- Pull every color, font family, radius, shadow, and spacing value
93  from the frontmatter at the top of this file.
94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
95  hard-code hex values that bypass the system.
96- When a token can be expressed as a CSS variable, declare it once
97  in your global stylesheet and reference it everywhere downstream.
98- The Google Fonts `<link>` is provided in the Typography section.
99  Add it to `<head>` before any component renders.
100 
101### 3 · Component recipes
102 
103Use these recipes verbatim when building the corresponding component.
104 
105#### Buttons
106 
107Four variants are defined. Pick one — never blend variants or invent a fifth.
108 
109- **Primary** — rounded shape, bg `#5d4a8a`, text `#f4ece0`, padding `11px 22px`, weight `600`.
110- **Secondary** — rounded shape, bg `#ffffff`, text `#231f2a`, border `1px solid rgba(35,31,42,0.10)`, padding `11px 22px`, weight `500`.
111- **Outline** — rounded shape, text `#231f2a`, border `1px solid rgba(35,31,42,0.16)`, padding `11px 22px`, weight `500`.
112- **Ghost** — rounded shape, text `#76707d`, padding `11px 16px`, weight `500`.
113 
114Reach for **primary** as the single dominant CTA per screen.
115**Secondary** for the supporting action. **Outline** for tertiary
116actions in toolbars. **Ghost** for inline links and table actions.
117 
118#### Cards
119 
120- Background: `#f4ece0`
121- Border: `1px solid rgba(35,31,42,0.06)`
122- Shadow: `rgba(35,31,42,0.04) 0 1px 2px, rgba(35,31,42,0.04) 0 8px 28px -10px`
123- Radius: `radius.lg` (`20px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color.
129 
130#### Charts
131 
132- Bar/line variant: `rounded-bars`
133- No gridlines — let the bars/lines carry the data.
134- Highlight strategy: `single` — emphasize a single bar/point per chart.
135 
136#### Typography pairings
137 
138- **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks.
139- **Body (`Manrope`)** — paragraphs, labels, button text, form inputs.
140- **Mono (`DM Mono`)** — code, eyebrows, metadata, numerals in tables.
141 
142### 4 · Hard constraints
143 
144Never do any of the following without explicit instruction from the user:
145 
146- Introduce a new color, font, radius, or shadow that isn't declared above.
147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
151 
152### 5 · Before you finish — verify
153 
154Run through this checklist for every screen you produce:
155 
156- [ ] Every color used appears in the Colors table above.
157- [ ] Headlines use the display font; body copy uses the body font.
158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
160- [ ] Cards and dividers use the declared border + shadow tokens.
161- [ ] No values were invented; if you needed something missing, you stopped and asked.
162 
163---
164 
165## 1. Atmosphere
166 
167Mallow SaaS is a soft modern surface with the warmth of a marshmallow. The page is cream-mallow `#f4ece0` — a warm pillow tone that reads as friendly without ever going pastel-cute. Cards are pure white with a generous 20px radius and a soft 28px y-offset shadow at -10px spread — butter-soft elevation, never harsh. Headlines run in Manrope 700 at 72px with -0.03em tracking — the rounded grotesque sits warm on the cream. Body sits in Manrope 400 at 17px on a 1.62 leading. Numbers and dates run in DM Mono — a slightly rounded mono that matches the system's friendliness. The single accent is muted lavender `#5d4a8a` reserved for the primary CTA, the active sidebar item, and the focus ring — a deep dusty purple, never bright lavender.
168 
169The discipline is in the warmth: every surface is on the warm side of neutral, every shadow is soft and far-spread, every corner is generous. The lavender is what keeps it from going too sweet.
170 
171**Signature moves**
172- Cream-mallow page `#f4ece0` → pure white card — the warmth IS the system
173- Soft 28px y-offset shadow at -10px spread — butter-soft elevation, never harsh
174- Generous 20px card radius, 14px button radius — friendly without going pill
175- Manrope 700 at 72px for hero — rounded grotesque, warm authority
176- DM Mono for every number — slightly rounded mono matches the system's friendliness
177- Lavender `#5d4a8a` exclusively on primary CTA + active sidebar + focus ring
178 
179## 2. Palette
180 
181### Surfaces
182- **Mallow** `#f4ece0` — page background (warm cream pillow tone)
183- **Mallow Lift** `#ece4d9` — secondary tonal surface, sidebar
184- **Card** `#ffffff` — elevated surface
185- **Hairline** `rgba(35,31,42,0.06)` — every divider, every card edge
186 
187### Ink
188- **Ink** `#231f2a` — text, headings (warm near-black, slight purple undertone)
189- **Ink 50** `#76707d` — secondary text, mono labels
190 
191### Accent
192- **Lavender** `#5d4a8a` — primary CTA, active sidebar item, focus ring
193- **Lavender Soft** `rgba(93,74,138,0.10)` — focus ring background, hovered sidebar item
194 
195## 3. Typography
196 
197| Role | Font | Size | Weight | Leading | Tracking |
198|------|------|------|--------|---------|----------|
199| Hero | Manrope | 72px | 700 | 1.05 | -0.03em |
200| H1 | Manrope | 44px | 700 | 1.12 | -0.022em |
201| H2 | Manrope | 26px | 600 | 1.25 | -0.012em |
202| Body | Manrope | 17px | 400 | 1.62 | -0.005em |
203| UI / Button | Manrope | 14px | 600 | 1.4 | 0 |
204| Number / Metric | DM Mono | 14px | 500 | 1.0 | 0 tabular-nums |
205| Big KPI | DM Mono | 28px | 500 | 1.0 | 0 tabular-nums |
206| Label | DM Mono | 11px | 500 | 1.0 | 0.06em uppercase |
207 
208DM Mono is the friendliness move — its slightly rounded glyphs match the warm cream surface and butter-soft cards. A sharper mono (Geist, JetBrains) would feel out of place.
209 
210## 4. Buttons
211 
212### Primary (Lavender Rounded)
213```css
214background: #5d4a8a;
215color: #f4ece0;
216padding: 11px 22px;
217border-radius: 14px;
218font-weight: 600;
219```
220 
221The 14px radius is the warm-friendly shape. The lavender is muted on purpose — bright lavender would clash with the cream warmth.
222 
223### Secondary (Card White)
224- Pure white, 1px hairline at 10% ink, ink text — same 14px radius
225 
226### Outline & Ghost
227- Outline: transparent, 1px hairline at 16% ink
228- Ghost: no border, ink-50, hover lifts to ink
229 
230## 5. Cards
231 
232```css
233background: #ffffff;
234border: 1px solid rgba(35,31,42,0.06);
235border-radius: 20px;
236box-shadow: rgba(35,31,42,0.04) 0 1px 2px, rgba(35,31,42,0.04) 0 8px 28px -10px;
237```
238 
239The far-spread soft shadow is the butter-elevation move — present but never harsh. The 20px radius lets the card breathe on the warm cream. Active card adds a 2px lavender left border.
240 
241## 6. Charts
242 
243Rounded bars (8px wide, 6px gap, fully rounded ends). One bar in lavender, others in 22% ink. Line charts at 1.5px ink with a 10% lavender fill, ending in a lavender dot marker. NO gridlines.
244 
245## 7. Tabs
246 
247Pill tabs (9999px radius). Active = lavender-soft background fill, ink text, no border. Inactive = transparent, ink-50. Sits inside a mallow-lift rail.
248 
249## 8. Spacing
250 
251- Base 4px
252- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128`
253- Section padding: 96px desktop, 48px mobile
254 
255## 9. Do's & don'ts
256 
257✅ **Do**
258- Hold the cream-mallow page surface — bright white reads as cold, beige reads as old textbook
259- Use the soft 28px y-offset shadow at -10px spread — that's butter-soft elevation
260- Reserve lavender for primary CTA + active sidebar + focus ring exclusively — three surfaces only
261- Use DM Mono for numbers — its rounded glyphs match the system's friendliness
262 
263❌ **Don't**
264- Use bright lavender, pink, or pastel — `#5d4a8a` is muted dusty purple, never neon
265- Use sharp 0px corners — 14-20px is the warm-friendly shape
266- Use harsh 4px shadows — soft 28px far-spread only
267- Add a second accent for secondary CTAs — three lavender surfaces, that is all
268 
269---
270 
271## Tokens
272 
273> Generated from the same source the live preview renders from.
274> Treat the values below as the contract — never substitute approximations.
275 
276### Colors
277 
278| Role      | Value |
279|-----------|-------|
280| primary   | `#231f2a` |
281| secondary | `#76707d` |
282| tertiary  | `#231f2a` |
283| neutral   | `#ece4d9` |
284| surface   | `#f4ece0` |
285 
286### Typography
287 
288- **Display:** Manrope
289- **Body:** Manrope
290- **Mono:** DM Mono
291 
292| Role | size / leading / weight / tracking |
293|------|------------------------------------|
294| Hero | 4.5rem / 1.05 / 700 / -0.03em |
295| H1   | 2.75rem / 1.12 / 700 / -0.022em |
296| H2   | 1.625rem / 1.25 / 600 / -0.012em |
297| Body | 1.0625rem / 1.62 / 400 / -0.005em |
298 
299### Radius
300 
301- sm: `8px`
302- md: `14px`
303- lg: `20px`
304- pill: `9999px`
305 
306### Shadows
307 
308- **card:** `rgba(35,31,42,0.04) 0 1px 2px, rgba(35,31,42,0.04) 0 8px 28px -10px`
309- **button:** `none`
310 
311### Borders
312 
313- **card:** `1px solid rgba(35,31,42,0.06)`
314- **divider:** `rgba(35,31,42,0.10)`
315 
316### Buttons
317 
318Four variants, each fully tokenized. The preview renders from these exact values.
319 
320#### Primary
321 
322| Property | Value |
323|----------|-------|
324| shape | `rounded` |
325| background | `#5d4a8a` |
326| color | `#f4ece0` |
327| border | `none` |
328| padding | `11px 22px` |
329| fontWeight | `600` |
330| fontSize | `0.875rem` |
331 
332#### Secondary
333 
334| Property | Value |
335|----------|-------|
336| shape | `rounded` |
337| background | `#ffffff` |
338| color | `#231f2a` |
339| border | `1px solid rgba(35,31,42,0.10)` |
340| padding | `11px 22px` |
341| fontWeight | `500` |
342| fontSize | `0.875rem` |
343 
344#### Outline
345 
346| Property | Value |
347|----------|-------|
348| shape | `rounded` |
349| background | `transparent` |
350| color | `#231f2a` |
351| border | `1px solid rgba(35,31,42,0.16)` |
352| padding | `11px 22px` |
353| fontWeight | `500` |
354| fontSize | `0.875rem` |
355 
356#### Ghost
357 
358| Property | Value |
359|----------|-------|
360| shape | `rounded` |
361| background | `transparent` |
362| color | `#76707d` |
363| border | `none` |
364| padding | `11px 16px` |
365| fontWeight | `500` |
366| fontSize | `0.875rem` |
367 
368### Charts
369 
370| Property | Value |
371|----------|-------|
372| variant | `rounded-bars` |
373| strokeWidth | `1.5` |
374| fillOpacity | `0.1` |
375| gridlines | `false` |
376| barGap | `6px` |
377| highlight | `single` |
378| dotMarker | `true` |
379 
380---
381 
382## Pro tokens
383 
384> Production-fidelity tokens. States, density, motion, elevation,
385> content rules and a measured WCAG contract — derived from the
386> resting tokens unless explicitly authored.
387 
388### States
389 
390#### Button
391 
392- **hover** — shadow: `0 8px 24px -10px rgba(35, 31, 42, 0.35)`, transform: `translateY(-1px)`, filter: `brightness(1.02)`
393- **focus** — outline: `2px solid rgba(35, 31, 42, 0.4)`, outline-offset: `3px`
394- **active** — transform: `translateY(0) scale(0.98)`
395- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
396- **loading** — opacity: `0.65`
397- **selected** — bg: `rgba(35, 31, 42, 0.18)`, color: `#231f2a`
398 
399#### Input
400 
401- **hover** — bg: `rgba(35, 31, 42, 0.03)`, border: `1px solid rgba(35, 31, 42, 0.4)`
402- **focus** — border: `1px solid rgba(35, 31, 42, 0.6)`, shadow: `0 0 0 4px rgba(35, 31, 42, 0.12)`
403- **disabled** — opacity: `0.4`
404- **error** — border: `1px solid rgba(244,114,182,0.7)`, shadow: `0 0 0 4px rgba(244,114,182,0.15)`
405 
406#### Card
407 
408- **hover** — shadow: `0 16px 40px -16px rgba(35, 31, 42, 0.3)`, transform: `translateY(-3px)`
409- **selected** — bg: `rgba(35, 31, 42, 0.04)`, border: `1px solid rgba(35, 31, 42, 0.5)`
410- **dragging** — transform: `scale(1.03) rotate(-0.8deg)`, opacity: `0.92`
411 
412#### Tab
413 
414- **hover** — bg: `rgba(35, 31, 42, 0.08)`, color: `#231f2a`
415- **focus** — outline: `2px solid rgba(35, 31, 42, 0.4)`, outline-offset: `2px`
416- **selected** — bg: `rgba(35, 31, 42, 0.16)`, color: `#231f2a`
417 
418### Density
419 
420| Mode | padding × | row × | body | radius × | Use for |
421|------|-----------|-------|------|----------|---------|
422| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
423| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
424| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
425 
426### Motion
427 
428**Signature — Soft fade.** Long, gentle transitions with a symmetric easing curve. Motion is calming, never intrusive.
429 
430```css
431transition: all 400ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
432```
433 
434| Token | Value |
435|-------|-------|
436| duration.instant | `120ms` |
437| duration.fast | `240ms` |
438| duration.base | `400ms` |
439| duration.slow | `600ms` |
440| easing.standard | `cubic-bezier(0.45, 0.05, 0.55, 0.95)` |
441| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
442| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
443| easing.spring | `cubic-bezier(0.45, 1.4, 0.55, 1)` |
444 
445### Elevation
446 
447Five-level scale, system-specific recipe.
448 
449| Level | Shadow | Recipe |
450|-------|--------|--------|
451| level0 | `none` | Flat — the tone separates, not the shadow. |
452| level1 | `0 2px 6px -2px rgba(35, 31, 42, 0.12)` | Soft tinted lift. |
453| level2 | `0 8px 24px -10px rgba(35, 31, 42, 0.2)` | Floating card — pastel-tinted shadow. |
454| level3 | `0 16px 48px -16px rgba(35, 31, 42, 0.28)` | Sheet — visible tinted glow. |
455| level4 | `0 32px 80px -24px rgba(35, 31, 42, 0.4)` | Modal — tinted wash, scrim required. |
456 
457### Content
458 
459- **measure:** `64ch` (max line length for body prose)
460- **paragraph spacing:** `1.35em`
461- **list indent:** `1.5em`
462- **list gap:** `0.6em`
463- **link:** color `#231f2a`, underline `hover`
464- **blockquote:** border `2px solid rgba(35, 31, 42, 0.5)`, padding `0.9em 1.2em`
465- **code:** background `rgba(35, 31, 42, 0.1)`, color `#231f2a`
466 
467### Accessibility (WCAG 2.1)
468 
469**Overall:** AA-Large
470 
471| Pair | Ratio | Required | Grade | Suggested fix |
472|------|-------|----------|-------|---------------|
473| Body text on surface | 13.78:1 | AA | AAA | — |
474| Body text on canvas | 12.81:1 | AA | AAA | — |
475| Muted text on surface | 4.09:1 | AA | AA-Large | `#6c6672` → 4.74:1 (AA) |
476| Accent on surface | 13.78:1 | AA-Large | AAA | — |
477| Accent on canvas | 12.81:1 | AA-Large | AAA | — |
478
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=Manrope:wght@400;500;600;700;800&family=DM+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: ['"Manrope"', 'serif'],
        sans:    ['"Manrope"', 'sans-serif'],
        mono:    ['"DM Mono"', 'monospace'],
      },
      colors: {
        primary:   '#231f2a',
        secondary: '#76707d',
        accent:    '#231f2a',
        neutral:   '#ece4d9',
        surface:   '#f4ece0',
      },
      borderRadius: {
        sm: '8px',
        md: '14px',
        lg: '20px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Soft Pastel SaaS

Lavender and cream, generous rounding, friendly and approachable.

saasplayfulminimalmodern
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

Vellum Quiet

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.

minimalpaperwarmpremiumwriting
Vellum.app
ProductPricingDocsAbout
Sign inGet started
minimal · paper · warm

Build with Vellum Quiet.

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