Visual + Structural Directions: Austin Things To Do v2¶
Anchored against the current build: warm-paper (#F7F4EF) background, burnt-sienna (#C45C2E) accent, Fraunces + Inter type stack, 3-col card grid, zero photography, zero dynamic data.
Direction 1: Cinematic Night Austin¶
Logline: Dark editorial magazine. Stubbs-at-midnight energy. Every section opens with full-bleed photography lit from within.
1. Hero Treatment¶
Full-bleed photograph of the Austin skyline reflected in Lady Bird Lake at night (or 6th Street neon). A near-black overlay (rgba(10, 8, 6, 0.55)) sits on top, letting the city glow through. The Fraunces italic H1 remains white, bumped to clamp(52px, 9vw, 96px), left-aligned. A transparent PNG of a longhorn skull silhouette anchors the bottom-right corner, partially cut off by the wave divider. The wave itself is midnight-tinted (#0F0D0B) rather than the page's warm paper.
2. Live Event Calendar Layout¶
Horizontal scroll timeline: events appear as dense day-columns across the viewport, each column headed by a date chip and holding 3-5 event cards stacked vertically inside it. On desktop the full 30-day span is skimmable with arrow controls; on mobile the columns snap-scroll. Events with photos show them as a left-rail thumbnail strip. Background: a near-black section panel with the burnt sienna used as a subtle glow border on the active day.
3. Maps Section¶
Full-width hero map (Leaflet.js, 100vw, 380px tall). Custom burnt-sienna pins cluster by venue type. Below the map, a horizontal row of event chips lets users filter by category (music / food / art) which highlights the corresponding pins. No side-panel; the map is the story.
4. Happy Hour + Sushi Layouts¶
Both use a "magazine spread" treatment: one large full-bleed photo left-panel (60% width on desktop) with a deep-tinted overlay, right-panel holding the card grid of spots in two columns. On mobile this collapses to a photo header + card list. Cards remain white-surface but gain a subtle left-border stripe color-coded by neighborhood.
5. Palette / Typography Evolution¶
Add a new token --ink-deep: #0F0D0B for dark section backgrounds. Fraunces italic weight gets heavier usage in pull-quote callouts. Section headers gain a thin-rule accent bar (--accent) to the left of the H2. Inter body stays the same.
6. Overlay + Background Strategy¶
Dark sections (--ink-deep fill) alternate with the existing warm-paper --bg. Photographs always carry a gradient overlay from rgba(0,0,0,0) at the top to rgba(15,13,11,0.7) at the bottom so text reads on every photo without additional scrim.
7. Asset Density Philosophy¶
High. Every section gets one photographic anchor: a single hero image per section sets the mood, then cards are text-dominant. Net effect: visually rich without every card needing its own photo (avoids the mosaic-overload problem).
Direction 2: Sun-Drenched Grid (Condé Nast Traveler x Austin)¶
Logline: Bright, modern travel editorial. Afternoon sunlight. Vivid photography grid that feels like the Austin Instagram feed done right.
1. Hero Treatment¶
Split composition: left 55% is a daylight photograph of Barton Springs Pool or a South Congress street scene with no overlay (full brightness). Right 45% is a solid burnt-sienna panel that holds the H1 text and subtitle. A transparent PNG of a cactus or prickly pear in flat-color fills the corner junction between the two halves, bleeding across the seam. On mobile, the photo stacks above the text panel.
2. Live Event Calendar Layout¶
Masonry grid: events are rectangular cards of variable height (photo-heavy events taller, text-only shorter). Category color chips (teal = music, amber = food, coral = arts) tag each card. A sticky month-strip lets you jump to a specific week. Layout is 2-col on mobile, 3-col on tablet, 4-col on desktop. This is the most visually dense option and feels most like a real events app.
3. Maps Section¶
Side-by-side split: map takes left 60% of the viewport, right 40% holds a scrollable event list that syncs with the visible map bounds. Hovering a list item highlights the pin; clicking a pin scrolls to the list item. On mobile, the map collapses to a 200px strip at the top with the list below. This approach keeps map + context visible at once.
4. Happy Hour + Sushi Layouts¶
Pure photo-card grids. Cards are square-aspect-ratio with a 180px image at the top, rounded corners, and minimal text below (name, neighborhood pill, one-line hook, hours). On desktop these are 4-col grids; on mobile 2-col. Happy Hour cards get an amber accent badge; Sushi cards get a teal one. Keeps the existing card system's DNA but adds photography prominently.
5. Palette / Typography Evolution¶
Add --teal: #0D9488 and --amber: #D97706 as new section-accent tokens; these only appear in Calendar and new section treatments, never overwriting the base burnt-sienna. The warm paper background and white surface cards are preserved. Typography stays the same; section H2s gain a two-tone treatment where the first word renders in --accent (burnt sienna) and the rest in --ink.
6. Overlay + Background Strategy¶
Minimal overlays. Photos are meant to be seen at near-full brightness. Section backgrounds stay warm paper. Subtle off-white panel (#FAF8F4) alternates with plain --bg to visually group sections without going dark.
7. Asset Density Philosophy¶
Moderate-high. Photography lives in cards, not as full-bleed section backgrounds. Transparent PNG decorative accents (wave motifs, abstract Texas shapes) appear in section headers only. Result: each card tells a visual story but the page never feels like an Instagram wall.
Direction 3: Texas Broadside (Print Heritage + Collage)¶
Logline: Austin weird, codified. Old concert-poster typography meets modern web. Layered transparent PNGs, hand-drawn-feel illustrated accents, and a bolder color system.
1. Hero Treatment¶
Full-bleed collage. A daytime Austin street photograph is the base layer. On top: multiple stacked transparent PNGs (guitar silhouette, live-oak branch, state-of-Texas outline) composited at varying opacities and positions, creating a poster-print depth effect. The H1 uses Fraunces at maximum optical size (144) in a stacked two-line format with an outlined/stroke treatment on one word (CSS -webkit-text-stroke: 2px #fff). Color temperature is warm amber (#F5A623) overlay blended on the photo to unify the collage.
2. Live Event Calendar Layout¶
Day-band table: a condensed calendar where each row is a date (bold left-rail label), and events within that day flow as horizontal chips sorted by time. This is the most scannable at-a-glance layout. On desktop, day rows span full-width with event chips truncated at the viewport edge; a "more" count expands inline. On mobile, rows collapse to accordion-style expandable day headers. Background for this section: a deep navy (#1E2A4A) section panel to make the event chips pop.
3. Maps Section¶
Embedded Leaflet map as its own full-width section panel (100vw × 420px). Custom SVG markers shaped like music notes, fork-and-knife, and cocktail glasses for type differentiation. Below the map: three tabs (All / Tonight / This Weekend) that filter the visible pins. No list panel at all; the map stands alone and links out to event detail pages. This is the boldest approach and most mobile-native.
4. Happy Hour + Sushi Layouts¶
Horizontal marquee strip: spots scroll horizontally in a snapping carousel with large photography (16:9 card thumbnails), the spot name in Fraunces large italic, and a colored price-tier badge. On desktop auto-plays slowly (CSS scroll-snap); on mobile it's touch-swipe. Happy Hour strip has an amber background tint; Sushi strip has a deep teal tint. Both feel like a food magazine pull-out insert.
5. Palette / Typography Evolution¶
Adds --navy: #1E2A4A and --amber-deep: #F5A623 as primary new section accents. Introduces a third typeface token --font-poster: 'Bebas Neue', 'Impact', sans-serif (loaded from Google Fonts) exclusively for calendar day labels and section intro kickers. Existing Fraunces + Inter stack is preserved for all body content. The palette now has four temperatures: warm paper (light), burnt sienna (mid-warm), navy (cool-dark), amber (vivid warm).
6. Overlay + Background Strategy¶
Section-level full-color panels alternate: warm paper > navy > warm paper > amber-tinted > warm paper. Each dark section uses a photographic background-image with a gradient overlay (angled 135deg). Transparent PNG accents are composited directly on top of these section backgrounds via absolutely-positioned <img> elements (not CSS background, so they remain accessible and cacheable).
7. Asset Density Philosophy¶
Highest of all three. Every major section has a full-bleed background (color or photo), multiple overlaid PNG elements, and cards with photography. The risk is visual fatigue; this direction depends on strong curation of assets and deliberate whitespace within each section panel.
Tradeoffs Table¶
| Direction 1: Cinematic Night | Direction 2: Sun-Drenched Grid | Direction 3: Texas Broadside | |
|---|---|---|---|
| Visual distinctiveness | High | Medium-high | Very high |
| Implementation effort | Medium | Medium | Large |
| Calendar layout | Horizontal timeline | Masonry grid | Day-band table |
| Maps approach | Full-width, filter chips | Side-by-side with list | Full-width, type markers, tabs |
| Happy Hour / Sushi layout | Magazine spread (photo + grid) | Photo card grids | Horizontal carousel strip |
| Asset dependency | 1 hero photo per section | Photo per card | Multiple layered PNGs per section |
| Palette change | Additive (dark tokens) | Additive (teal + amber) | Additive (navy + amber-deep + Bebas Neue) |
| Risk of looking generic | Low | Medium (standard travel-app grid) | Very low |
| Risk of visual overload | Low-medium | Low | Medium-high |
| Mobile-first friendliness | High | High | Medium (carousel + collage layer complexity) |
| Preserves current brand DNA | Moderate (darkens it) | High | Low (boldest departure) |
Recommendation¶
Start with Direction 2 (Sun-Drenched Grid) for the calendar + maps + new sections, combined with Direction 1's section background alternation strategy. Direction 2's photo-card grids are the safest bet for asset-availability (daylight Austin photos are abundant), the masonry calendar is the most usable UX for event browsing, and the side-by-side map is the most scannable. Borrowing Direction 1's dark section alternation adds the visual drama needed to avoid the "standard travel app" risk.
Direction 3 is the most ambitious and rewarding visually, but it depends on high-quality transparent PNG collage assets that are harder to source and takes longer to implement correctly. Reserve it as a potential hero-section treatment if the designer can source the illustrated overlays.
But the manager owns this call.