Austin Things To Do: Design Spec¶

Vibe¶

Warm, editorial Austin: the city's creative energy rendered as a Sunday-morning print magazine that lives on your phone. Confident typography and plenty of breathing room replace the noise of a typical city-guide app — it feels curated, not comprehensive.

Color Palette¶

Role	Token	Hex
Background	`--bg`	`#F7F4EF`
Surface (cards)	`--surface`	`#FFFFFF`
Text primary (ink)	`--ink`	`#1A1714`
Text secondary	`--ink-muted`	`#6B6560`
Accent (burnt sienna)	`--accent`	`#C45C2E`
Accent hover	`--accent-hover`	`#A44A22`
Warm highlight	`--highlight`	`#F2C94C`
Muted border	`--border`	`#E2DDD7`
Focus ring	`--focus`	`#C45C2E`

Rationale: #F7F4EF reads as warm paper, not grey. #C45C2E is Texas clay — unmistakably Southern without the longhorn cliche. #F2C94C accent highlight used sparingly (neighborhood pills, active nav state only).

Typography¶

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

Role	Family	Weight	Size
Display (hero H1, section headers)	Fraunces	600	clamp(40px, 8vw, 80px) for hero; 32px for section H2
Body	Inter	400	16px base (1rem)
Card title	Fraunces	600	20px
Card description	Inter	400	14px, line-height 1.6
Nav / label / pill	Inter	500	12px uppercase, letter-spacing 0.08em

Fallbacks: Fraunces, Georgia, serif / Inter, system-ui, sans-serif.

Layout System¶

Max-width and container¶

--max-width: 1200px;
--container-px: clamp(16px, 5vw, 48px);

Centered container, full-bleed background. Single <div class="container"> wraps all content.

Spacing scale (rem)¶

--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 */

Hero¶

Height: min(80vh, 640px), dark overlay on a textured/solid --accent background (no image dependency)
H1 in Fraunces italic 600, white, clamp(40px, 8vw, 80px)
Subtitle in Inter 400, white 80% opacity, 18px
Bottom edge: gentle wave SVG divider in --bg color

Category nav¶

Sticky at top: 0, z-index: 100, background: --bg, border-bottom 1px solid --border
Horizontal scrollable pill links on mobile (hide scrollbar), flex-wrap on tablet+
Active state: background: --highlight, color: --ink
Smooth scroll to section anchors (scroll-behavior: smooth on <html>)

Category sections¶

padding: --space-16 0;
border-top: 1px solid --border (except first);

Section H2: Fraunces 600 32px, margin-bottom --space-8

Card grid¶

/* Mobile: 1 column */
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);

/* Tablet 640px+ */
@media (min-width: 640px) {
  grid-template-columns: repeat(2, 1fr);
}

/* Desktop 960px+ */
@media (min-width: 960px) {
  grid-template-columns: repeat(3, 1fr);
}

Card anatomy¶

┌─────────────────────────────────┐
│ [Neighborhood pill]             │
│                                 │
│ Card Title (Fraunces 20px)      │
│                                 │
│ Description text (Inter 14px,   │
│ 2-3 lines max)                  │
│                                 │
│ [→ Visit site] (if URL exists)  │
└─────────────────────────────────┘

Background: --surface (#FFFFFF)
Border: 1px solid --border
Border-radius: 12px
Padding: --space-6
Box-shadow: 0 1px 3px rgba(0,0,0,0.06)
Neighborhood pill: background: --highlight, color: --ink, font: Inter 500 11px uppercase, border-radius: 100px, padding: 3px 10px
Outbound link: color: --accent, font: Inter 500 14px, arrow → appended, no underline by default

Breakpoints¶

/* Base: mobile-first, single column, 16px horizontal padding */
/* sm: 640px  — 2-col cards, nav wraps */
/* md: 960px  — 3-col cards, hero subtitle visible */
/* lg: 1200px — max-width cap kicks in, hero H1 tops out at 80px */

No JS breakpoint detection needed; pure CSS @media (min-width: Xpx).

Micro-details¶

Link styles¶

Body text links: color: --accent, underline offset 3px, no underline on default, underline on hover/focus
Nav links: no underline, uppercase Inter 500 12px
Card outbound link: color: --accent, font-weight: 500, text-decoration: none, arrow → via ::after pseudo

Card hover¶

.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 states¶

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

Remove default outline on :focus (not :focus-visible) to avoid mouse-click rings.

Reduced motion¶

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

Contrast check¶

--ink (#1A1714) on --bg (#F7F4EF): contrast ~15:1, AAA pass
--ink-muted (#6B6560) on --bg: contrast ~4.6:1, AA pass
--accent (#C45C2E) on --surface (#FFFFFF): contrast ~4.8:1, AA pass for large text; use --accent-hover (#A44A22) for small text links to hit AA small (~5.9:1)
White on --accent (hero): contrast ~5.1:1, AA pass

Simple single-row: --ink-muted Inter 13px, center-aligned, padding: --space-12 --space-4. "Austin, TX" with current year. No branding required.