tonal-surface with a moss-green seed — warm tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. Calm and grounded.
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: "Moss Material"3description: "tonal-surface with a moss-green seed — warm tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. Calm and grounded."4tags: [saas, material, minimal, modern, natural, light]5colors:6 primary: "#1A1C16"7 secondary: "#74786C"8 tertiary: "#406836"9 neutral: "#F8FAEF"10 surface: "#FCFCEF"11typography:12 display: "Roboto Flex"13 body: "Roboto Flex"14 mono: "Roboto Mono"15 scale:16 hero: "3.5625rem / 1.12 / 400 / -0.015em"17 h1: "2rem / 1.25 / 400 / 0"18 h2: "1.375rem / 1.27 / 500 / 0"19 body: "1rem / 1.5 / 400 / 0.015em"20radius:21 sm: 8px22 md: 12px23 lg: 16px24 pill: 9999px25shadows:26 card: "0 1px 2px rgba(26, 28, 22, 0.04), 0 1px 3px rgba(26, 28, 22, 0.06)"27 button: none28borders:29 card: "1px solid rgba(116, 120, 108, 0.20)"30 divider: "rgba(116, 120, 108, 0.16)"31buttons:32 primary:33 background: #40683634 color: #FFFFFF35 border: 1px solid #40683636 shape: pill37 padding: 10px 24px38 font: 500 / 0.875rem / 0.0125em39 secondary:40 background: #DAE7CF41 color: #0F1F0842 border: 1px solid #DAE7CF43 shape: pill44 padding: 10px 24px45 font: 500 / 0.875rem / 0.0125em46 outline:47 background: transparent48 color: #40683649 border: 1px solid #74786C50 shape: pill51 padding: 9px 22px52 font: 500 / 0.875rem / 0.0125em53 ghost:54 background: transparent55 color: #40683656 border: none57 shape: pill58 padding: 10px 12px59 font: 500 / 0.875rem / 0.0125em60 hover: underline61charts:62 variant: line63 stroke_width: 264 gridlines: false65 highlight: last66 dot_marker: true67 axis_color: "#74786C"68 palette: ["#406836", "#1A1C16", "#74786C"]69fonts_url: "https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700&family=Roboto+Mono:wght@400;500&display=swap"70dependencies: ["lucide-react"]71---72 73# Moss Material74 75## AI Build Instructions76 77> **Read this section before writing any code.** The rules below78> are non-negotiable. Every value used in the UI must come from this79> file's frontmatter — never substitute, approximate, or invent new80> colors, fonts, radii, or shadows. If a value is missing, ask the81> user before adding one.82 83### 1 · Your role84 85You are building UI for a project that has adopted **Moss Material** as its86design system. Treat `DESIGN.md` as the single source of truth.87Your job is to translate the user's product requirements into88components and pages that look like they were designed by the same89person who authored this file.90 91### 2 · Token compliance92 93- Pull every color, font family, radius, shadow, and spacing value94 from the frontmatter at the top of this file.95- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never96 hard-code hex values that bypass the system.97- When a token can be expressed as a CSS variable, declare it once98 in your global stylesheet and reference it everywhere downstream.99- The Google Fonts `<link>` is provided in the Typography section.100 Add it to `<head>` before any component renders.101 102### 3 · Component recipes103 104Use these recipes verbatim when building the corresponding component.105 106#### Buttons107 108Four variants are defined. Pick one — never blend variants or invent a fifth.109 110- **Primary** — pill shape, bg `#406836`, text `#FFFFFF`, border `1px solid #406836`, padding `10px 24px`, weight `500`.111- **Secondary** — pill shape, bg `#DAE7CF`, text `#0F1F08`, border `1px solid #DAE7CF`, padding `10px 24px`, weight `500`.112- **Outline** — pill shape, text `#406836`, border `1px solid #74786C`, padding `9px 22px`, weight `500`.113- **Ghost** — pill shape, text `#406836`, padding `10px 12px`, weight `500`.114 115Reach for **primary** as the single dominant CTA per screen.116**Secondary** for the supporting action. **Outline** for tertiary117actions in toolbars. **Ghost** for inline links and table actions.118 119#### Cards120 121- Background: `#FCFCEF`122- Border: `1px solid rgba(116, 120, 108, 0.20)`123- Shadow: `0 1px 2px rgba(26, 28, 22, 0.04), 0 1px 3px rgba(26, 28, 22, 0.06)`124- Radius: `radius.lg` (`16px`)125- Internal padding: `20px` for compact cards, `24–28px` for content cards.126 127#### Charts128 129- Bar/line variant: `line`130- No gridlines — let the bars/lines carry the data.131- Highlight strategy: `last` — emphasize a single bar/point per chart.132- Use the declared palette in order: `#406836`, `#1A1C16`, `#74786C`.133 134#### Typography pairings135 136- **Display (`Roboto Flex`)** — h1, h2, hero headlines, brand wordmarks.137- **Body (`Roboto Flex`)** — paragraphs, labels, button text, form inputs.138- **Mono (`Roboto Mono`)** — code, eyebrows, metadata, numerals in tables.139 140### 4 · Hard constraints141 142Never do any of the following without explicit instruction from the user:143 144- Introduce a new color, font, radius, or shadow that isn't declared above.145- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).146- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.147- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.148- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.149 150### 5 · Before you finish — verify151 152Run through this checklist for every screen you produce:153 154- [ ] Every color used appears in the Colors table above.155- [ ] Headlines use the display font; body copy uses the body font.156- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).157- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.158- [ ] Cards and dividers use the declared border + shadow tokens.159- [ ] No values were invented; if you needed something missing, you stopped and asked.160 161---162 163## Overview164Moss Material applies the tonal-surface spec to a moss-green seed. The full tonal-surface logic — surface, surface-container-low, outline-variant — derived from a calm green primary and warm-neutral tonal palette.165 166This is for wellness products, naturalist brands, sustainability tooling, and any tonal-surface product that wants to feel grounded rather than corporate.167 168## Color (tonal roles)169- **on-surface #1A1C16** — primary text on warm tonal neutrals.170- **outline #74786C** — warm mid-grey for borders, captions.171- **primary #406836** — the moss-green seed. CTAs, focus rings.172- **secondary-container #DAE7CF** — tonal button fill.173- **surface-container-low #F8FAEF** — warm page canvas.174- **surface #FCFCEF** — base card surface.175 176## Typography177**Roboto Flex** at every level — the canonical face.178 179| Role | Size | Weight | tonal-surface token |180|------|------|--------|----------|181| Hero | 3.5625rem | 400 | display-large |182| H1 | 2rem | 400 | headline-large |183| H2 | 1.375rem | 500 | title-large |184| Body | 1rem | 400 | body-large |185 186## Buttons (tonal variants)187- **Filled (primary)** — moss-green fill, white label.188- **Tonal (secondary)** — sage container fill, deep ink label.189- **Outlined** — transparent with outline-variant border.190- **Text (ghost)** — bare moss label.191 192All full-rounded pills. No drop shadows.193 194## Cards195Surface fill with outline-variant border at 20% + tonal elevation level 1. Radius **16px**.196 197## Do's and Don'ts198- ✅ Full-rounded pills, tonal secondaries, no shadow on buttons.199- ✅ Warm canvas (#F8FAEF) — never cool-neutral. The warmth carries the moss vibe.200- ✅ Roboto Flex 400 on display.201- ❌ No second accent. The moss seed is alone.202- ❌ No sharp corners. the tonal-surface system is rounded by default.203- ❌ No serif typography.204 205---206 207## Tokens208 209> Generated from the same source the live preview renders from.210> Treat the values below as the contract — never substitute approximations.211 212### Colors213 214| Role | Value |215|-----------|-------|216| primary | `#1A1C16` |217| secondary | `#74786C` |218| tertiary | `#406836` |219| neutral | `#F8FAEF` |220| surface | `#FCFCEF` |221 222### Typography223 224- **Display:** Roboto Flex225- **Body:** Roboto Flex226- **Mono:** Roboto Mono227 228| Role | size / leading / weight / tracking |229|------|------------------------------------|230| Hero | 3.5625rem / 1.12 / 400 / -0.015em |231| H1 | 2rem / 1.25 / 400 / 0 |232| H2 | 1.375rem / 1.27 / 500 / 0 |233| Body | 1rem / 1.5 / 400 / 0.015em |234 235### Radius236 237- sm: `8px`238- md: `12px`239- lg: `16px`240- pill: `9999px`241 242### Shadows243 244- **card:** `0 1px 2px rgba(26, 28, 22, 0.04), 0 1px 3px rgba(26, 28, 22, 0.06)`245- **button:** `none`246 247### Borders248 249- **card:** `1px solid rgba(116, 120, 108, 0.20)`250- **divider:** `rgba(116, 120, 108, 0.16)`251 252### Buttons253 254Four variants, each fully tokenized. The preview renders from these exact values.255 256#### Primary257 258| Property | Value |259|----------|-------|260| shape | `pill` |261| background | `#406836` |262| color | `#FFFFFF` |263| border | `1px solid #406836` |264| padding | `10px 24px` |265| fontWeight | `500` |266| fontSize | `0.875rem` |267| tracking | `0.0125em` |268 269#### Secondary270 271| Property | Value |272|----------|-------|273| shape | `pill` |274| background | `#DAE7CF` |275| color | `#0F1F08` |276| border | `1px solid #DAE7CF` |277| padding | `10px 24px` |278| fontWeight | `500` |279| fontSize | `0.875rem` |280| tracking | `0.0125em` |281 282#### Outline283 284| Property | Value |285|----------|-------|286| shape | `pill` |287| background | `transparent` |288| color | `#406836` |289| border | `1px solid #74786C` |290| padding | `9px 22px` |291| fontWeight | `500` |292| fontSize | `0.875rem` |293| tracking | `0.0125em` |294 295#### Ghost296 297| Property | Value |298|----------|-------|299| shape | `pill` |300| background | `transparent` |301| color | `#406836` |302| border | `none` |303| padding | `10px 12px` |304| fontWeight | `500` |305| fontSize | `0.875rem` |306| tracking | `0.0125em` |307| hoverHint | `underline` |308 309### Charts310 311| Property | Value |312|----------|-------|313| variant | `line` |314| strokeWidth | `2` |315| gridlines | `false` |316| highlight | `last` |317| dotMarker | `true` |318| axisColor | `#74786C` |319| palette | `#406836`, `#1A1C16`, `#74786C` |320 # 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=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600;8..144,700&family=Roboto+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Roboto Flex"', 'serif'], sans: ['"Roboto Flex"', 'sans-serif'], mono: ['"Roboto Mono"', 'monospace'], }, colors: { primary: '#1A1C16', secondary: '#74786C', accent: '#406836', neutral: '#F8FAEF', surface: '#FCFCEF', }, borderRadius: { sm: '8px', md: '12px', lg: '16px', }, }, },};Ultra-minimal modern serif. Pure off-white canvas, Fraunces variable serif tuned for warmth and optical size, one slate-blue accent. No shadows, no gradients — the serif itself is the system.
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 slow conic gradient sweeps behind the page through desaturated lavender, sage, peach at ~22% chroma — soft prismatic light, never rainbow. Pure white cards on top, ink text, hairlines.
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.