minimal · warm · productivity · saas

Warm Canvas.

Approachable minimalism on warm white. Compressed Inter at -2.125px, whisper borders, multi-layer 4-stack shadows, and a single saturated blue accent.

01 · Preview

The kitchen sink.

Warm.app

ProductPricingDocsAbout

Sign inGet started

minimal · warm · productivity

Build with Warm Canvas.

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

#000000

secondary

#615D59

tertiary

#0075DE

neutral

#FFFFFF

surface

#FFFFFF

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

4px

md

8px

lg

12px

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 · The file

DESIGN.md

markdown

1---
2name: "Warm Canvas"
3description: "Approachable minimalism on warm white. Compressed Inter at -2.125px, whisper borders, multi-layer 4-stack shadows, and a single saturated blue accent."
4tags: [minimal, warm, productivity, saas]
5colors:
6  primary:   "#000000"
7  secondary: "#615d59"
8  tertiary:  "#0075de"
9  neutral:   "#ffffff"
10  surface:   "#ffffff"
11typography:
12  display: Inter
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4rem / 1 / 700 / -2.125px"
17    h1:   "3rem / 1 / 700 / -1.5px"
18    h2:   "1.625rem / 1.23 / 700 / -0.625px"
19    body: "1rem / 1.5 / 400 / 0"
20radius:
21  sm: 4px
22  md: 8px
23  lg: 12px
24  pill: 9999px
25shadows:
26  card:   "rgba(0,0,0,0.04) 0 4px 18px, rgba(0,0,0,0.027) 0 2.025px 7.85px, rgba(0,0,0,0.02) 0 0.8px 2.93px, rgba(0,0,0,0.01) 0 0.175px 1.04px"
27  button: "rgba(0,117,222,0.15) 0 4px 12px"
28borders:
29  card:    "1px solid rgba(0,0,0,0.1)"
30  divider: rgba(0,0,0,0.1)
31buttons:
32  primary:
33    background: #2F2F2F
34    color: #FFFFFF
35    border: none
36    shape: rounded
37    padding: 8px 16px
38    font: 500 / 0.875rem
39  secondary:
40    background: #F7F6F3
41    color: #2F2F2F
42    border: 1px solid #E9E5DC
43    shape: rounded
44    padding: 8px 16px
45    font: 500 / 0.875rem
46  outline:
47    background: transparent
48    color: #2F2F2F
49    border: 1px solid #2F2F2F
50    shape: rounded
51    padding: 8px 16px
52    font: 500 / 0.875rem
53  ghost:
54    background: transparent
55    color: #787673
56    border: none
57    shape: rounded
58    padding: 8px 12px
59    font: 500 / 0.875rem
60charts:
61  variant: stepped
62  stroke_width: 2
63  fill_opacity: 0.12
64  gridlines: true
65  bar_gap: 0px
66  highlight: single
67  dot_marker: false
68fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Warm Canvas
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 **Warm Canvas** 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 `#2F2F2F`, text `#FFFFFF`, padding `8px 16px`, weight `500`.
110- **Secondary** — rounded shape, bg `#F7F6F3`, text `#2F2F2F`, border `1px solid #E9E5DC`, padding `8px 16px`, weight `500`.
111- **Outline** — rounded shape, text `#2F2F2F`, border `1px solid #2F2F2F`, padding `8px 16px`, weight `500`.
112- **Ghost** — rounded shape, text `#787673`, padding `8px 12px`, 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: `#ffffff`
121- Border: `1px solid rgba(0,0,0,0.1)`
122- Shadow: `rgba(0,0,0,0.04) 0 4px 18px, rgba(0,0,0,0.027) 0 2.025px 7.85px, rgba(0,0,0,0.02) 0 0.8px 2.93px, rgba(0,0,0,0.01) 0 0.175px 1.04px`
123- Radius: `radius.lg` (`12px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Charts
127 
128- Bar/line variant: `stepped`
129- Highlight strategy: `single` — emphasize a single bar/point per chart.
130 
131#### Typography pairings
132 
133- **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks.
134- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
135- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
136 
137### 4 · Hard constraints
138 
139Never do any of the following without explicit instruction from the user:
140 
141- Introduce a new color, font, radius, or shadow that isn't declared above.
142- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
143- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
144- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
145- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
146 
147### 5 · Before you finish — verify
148 
149Run through this checklist for every screen you produce:
150 
151- [ ] Every color used appears in the Colors table above.
152- [ ] Headlines use the display font; body copy uses the body font.
153- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
154- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
155- [ ] Cards and dividers use the declared border + shadow tokens.
156- [ ] No values were invented; if you needed something missing, you stopped and asked.
157 
158---
159 
160## 1. Atmosphere
161 
162Warm Canvas embodies the philosophy of a great workspace: a blank canvas that gets out of your way. The system is built on warm neutrals rather than cold grays — distinctly approachable minimalism that feels like quality paper rather than sterile glass. The page background is pure white (`#ffffff`) but the text isn't pure black — it sits at `rgba(0,0,0,0.95)`, softening the read imperceptibly. The warm gray scale (`#f6f5f4`, `#31302e`, `#615d59`, `#a39e98`) carries subtle yellow-brown undertones, giving the interface a tactile, almost analog warmth.
163 
164A modified geometric sans is the backbone of the system. At display sizes (64px) it uses aggressive negative letter-spacing (-2.125px), creating headlines that feel compressed and precise. The weight range is broader than typical: 400 for body, 500 for UI, 600 for semi-bold labels, 700 for display headings. OpenType features `"lnum"` and `"locl"` are enabled on larger text, adding sophistication that rewards close reading.
165 
166What makes Warm Canvas distinctive is its **border philosophy**. Rather than heavy borders or shadows, it uses ultra-thin `1px solid rgba(0,0,0,0.1)` — borders that exist as whispers, barely perceptible division lines that create structure without weight. The shadow system is equally restrained: multi-layer 4-stack with cumulative opacity never exceeding 0.05, depth that's felt rather than seen.
167 
168**Signature moves**
169- Compressed sans at -2.125px tracking on 64px display
170- Warm neutrals: yellow-brown undertones throughout (`#f6f5f4` warm white, `#31302e` warm dark)
171- Near-black text via `rgba(0,0,0,0.95)` — micro-warmth
172- Whisper borders: `1px solid rgba(0,0,0,0.1)` — barely there
173- Multi-layer 4-stack shadows with sub-0.05 opacity
174- Single saturated blue accent (`#0075de`) — the only color in core UI chrome
175- Pill badges (9999px) with tinted blue background for status
176 
177## 2. Palette
178 
179### Primary
180- **Near Black** `rgba(0,0,0,0.95)` — text, headings
181- **Pure White** `#ffffff` — page, cards
182- **Canvas Blue** `#0075de` — CTA, links, single saturated accent
183 
184### Warm Neutrals
185- Warm White `#f6f5f4` — section alternation
186- Warm Dark `#31302e` — dark surface
187- Warm Gray 500 `#615d59` — secondary text
188- Warm Gray 300 `#a39e98` — placeholders, disabled
189 
190### Semantic
191- Teal `#2a9d99` — success
192- Green `#1aae39` — completion
193- Orange `#dd5b00` — warning
194- Pink `#ff64c8` — decorative
195 
196### Interactive
197- Active `#005bab` — pressed
198- Focus `#097fe8` — ring
199- Badge bg `#f2f9ff`, text `#097fe8`
200 
201## 3. Typography
202 
203| Role | Size | Weight | Leading | Tracking |
204|------|------|--------|---------|----------|
205| Display Hero | 64px | 700 | 1.00 | -2.125px |
206| Display 2 | 54px | 700 | 1.04 | -1.875px |
207| Section | 48px | 700 | 1.00 | -1.5px |
208| Sub-heading L | 40px | 700 | 1.50 | normal |
209| Sub-heading | 26px | 700 | 1.23 | -0.625px |
210| Card title | 22px | 700 | 1.27 | -0.25px |
211| Body L | 20px | 600 | 1.40 | -0.125px |
212| Body | 16px | 400 | 1.50 | normal |
213| Nav | 15px | 600 | 1.33 | normal |
214| Badge | 12px | 600 | 1.33 | +0.125px |
215 
216**Four-weight system.** 400 (read), 500 (interact), 600 (emphasize), 700 (announce). Tracking compresses with size and relaxes at body. Badges are the only positive-tracking text.
217 
218## 4. Buttons
219 
220### Primary Blue
221```css
222background: #0075de;
223color: #ffffff;
224padding: 8px 16px;
225border-radius: 4px;
226```
227Hover `#005bab`. Active scale(0.9).
228 
229### Secondary Translucent
230- Background `rgba(0,0,0,0.05)`, text near-black
231- 4px radius, scale(1.05) on hover
232 
233### Pill Badge
234- Background `#f2f9ff`, text `#097fe8`
235- 9999px radius, 4px 8px padding, 12px weight 600
236 
237## 5. Cards
238 
239- Background: `#ffffff`
240- Border: `1px solid rgba(0,0,0,0.1)` (whisper)
241- Radius: 12px standard, 16px featured
242- Shadow: 4-layer stack, max opacity 0.04
243 
244## 6. Charts
245 
246**Stepped charts.** Bars are flush (no gap) with a thin top accent line, giving an organic, blocky productivity-tool feel. Gridlines are dashed at 14% opacity. Line charts use a 2px stroke with subtle 12% area fill — no end-dot.
247 
248## 7. Spacing
249 
250- Base: 8px
251- Scale: `2, 3, 4, 5, 6, 7, 8, 11, 12, 14, 16, 24, 32`
252- Section vertical: 64–120px
253 
254## 8. Depth & elevation
255 
256| Level | Treatment | Use |
257|-------|-----------|-----|
258| 0 | None | Page, text |
259| 1 | Whisper border `1px solid rgba(0,0,0,0.1)` | Cards, dividers |
260| 2 | 4-stack shadow (max 0.04) | Content cards |
261| 3 | 5-stack shadow (max 0.05, 52px blur) | Modals, hero |
262 
263**Layered, ambient, embedded.** Multiple layers with extremely low individual opacity accumulate into soft natural-looking elevation — elements feel embedded in the page, not floating above it.
264 
265## 9. Do's & don'ts
266 
267✅ **Do**
268- Use warm neutrals exclusively — yellow-brown undertones
269- Compress display tracking to -2.125px at 64px
270- Use whisper borders at `rgba(0,0,0,0.1)` — never heavier
271- Layer 4–5 shadows with sub-0.05 individual opacity
272- Reserve canvas blue (`#0075de`) for CTAs and links
273 
274❌ **Don't**
275- Use blue-gray neutrals — kills the warmth
276- Apply pill radius to cards — pill is for badges only
277- Use heavy single shadows — multi-layer ambient only
278- Introduce more saturated colors in core chrome
279- Use bold (`#000000`) — `rgba(0,0,0,0.95)` only
280 
281---
282 
283## Tokens
284 
285> Generated from the same source the live preview renders from.
286> Treat the values below as the contract — never substitute approximations.
287 
288### Colors
289 
290| Role      | Value |
291|-----------|-------|
292| primary   | `#000000` |
293| secondary | `#615d59` |
294| tertiary  | `#0075de` |
295| neutral   | `#ffffff` |
296| surface   | `#ffffff` |
297 
298### Typography
299 
300- **Display:** Inter
301- **Body:** Inter
302- **Mono:** JetBrains Mono
303 
304| Role | size / leading / weight / tracking |
305|------|------------------------------------|
306| Hero | 4rem / 1 / 700 / -2.125px |
307| H1   | 3rem / 1 / 700 / -1.5px |
308| H2   | 1.625rem / 1.23 / 700 / -0.625px |
309| Body | 1rem / 1.5 / 400 / 0 |
310 
311### Radius
312 
313- sm: `4px`
314- md: `8px`
315- lg: `12px`
316- pill: `9999px`
317 
318### Shadows
319 
320- **card:** `rgba(0,0,0,0.04) 0 4px 18px, rgba(0,0,0,0.027) 0 2.025px 7.85px, rgba(0,0,0,0.02) 0 0.8px 2.93px, rgba(0,0,0,0.01) 0 0.175px 1.04px`
321- **button:** `rgba(0,117,222,0.15) 0 4px 12px`
322 
323### Borders
324 
325- **card:** `1px solid rgba(0,0,0,0.1)`
326- **divider:** `rgba(0,0,0,0.1)`
327 
328### Buttons
329 
330Four variants, each fully tokenized. The preview renders from these exact values.
331 
332#### Primary
333 
334| Property | Value |
335|----------|-------|
336| shape | `rounded` |
337| background | `#2F2F2F` |
338| color | `#FFFFFF` |
339| border | `none` |
340| padding | `8px 16px` |
341| fontWeight | `500` |
342| fontSize | `0.875rem` |
343 
344#### Secondary
345 
346| Property | Value |
347|----------|-------|
348| shape | `rounded` |
349| background | `#F7F6F3` |
350| color | `#2F2F2F` |
351| border | `1px solid #E9E5DC` |
352| padding | `8px 16px` |
353| fontWeight | `500` |
354| fontSize | `0.875rem` |
355 
356#### Outline
357 
358| Property | Value |
359|----------|-------|
360| shape | `rounded` |
361| background | `transparent` |
362| color | `#2F2F2F` |
363| border | `1px solid #2F2F2F` |
364| padding | `8px 16px` |
365| fontWeight | `500` |
366| fontSize | `0.875rem` |
367 
368#### Ghost
369 
370| Property | Value |
371|----------|-------|
372| shape | `rounded` |
373| background | `transparent` |
374| color | `#787673` |
375| border | `none` |
376| padding | `8px 12px` |
377| fontWeight | `500` |
378| fontSize | `0.875rem` |
379 
380### Charts
381 
382| Property | Value |
383|----------|-------|
384| variant | `stepped` |
385| strokeWidth | `2` |
386| fillOpacity | `0.12` |
387| gridlines | `true` |
388| barGap | `0px` |
389| highlight | `single` |
390| dotMarker | `false` |
391

03 · 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.

04 · Required setup

Three snippets.

Google Fonts link

html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" />

Install dependencies

bash

npm install lucide-react

Tailwind config

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Inter"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#000000',
        secondary: '#615d59',
        accent:    '#0075de',
        neutral:   '#ffffff',
        surface:   '#ffffff',
      },
      borderRadius: {
        sm: '4px',
        md: '8px',
        lg: '12px',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Atlas Display

Design-agency oversized grotesque. 8rem condensed display sans with -5% tracking — the type itself is the layout. Off-white canvas, one molten-orange accent, hairline grid, asymmetric columns. Hits hard the moment it loads.

agencydisplayboldeditorialmodern

Atlas.app

ProductPricingDocsAbout

Sign inGet started→