TodoWeekend.

Style Guide.

The visual vocabulary of TodoWeekend. Tokens, typography, and UI primitives — defined once, used everywhere. If a page diverges from this guide, the page is wrong.

Colors

12 tokens, defined in globals.css under @theme inline. All text pairings are WCAG AA verified.

bg#f5f5f5Page backgroundvar(--color-bg)
bg-alt#ffffffSurfaces & cardsvar(--color-bg-alt)
card#ffffffPopovers & tooltipsvar(--color-card)
text#0a0a0aPrimary textvar(--color-text)
muted#595959Secondary text (AA 6.40:1)var(--color-muted)
muted-2#6a6a6aTertiary labels (AA 4.59:1)var(--color-muted-2)
border#e5e5e5Default bordersvar(--color-border)
border-strong#d4d4d4Hairlines & UI edgesvar(--color-border-strong)
hover#fafafaGhost button hovervar(--color-hover)
accent#f3350cBrand accent (≥18px text only)var(--color-accent)
accent-text#c8270aAccent for small text (AA 5.7:1)var(--color-accent-text)
accent-hover#d12d0aAccent hover statevar(--color-accent-hover)

Typography

Three type families. Outfit at 300 weight is the default body text with 1.7 line height. Headings drop to -0.02em tracking. Instrument Serif italic is reserved for display accents. DM Mono powers caps-style labels and tags.

Outfit
Weights · 300, 400, 500, 600Body & UIvar(--font-sans)
Instrument Serif
Weights · 400Display & accents (italic)var(--font-serif)
DM Mono
Weights · 400, 500Labels, caps, codevar(--font-mono)
H1 · clamp(2rem, 4.2vw, 3.6rem)
This weekend in Madrid.
H2 · 14px mono uppercase · 0.1em tracking
Section Heading
Body · Outfit 300 · 14px · 1.7 line-height
A curated, map-led guide to every event worth your time. The English weekend editor for Madrid, powered by open municipal data and an editorial scoring algorithm.
Lead · 16px · muted · 1.55 line-height
Short paragraph for intros. Slightly larger than body, softer color.
.monocaps · 10px mono · 0.12em tracking
Editor's picks · Updated weekly
.monocaps-xs · 9px mono · 0.15em tracking
Last updated · 14 Apr 2026
.serif · Instrument Serif italic
weekends deserve curation

Spacing

No formalized scale — spacing is set contextually with px values. Common increments below. Horizontal page padding is 3vw.

4px
8px
12px
16px
20px
24px
28px
32px
40px
60px

Border radii

4pxDefault controls
6pxButtons, cards, tags
999pxPill counters
50%Avatars, map markers

Shadows

Map markers0 1px 4px rgba(0,0,0,0.25)
Map controls0 4px 12px rgba(0,0,0,0.08)
Popovers0 10px 40px rgba(0,0,0,0.08)

Hairlines

Subtle 0.5px borders that separate without weighing down. Use --color-border-strong for UI edges, --color-border for soft dividers.

hairline (all sides)
hairline-t (top only)
hairline-b (bottom only)

Tags

The .tag class is the universal filter chip. Three states: default, hover (orange accent), active (filled accent).

DefaultActiveHover (simulated)

Buttons

No shared <Button> component yet — these patterns are duplicated inline. Candidates for extraction in Phase 3.

Back link

Motion

Durations cluster around 150–200ms for hovers and 2s loops for ambient pulses. Everything respects prefers-reduced-motion.

  • 150–200ms ease: hover transitions on links, tags, buttons
  • 180ms ease: carousel arrows, filter chips, underlines
  • 2s ease-in-out infinite: .live-dot pulse & map marker ping
Live pulse

Breakpoints

No named breakpoint tokens — values are hard-coded in media queries. Tailwind's md: prefix maps to 768px.

  • 700px — Card grid reflow
  • 768px — Nav desktop threshold (md)
  • 900px — Hero stats reflow
  • 960px — Event hero grid collapse