name: atlas-riders-design
version: alpha
description: >
  A rugged rally-roadbook aesthetic for a fictional Moroccan motorcycle-expedition
  outfit. The surface is warm desert sand (`#D8C4A0`) overprinted with a faint
  technical grid; the voltages are rally red (`#C43A30`) and amber (`#E89A1C`),
  with near-black bitumen (`#1A1814`) carrying inverted panels. The signature move
  is a navigator's roadbook: GSAP-drawn SVG route paths, monospace waypoint logs,
  coordinate readouts, rotated rubber stamps, and hard 2–3px ink rules dividing
  everything into grid panels. Type is a heavy condensed-feeling serif display
  (Bitter 900), humanist sans body (Cabin), and a Roboto Mono data face. Geometry
  is square-cornered and brutalist — borders do the work shadows normally would.
colors:
  # Brand / Voltage
  rally-red: '#C43A30'      # primary accent: stamps, route start/end dots, section eyebrows, progress bar, key waypoints
  amber: '#E89A1C'          # secondary accent: CTA button fill, fuel-stop markers, mid-route dots, highlighted figures
  # Surface
  sand: '#D8C4A0'           # page background, light panels/cards, text on dark sections
  bitumen: '#1A1814'        # near-black surface: dark sections (runs/CTA), ink rules/borders, headings on sand
  # Text
  ink: '#1A1814'            # headings + body on sand surface (same as bitumen)
  sand-text: '#D8C4A0'      # headings + body on dark bitumen surface
  # Hairlines (derived from ink/sand via rgba)
  ink-rule: 'rgba(26,24,20,0.2)'        # 1–2px dividers/borders on sand panels
  ink-rule-faint: 'rgba(26,24,20,0.12)' # faint section dividers on sand
  sand-rule: 'rgba(216,196,160,0.15)'   # hairline borders/dividers on dark surfaces
  # Decorative
  grid-line: 'rgba(26,24,20,0.06)'      # 32px grid-paper background texture
  marquee-fog: '#DCE4EC'                # cool off-white marquee text behind CTA at 0.04 opacity
typography:
  display:
    fontFamily: "'Bitter', serif"
    fontSize: clamp(64px, 9vw, 120px)
    fontWeight: 900
    lineHeight: 0.85
    letterSpacing: -2px
    textTransform: uppercase
  heading:
    fontFamily: "'Bitter', serif"
    fontSize: 52px
    fontWeight: 900
    lineHeight: 0.9
    textTransform: uppercase
  card-title:
    fontFamily: "'Bitter', serif"
    fontSize: 28px
    fontWeight: 900
    lineHeight: 0.95
    textTransform: uppercase
  body:
    fontFamily: "'Cabin', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.65
  label:
    fontFamily: "'Cabin', sans-serif"
    fontSize: 8px
    fontWeight: 400
    letterSpacing: 0.03em
  data:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1
  mono-meta:
    fontFamily: "'Roboto Mono', monospace"
    fontSize: 9px
    fontWeight: 700
    letterSpacing: 2px
    textTransform: uppercase
rounded:                      # essentially square; only SVG annotations soften
  none: 0px
  sm: 2px
  md: 3px
spacing:                      # 4px base unit
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 40px
components:
  cta-button:
    backgroundColor: '{colors.amber}'
    textColor: '{colors.bitumen}'
    border: '2px solid {colors.bitumen}'
    typography: '{typography.mono-meta}'
    rounded: '{rounded.none}'
    padding: '14px 28px'
    # hover: background -> rally-red, text -> sand
  route-card:
    backgroundColor: '{colors.sand}'
    border: '2px dashed rgba(216,196,160,0.4)'
    textColor: '{colors.ink}'
    rounded: '{rounded.none}'
    padding: '24px'
    width: '300px'
  stamp:
    backgroundColor: transparent
    border: '2.5px solid {colors.rally-red}'    # amber variant uses {colors.amber}
    textColor: '{colors.rally-red}'
    typography: '{typography.mono-meta}'
    rounded: '{rounded.none}'
    padding: '4px 10px'
    # rendered rotated ~ -11deg..+9deg
  stat-tile:
    backgroundColor: '{colors.sand}'
    border: '1px solid {colors.ink-rule}'        # 1px gap grid creates hairline gutters
    textColor: '{colors.ink}'
    rounded: '{rounded.none}'
    padding: '8px–10px'
  glass-stat:
    backgroundColor: 'rgba(26,24,20,0.7)'
    border: '1px solid {colors.sand-rule}'
    textColor: '{colors.sand-text}'
    rounded: '{rounded.none}'
    padding: '16px 20px'
    backdropFilter: 'blur(4px)'
  guide-row:
    backgroundColor: '{colors.sand}'
    borderBottom: '2px solid {colors.bitumen}'
    textColor: '{colors.ink}'
    rounded: '{rounded.none}'
motion:
  scroll-progress: 'Fixed 3px rally-red bar, scaleX 0->1 bound to scroll (motion.scroll, linear)'
  hero-entrance: 'GSAP: title y:60->0 opacity fade 1.2s power3.out; stamps scale/rotate back.out(2); CTA y:30->0'
  route-draw: 'GSAP ScrollTrigger pinned (+=1500, scrub 1): SVG route stroke-dashoffset draws over 4s, then APPROUVÉ/VÉRIFIÉ stamps fade in'
  horizontal-runs: 'GSAP pinned horizontal scroll of card track; nested per-card SVG route draws via containerAnimation'
  expect-reveal: 'GSAP ScrollTrigger.batch: columns opacity/y stagger in at top 80%'
  guides-slide: 'GSAP: rows slide in laterally (x -100 / +100) staggered, once'
  cta-marquee: 'motion: coordinate-string marquee x 0%->-50% over 25s linear infinite at 0.04 opacity'
  pulse-bar: 'CSS @keyframes pulse-bar: scroll indicator opacity/scaleY 2s ease-in-out infinite'
icons:
  library: 'Tabler Icons (webfont, ti-*) + game-icons via jsdelivr SVG + inline Unicode glyphs'
  style: 'outline / monoline; SVGs recolored via CSS filter to rally-red, amber, or black'
  sizes: { sm: 16px, lg: 60px }
  color: '{colors.ink}'
  notes: 'Unicode ⛽ for fuel stops, ✓ for checklist (amber), ↓/→ arrows; ti-send in CTA'

Atlas Riders

atlas-riders-design · alpha

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

Overview

Atlas Riders is the design system for "Dauntless Rally Co.", a fictional Moroccan motorcycle-expedition outfit, and it reads like a navigator's rally roadbook. The page sits on warm desert sand (#D8C4A0) overprinted with a faint 32px technical grid (rgba(26,24,20,0.06)), broken up by full-bleed dark "bitumen" sections (#1A1814). Two voltages do all the signalling: rally red (#C43A30) for stamps, route endpoints, eyebrows and the scroll-progress bar, and amber (#E89A1C) for the CTA fill, fuel stops and highlighted data. The signature moves are pure roadbook: GSAP-drawn SVG route paths, monospace waypoint ledgers with kilometre markers and GPS coordinates, rotated rubber-stamp chips ("APPROUVÉ", "ROUTE 01"), and a scrolling coordinate marquee behind the booking CTA. Geometry is brutally square — corners are 0, depth comes from hard 2–3px ink rules rather than shadows, and panels lock into grids separated by 1px hairline gutters. Type runs three voices: a heavy Bitter 900 serif display (uppercase, tight -2px tracking, 0.85 line-height), Cabin humanist sans for body copy, and Roboto Mono for every figure, label and coordinate.

Colors

Brand / Voltage. rally-red #C43A30 is the primary accent — stamps, route start/end dots, section eyebrows, the scroll-progress bar, and key waypoints. amber #E89A1C is secondary — the CTA button fill, fuel-stop markers, mid-route dots, and highlighted figures.

Surface. sand #D8C4A0 is the page background and the fill of light cards and stat tiles; it also serves as the text color on dark sections. bitumen #1A1814 is the near-black used for full-bleed dark sections (Season Runs, CTA footer), all ink rules/borders, and headings printed on sand.

Text. ink #1A1814 (identical to bitumen) is headings and body on sand; sand-text #D8C4A0 is type on bitumen. Body copy on sand commonly runs at opacity:0.55–0.7.

Hairlines. Derived via rgba: ink-rule rgba(26,24,20,0.2) and ink-rule-faint rgba(26,24,20,0.12) for dividers on sand; sand-rule rgba(216,196,160,0.15) for hairlines on dark.

Decorative. grid-line rgba(26,24,20,0.06) paints the 32px grid-paper texture; marquee-fog #DCE4EC is the cool off-white coordinate marquee behind the CTA, rendered at 0.04 opacity. The hero also layers two bitumen-based gradient scrims and a near-invisible scanline texture.

Typography

Three families, all loaded from Google Fonts: Bitter (serif display, weights 400/700/900 + italic), Cabin (humanist sans, 400/500/600), and Roboto Mono (400/500/700). All three are open-source so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(64px, 9vw, 120px)	900	0.85	-2px	Hero title
heading	52px	900	0.9	—	Section titles (uppercase)
card-title	28px	900	0.95	—	Route / section card names
body	14px	400	1.65	—	Cabin paragraph copy
label	8px	400	—	0.03em	Cabin small captions on tiles
data	28px	700	1	—	Big Roboto Mono figures (stats)
mono-meta	9px	700	—	2px	Mono eyebrows, stamps, coordinates (uppercase)

Smaller mono runs appear at 7–11px with 1–4px letter-spacing for waypoint logs, coordinate readouts and tile captions. The hero side title (58px) and runs heading (48px) are intermediate Bitter sizes.

Layout

Base unit is 4px; the recurring scale is 4 / 8 / 16 / 24 / 32 / 40px (section padding is mostly 32–40px). The page is a vertical stack of full-bleed sections: a 100vh video hero with a 3-row content grid (top coordinate bar / center title + stats / bottom status bar); a pinned three-column route-map section (14% / 61% / 25%) with a waypoint ledger, an SVG route canvas, and a data column; a dark horizontal-scroll "Season Runs" carousel of 300px route cards; a three-column "What to Expect" brief divided by 3px ink rules; full-width guide rows; and a dark CTA footer with a coordinate marquee. Panels lock into grids where 1px gutters over an ink-rule background read as hairlines. Whitespace is dense and editorial — everything is gridded, ruled, and labelled like a field document.

Elevation & Depth

Almost no shadows. Depth is carried by hard ink rules — 1px, 2px, and 3px solid bitumen borders divide sections and panels, with dashed variants on route cards and support notes. The one glass moment is the hero's stat column: rgba(26,24,20,0.7) tiles with backdrop-filter: blur(4px) over the video. Hero legibility relies on two stacked bitumen gradient overlays plus a faint grid and scanline texture. The aesthetic is deliberately flat and printed.

Shapes

Square by default — border-radius: 0 everywhere structural. The only rounding is on SVG annotations: rx:2–3 on fuel-stop boxes, day markers, and the stamp rectangles drawn into the route canvas. There are no pills and no rounded-full elements; even buttons and chips keep hard corners.

Components

• CTA button (.cta-btn) — amber #E89A1C fill, 2px bitumen border, mono 700 13px text at 0.1em, 14px 28px padding, square. Hover (footer instance) animates to rally-red fill with sand text. Labels: "VIEW 2025 ROUTES", "TRANSMIT FUNDS".
• Route card (.route-card) — 300px fixed width, sand fill, 2px dashed rgba(216,196,160,0.4) border, 24px padding; holds a rotated stamp, a card title, an inline SVG route, a 2×2 stat grid, and a START → END footer.
• Stamp (.stamp / .stamp-amber) — transparent, 2.5px rally-red (or amber) border, mono 700 uppercase text, 4px 10px padding, rendered rotated (~ -11° to +9°). Used for route numbers and stage badges.
• Stat tile — sand fill in a 1px-gap grid over ink-rule, big mono figure + small Cabin caption; square, hairline-gutter look.
• Glass stat (hero) — rgba(26,24,20,0.7) + blur(4px), 1px sand-rule border, sand mono figures.
• Guide row (.guide-row) — full-width flex row on sand, 2px bitumen bottom border; icon cell (tinted background) + name block + dossier + languages, separated by 2px vertical ink rules.
• Waypoint item — left border 1–2px (rally-red for endpoints), mono km figure
  • place label; assembled into a vertical ledger.

Motion

Heavily animated via GSAP + ScrollTrigger and the motion library. A fixed 3px rally-red scroll-progress bar scaleX-binds to scroll. The hero entrance slides the title up and pops the stamps with back.out(2). The route section pins for +=1500 and scrubs an SVG route path drawing itself (stroke-dashoffset) over 4s, then fades in two French rubber stamps. Season Runs is a pinned horizontal-scroll carousel whose per-card SVG routes redraw via containerAnimation. The brief columns batch-reveal with stagger; the guide rows slide in laterally. The CTA runs a 25s linear coordinate marquee at 0.04 opacity and a 0.25s color-swap button hover. A CSS pulse-bar keyframe animates the hero scroll indicator.

Iconography

Mixed: Tabler Icons webfont (ti ti-send in the CTA), game-icons SVGs pulled from jsdelivr for the guide portraits (recolored with CSS filter to rally-red, amber, or pure black at 60px), and inline Unicode glyphs (⛽ fuel, ✓ checklist in amber, ↓ / → arrows). Style is monoline/outline, colored from the voltage palette; icons are mostly decorative/illustrative rather than functional UI controls.

Do's and Don'ts

• Do keep corners square and let 1–3px solid bitumen rules carry structure and hierarchy.
• Do use rally-red and amber sparingly as signal — endpoints, fuel, stamps, eyebrows — against the sand/bitumen base.
• Do set all figures, coordinates, and labels in Roboto Mono, uppercase, with positive letter-spacing.
• Do reserve Bitter 900 uppercase for display/headings and Cabin for running copy only.
• Don't introduce rounded corners, soft shadows, or glossy elevation — the one glass panel (hero stats) is the only exception.
• Don't dilute the two-voltage scheme with extra accent hues, or set body copy in the serif display face.

Known Gaps

• Hairline border colors (ink-rule, sand-rule, etc.) are read from inline rgba(...) values used repeatedly across the markup and named here for clarity; they are not declared as CSS variables in the source.
• The hero background is a hosted MP4 video plus two gradient scrims and a near- invisible (0.03) scanline texture — described qualitatively, not as exact stops.
• Spacing tokens are inferred from the consistent 4px-multiple inline paddings; the HTML uses raw px values, not a named scale.
• marquee-fog #DCE4EC only ever renders at 0.04 opacity, so its effective on-screen color is far subtler than the listed hex.