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', }, }, },};A printed quarterly that happens to live on the web. Soft blush-bone surfaces, Fraunces 600 italic display headlines, Geist Mono for marginalia, a single deep plum accent on drop caps and pull-quote bars. Built for journals, newsletters, and slow-content brands that want warmth without preciousness.
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.
An ultra-minimal restraint exercise. Pure white surfaces, every layout snapped to a strict 12-column grid with a 4px baseline, Inter at three sizes for the entire system, sharp 0px corners, and one vermilion accent reserved for exactly one moment per page. Built for product pages, design portfolios, and brand surfaces where the discipline of the grid IS the design.
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.