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: Inter
13  body:    Inter
14  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: 2px
22  md: 4px
23  lg: 6px
24  pill: 9999px
25shadows:
26  card:   "rgba(26,22,18,0.05) 0 1px 2px"
27  button: none
28borders:
29  card:    "1px solid rgba(26,22,18,0.10)"
30  divider: rgba(26,22,18,0.14)
31buttons:
32  primary:
33    background: #2d4a2b
34    color: #efe8d8
35    border: none
36    shape: rounded
37    padding: 12px 22px
38    font: 600 / 0.8125rem / 0.06em
39    uppercase: true
40  secondary:
41    background: #e6dfd0
42    color: #1a1612
43    border: 1px solid rgba(26,22,18,0.14)
44    shape: rounded
45    padding: 12px 22px
46    font: 600 / 0.8125rem / 0.06em
47    uppercase: true
48  outline:
49    background: transparent
50    color: #1a1612
51    border: 1px solid rgba(26,22,18,0.22)
52    shape: rounded
53    padding: 12px 22px
54    font: 600 / 0.8125rem / 0.06em
55    uppercase: true
56  ghost:
57    background: transparent
58    color: #736b5e
59    border: none
60    shape: rounded
61    padding: 12px 16px
62    font: 600 / 0.8125rem / 0.06em
63    uppercase: true
64charts:
65  variant: line
66  stroke_width: 1.5
67  fill_opacity: 0.06
68  gridlines: false
69  bar_gap: 12px
70  highlight: single
71  dot_marker: true
72fonts_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 Canvas
77 
78## AI Build Instructions
79 
80> **Read this section before writing any code.** The rules below
81> are non-negotiable. Every value used in the UI must come from this
82> file's frontmatter — never substitute, approximate, or invent new
83> colors, fonts, radii, or shadows. If a value is missing, ask the
84> user before adding one.
85 
86### 1 · Your role
87 
88You are building UI for a project that has adopted **Summit Canvas** as its
89design system. Treat `DESIGN.md` as the single source of truth.
90Your job is to translate the user's product requirements into
91components and pages that look like they were designed by the same
92person who authored this file.
93 
94### 2 · Token compliance
95 
96- Pull every color, font family, radius, shadow, and spacing value
97  from the frontmatter at the top of this file.
98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
99  hard-code hex values that bypass the system.
100- When a token can be expressed as a CSS variable, declare it once
101  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 recipes
106 
107Use these recipes verbatim when building the corresponding component.
108 
109#### Buttons
110 
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 tertiary
120actions in toolbars. **Ghost** for inline links and table actions.
121 
122#### Cards
123 
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#### Tabs
131 
132Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
133 
134#### Charts
135 
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 pairings
141 
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 constraints
147 
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 — verify
157 
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. Atmosphere
170 
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 grey
177- Pine `#2d4a2b` only on primary CTA + active trail marker + elevation chart line
178- Coordinates always in JetBrains Mono uppercase 0.06em — topographic voice
179- All UI labels uppercase 0.06em — that's the trail-sign typography
180- Soft 4-6px corners — gear-tag rounded, not pill
181 
182## 2. Palette
183 
184### Surfaces
185- **Canvas** `#efe8d8` — page background (warm sand)
186- **Canvas Lift** `#e6dfd0` — secondary surfaces, secondary button
187- **Hairline** `rgba(26,22,18,0.10)` — every divider
188 
189### Ink
190- **Ink** `#1a1612` — text, headings (warm near-black)
191- **Ink 50** `#736b5e` — secondary text, mono labels
192 
193### Accent
194- **Pine** `#2d4a2b` — primary CTA, active trail marker, elevation chart
195- **Pine Soft** `rgba(45,74,43,0.12)` — focus ring, hovered tab background
196 
197## 3. Typography
198 
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. Buttons
212 
213### Primary (Pine)
214```css
215background: #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 voice
226 
227### Outline & Ghost
228- Outline: transparent, 1px hairline at 22% ink
229- Ghost: no border, ink-50 uppercase, hover lifts to ink
230 
231## 5. Cards
232 
233```css
234background: #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. Charts
243 
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. Tabs
247 
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. Spacing
251 
252- Base 4px
253- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96`
254- Section padding: 96px desktop, 48px mobile
255 
256## 9. Do's & don'ts
257 
258✅ **Do**
259- Hold the sand-canvas surface — white reads as gear-store, beige reads as luxury
260- Use pine `#2d4a2b` only on CTA + active trail + elevation line
261- Put every coordinate, elevation, distance in JetBrains Mono uppercase 0.06em
262- Use Fraunces small-caps only for coordinate set names — that's the field-notebook voice
263 
264❌ **Don't**
265- Use moody-mountain stock photography — the typography earns the gravitas
266- Use a second accent — pine alone, on three specific surfaces
267- Use sharp 0px or pill corners — soft 4-6px is the gear-tag voice
268- Use Inter under 600 on buttons — buttons must read as trail signs
269 
270---
271 
272## Tokens
273 
274> Generated from the same source the live preview renders from.
275> Treat the values below as the contract — never substitute approximations.
276 
277### Colors
278 
279| Role      | Value |
280|-----------|-------|
281| primary   | `#1a1612` |
282| secondary | `#736b5e` |
283| tertiary  | `#1a1612` |
284| neutral   | `#e6dfd0` |
285| surface   | `#efe8d8` |
286 
287### Typography
288 
289- **Display:** Inter
290- **Body:** Inter
291- **Mono:** JetBrains Mono
292 
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### Radius
301 
302- sm: `2px`
303- md: `4px`
304- lg: `6px`
305- pill: `9999px`
306 
307### Shadows
308 
309- **card:** `rgba(26,22,18,0.05) 0 1px 2px`
310- **button:** `none`
311 
312### Borders
313 
314- **card:** `1px solid rgba(26,22,18,0.10)`
315- **divider:** `rgba(26,22,18,0.14)`
316 
317### Buttons
318 
319Four variants, each fully tokenized. The preview renders from these exact values.
320 
321#### Primary
322 
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#### Secondary
336 
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#### Outline
350 
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#### Ghost
364 
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### Charts
378 
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 
389---
390 
391## Pro tokens
392 
393> Production-fidelity tokens. States, density, motion, elevation,
394> content rules and a measured WCAG contract — derived from the
395> resting tokens unless explicitly authored.
396 
397### States
398 
399#### Button
400 
401- **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)`
402- **focus** — outline: `2px solid rgba(26, 22, 18, 0.5)`, outline-offset: `2px`
403- **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)`
404- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
405- **loading** — opacity: `0.7`
406- **selected** — bg: `#1a1612`, color: `#efe8d8`
407 
408#### Input
409 
410- **hover** — border: `1px solid rgba(26, 22, 18, 0.5)`
411- **focus** — border: `1.5px solid #1a1612`, shadow: `0 0 0 4px rgba(26, 22, 18, 0.15)`
412- **disabled** — bg: `rgba(26, 22, 18, 0.04)`, opacity: `0.4`
413- **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)`
414 
415#### Card
416 
417- **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)`
418- **selected** — bg: `rgba(26, 22, 18, 0.04)`, border: `1.5px solid #1a1612`
419- **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9`
420 
421#### Tab
422 
423- **hover** — bg: `rgba(26, 22, 18, 0.06)`, color: `#1a1612`
424- **focus** — outline: `2px solid rgba(26, 22, 18, 0.5)`, outline-offset: `2px`
425- **selected** — color: `#1a1612`, border: `0 0 2px 0 solid #1a1612`
426 
427### Density
428 
429| Mode | padding × | row × | body | radius × | Use for |
430|------|-----------|-------|------|----------|---------|
431| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
432| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
433| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
434 
435### Motion
436 
437**Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way.
438 
439```css
440transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
441```
442 
443| Token | Value |
444|-------|-------|
445| duration.instant | `80ms` |
446| duration.fast | `160ms` |
447| duration.base | `240ms` |
448| duration.slow | `380ms` |
449| easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` |
450| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
451| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
452| easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` |
453 
454### Elevation
455 
456Five-level scale, system-specific recipe.
457 
458| Level | Shadow | Recipe |
459|-------|--------|--------|
460| level0 | `none` | Flat — hairline border separates. |
461| level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. |
462| level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. |
463| level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. |
464| level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. |
465 
466### Content
467 
468- **measure:** `68ch` (max line length for body prose)
469- **paragraph spacing:** `1.2em`
470- **list indent:** `1.5em`
471- **list gap:** `0.5em`
472- **link:** color `#1a1612`, underline `hover`
473- **blockquote:** border `3px solid rgba(26, 22, 18, 0.6)`, padding `0.5em 0 0.5em 1.25em`
474- **code:** background `rgba(26, 22, 18, 0.06)`, color `#1a1612`
475 
476### Accessibility (WCAG 2.1)
477 
478**Overall:** AA-Large
479 
480| Pair | Ratio | Required | Grade | Suggested fix |
481|------|-------|----------|-------|---------------|
482| Body text on surface | 14.74:1 | AA | AAA | — |
483| Body text on canvas | 13.56:1 | AA | AAA | — |
484| Muted text on surface | 4.31:1 | AA | AA-Large | `#6d6659` → 4.66:1 (AA) |
485| Accent on surface | 14.74:1 | AA-Large | AAA | — |
486| Accent on canvas | 13.56:1 | AA-Large | AAA | — |
487