Skip to content

Austin Things To Do v2: Upgrade Design Spec

Hybrid of Direction 2 (Sun-Drenched Grid) + Direction 1 (dark section alternation). Concrete px/hex/asset assignments for UI implementation.

Palette Additions (extends existing tokens)

:root {
  /* Existing tokens — unchanged */
  --bg:           #F7F4EF;
  --surface:      #FFFFFF;
  --ink:          #1A1714;
  --ink-muted:    #6B6560;
  --accent:       #C45C2E;
  --accent-hover: #A44A22;
  --highlight:    #F2C94C;
  --border:       #E2DDD7;

  /* New tokens for v2 */
  --section-dark:   #0F0D0B;        /* near-black section panels */
  --section-dark-2: #1A1410;        /* alternate dark for calendar */
  --teal:           #0D9488;        /* music/events badge */
  --amber:          #D97706;        /* food/happy hour badge */
  --overlay-mid:    rgba(15,13,11,0.55);   /* photo overlays, mid */
  --overlay-heavy:  rgba(15,13,11,0.72);   /* photo overlays, text-on-photo */
  --overlay-light:  rgba(15,13,11,0.25);   /* photo overlays, decorative only */
  --card-glow:      rgba(196,92,46,0.12);  /* accent glow on dark cards */
}

Typography Refinements

No new typefaces. Additions: - Section H2 on dark backgrounds: color: #F7F4EF (warm white), retains Fraunces 600 32px - Section kicker (eyebrow line above H2): Inter 500, 11px, uppercase, letter-spacing 0.12em, color: var(--accent) - Calendar day label: Fraunces 600, 24px, color: #F7F4EF - Calendar event title: Inter 500, 13px - Happy Hour / Sushi card name: Fraunces 600, 18px - Price tier badge: Inter 700, 10px, uppercase

Hero Section (upgraded)

Asset: assets/hero/austin-skyline-lady-bird-lake.jpg as background-image Fallback (if no image): gradient linear-gradient(160deg, #1A1410 0%, #2C1A0E 100%)

.hero {
  min-height: min(85vh, 700px);
  background-image:
    linear-gradient(to bottom, rgba(15,13,11,0.45) 0%, rgba(15,13,11,0.65) 100%),
    url('assets/hero/austin-skyline-lady-bird-lake.jpg');
  background-size: cover;
  background-position: center 40%;
  display: flex;
  align-items: flex-end;
  padding-bottom: 80px;
}
  • H1: Fraunces italic 600, clamp(52px, 9vw, 96px), white, left-aligned
  • Subtitle: Inter 400, 20px, rgba(247,244,239,0.85)
  • Bottom-right decorative PNG: assets/icons/longhorn-photo.jpg — treated as <img> with mix-blend-mode: screen; opacity: 0.18; width: 260px anchored bottom-right, clipped by wave divider
  • Wave divider color: --bg (#F7F4EF), not midnight (preserve warm-paper landing for content sections)

No structural change. Add active state scroll-spy via Intersection Observer.

.nav-pill.active {
  background: var(--highlight);
  color: var(--ink);
}

Pills: Restaurants, Outdoors, Music, Nightlife, Events, Map, Happy Hour, Sushi

Section Rhythm (background alternation)

Section Background Strategy Photo Asset
Things To Do (existing) --bg warm paper none
Live Events Calendar --section-dark + photo bg assets/sections/events-festival.jpg
Map --bg warm paper none (Leaflet map is the visual)
Happy Hour --section-dark + photo bg assets/sections/happy-hour-cocktails.jpg
Sushi --bg warm paper none (card images carry it)
Food (existing) --bg warm paper none
Music (existing) --section-dark + photo bg assets/sections/music-live.jpg
Outdoors (existing) --bg warm paper none
Nightlife (existing) --section-dark + photo bg assets/sections/6th-street.jpg

Dark sections use: 

.section--dark {
  background-image:
    linear-gradient(to bottom, var(--overlay-mid) 0%, var(--overlay-heavy) 100%),
    url('[section-photo]');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* parallax on desktop only */
}
@media (max-width: 768px) {
  .section--dark { background-attachment: scroll; }
}

Live Event Calendar Section

Section background: --section-dark + assets/sections/events-festival.jpg overlay at var(--overlay-heavy)

Layout: Masonry grid (Direction 2)

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}
/* mobile: 1col, tablet 768+: 2col, desktop 1024+: 3col */

Month filter strip

  • Sticky at top of calendar section: dark frosted bar rgba(15,13,11,0.85) backdrop-filter blur(8px)
  • Filter chips: Week 1 / Week 2 / Week 3 / Week 4 of the month
  • Active chip: background: var(--accent), color: white

Event card (on dark background)

.event-card {
  background: rgba(30, 22, 14, 0.85);
  border: 1px solid rgba(196,92,46,0.25);
  border-radius: 8px;
  overflow: hidden;
}
.event-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--card-glow);
}
  • Date chip: --highlight (#F2C94C) background, --ink text, top-left badge
  • Category badge: teal for music, amber for food, accent for arts
  • Event title: Fraunces 600 18px, color: #F7F4EF
  • Venue/time: Inter 400 13px, rgba(247,244,239,0.65)
  • Source link: Inter 500 12px, color: var(--accent)

Twemoji icons used in calendar

  • Music events: assets/icons/musical-notes.png 20px
  • Food events: assets/icons/fork-knife.png 20px
  • Tickets/all: assets/icons/ticket.png 20px

Map Section

Background: --bg warm paper (the Leaflet map is the hero visual here)

Leaflet map

#event-map {
  width: 100%;
  height: 440px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
@media (max-width: 768px) {
  #event-map { height: 300px; border-radius: 0; }
}
  • Tile layer: CartoDB Positron (https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png) — minimal, warm-paper compatible
  • Custom marker: burnt-sienna circle #C45C2E, 12px, white border 2px, radius 8 for regular events; 14px for featured
  • Cluster styling: --accent background, white text

Filter tabs (below map)

.map-tabs {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
}
.map-tab {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  font: 500 12px/1 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.map-tab.active { background: var(--accent); color: white; border-color: var(--accent); }
  • Map pin icon: assets/icons/map-pin.png rendered at 18px next to "Map" section H2
  • Calendar icon: assets/icons/calendar.png 18px next to event count summary

Happy Hour Section

Background: --section-dark + assets/sections/happy-hour-cocktails.jpg at var(--overlay-heavy) Fallback background: assets/sections/martini-bar.jpg

Layout: Magazine spread (Direction 1)

On desktop (1024px+): 

.happyhour-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

Left column: section intro + emoji icons + pull-quote (what is happy hour in Austin) Right column: card grid 2-col

On mobile: single column, section intro above cards

Happy Hour card

.happyhour-card {
  background: rgba(30,22,14,0.88);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: var(--space-4) var(--space-6);
}
  • Bar name: Fraunces 600, 18px, color: #F7F4EF
  • Neighborhood pill: --highlight background, --ink text, 10px Inter 700 uppercase, border-radius 4px
  • Hours: Inter 400, 13px, rgba(247,244,239,0.65), clock icon emoji prefix
  • Deal highlight: Inter 500, 13px, color: var(--highlight), leading assets/icons/beer.png 16px
  • Price tier: $ / $$ / $$$ badges in Inter 700 10px, aligned right

Section kicker icon: assets/icons/cocktail-glass.png + assets/icons/clinking-glasses.png displayed 32px, side by side, in section header area

Sushi Section

Background: --bg warm paper (photo lives inside cards)

Layout: Photo-card grid (Direction 2)

.sushi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}

Sushi card

.sushi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.sushi-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.sushi-card__body { padding: var(--space-4) var(--space-6); }
  • Card image: assets/sections/sushi-plate.jpg for all cards initially (UI team: map to individual URLs from JSON when available)
  • Restaurant name: Fraunces 600, 18px, --ink
  • Neighborhood pill: --teal (#0D9488) background, white text, Inter 700 10px uppercase
  • Signature dish: Inter 400, 14px, --ink-muted, italic
  • Price tier: colored dots (green=$, yellow=$$, red=$$$)
  • "View Menu" link: Inter 500, 13px, --accent, no decoration, hover underline

Section kicker icon: assets/icons/sushi-roll.png 28px in section header

Existing Section Upgrades

Food section (warm paper bg)

  • Section kicker: assets/icons/taco.png 28px + assets/icons/fire.png 24px in header area
  • Card grid unchanged; no photo needed per card (food description is text-dominant)

Outdoors section (warm paper bg)

  • Section kicker: assets/icons/cactus.png 28px
  • Pull photo: assets/sections/texas-hill-country.jpg as decorative right-floated 40% column image, border-radius 12px, on desktop only
  • Image treatment: border: 4px solid var(--border), box-shadow: 8px 8px 0 var(--highlight) (print-inspired offset shadow)

Music section (dark bg with assets/sections/music-live.jpg)

  • Section kicker: assets/icons/guitar.png 28px + assets/icons/musical-notes.png 24px
  • Card background: rgba(30,22,14,0.88), same dark card style as Events

Nightlife section (dark bg with assets/sections/6th-street.jpg)

  • Section kicker: assets/icons/moon.png 28px + assets/icons/sparkles.png 24px
  • Same dark card treatment

Transparent PNG / Decorative Asset Usage Summary

Asset Where used Display size Treatment
icons/longhorn-photo.jpg Hero, bottom-right 260px wide opacity: 0.18; mix-blend-mode: screen
icons/taco.png Food section kicker 28px Inline with H2
icons/sushi-roll.png Sushi section kicker 28px Inline with H2
icons/guitar.png Music section kicker 28px Inline with H2
icons/cocktail-glass.png Happy Hour kicker 32px Inline with H2
icons/clinking-glasses.png Happy Hour kicker 32px Inline with H2
icons/cactus.png Outdoors kicker 28px Inline with H2
icons/bat.png Footer / Congress Bridge callout 24px Decorative
icons/map-pin.png Map section H2 18px Inline
icons/calendar.png Events section H2 18px Inline
icons/musical-notes.png Music events in calendar 20px Card category icon
icons/fork-knife.png Food events in calendar 20px Card category icon
icons/ticket.png General events in calendar 20px Card category icon
icons/beer.png Happy Hour deals 16px Inline with deal text
icons/moon.png Nightlife section kicker 28px Inline with H2
icons/sparkles.png Nightlife kicker 24px Inline with H2
icons/fire.png BBQ / Food kicker 24px Inline
icons/prickly-pear.jpg Texas flavor callout 48px Decorative sidebar
icons/armadillo.jpg Fun fact callout 48px Decorative
icons/star.png Rating indicators 14px Repeated for star ratings
icons/sun.png Outdoors / Daytime events 20px Category badge

Photo Background Spec (CSS template)

/* All dark sections follow this pattern */
.section--dark {
  position: relative;
  background-color: var(--section-dark); /* fallback */
  background-image:
    linear-gradient(
      to bottom,
      rgba(15,13,11,0.50) 0%,
      rgba(15,13,11,0.75) 60%,
      rgba(15,13,11,0.90) 100%
    ),
    url('[photo-path]');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  color: #F7F4EF;
}

@media (max-width: 768px) {
  .section--dark {
    background-attachment: scroll; /* iOS parallax fix */
  }
}

/* Section headings on dark backgrounds */
.section--dark .section-title { color: #F7F4EF; }
.section--dark .section-kicker { color: var(--accent); }
.section--dark .card { background: rgba(30,22,14,0.88); border-color: rgba(196,92,46,0.25); }
.section--dark .card-title { color: #F7F4EF; }
.section--dark .card-desc { color: rgba(247,244,239,0.70); }

Texture Usage

Asset Where CSS
textures/dark-concrete.jpg Behind --section-dark panels as subtle grain background-blend-mode: multiply; opacity: 0.08 on a pseudo-element
textures/paper-vintage.jpg Behind --bg sections as parchment grain Same, opacity: 0.04
textures/bokeh-dark.jpg Hero alternative / large screen ambient bg Decorative only, heavy overlay masks it 
/* Texture grain overlay — apply to any section needing depth */
.section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/textures/paper-vintage.jpg');
  background-size: 400px 400px;
  background-repeat: repeat;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
.section--dark::before {
  background-image: url('assets/textures/dark-concrete.jpg');
  opacity: 0.06;
}

Responsive Breakpoints

/* Mobile-first */
/* Default: 1 column, full-width sections */
/* 640px: 2-col card grids */
/* 768px: parallax disabled, nav scrollable */
/* 1024px: 3-col card grids, happy hour magazine split */
/* 1280px: max-width container kicks in */

Hero Image Fallback Chain

If austin-skyline-lady-bird-lake.jpg fails to load: 1. Try austin-6th-night.jpg (darker, neon, still strong) 2. Try austin-skyline-acl.jpg (daylight but workable) 3. Final CSS fallback: linear-gradient(160deg, #1A1410 0%, #2C1A0E 60%, #C45C2E 100%)

Use <picture> element with srcset for the hero image for performance: 

<picture>
  <source media="(max-width: 768px)" srcset="assets/hero/austin-skyline-acl.jpg">
  <source media="(min-width: 769px)" srcset="assets/hero/austin-skyline-lady-bird-lake.jpg">
  <img src="assets/hero/austin-skyline-lady-bird-lake.jpg" alt="Austin skyline at Lady Bird Lake" class="hero__bg-img">
</picture>

Asset Coverage by Section

Section Hero/BG Photo Card Photos Decorative PNGs
Hero austin-skyline-lady-bird-lake.jpg - longhorn silhouette
Events Calendar events-festival.jpg none (text cards) ticket, musical-notes, fork-knife
Map none (Leaflet) - map-pin, calendar
Happy Hour happy-hour-cocktails.jpg none (text cards) cocktail-glass, clinking-glasses, beer
Sushi none (warm paper) sushi-plate.jpg sushi-roll
Food none none taco, fire
Music music-live.jpg none guitar, musical-notes
Outdoors none texas-hill-country.jpg (floated) cactus, sun
Nightlife 6th-street.jpg none moon, sparkles

Handoff for UI (s8): implement this spec in styles.css + index.html. All assets are at assets/ relative to index.html. Twemoji PNGs are 72x72 and should be displayed at the sizes listed above (browser scales them with image-rendering: auto). All photo assets have been downloaded and verified.