name: milemarker-design
version: alpha
description: >
  Milemarker is a retro Americana road-trip planner built on a warm cream
  surface (#FBF1DC) with a charcoal (#2A2A2A) ink and a trio of vintage-signage
  voltages — highway orange (#F26B3A), motel teal (#2E9CA6), and neon pink
  (#F25C9C). The signature moves are a chrome-gradient script display title, a
  split charcoal/orange hero halved by a dashed-line "road," diamond-clipped and
  circular media frames, neon drop-shadow glows, thick black-outlined cards on
  tilt, and chunky tactile buttons with a hard 6px offset drop shadow. Type
  pairs a heavy Lobster Two script for display with Poppins for body and DM Mono
  for uppercase, wide-tracked labels.
colors:
  # Surface
  cream: '#FBF1DC'          # primary page surface, hero left text, light cards
  ink: '#2A2A2A'            # primary text, dark sections, card borders, hero left half
  # Brand / Voltages
  orange: '#F26B3A'         # highway orange — hero right half, buttons, marquee, footer
  teal: '#2E9CA6'           # motel teal — builder section bg, badges, log day labels
  neon-pink: '#F25C9C'      # neon accent — star glow, pins, music icons, checks
  # Dark variants / Hairlines
  ink-dark: '#1c1c1c'       # darker border on console card
  tactile-shadow: '#1f1f1f' # hard offset shadow color under tactile buttons
  # Chrome gradient (display title)
  chrome-top: '#ffffff'     # chrome-text gradient highlight stops
  chrome-mid: '#9aa0a6'     # chrome-text gradient mid (metallic gray)
  chrome-soft: '#c9ced3'    # chrome-text gradient lower highlight
typography:
  display:
    fontFamily: "'Lobster Two', cursive"
    fontSize: clamp(19vw, 12rem, 12rem)   # hero h1; section h2 5xl–7xl
    fontWeight: 700
    lineHeight: 1
  body:
    fontFamily: "'Poppins', sans-serif"
    fontSize: 16px
    fontWeight: 400
  body-semibold:
    fontFamily: "'Poppins', sans-serif"
    fontSize: 16px
    fontWeight: 600
  mono-label:
    fontFamily: "'DM Mono', monospace"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 1.6px      # tracking-widest / tracking-[0.4em] on overlines
    textTransform: uppercase
rounded:
  sm: 8px        # rounded-lg badges, list rows (rounded-xl ~12px), small chips (rounded)
  md: 16px       # rounded-2xl cards (find cards, logbook panel)
  lg: 28px       # rounded-[28px] console & glovebox panels
  xl: 40px       # rounded-[40px] diamond hero media frame
  full: 9999px   # rounded-full map circle, logbook timeline dots
spacing:         # base unit 4px (Tailwind scale); section rhythm in 24px steps
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 48px
  section: 96px  # py-24
components:
  primaryButton:
    backgroundColor: '{colors.neon-pink}'
    textColor: '{colors.ink}'
    typography: '{typography.mono-label}'
    padding: '16px 32px'   # px-8 py-4
    elevation: 'tactile (0 6px 0 #1f1f1f, 0 8px 12px rgba(0,0,0,0.35); active translateY 4px)'
  navButton:
    backgroundColor: '{colors.teal}'
    textColor: '{colors.cream}'
    typography: '{typography.mono-label}'
    padding: '10px 20px'   # px-5 py-2.5
    elevation: 'tactile'
  actionButton:
    backgroundColor: '{colors.orange}'
    textColor: '{colors.cream}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.sm}'   # rounded-xl
    padding: '16px'           # py-4 full-width / px-10 py-5 export
    elevation: 'tactile'
  findCard:
    backgroundColor: 'gradient teal/orange → {colors.cream} (to-b)'
    border: '4px solid {colors.ink}'
    rounded: '{rounded.md}'
    transform: 'rotate(±1deg)'
    titleTypography: '{typography.display}'
  consolePanel:
    backgroundColor: '{colors.ink}'
    border: '4px solid {colors.ink-dark}'
    rounded: '{rounded.lg}'
    padding: '32px'        # p-8
    elevation: 'shadow-2xl'
  gloveboxPanel:
    backgroundColor: '{colors.teal}'
    border: '4px solid {colors.cream}'
    rounded: '{rounded.lg}'
    padding: '32px'
  stopRow:
    backgroundColor: '{colors.cream}'
    rounded: '{rounded.sm}'   # rounded-xl
    padding: '12px 16px'      # px-4 py-3
    badge: 'mono number on {colors.teal} / {colors.cream} text'
  logbookPanel:
    backgroundColor: '{colors.cream}'
    rounded: 'rounded-r-2xl rounded-l-lg (asymmetric, binder edge)'
    padding: '48px 48px 48px 80px'  # p-12 pl-20
    divider: '2px dashed {colors.ink} @ 30% opacity'
    binderDots: 'w-7 h-7 rounded-full border-4 {colors.ink}'
motion:
  heroRoad: 'GSAP ScrollTrigger scrub — dashed center-line strokeDashoffset draws as hero scrolls'
  findCardsStagger: 'GSAP from y:80 opacity:0, dur 0.8, stagger 0.15, power3.out @ #finds top 70%'
  logRowsStagger: 'GSAP from x:-40 opacity:0, dur 0.6, stagger 0.12, power2.out @ #log top 65%'
  marquee: 'CSS @keyframes marqueeMove translateX(0 → -50%), 24s linear infinite (song-title ticker)'
  pinDrop: 'GSAP from y:-400, dur 1.1, bounce.out + expanding dust puff on Add Stop'
  tactilePress: 'transform translateY(4px) + collapsed shadow on :active'
  reducedMotion: '@media prefers-reduced-motion disables marquee + all GSAP animations'
icons:
  library: Tabler Icons (ti, webfont via jsDelivr) + game-icons staryu SVG (hero star)
  style: outline/filled mixed (ti-map-pin-filled, ti-flag-filled, ti-circle-check)
  sizes: { sm: 16px, md: 20px, lg: 24px, xl: 48px }
  color: '{colors.neon-pink} (glow accents) / {colors.ink} (UI)'

Milemarker

milemarker-design · alpha

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

Overview

Milemarker is a nostalgic Route-66 road-trip planner that wears its retro Americana on its sleeve. The whole page rests on a warm cream paper surface (#FBF1DC) with charcoal ink (#2A2A2A), and runs on three vintage-signage voltages: highway orange (#F26B3A), motel teal (#2E9CA6), and neon pink (#F25C9C). The hero is split down the middle — a charcoal left half and an orange right half — with a dashed yellow-cream "road" line running vertically between them that GSAP draws as you scroll. The display word "Milemarker" is set in heavy Lobster Two script and filled with a vertical chrome gradient (#ffffff → #9aa0a6 → #ffffff) plus a hard text-shadow, reading like polished car trim, while a neon-pink game-icons star burns above the diamond-clipped hero video. Cards are thick-black-outlined, gently rotated like luggage stickers, and filled with teal- or orange-to-cream gradients. Every button is a chunky "tactile" slab with a hard 6px offset shadow that presses down on click. Body copy is Poppins; all the overlines, badges, ticker text, and the song marquee are DM Mono, uppercase, widely tracked. The geometry mixes a perfect circle radar map, a diamond-clipped media frame, and asymmetric binder-edge logbook panels.

Colors

Surface. cream #FBF1DC is the dominant page background and also the light card / list-row fill and the inverted text color on dark sections. ink #2A2A2A is the primary text color, the dark section backgrounds (builder console wrapper, glovebox, logbook section, footer), the hero's left half, and the 4px outline on every find card.

Brand / Voltages. orange #F26B3A is highway orange — the hero's right half, the action buttons (Add Stop, Export, Build), the song marquee bar, and the footer's outer band. teal #2E9CA6 is motel teal — the builder section background, the mono number badges, the glovebox panel, and the DAY labels in the logbook. neon-pink #F25C9C is the electric accent, almost always glowing — the hero star (neon-star triple drop-shadow), the dropped map pins (neon-pink), the music notes in the marquee, the glovebox check icons, and the logbook map pins. The primary CTA "Build My Route" is the only solid pink fill.

Dark variants / Hairlines. ink-dark #1c1c1c is the slightly darker border on the console panel; tactile-shadow #1f1f1f is the hard offset-shadow color beneath tactile buttons. Many borders are the cream or ink at full strength (4–8px), with dashed dividers at ink/30%.

Chrome gradient. The display title uses linear-gradient(180deg, #ffffff, #e6e6e6, #9aa0a6, #c9ced3, #ffffff) clipped to text, giving a metallic chrome look — chrome-top #ffffff, chrome-mid #9aa0a6, chrome-soft #c9ced3.

Typography

Three Google Fonts loaded via one @import: Lobster Two (display script), Poppins (body / UI), and DM Mono (labels). All are open-source Google Fonts, so no substitution is required.

Token	Size	Weight	Line-height	Tracking	Usage
display	19vw / 12rem (h1); 5xl–7xl (h2/h3)	700	1 (leading-none)	normal	Hero title, section headings, card/log titles
body	16px (base / lg)	400	normal	normal	Paragraphs, descriptions
body-semibold	16px	600	normal	normal	Stop-row city names
mono-label	12px (xs) – 14px (sm)	400	normal	tracking-widest → tracking-[0.4em]	Overlines, nav, badges, buttons, marquee, footer

Layout

Base unit is 4px (Tailwind scale); section vertical rhythm is py-24 (96px) and panels use p-8 (32px). Content is centered in max-w-6xl (logbook in max-w-4xl) with px-6 gutters. The page is a vertical stack of full-bleed colored sections: a min-h-screen split hero, a teal builder (2-col: console + circular radar map), a cream "Roadside Finds" 3-col card grid (cards tilted and md:offset), an ink section carrying the orange song marquee plus a 2-col glovebox checklist, an ink logbook with an asymmetric binder panel and a vertical binder-dot rail, and an ink footer with a chrome wordmark over a 4-col link grid, wrapped in an orange band. Signature structural moves: the 50/50 hero halves seamed by the dashed road SVG, the circular radar map with a concentric radial-gradient grid, the diamond-clipped hero video, and the tilted sticker cards.

Elevation & Depth

Depth is built from heavy borders and one signature hard shadow, not soft material elevation. Buttons use tactile-btn: box-shadow: 0 6px 0 #1f1f1f, 0 8px 12px rgba(0,0,0,0.35) — a flat black ledge plus a soft cast shadow — and on :active they translate down 4px and the ledge collapses to 0 2px 0. Panels and media use Tailwind shadow-2xl. Cards and panels lean on thick outlines (4px ink, 8px ink on the map, 6px cream on the hero frame). Glows come from multi-layer drop-shadow filters: neon-star stacks three pink shadows out to 60px, neon-pink two, and the chrome title adds text-shadow 0 4px 0 rgba(0,0,0,.25) plus a drop-shadow.

Shapes

A deliberate mix. Buttons and number badges are nearly sharp (rounded/ rounded-xl, 8–12px). Cards and the logbook panel are rounded-2xl (16px), with the logbook intentionally asymmetric (rounded-r-2xl rounded-l-lg) to read like a spiral binder. Console and glovebox panels are softer rounded-[28px]. The hero media frame is rounded-[40px] and then diamond-clipped via clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%). Fully round elements are the radar map (rounded-full) and the binder timeline dots.

Components

• primaryButton — neon-pink #F25C9C fill, ink text, DM Mono uppercase, px-8 py-4, tactile shadow. Label e.g. "Build My Route".
• navButton — teal #2E9CA6 fill, cream text, mono uppercase, px-5 py-2.5, tactile. Label "Start Trip".
• actionButton — orange #F26B3A fill, cream text, mono uppercase, rounded-xl, py-4/px-10 py-5, tactile, leading Tabler icon. Labels "Add Stop", "Export To Dashboard".
• secondaryButton — cream #FBF1DC fill, ink text, mono uppercase, px-8 py-4, tactile. Label "Watch the Drive".
• findCard — gradient (teal-or-orange → cream, to-b), 4px ink border, rounded-2xl, rotated ±1°, mono "STOP 0x" chip + Tabler icon header, full-bleed image with border-y-4 ink, Lobster Two title.
• consolePanel — ink #2A2A2A fill, 4px #1c1c1c border, rounded-[28px], p-8, shadow-2xl; holds cream stop-rows with teal mono number badges.
• gloveboxPanel — teal fill, 4px cream border, rounded-[28px], p-8; 2-col mono checklist with neon-pink ti-circle-check icons.
• radarMap — cream circle, 8px ink border, rounded-full, concentric teal radial-gradient grid at 30% opacity, faint compass icon, GSAP drop-pin zone.
• logbookPanel — cream fill, asymmetric rounded-r-2xl rounded-l-lg, p-12 pl-20, shadow-2xl; left binder-dot rail, dashed ink/30 row dividers, teal DAY/MI mono labels, pink/orange pin & flag icons.
• marquee — orange bar with border-y-4 ink, DM Mono uppercase 2xl, neon-pink music notes, 24s loop.

Motion

Driven by GSAP 3 + ScrollTrigger plus one CSS keyframe. The hero center road line draws via strokeDashoffset scrubbed to hero scroll. Find cards rise and fade in (y:80 → 0, stagger 0.15, power3.out); log rows slide in from the left (x:-40, stagger 0.12, power2.out). The song marquee runs an infinite 24s linear translateX(0 → -50%). "Add Stop" drops a pin with bounce.out over 1.1s and kicks up an expanding dust puff. Buttons depress on :active. All GSAP and the marquee respect prefers-reduced-motion: reduce.

Iconography

Tabler Icons webfont (ti ti-*, via jsDelivr) supplies all UI glyphs — mixed outline and filled (ti-route, ti-compass, ti-map-pin-filled, ti-flag-filled, ti-circle-check, ti-key, ti-tag, ti-coffee, ti-music, ti-plus, ti-download). Sizes run 16–48px via Tailwind text sizing. A single decorative game-icons "staryu" SVG serves as the glowing hero star. Accent icons are neon-pink with multi-layer drop-shadow glows; UI icons are ink or cream.

Do's and Don'ts

• Do keep the cream surface, charcoal ink, and the three voltages (orange, teal, pink) — they carry the retro-Americana identity.
• Do use Lobster Two only for display/titles and the chrome-gradient fill for the wordmark; keep all labels in DM Mono uppercase with wide tracking.
• Do outline cards and panels with thick (4–8px) borders and tilt the sticker cards slightly; use the tactile button shadow everywhere a button appears.
• Do reserve the neon-pink glow for accent moments (star, pins, checks, music notes), not for large fills.
• Don't introduce soft material elevation or rounded-everything; the depth comes from hard ledges, glows, and heavy outlines.
• Don't set body copy in the script face or drop the uppercase mono tracking on labels.
• Don't flatten the hero's split halves or remove the dashed road seam — it's the signature move.

Known Gaps

• The display fontSize is responsive (text-[19vw] mobile, md:text-[12rem], and 5xl–7xl for section headings); the token records the hero clamp range as an approximation of one fluid scale.
• The chrome gradient uses five stops (#ffffff, #e6e6e6, #9aa0a6, #c9ced3, #ffffff); only three are captured as named tokens (#e6e6e6 omitted as a near-duplicate highlight).
• mono-label letterSpacing is given as 1.6px to represent tracking-widest; some overlines use tracking-[0.4em] (~4.8–5.6px) for a wider variant.
• Spacing scale is inferred from the Tailwind classes actually used; not every one-off value is enumerated.