Austin Things To Do: Full Design Spec

1. Typography Stack

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Inter:wght@400;500&display=swap');

Role	Font	Weight	Size	Notes
Hero H1	Fraunces	600	clamp(40px, 8vw, 80px)	Italic variant for subtitle/pull-quote
Section H2	Fraunces	600	32px	Category headers
Card title	Fraunces	600	20px
Body / card description	Inter	400	16px base, 14px card	Line-height 1.65
Nav / pill / label	Inter	500	12px	Uppercase, letter-spacing 0.08em
Outbound link	Inter	500	14px

System fallbacks:

--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body:    'Inter', system-ui, -apple-system, sans-serif;

---

2. Color Palette

Role	CSS var	Hex	Usage
Background	--bg	#F7F4EF	Page background — warm paper
Surface	--surface	#FFFFFF	Cards, nav bar
Ink (text primary)	--ink	#1A1714	Headings, body
Ink muted (text secondary)	--ink-muted	#6B6560	Descriptions, captions
Accent	--accent	#C45C2E	Links, focus rings, CTA
Accent hover	--accent-hover	#A44A22	Hover/active on accent elements
Warm highlight	--highlight	#F2C94C	Neighborhood pills, active nav state
Border / divider	--border	#E2DDD7	Card borders, section dividers
Focus ring	--focus	#C45C2E	Same as accent, 2px outline

CSS custom properties block:

:root {
  --bg:           #F7F4EF;
  --surface:      #FFFFFF;
  --ink:          #1A1714;
  --ink-muted:    #6B6560;
  --accent:       #C45C2E;
  --accent-hover: #A44A22;
  --highlight:    #F2C94C;
  --border:       #E2DDD7;
  --focus:        #C45C2E;
}

Contrast checks (WCAG AA minimum 4.5:1 for normal text, 3:1 large): - --ink on --bg: ~15:1 (AAA) - --ink-muted on --bg: ~4.6:1 (AA) - --accent on --surface: ~4.8:1 (AA large text / buttons; use --accent-hover for small body links = ~5.9:1 AA) - White on --accent (hero): ~5.1:1 (AA)

---

3. Spacing Scale

:root {
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
}

---

4. Layout System

Container

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 5vw, 48px);
}

Hero section

• Full-width, min-height: min(80vh, 640px)
• Background: solid --accent with a subtle noise/grain texture via CSS filter: url(#grain) SVG filter (no image required)
• H1: Fraunces 600 italic, white, clamp(40px, 8vw, 80px), max 3 lines
• Intro line: Inter 400 18px, rgba(255,255,255,0.85), margin-top --space-4
• Bottom edge: inline SVG wave shape, fill: --bg, negative margin-bottom to overlap next section

Category navigation (sticky anchor nav)

.cat-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.cat-nav::-webkit-scrollbar { display: none; }

.cat-nav ul {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  padding: 0 var(--space-4);
  margin: 0;
  white-space: nowrap;
}

.cat-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: 100px;
  transition: background 0.15s, color 0.15s;
}

.cat-nav a:hover,
.cat-nav a.active {
  background: var(--highlight);
  color: var(--ink);
}

Smooth scroll: html { scroll-behavior: smooth; } with reduced-motion override.

Category sections

.category-section {
  padding: var(--space-16) 0;
}
.category-section + .category-section {
  border-top: 1px solid var(--border);
}

.category-section h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-8);
}

Card grid

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Card anatomy

┌──────────────────────────────────────┐
│ [▪ South Congress]  ← neighborhood  │
│                       pill, top-left │
│                                      │
│  Card Name                           │
│  (Fraunces 600, 20px, --ink)         │
│                                      │
│  One to two sentences describing     │
│  what makes this place worth going.  │
│  (Inter 400, 14px, --ink-muted,      │
│   line-height 1.65)                  │
│                                      │
│  Visit site →                        │
│  (only if URL known; --accent 14px)  │
└──────────────────────────────────────┘

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}

.card__neighborhood {
  display: inline-block;
  background: var(--highlight);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 100px;
  align-self: flex-start;
}

.card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.card__description {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
  flex: 1;
}

.card__link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--space-2);
}

.card__link::after {
  content: ' →';
}

.card__link:hover {
  color: var(--accent-hover);
}

---

5. Mobile-First Breakpoints

Breakpoint	Width	Changes
Base (mobile)	< 640px	1-col cards, 16px container padding, nav horizontal scroll
sm	>= 640px	2-col cards, nav wraps instead of scrolls
md	>= 960px	3-col cards, hero subtitle fully visible
lg	>= 1200px	Max-width container kicks in, hero H1 caps at 80px

---

6. Interaction Details

Hover: card lift

.card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}

Focus rings (all interactive elements)

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove mouse-click ring without nuking keyboard ring */
:focus:not(:focus-visible) {
  outline: none;
}

Smooth scroll

html {
  scroll-behavior: smooth;
}

Reduced motion (WCAG 2.1 SC 2.3.3)

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

---

7. Accessibility Floor

• Contrast: All foreground/background pairs checked above, all AA or better.
• Focus: focus-visible rings on every interactive element (links, nav anchors, cards with tabindex="0" if no link, footer links).
• Semantic HTML: <nav> for category nav, <section> per category with aria-labelledby pointing to H2, <article> for each card.
• Screen reader: Neighborhood pill text stays in DOM (not CSS pseudo), outbound links include aria-label="Visit [Name] (opens in new tab)" + target="_blank" rel="noopener noreferrer".
• Reduced motion: Respected as shown above.
• Font sizes: No text smaller than 11px (neighborhood pill), which is decorative-label role and uppercase — acceptable. Body minimum 14px.

---

8. Footer

.site-footer {
  padding: var(--space-12) var(--space-4);
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-muted);
  border-top: 1px solid var(--border);
}

Content: Austin, TX &bull; <current year> — no brand required, minimal.