name: summit-gear-design
version: alpha
description: >
  A brutalist alpine "Guided Objectives Register" rendered as a printed bureau
  document. The surface is warm granite stone (`#D0CCC4`) overlaid with a faint
  multiply rock-texture photo; everything sits in near-black ink (`#1A1814`) with
  a single climbing-rope red voltage (`#B43A2A`) plus muted glacier blue
  (`#7AA8C0`) and ochre (`#B08A4A`) accents. The signature moves are a hand-drawn
  SVG ridgeline panorama with crosshair survey markers, dense monospaced data
  rows ruled by hairlines and 2–3px borders, and an SVG route topo inside a
  circular clip-path modal. Type pairs condensed uppercase Oswald display with
  Fira Sans body and IBM Plex Mono for every label, coordinate, and grade.
colors:
  # Surface
  granite: '#D0CCC4'        # page background; granite-bg base, footer text color
  topo-face: '#C5C1B8'      # modal topo panel + experience-check form fill
  rock-face: '#B8B4AB'      # SVG face-outline fill in route topo
  # Brand / Voltage
  red: '#B43A2A'            # rope-red accent: route lines, hovers, flagship marker, btn fill
  blue: '#7AA8C0'           # glacier blue: hover wash, tag highlight, tooltip peak name
  ochre: '#B08A4A'          # ochre accent (defined; minimal use, compass tint family)
  # Text
  ink: '#1A1814'            # near-black: all headings, body, borders, rules
  # Hairlines (ink at reduced opacity)
  ink-30: 'rgba(26,24,20,0.30)'  # top-bar divider, column-header rules
  ink-60: 'rgba(26,24,20,0.60)'  # muted mono labels, captions
  ink-70: 'rgba(26,24,20,0.70)'  # secondary detail text
  blue-wash: 'rgba(122,168,192,0.18)'  # row hover background; nav hover at /30
typography:
  display:
    fontFamily: "'Oswald', sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 0.85
    letterSpacing: -0.02em
    textTransform: uppercase
  section-head:
    fontFamily: "'Oswald', sans-serif"
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1
    textTransform: uppercase
  route-title:
    fontFamily: "'Oswald', sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1
    textTransform: uppercase
  body:
    fontFamily: "'Fira Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  mono:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 11px
    fontWeight: 400
  mono-label:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.08em
    textTransform: uppercase
rounded:                      # near-zero radii; brutalist. Only pills are the marker dots.
  none: 0px
  full: 9999px
spacing:                      # base unit 4px; layout padding on an 8px rhythm
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
components:
  topbar-title:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
    accent: '{colors.red}'    # trailing period
  tag:
    typography: '{typography.mono-label}'
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '2px 6px'
  nav:
    backgroundColor: '{colors.granite}'
    typography: '{typography.mono}'
    border: '2px solid {colors.ink} (top+bottom)'
    textTransform: uppercase
    hover: 'bg {colors.blue} at 30% opacity'
  section-rule:
    border: '3px solid {colors.ink} (top) + 1px solid {colors.ink} (bottom)'
  row-objective:
    backgroundColor: 'transparent'
    border: '1px solid {colors.ink} (top); last row +1px bottom'
    typography: '{typography.mono}'
    padding: '20px 8px'
    hover: 'bg {colors.blue-wash}; route-name → {colors.red}; red underline bar scaleX'
  btn-red:
    backgroundColor: '{colors.red}'
    textColor: '{colors.granite}'
    border: '2px solid {colors.ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '12px 24px'
    hover: 'bg {colors.ink}'
  input-brut:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    border: '0; 1.5px solid {colors.ink} bottom only'
    typography: '{typography.mono}'
    padding: '6px 2px'
    focus: 'border-bottom {colors.red}'
  thick-cell:
    backgroundColor: 'transparent'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '8px'
  modal:
    backgroundColor: '{colors.granite}'
    clip: 'circle(0% at 90% 90%) → circle(150% at 90% 90%)'
  tooltip:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.granite}'
    typography: '{typography.mono-label}'
    border: '2px solid {colors.red} (left only)'
    padding: '6px 8px'
motion:
  ridge-draw: 'SVG stroke-dashoffset len→0, 2200ms, anime.js ease inOut(3)'
  modal-open: 'GSAP clip-path circle 0%→150% at 90% 90%, 750ms power3.inOut'
  modal-close: 'GSAP clip-path 150%→0%, 550ms power3.inOut'
  row-bar: 'red underline scaleX 0→1 on hover, 350ms cubic-bezier(.2,.7,.2,1)'
  smooth-scroll: 'Lenis duration 1.0; nav anchors scrollTo offset -60, 1.2s'
  tooltip: 'opacity 0→1, follows cursor on crosshair hover'
icons:
  library: game-icons (lorc / caro-asercion via jsDelivr) + inline SVG glyphs
  style: solid silhouette SVGs (compass, mountain-climbing) recolored via CSS filter; mono unicode marks (▣ ▸ ✕ №) for UI
  sizes: { sm: 28px, lg: 96px }
  color: '{colors.ink}'   # game-icons tinted to granite/ink via filter; route marks in {colors.red}

Summit Gear — Massif Guides

summit-gear-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Summit Gear is a brutalist alpine Guided Objectives Register — a single-page catalog that reads like a printed Chamonix bureau document rather than a website. The surface is a warm granite stone #D0CCC4 overlaid by a .granite-bg::before rock-texture photo at opacity:0.07 with mix-blend-mode:multiply, so the page feels like ink on weathered paper. Everything is set in near-black #1A1814 ("ink") and ruled by hairlines and heavy 2–3px borders. A single climbing-rope red #B43A2A is the voltage — it marks route lines, the flagship Mont Blanc crosshair, hover states, the trailing period in "Massif Guides<span class="red">.</span>", and the only filled button. Glacier blue #7AA8C0 provides a cool secondary (row-hover wash rgba(122,168,192,0.18), a highlighted tag, the tooltip peak name), with ochre #B08A4A defined as a tertiary. The signature moves are three: a hand-drawn SVG ridgeline panorama whose skyline self-draws via stroke-dashoffset and carries eight crosshair survey markers with cursor-tracking tooltips; dense monospaced data rows in a six-column CSS grid, each ruled top and bottom and animating a red underline on hover; and a route-topo dossier that opens in a circular clip-path reveal modal containing an annotated SVG face with belay stations, crux callout, and a brutalist experience-check form. Type is a three-way story: condensed uppercase Oswald for display, Fira Sans for prose, and IBM Plex Mono for every label, coordinate, grade, and data cell.

Colors

Surface. The page background is granite #D0CCC4 (body + .granite-bg), reused as the footer's text color against the ink footer and as the modal fill. Two darker stone tones layer the depth: #C5C1B8 (.topo-face, the modal topo panel and the experience-check form) and #B8B4AB (the SVG face outline in the route topo).

Brand / Voltage. Rope-red #B43A2A (.red / .bg-red) is the single accent: route polylines (.route), the flagship 4000er crosshair ring, every row's ▸ open chevron and hover underline bar, the .btn-red fill, the trailing period after the wordmark, and the tooltip's left border. Glacier blue #7AA8C0 (.blue / .bg-blue) is the cool secondary — nav hover (/30), row hover wash rgba(122,168,192,0.18), the "FRENCH" tag, and the tooltip peak name. Ochre #B08A4A (.ochre / .bg-ochre) is defined as a tertiary but barely used; the footer compass SVG is tinted into the granite/ochre family via a CSS filter.

Text. All headings and body copy are ink #1A1814. Muting is done purely by ink-at-opacity Tailwind utilities: ink/30 for top dividers, ink/60 for mono labels and captions, ink/70–ink/80 for secondary detail. There is no separate gray token.

Hairlines. Borders are either solid ink (border-ink, 2px, 3px) or ink at reduced opacity (/20, /30, /40). Dashed rules use a CSS linear-gradient (.dashed-rule, 8px×1px) or SVG stroke-dasharray.

Typography

Loaded from one Google Fonts @import: Oswald (400–700), Fira Sans (300–600), IBM Plex Mono (400–600). Oswald is the condensed-grotesque display face (.font-display, letter-spacing:-0.01em, always uppercase). Fira Sans is the body/body default. IBM Plex Mono (.font-mono) carries every data label, coordinate (N 45°55′ · E 06°52′), grade chip, and SVG annotation. All three are open-source, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	64px	700	0.85	-0.02em	Hero wordmark "Massif Guides."
section-head	42px	400	1.0	-0.01em	Section H2; footer wordmark
route-title	26px	400	1.0	-0.01em	Per-objective route names
modal-title	36px	400	1.0	-0.01em	Modal dossier header
panel-head	22px	400	1.0	-0.01em	Prerequisites / Gear / Experience Check
body	16px	400	1.5	0	Fira Sans default prose
mono	11–14px	400/600	snug	0–0.2em	Labels, grades, dates, cells
mono-label	10px	400	1.0	0.08–0.3em	Uppercase tags, captions, column heads

Layout

Base unit is 4px; section and page padding ride an 8px rhythm with a global horizontal padding of px-8 (32px). The page is a top-to-bottom document: a full-bleed hero panorama header (top bar with coordinates + self-drawing 1400×360 ridgeline SVG + legend), a sticky nav strip bordered top and bottom by 2px ink, four catalog sections, an ink footer, and a hidden reveal modal. Each section uses the same six-column data grid grid-cols-[3fr_1.2fr_2fr_1.5fr_1.5fr_auto] with gap-6, a 3px/1px .section-rule header, hairline column headers, and full-width rows. The footer is a three-column [auto_1fr_auto] grid; the modal is a two-column [1.3fr_1fr] (topo / dossier). No central max-width container — the layout is edge-to-edge ledger-style, with whitespace coming from generous row padding (py-5) rather than margins.

Elevation & Depth

There are no box-shadows and no glass — depth is entirely flat, achieved through borders and ink-on-stone contrast. Heavy structure comes from 2px/3px ink borders (.thick, .section-rule, nav border-y-2, modal dividers) versus hairline 1px rules at ink-opacity. The only "texture" depth is the mix-blend-mode:multiply rock photo at opacity:0.07 behind the granite surface. The footer inverts the scheme (ink fill, granite text) for weight at the bottom of the document.

Shapes

Brutalist: corners are square everywhere (rounded:0). The single rounded exception is rounded-full on the small SVG crosshair marker dots and the legend swatches — pills used only as survey symbols, never on cards or buttons. Buttons, tags, inputs, cells, and the modal are all hard-edged rectangles. Curves appear only inside hand-drawn SVG (bergschrund Q-curves, compass circle).

Components

• Wordmark — Oswald 64px/700 uppercase, letter-spacing:-0.02em, ink, with a red trailing period. Echoed at 42px in the footer.
• Tag / chip — .tag: 1px ink border, transparent fill, IBM Plex Mono 10px, uppercase, letter-spacing:0.08em, padding 2px 6px, square. Variant fills blue (FRENCH).
• Sticky nav — granite fill, border-y-2 ink, mono 11px uppercase tracking-[0.15em], items split by ink/20–40 dividers, blue/30 hover; labels like 01 · Single-Day Technical.
• Section rule — .section-rule: 3px ink top + 1px ink bottom band under each H2.
• Objective row — .row-objective: transparent, 1px ink top border, py-5, six-column grid; hover paints rgba(122,168,192,0.18), turns the route name red, and scales a 1px red underline bar from left. Label ▸ chevron in red.
• Red button — .btn-red: red fill, granite text, 2px ink border, mono 12px uppercase tracking-[0.2em], padding 12px 24px; hover → ink fill. Label "Submit Dossier ▸".
• Close button — outline: 2px ink border, mono uppercase; hover inverts to ink fill / granite text. Label "✕ Close Dossier".
• Brutalist input — .brut: no fill, single 1.5px ink bottom border, IBM Plex Mono, padding 6px 2px; focus turns the underline red. Selects/textarea share the style; checkbox uses accent-[#B43A2A].
• Thick cell — .thick: 2px ink border, p-2, mono micro-stat blocks (LINE TRACED / PITCHES / DESCENT).
• Tooltip — .tooltip: ink fill, granite text, mono 10px, 2px red left border, absolute, cursor-following, fades in on crosshair hover.
• Reveal modal — .reveal-overlay: fixed full-screen granite, circular clip-path from bottom-right corner; contains the SVG route topo and dossier form.

Motion

• Ridge draw — on load, anime.js sets strokeDasharray = totalLength and animates strokeDashoffset len→0 over 2200ms, ease:'inOut(3)', so the skyline draws itself.
• Modal reveal — GSAP animates clip-path circle(0% at 90% 90%) → circle(150% …) over 750ms power3.inOut on row click; close reverses over 550ms.
• Row hover bar — red 1px underline scales scaleX 0→1 over 350ms cubic-bezier(.2,.7,.2,1).
• Smooth scroll — Lenis (duration:1.0) drives the page; nav anchors call lenis.scrollTo with offset:-60, duration:1.2.
• Tooltip — opacity 0→1 on mouseenter, left/top track the cursor on mousemove.

Iconography

Two raster/vector sources. game-icons (lorc compass, caro-asercion mountain-climbing) are loaded as solid-silhouette SVGs from jsDelivr and recolored with CSS filter — the footer compass tinted into the granite/ochre range, the prerequisites glyph forced to ink via filter:brightness(0). Sizes: 96px (footer compass), 28px (panel glyph). Inline SVG draws the ridgeline, crosshairs (circle + cross-lines + dot), route topo, belay stations, summit stars, scale bar, and compass rose, all stroked in ink with red for route lines and flagship markers. UI marks are monospaced glyphs: ▣ panel, ▸ open/submit, ✕ close, № dossier number, coordinate primes ′.

Do's and Don'ts

• Do keep the surface warm granite #D0CCC4 with the faint multiply rock texture, and set everything in ink #1A1814.
• Do reserve red #B43A2A for routes, hovers, the flagship marker, and the one filled button — it is the only voltage.
• Do label every datum in IBM Plex Mono and keep Oswald uppercase for display.
• Do rule the layout with hairlines and 2–3px ink borders; build hierarchy from border weight, not shadow.
• Don't introduce rounded corners on cards, buttons, inputs, or tags — square only; pills are reserved for survey marker dots.
• Don't add box-shadows, glows, or glass; depth here is flat and printed.
• Don't over-use blue or ochre — they are accents, not fields.
• Don't mute text with a gray token; use ink-at-opacity utilities instead.

Known Gaps

• Ochre #B08A4A is defined as a class but has minimal direct application; the footer compass tint is produced by a CSS filter chain (approximated to the granite/ochre family) rather than a flat token.
• "Muted" text colors (ink/30, ink/60, ink/70, ink/80) are Tailwind opacity utilities, not standalone hex tokens; listed here as rgba approximations.
• Per-element letter-spacing on Oswald headings (-0.01em global, -0.02em on the hero) is read from inline styles; intermediate heads use the .font-display -0.01em default.
• Spacing scale (xs–xxl) is inferred from observed px-8, gap-6, py-5, mb-16 Tailwind usage on a 4px base, not declared in a token map.