name: switchback-design
version: alpha
description: >
  Switchback Co. is a swiss-brutalist expedition site for Dolomites trekking,
  built on a warm off-white paper surface (`#FAFAF8`) and near-black ink
  (`#0E0E0E`), ruled everywhere by 2px black hairlines into a hard editorial
  grid. A safety-orange voltage (`#FF5A1F`) marks data and emphasis while a
  signal-yellow (`#FFD400`) flags warnings and REQ tags. Type is a two-face
  system: condensed all-caps Archivo Black for display, Roboto Mono for the
  entire body and tabular data. Nothing is rounded — every corner is square,
  every divider is a border, and motion is limited to count-up odometers,
  difficulty bars that scale in, and scroll reveals.
colors:
  # Surface
  paper: '#FAFAF8'        # page surface, card fills, inverted text on dark
  ink: '#0E0E0E'          # near-black text, dark bands (statband, footer, CTA), all rules
  stone: '#D2CEC7'        # warm grey-stone — gear section bg, hovered route region text
  # Brand / Voltage
  voltage-orange: '#FF5A1F' # primary accent: data figures, diff bars, final CTA band, links
  signal-yellow: '#FFD400'  # warning/flag: top-bar tag, FEATURED + REQ badges
  # Text on dark
  paper-70: 'rgba(250,250,248,0.70)' # not used at exact value; see muted scale below
  # Hairlines
  rule-ink: '#0E0E0E'     # 2px brutalist rules between every cell/section (.brut-rule)
  rule-paper-15: 'rgba(250,250,248,0.15)' # faint rules inside dark statband
  rule-paper-20: 'rgba(250,250,248,0.20)' # faint rules inside dark footer
  # Muted (opacity-derived, on paper)
  ink-75: 'rgba(14,14,14,0.75)' # body paragraph on paper
  ink-60: 'rgba(14,14,14,0.60)' # secondary labels, region text
  ink-55: 'rgba(14,14,14,0.55)' # spec-sheet labels
  ink-50: 'rgba(14,14,14,0.50)' # table header labels
  ink-45: 'rgba(14,14,14,0.45)' # micro day/ascent captions
typography:
  display:
    fontFamily: "'Archivo Black', sans-serif"
    fontSize: clamp(2.6rem,11vw,11rem)
    fontWeight: 400
    lineHeight: 0.82
    letterSpacing: -0.02em
    textTransform: uppercase
  display-section:
    fontFamily: "'Archivo Black', sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
    textTransform: uppercase
  body:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.625
  data:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1
  label:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 10px
    fontWeight: 700
    letterSpacing: 0.1em
    textTransform: uppercase
rounded:                  # no radius anywhere — pure brutalist squares
  none: 0px
spacing:                  # 4px base unit (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  xxl: 32px
components:
  topBar:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    border: '2px solid {colors.ink} (bottom + cell dividers)'
    rounded: '{rounded.none}'
    padding: '10px 12px–20px per cell'
  warningTag:
    backgroundColor: '{colors.signal-yellow}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '10px 12px'
    label: 'FIT THRILL-SEEKERS ONLY'
  flagshipTag:
    backgroundColor: '{colors.voltage-orange}'
    textColor: '{colors.paper}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '4px 8px'
    label: 'FLAGSHIP TRAVERSE'
  statband:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.paper}'
    typography: '{typography.data}'
    rounded: '{rounded.none}'
    padding: '24px 20px per cell'
    # 2/4-col grid, faint paper/15 dividers, orange unit suffixes
  routeRow:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    padding: '16px per cell'
    # hover inverts to ink bg / paper text; 12-col grid; 2px dividers
  diffBar:
    backgroundColor: 'transparent'
    fillColor: '{colors.voltage-orange}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    height: '16px'
    # fill scaleX animated from 0 to data-diff
  ctaBand:
    backgroundColor: '{colors.voltage-orange}'
    textColor: '{colors.ink}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '40px 20px–32px'
  ctaButton:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.paper}'
    typography: '{typography.label}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '16px 24px'
    label: 'RESERVE EXPEDITION →'
    # hover inverts to paper bg / ink text
  gearTile:
    backgroundColor: '{colors.stone}'
    textColor: '{colors.ink}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '16px 20px'
    # checkbox = 16px square 2px border; optional yellow REQ badge
  guideCard:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    typography: '{typography.display-section}'
    rounded: '{rounded.none}'
    padding: '16px'
    # grayscale portrait, ink index chip, 3-up stat grid w/ ink gridlines
motion:
  counters: 'GSAP count-up from 0 to data-count, 1.6s, power2.out, on scroll into 90% viewport (once)'
  diffBars: 'GSAP scaleX 0 → data-diff, 1s, power3.out, on scroll into 92% (once)'
  reveal: 'GSAP from y:24 + autoAlpha:0, 0.5s, power2.out, on scroll into 92% (once)'
  rowHover: 'CSS background-color + color transition 0.18s ease (route rows, CTA button)'
icons:
  library: none
  style: 'no icon font; UI uses inline glyphs — slash "/" separators and "→" arrow'
  color: '{colors.ink}'

Switchback Co.

switchback-design · alpha

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

Overview

Switchback Co. is a swiss-brutalist expedition site for Dolomites trekking. The entire page sits on a warm off-white paper surface (#FAFAF8) printed in near-black ink (#0E0E0E), and every element is separated not by shadow or spacing but by a hard 2px black hairline (.brut-rule) that knits the page into one continuous editorial grid — a top bar of bordered cells, a 4-up dark stat band, a 12-column route table, a 12-column itinerary, a gear checklist, and a guide grid. A single safety-orange voltage (#FF5A1F) carries all the data energy: count-up figures, the difficulty bars, the final CTA band, and link hovers. A signal-yellow (#FFD400) plays the warning role on the "FIT THRILL-SEEKERS ONLY" tag and the FEATURED / REQ flags, and a warm stone grey (#D2CEC7) backs the gear section. Type is strictly two faces: condensed all-caps Archivo Black for every display heading (line-height as tight as 0.82, tracking -0.02em) and Roboto Mono for the entire body, all labels, and all tabular data. Nothing is rounded — corners are square, dividers are borders, depth is implied only by the inverted black bands.

Colors

Surface. paper #FAFAF8 is the page background and the fill of every card, spec cell, and inverted swatch. ink #0E0E0E is the near-black text and also the fill of the dark bands — the stat band under the hero, the footer, and the CTA button. stone #D2CEC7 is a warm grey that backs the MANDATORY KIT section and appears as the route-region text color on row hover.

Brand / Voltage. voltage-orange #FF5A1F is the single accent: it colors the unit suffixes (KM, M) and ascent figures, fills the difficulty bars (bg-[#FF5A1F]), is the background of the entire "BOOK THE TRAVERSE" CTA band, the slash in the wordmark, and the link/heading hover color. signal-yellow #FFD400 is the warning voltage: the top-bar "FIT THRILL-SEEKERS ONLY" tag, the FEATURED badge, and the REQ kit flags.

Text on dark. Inside the ink bands, paper is used at full strength for body and stepped down with opacity: labels at rgba(250,250,248,0.55), footer body at 0.50, fine print at 0.40.

Hairlines. On paper, rules are solid #0E0E0E at 2px (.brut-rule). Inside the ink bands, rules drop to rgba(250,250,248,0.15) (stat band) and 0.20 (footer) so the grid stays legible without competing with the orange.

Muted text on paper. Body copy is rgba(14,14,14,0.75); secondary labels and region text 0.60; spec labels 0.55; table headers 0.50; micro captions 0.45.

Typography

Two Google Fonts, imported together: @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Roboto+Mono:wght@400;500;700&display=swap'). Archivo Black (a single heavy weight, faux-condensed by tight tracking) is the display face — .font-display with letter-spacing:-0.02em, always uppercase. Roboto Mono (.font-mono, weights 400/500/700) is the default face on <body> and carries all running text, labels, and the numeric data. No serif, no third face.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(2.6rem,11vw,11rem)	400	0.82	-0.02em	Hero + CTA H1, uppercase
display-section	~24–36px (text-2xl→4xl)	400	1	-0.02em	Section H2 (ROUTES, GUIDES), card names
data	30–48px (text-3xl→5xl)	700	1	—	Stat-band counters, day numbers
body	14px	400	1.625	—	Spec paragraph, default copy
label	9–12px	700	—	~0.1em (tracking-wider/widest)	Captions, tags, table headers, uppercase

Layout

Base unit is 4px (Tailwind scale); padding clusters at 12/16/20/24/32/40px. The page is a single full-bleed column of bordered sections, no rounded container, no max-width wrapper — content runs edge to edge and is sliced by 2px rules into a grid. The hero is a 68vh→80vh photo with a paper headline plaque pinned to the bottom-left (border-t-2 border-r-2) and corner file labels. Below it a dark 4-up stat band. The Routes section is a 12-column table (IDX / ROUTE / REGION / DIST / V.GAIN / DAYS / DIFFICULTY) with per-cell borders; the Spec section is a lg:col-span-4 featured panel beside a lg:col-span-8 JS-built 11-row itinerary; Gear is a 1/2/3-col checklist grid on stone; Guides a 2/4-col card grid. Whitespace is structural, not generous — density and rules are the aesthetic.

Elevation & Depth

No box-shadows, no blur, no glass, no glow anywhere. Depth is created purely by (1) the 2px black hairline grid and (2) inverting whole bands to ink with paper text — the stat band, footer, and CTA button read as "pressed" planes. Inset stat clusters use a 1px (gap-px) ink gutter over an ink panel to fake a divided sub-grid. This is flat brutalism: structure over shadow.

Shapes

Zero radius. Every corner is a hard 90°. The only "shape" vocabulary is the rectangle and the 2px border: bordered cells, bordered badges, a 16px-square bordered difficulty track, and 16px-square gear checkboxes. No pills, no rounded buttons — even the CTA is a sharp-cornered block.

Components

• Top bar — paper bg, ink text, label type; row of cells split by 2px rules; ends in a yellow "FIT THRILL-SEEKERS ONLY" block. Wordmark "SWITCHBACK CO. / DOLOMITI" with the slash in orange.
• Warning tag — signal-yellow fill, ink text, uppercase 10px bold.
• Flagship tag — voltage-orange fill, paper text, "FLAGSHIP TRAVERSE".
• Stat band — ink bg, paper text, 2/4-col; giant mono counters with orange unit suffixes; faint paper/15 dividers.
• Route row — 12-col grid, 2px dividers, square; hover inverts to ink bg + paper text (region text → stone) over 0.18s.
• Difficulty bar — transparent 16px track with 2px ink border, orange fill animated by scaleX to data-diff.
• Day / itinerary row — DAY number in display face, name, ascent (orange) / descent split, refugio + altitude.
• Gear tile — stone bg, 16px-square 2px checkbox, uppercase label, optional yellow "REQ" badge.
• Guide card — grayscale portrait with ink index chip "0N", display name, orange "IFMGA MOUNTAIN GUIDE" line, 3-up YRS/SUMMITS/RANGE stat grid.
• CTA band — full orange band, display H1 "BOOK THE TRAVERSE", departure list, and ink "RESERVE EXPEDITION →" button that inverts to paper on hover.
• Footer — ink bg, paper text, 12-col link grid with orange column heads, bordered UIAA/IFMGA/CAI certification chips.

Motion

All motion is GSAP + ScrollTrigger, fired once on scroll-in. Counters odometer up from 0 to their data-count over 1.6s (power2.out). Difficulty bars scale horizontally from 0 to data-diff over 1s (power3.out). Every .reveal element rises y:24 from autoAlpha:0 over 0.5s (power2.out) when it hits 92% of the viewport. The only CSS transition is the 0.18s background/color swap on route rows and the CTA button hover. No looping or ambient animation.

Iconography

No icon library and no icon font are loaded. "Icons" are typographic: an orange slash / as a separator/divider mark throughout, and a → arrow on the reserve button. Imagery is photographic (Unsplash/Pexels mountain + portrait shots) treated with grayscale / contrast filters for the brutalist monochrome look.

Do's and Don'ts

• Do separate everything with the 2px ink hairline; the grid is the brand.
• Do keep display type all-caps Archivo Black and all data in Roboto Mono.
• Do reserve orange for data/CTA emphasis and yellow for warnings only.
• Do invert to ink bands instead of adding shadows for depth.
• Don't introduce any border-radius, drop shadow, blur, or glow.
• Don't add a third typeface or use a serif.
• Don't spread orange and yellow across decoration — they lose their signal.
• Don't add ambient/looping motion; effects fire once on scroll.

Known Gaps

• Section H2 and stat sizes are Tailwind responsive (text-2xl→text-5xl); the spec records representative px values rather than every breakpoint.
• Muted text colors are derived from Tailwind opacity utilities (text-[#0E0E0E]/NN); listed as their resolved rgba() equivalents.
• Hero/CTA clamp() display size is read literally from the inline style.
• No favicon, icon font, or third-party icon set is present — confirmed absent.