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.
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: "Tide Material"3description: "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."4tags: [saas, material, minimal, modern, light]5colors:6 primary: "#171D1D"7 secondary: "#6F7979"8 tertiary: "#006A6A"9 neutral: "#F4FAFA"10 surface: "#FBFDFD"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(23, 29, 29, 0.04), 0 1px 3px rgba(23, 29, 29, 0.06)"27 button: none28borders:29 card: "1px solid rgba(111, 121, 121, 0.20)"30 divider: "rgba(111, 121, 121, 0.16)"31buttons:32 primary:33 background: #006A6A34 color: #FFFFFF35 border: 1px solid #006A6A36 shape: pill37 padding: 10px 24px38 font: 500 / 0.875rem / 0.0125em39 secondary:40 background: #CCE8E741 color: #051F1F42 border: 1px solid #CCE8E743 shape: pill44 padding: 10px 24px45 font: 500 / 0.875rem / 0.0125em46 outline:47 background: transparent48 color: #006A6A49 border: 1px solid #6F797950 shape: pill51 padding: 9px 22px52 font: 500 / 0.875rem / 0.0125em53 ghost:54 background: transparent55 color: #006A6A56 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: "#6F7979"68 palette: ["#006A6A", "#171D1D", "#6F7979"]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# Tide 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 **Tide 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 `#006A6A`, text `#FFFFFF`, border `1px solid #006A6A`, padding `10px 24px`, weight `500`.111- **Secondary** — pill shape, bg `#CCE8E7`, text `#051F1F`, border `1px solid #CCE8E7`, padding `10px 24px`, weight `500`.112- **Outline** — pill shape, text `#006A6A`, border `1px solid #6F7979`, padding `9px 22px`, weight `500`.113- **Ghost** — pill shape, text `#006A6A`, 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: `#FBFDFD`122- Border: `1px solid rgba(111, 121, 121, 0.20)`123- Shadow: `0 1px 2px rgba(23, 29, 29, 0.04), 0 1px 3px rgba(23, 29, 29, 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: `#006A6A`, `#171D1D`, `#6F7979`.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## Overview164Tide Material is the tonal-surface spec applied to a teal seed. It's the same tonal-surface logic as Lumen — surface, surface-container-low, outline-variant, full-rounded buttons — just with **teal #006A6A** as the dynamic-color primary and a cooler neutral tonal palette derived from it.165 166This is for product UI that wants tonal-surface's calm, accessible scaffolding without the violet of the baseline.167 168## Color (tonal roles)169- **on-surface #171D1D** — primary text. cool tonal neutral.170- **outline #6F7979** — borders, captions, dividers.171- **primary #006A6A** — the teal seed. CTAs, focus rings, accent ink.172- **secondary-container #CCE8E7** — tonal button fill.173- **surface-container-low #F4FAFA** — page canvas.174- **surface #FBFDFD** — base card surface.175 176The single seed drives every accent. No second hue exists in the system.177 178## Typography179**Roboto Flex** at every level — the tonal-surface system's canonical face.180 181| Role | Size | Weight | Tracking | tonal-surface token |182|------|------|--------|----------|----------|183| Hero | 3.5625rem | 400 | -0.015em | display-large |184| H1 | 2rem | 400 | 0 | headline-large |185| H2 | 1.375rem | 500 | 0 | title-large |186| Body | 1rem | 400 | +0.015em | body-large |187| Label | 0.875rem | 500 | +0.0125em | label-large |188 189## Buttons (tonal variants)190All four are **full-rounded pills** at 9999px — the standard default.191 192- **Filled (primary)** — teal fill, white label. The single primary action.193- **Tonal (secondary)** — secondary-container fill (#CCE8E7), on-container ink. the tonal-surface system's preferred secondary.194- **Outlined** — transparent with outline-variant border.195- **Text (ghost)** — bare teal label.196 197**No drop shadows on buttons.** tonal buttons rely on color contrast, not elevation.198 199## Cards200Surface fill (#FBFDFD) with **outline-variant border at 20%** and tonal elevation level 1 (1px + 1px shadow stack at 4–6%). Radius is **16px** — the tonal-surface large shape token.201 202## Charts & Data203A single 2px teal line over the cool surface canvas. **No gridlines, no fills.** A small teal dot at the latest reading. Axis labels in outline grey.204 205## Do's and Don'ts206- ✅ Full-rounded pills on every button. the standard default.207- ✅ Tonal secondaries via secondary-container, not white-with-border.208- ✅ Roboto Flex everywhere. Display weight 400 — never 700.209- ✅ Use elevation level 1 on cards. Never level 3+.210- ❌ No second accent color. The teal seed is alone.211- ❌ No serif typography. the tonal-surface system is sans-only.212- ❌ No tight padding. the tonal-surface system is breathing-room first.213 214---215 216## Tokens217 218> Generated from the same source the live preview renders from.219> Treat the values below as the contract — never substitute approximations.220 221### Colors222 223| Role | Value |224|-----------|-------|225| primary | `#171D1D` |226| secondary | `#6F7979` |227| tertiary | `#006A6A` |228| neutral | `#F4FAFA` |229| surface | `#FBFDFD` |230 231### Typography232 233- **Display:** Roboto Flex234- **Body:** Roboto Flex235- **Mono:** Roboto Mono236 237| Role | size / leading / weight / tracking |238|------|------------------------------------|239| Hero | 3.5625rem / 1.12 / 400 / -0.015em |240| H1 | 2rem / 1.25 / 400 / 0 |241| H2 | 1.375rem / 1.27 / 500 / 0 |242| Body | 1rem / 1.5 / 400 / 0.015em |243 244### Radius245 246- sm: `8px`247- md: `12px`248- lg: `16px`249- pill: `9999px`250 251### Shadows252 253- **card:** `0 1px 2px rgba(23, 29, 29, 0.04), 0 1px 3px rgba(23, 29, 29, 0.06)`254- **button:** `none`255 256### Borders257 258- **card:** `1px solid rgba(111, 121, 121, 0.20)`259- **divider:** `rgba(111, 121, 121, 0.16)`260 261### Buttons262 263Four variants, each fully tokenized. The preview renders from these exact values.264 265#### Primary266 267| Property | Value |268|----------|-------|269| shape | `pill` |270| background | `#006A6A` |271| color | `#FFFFFF` |272| border | `1px solid #006A6A` |273| padding | `10px 24px` |274| fontWeight | `500` |275| fontSize | `0.875rem` |276| tracking | `0.0125em` |277 278#### Secondary279 280| Property | Value |281|----------|-------|282| shape | `pill` |283| background | `#CCE8E7` |284| color | `#051F1F` |285| border | `1px solid #CCE8E7` |286| padding | `10px 24px` |287| fontWeight | `500` |288| fontSize | `0.875rem` |289| tracking | `0.0125em` |290 291#### Outline292 293| Property | Value |294|----------|-------|295| shape | `pill` |296| background | `transparent` |297| color | `#006A6A` |298| border | `1px solid #6F7979` |299| padding | `9px 22px` |300| fontWeight | `500` |301| fontSize | `0.875rem` |302| tracking | `0.0125em` |303 304#### Ghost305 306| Property | Value |307|----------|-------|308| shape | `pill` |309| background | `transparent` |310| color | `#006A6A` |311| border | `none` |312| padding | `10px 12px` |313| fontWeight | `500` |314| fontSize | `0.875rem` |315| tracking | `0.0125em` |316| hoverHint | `underline` |317 318### Charts319 320| Property | Value |321|----------|-------|322| variant | `line` |323| strokeWidth | `2` |324| gridlines | `false` |325| highlight | `last` |326| dotMarker | `true` |327| axisColor | `#6F7979` |328| palette | `#006A6A`, `#171D1D`, `#6F7979` |329 # 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: '#171D1D', secondary: '#6F7979', accent: '#006A6A', neutral: '#F4FAFA', surface: '#FBFDFD', }, borderRadius: { sm: '8px', md: '12px', lg: '16px', }, }, },};Pressed-herbarium editorial — deep forest ink and oxidized terracotta on bone paper. Italic Cormorant display, generous leading, hairline rules, and a single warm spot color used like a botanist's annotation stamp.
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 podcast platform with the calm of public radio. Soft pearl off-white surfaces, Inter Display 700 for episode titles, Geist Mono for timestamps and chapter marks, a single deep burgundy accent reserved for the now-playing waveform. The light counterpart to a late-night studio — built for podcast networks, audio publishers, and editorial radio brands.
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.