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.
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: "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: Manrope13 body: Manrope14 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: 8px22 md: 14px23 lg: 20px24 pill: 9999px25shadows:26 card: "rgba(35,31,42,0.04) 0 1px 2px, rgba(35,31,42,0.04) 0 8px 28px -10px"27 button: none28borders:29 card: "1px solid rgba(35,31,42,0.06)"30 divider: rgba(35,31,42,0.10)31buttons:32 primary:33 background: #5d4a8a34 color: #f4ece035 border: none36 shape: rounded37 padding: 11px 22px38 font: 600 / 0.875rem39 secondary:40 background: #ffffff41 color: #231f2a42 border: 1px solid rgba(35,31,42,0.10)43 shape: rounded44 padding: 11px 22px45 font: 500 / 0.875rem46 outline:47 background: transparent48 color: #231f2a49 border: 1px solid rgba(35,31,42,0.16)50 shape: rounded51 padding: 11px 22px52 font: 500 / 0.875rem53 ghost:54 background: transparent55 color: #76707d56 border: none57 shape: rounded58 padding: 11px 16px59 font: 500 / 0.875rem60charts:61 variant: "rounded-bars"62 stroke_width: 1.563 fill_opacity: 0.164 gridlines: false65 bar_gap: 6px66 highlight: single67 dot_marker: true68fonts_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 SaaS73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Mallow SaaS** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 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 recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 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 tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 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#### Tabs127 128Variant: `pill`. Segmented control inside a tinted track. Active tab gets a filled pill in the accent color.129 130#### Charts131 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 pairings137 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 constraints143 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 — verify153 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. Atmosphere166 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 system173- Soft 28px y-offset shadow at -10px spread — butter-soft elevation, never harsh174- Generous 20px card radius, 14px button radius — friendly without going pill175- Manrope 700 at 72px for hero — rounded grotesque, warm authority176- DM Mono for every number — slightly rounded mono matches the system's friendliness177- Lavender `#5d4a8a` exclusively on primary CTA + active sidebar + focus ring178 179## 2. Palette180 181### Surfaces182- **Mallow** `#f4ece0` — page background (warm cream pillow tone)183- **Mallow Lift** `#ece4d9` — secondary tonal surface, sidebar184- **Card** `#ffffff` — elevated surface185- **Hairline** `rgba(35,31,42,0.06)` — every divider, every card edge186 187### Ink188- **Ink** `#231f2a` — text, headings (warm near-black, slight purple undertone)189- **Ink 50** `#76707d` — secondary text, mono labels190 191### Accent192- **Lavender** `#5d4a8a` — primary CTA, active sidebar item, focus ring193- **Lavender Soft** `rgba(93,74,138,0.10)` — focus ring background, hovered sidebar item194 195## 3. Typography196 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. Buttons211 212### Primary (Lavender Rounded)213```css214background: #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 radius225 226### Outline & Ghost227- Outline: transparent, 1px hairline at 16% ink228- Ghost: no border, ink-50, hover lifts to ink229 230## 5. Cards231 232```css233background: #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. Charts242 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. Tabs246 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. Spacing250 251- Base 4px252- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128`253- Section padding: 96px desktop, 48px mobile254 255## 9. Do's & don'ts256 257✅ **Do**258- Hold the cream-mallow page surface — bright white reads as cold, beige reads as old textbook259- Use the soft 28px y-offset shadow at -10px spread — that's butter-soft elevation260- Reserve lavender for primary CTA + active sidebar + focus ring exclusively — three surfaces only261- Use DM Mono for numbers — its rounded glyphs match the system's friendliness262 263❌ **Don't**264- Use bright lavender, pink, or pastel — `#5d4a8a` is muted dusty purple, never neon265- Use sharp 0px corners — 14-20px is the warm-friendly shape266- Use harsh 4px shadows — soft 28px far-spread only267- Add a second accent for secondary CTAs — three lavender surfaces, that is all268 269---270 271## Tokens272 273> Generated from the same source the live preview renders from.274> Treat the values below as the contract — never substitute approximations.275 276### Colors277 278| Role | Value |279|-----------|-------|280| primary | `#231f2a` |281| secondary | `#76707d` |282| tertiary | `#231f2a` |283| neutral | `#ece4d9` |284| surface | `#f4ece0` |285 286### Typography287 288- **Display:** Manrope289- **Body:** Manrope290- **Mono:** DM Mono291 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### Radius300 301- sm: `8px`302- md: `14px`303- lg: `20px`304- pill: `9999px`305 306### Shadows307 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### Borders312 313- **card:** `1px solid rgba(35,31,42,0.06)`314- **divider:** `rgba(35,31,42,0.10)`315 316### Buttons317 318Four variants, each fully tokenized. The preview renders from these exact values.319 320#### Primary321 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#### Secondary333 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#### Outline345 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#### Ghost357 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### Charts369 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 # 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=Manrope:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport 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', }, }, },};Modern AI product surface without the clichés. Geist sans across the board, Geist Mono for prompts and metrics, very fine off-white surfaces with a 1px white inset highlight, a single muted electric-indigo accent reserved for the assistant's response state. Built for AI-first products that want to feel premium without leaning on rainbow gradients.
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.
A warm off-white paper system that earns trust through quiet. Cream-paper surfaces, EB Garamond at oversized scale for headlines paired with Inter for UI, generous reading line-heights, a single forest-green accent reserved for verified marks and the primary CTA. Built for advisory firms, professional services, premium brands, and editorial sites that want quiet European authority.
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.