An expedition brand that earned its weather. Warm sand-canvas surfaces, Inter for prose, Fraunces small-caps for coordinates and elevations, a single deep pine accent on trail markers and the active route. Built for outdoor brands, gear retailers, and travel platforms that want gravitas without the moody-mountain photography cliché.
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: "Summit Canvas"3description: "An expedition brand that earned its weather. Warm sand-canvas surfaces, Inter for prose, Fraunces small-caps for coordinates and elevations, a single deep pine accent on trail markers and the active route. Built for outdoor brands, gear retailers, and travel platforms that want gravitas without the moody-mountain photography cliché."4tags: [outdoor, warm, minimal, premium, modern]5colors:6 primary: "#1a1612"7 secondary: "#736b5e"8 tertiary: "#1a1612"9 neutral: "#e6dfd0"10 surface: "#efe8d8"11typography:12 display: Inter13 body: Inter14 mono: "JetBrains Mono"15 scale:16 hero: "5rem / 1 / 700 / -0.035em"17 h1: "3rem / 1.1 / 700 / -0.025em"18 h2: "1.75rem / 1.22 / 600 / -0.015em"19 body: "1.0625rem / 1.65 / 400 / -0.005em"20radius:21 sm: 2px22 md: 4px23 lg: 6px24 pill: 9999px25shadows:26 card: "rgba(26,22,18,0.05) 0 1px 2px"27 button: none28borders:29 card: "1px solid rgba(26,22,18,0.10)"30 divider: rgba(26,22,18,0.14)31buttons:32 primary:33 background: #2d4a2b34 color: #efe8d835 border: none36 shape: rounded37 padding: 12px 22px38 font: 600 / 0.8125rem / 0.06em39 uppercase: true40 secondary:41 background: #e6dfd042 color: #1a161243 border: 1px solid rgba(26,22,18,0.14)44 shape: rounded45 padding: 12px 22px46 font: 600 / 0.8125rem / 0.06em47 uppercase: true48 outline:49 background: transparent50 color: #1a161251 border: 1px solid rgba(26,22,18,0.22)52 shape: rounded53 padding: 12px 22px54 font: 600 / 0.8125rem / 0.06em55 uppercase: true56 ghost:57 background: transparent58 color: #736b5e59 border: none60 shape: rounded61 padding: 12px 16px62 font: 600 / 0.8125rem / 0.06em63 uppercase: true64charts:65 variant: line66 stroke_width: 1.567 fill_opacity: 0.0668 gridlines: false69 bar_gap: 12px70 highlight: single71 dot_marker: true72fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap"73dependencies: ["lucide-react"]74---75 76# Summit Canvas77 78## AI Build Instructions79 80> **Read this section before writing any code.** The rules below81> are non-negotiable. Every value used in the UI must come from this82> file's frontmatter — never substitute, approximate, or invent new83> colors, fonts, radii, or shadows. If a value is missing, ask the84> user before adding one.85 86### 1 · Your role87 88You are building UI for a project that has adopted **Summit Canvas** as its89design system. Treat `DESIGN.md` as the single source of truth.90Your job is to translate the user's product requirements into91components and pages that look like they were designed by the same92person who authored this file.93 94### 2 · Token compliance95 96- Pull every color, font family, radius, shadow, and spacing value97 from the frontmatter at the top of this file.98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never99 hard-code hex values that bypass the system.100- When a token can be expressed as a CSS variable, declare it once101 in your global stylesheet and reference it everywhere downstream.102- The Google Fonts `<link>` is provided in the Typography section.103 Add it to `<head>` before any component renders.104 105### 3 · Component recipes106 107Use these recipes verbatim when building the corresponding component.108 109#### Buttons110 111Four variants are defined. Pick one — never blend variants or invent a fifth.112 113- **Primary** — rounded shape, bg `#2d4a2b`, text `#efe8d8`, padding `12px 22px`, weight `600`, uppercased.114- **Secondary** — rounded shape, bg `#e6dfd0`, text `#1a1612`, border `1px solid rgba(26,22,18,0.14)`, padding `12px 22px`, weight `600`, uppercased.115- **Outline** — rounded shape, text `#1a1612`, border `1px solid rgba(26,22,18,0.22)`, padding `12px 22px`, weight `600`, uppercased.116- **Ghost** — rounded shape, text `#736b5e`, padding `12px 16px`, weight `600`, uppercased.117 118Reach for **primary** as the single dominant CTA per screen.119**Secondary** for the supporting action. **Outline** for tertiary120actions in toolbars. **Ghost** for inline links and table actions.121 122#### Cards123 124- Background: `#efe8d8`125- Border: `1px solid rgba(26,22,18,0.10)`126- Shadow: `rgba(26,22,18,0.05) 0 1px 2px`127- Radius: `radius.lg` (`6px`)128- Internal padding: `20px` for compact cards, `24–28px` for content cards.129 130#### Tabs131 132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.133 134#### Charts135 136- Bar/line variant: `line`137- No gridlines — let the bars/lines carry the data.138- Highlight strategy: `single` — emphasize a single bar/point per chart.139 140#### Typography pairings141 142- **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks.143- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.144- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.145 146### 4 · Hard constraints147 148Never do any of the following without explicit instruction from the user:149 150- Introduce a new color, font, radius, or shadow that isn't declared above.151- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).152- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.153- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.154- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.155 156### 5 · Before you finish — verify157 158Run through this checklist for every screen you produce:159 160- [ ] Every color used appears in the Colors table above.161- [ ] Headlines use the display font; body copy uses the body font.162- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).163- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.164- [ ] Cards and dividers use the declared border + shadow tokens.165- [ ] No values were invented; if you needed something missing, you stopped and asked.166 167---168 169## 1. Atmosphere170 171Summit Canvas is an expedition brand that earned its weather. The page surface is warm sand-canvas `#efe8d8` — closer to a field notebook than to a marketing site. Headlines run in Inter at 700 weight, 80px, with -0.035em tracking — disciplined, never decorative. Body sits in Inter at 17px on a 1.65 leading. Coordinates, elevations, and trail names switch to JetBrains Mono in uppercase 0.06em — the topographic-map voice. The single accent is a deep pine `#2d4a2b` that appears only on the primary CTA, the active trail marker, and the chart line for elevation gain.172 173The discipline is in the warmth without preciousness: sand-canvas, not white; pine, not forest; uppercase mono for coordinates, not for headlines.174 175**Signature moves**176- Sand-canvas surface `#efe8d8` — never white, never grey177- Pine `#2d4a2b` only on primary CTA + active trail marker + elevation chart line178- Coordinates always in JetBrains Mono uppercase 0.06em — topographic voice179- All UI labels uppercase 0.06em — that's the trail-sign typography180- Soft 4-6px corners — gear-tag rounded, not pill181 182## 2. Palette183 184### Surfaces185- **Canvas** `#efe8d8` — page background (warm sand)186- **Canvas Lift** `#e6dfd0` — secondary surfaces, secondary button187- **Hairline** `rgba(26,22,18,0.10)` — every divider188 189### Ink190- **Ink** `#1a1612` — text, headings (warm near-black)191- **Ink 50** `#736b5e` — secondary text, mono labels192 193### Accent194- **Pine** `#2d4a2b` — primary CTA, active trail marker, elevation chart195- **Pine Soft** `rgba(45,74,43,0.12)` — focus ring, hovered tab background196 197## 3. Typography198 199| Role | Font | Size | Weight | Leading | Tracking |200|------|------|------|--------|---------|----------|201| Hero | Inter | 80px | 700 | 1.0 | -0.035em |202| H1 | Inter | 48px | 700 | 1.1 | -0.025em |203| H2 | Inter | 28px | 600 | 1.22 | -0.015em |204| Body | Inter | 17px | 400 | 1.65 | -0.005em |205| UI / Button | Inter | 13px | 600 | 1.4 | 0.06em uppercase |206| Coordinate / Elevation | JetBrains Mono | 12px | 500 | 1.0 | 0.06em uppercase tabular-nums |207| Caption (Coord set) | Fraunces | 14px | 500 | 1.3 | 0 small-caps |208 209Fraunces appears only as small-caps for coordinate set names ("North Cascades · 48°43'N 121°06'W") — that single typographic accent is the editorial voice.210 211## 4. Buttons212 213### Primary (Pine)214```css215background: #2d4a2b;216color: #efe8d8;217padding: 12px 22px;218border-radius: 4px;219text-transform: uppercase;220letter-spacing: 0.06em;221font-weight: 600;222```223 224### Secondary (Canvas Lift)225- `#e6dfd0` background, 1px hairline at 14% ink, ink text — same uppercase voice226 227### Outline & Ghost228- Outline: transparent, 1px hairline at 22% ink229- Ghost: no border, ink-50 uppercase, hover lifts to ink230 231## 5. Cards232 233```css234background: #efe8d8;235border: 1px solid rgba(26,22,18,0.10);236border-radius: 6px;237box-shadow: rgba(26,22,18,0.05) 0 1px 2px;238```239 240The single 1px shadow is the maximum lift. Featured trail cards (the active route) add a 2px pine left border — the trail-marker indicator borrowed from a topographic map.241 242## 6. Charts243 244Line charts at 1.5px ink with a 6% pine fill, ending in a pine dot marker. The line variant is primary — used for elevation profiles. Bar charts are reserved for daily distance breakdowns. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px showing elevation in meters.245 246## 7. Tabs247 248Underline 1.5px in pine for the active state. Inactive tabs are ink-50 in uppercase 0.06em. Hover = pine-soft background wash.249 250## 8. Spacing251 252- Base 4px253- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96`254- Section padding: 96px desktop, 48px mobile255 256## 9. Do's & don'ts257 258✅ **Do**259- Hold the sand-canvas surface — white reads as gear-store, beige reads as luxury260- Use pine `#2d4a2b` only on CTA + active trail + elevation line261- Put every coordinate, elevation, distance in JetBrains Mono uppercase 0.06em262- Use Fraunces small-caps only for coordinate set names — that's the field-notebook voice263 264❌ **Don't**265- Use moody-mountain stock photography — the typography earns the gravitas266- Use a second accent — pine alone, on three specific surfaces267- Use sharp 0px or pill corners — soft 4-6px is the gear-tag voice268- Use Inter under 600 on buttons — buttons must read as trail signs269 270---271 272## Tokens273 274> Generated from the same source the live preview renders from.275> Treat the values below as the contract — never substitute approximations.276 277### Colors278 279| Role | Value |280|-----------|-------|281| primary | `#1a1612` |282| secondary | `#736b5e` |283| tertiary | `#1a1612` |284| neutral | `#e6dfd0` |285| surface | `#efe8d8` |286 287### Typography288 289- **Display:** Inter290- **Body:** Inter291- **Mono:** JetBrains Mono292 293| Role | size / leading / weight / tracking |294|------|------------------------------------|295| Hero | 5rem / 1 / 700 / -0.035em |296| H1 | 3rem / 1.1 / 700 / -0.025em |297| H2 | 1.75rem / 1.22 / 600 / -0.015em |298| Body | 1.0625rem / 1.65 / 400 / -0.005em |299 300### Radius301 302- sm: `2px`303- md: `4px`304- lg: `6px`305- pill: `9999px`306 307### Shadows308 309- **card:** `rgba(26,22,18,0.05) 0 1px 2px`310- **button:** `none`311 312### Borders313 314- **card:** `1px solid rgba(26,22,18,0.10)`315- **divider:** `rgba(26,22,18,0.14)`316 317### Buttons318 319Four variants, each fully tokenized. The preview renders from these exact values.320 321#### Primary322 323| Property | Value |324|----------|-------|325| shape | `rounded` |326| background | `#2d4a2b` |327| color | `#efe8d8` |328| border | `none` |329| padding | `12px 22px` |330| fontWeight | `600` |331| fontSize | `0.8125rem` |332| tracking | `0.06em` |333| uppercase | `true` |334 335#### Secondary336 337| Property | Value |338|----------|-------|339| shape | `rounded` |340| background | `#e6dfd0` |341| color | `#1a1612` |342| border | `1px solid rgba(26,22,18,0.14)` |343| padding | `12px 22px` |344| fontWeight | `600` |345| fontSize | `0.8125rem` |346| tracking | `0.06em` |347| uppercase | `true` |348 349#### Outline350 351| Property | Value |352|----------|-------|353| shape | `rounded` |354| background | `transparent` |355| color | `#1a1612` |356| border | `1px solid rgba(26,22,18,0.22)` |357| padding | `12px 22px` |358| fontWeight | `600` |359| fontSize | `0.8125rem` |360| tracking | `0.06em` |361| uppercase | `true` |362 363#### Ghost364 365| Property | Value |366|----------|-------|367| shape | `rounded` |368| background | `transparent` |369| color | `#736b5e` |370| border | `none` |371| padding | `12px 16px` |372| fontWeight | `600` |373| fontSize | `0.8125rem` |374| tracking | `0.06em` |375| uppercase | `true` |376 377### Charts378 379| Property | Value |380|----------|-------|381| variant | `line` |382| strokeWidth | `1.5` |383| fillOpacity | `0.06` |384| gridlines | `false` |385| barGap | `12px` |386| highlight | `single` |387| dotMarker | `true` |388 # 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=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Inter"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#1a1612', secondary: '#736b5e', accent: '#1a1612', neutral: '#e6dfd0', surface: '#efe8d8', }, borderRadius: { sm: '2px', md: '4px', lg: '6px', }, }, },};A multi-stop pastel gradient runs across the page — desaturated lavender, peach, seafoam, cream — every stop at ~25% chroma so it reads as soft sorbet rather than rainbow. Pure paper-white cards, ink text, hairlines. Calm and considered.
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.
Dark-mode-native developer platform. Emerald (#3ecf8e) as identity marker, 1.00 line-height hero, depth from layered borders not shadows, mono uppercase labels.
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.