---
name: travel-bucket
description: Use this skill whenever writing, editing, or reviewing any frontend code in this project — React components, Tailwind classes, layouts, pages, styles, or anything user-facing. Covers the design system, typography, color, spacing, component patterns, and the explicit anti-patterns to avoid for the Travel Bucket app. Trigger on any task touching /app, /components, .tsx, .css, or visual/UI work of any kind.
---

# Travel Bucket — Frontend Design Guide

This is a personal travel app for saving places, restaurants, trails, museums, and ideas for future trips. The design bar is high and opinionated. Read this fully before writing any UI code.

## North star
Editorial, considered, a little opinionated. References: Linear, Things 3, Partiful, NYT Cooking, Letterboxd's compact view, Are.na. NOT references: generic SaaS dashboards, Stripe marketing pages, default shadcn, Vercel templates.

## Hard rules — do not violate
- No purple or blue gradients. No gradients at all unless explicitly requested.
- No generic rounded-card grids. Density over whitespace. If a layout could appear in any AI-generated dashboard screenshot, redo it.
- No emoji as UI icons. Use Lucide or custom SVG. Emoji is allowed only in user-generated content.
- No pure white backgrounds. Use the warm off-white token below.
- No Inter for everything. Headers and place names use the serif. UI uses the sans.
- No "No items found" empty states. Write real copy with a suggested next action.
- No default shadcn look. shadcn primitives are fine as a base, but always restyled to match the tokens here.

## Tokens
Background: #FAF8F4 (warm off-white)
Surface: #FFFFFF (use sparingly, for elevated sheets only)
Border: #E8E3DA
Text primary: #1A1714
Text secondary: #6B645B
Text muted: #9A9289
Accent: #B8442B (burnt orange — use SPARINGLY, for active states, primary CTAs, current selection)
Accent muted: #F0D9D1

Pin colors by kind (map only):
- restaurant #B8442B · cafe #8B6F47 · bar #5C3A2E
- sight #3D5A4A · museum #6B4F7A · hotel #2C4A6B
- neighborhood #8A8579 · trail #4A6B3D · activity #C97B3F
- shop #7A5C8A · other #6B645B

## Typography
Display/headers/place names: Fraunces (Google Fonts), weight 400–500, tight tracking (-0.02em on large sizes).
UI/body/labels: Inter or Geist, weight 400 normal, 500 for emphasis, 600 sparingly.

Scale (don't invent new sizes):
- Display: 48px / 1.05 / Fraunces
- H1: 32px / 1.15 / Fraunces
- H2: 22px / 1.25 / Fraunces
- Body: 15px / 1.5 / Inter
- Small: 13px / 1.45 / Inter
- Micro: 11px / 1.4 / Inter, uppercase, tracking 0.06em

## Spacing & density
Base unit 4px. Prefer tight spacing: list rows are 56–64px tall, not 96px. Section padding 24px on desktop, 16px on mobile. Don't use space-y-8 on dense lists.

## Component patterns
- List rows: thumbnail (48×48, rounded-sm) on the left, name in Fraunces, meta line below in micro caps. Hover state lifts background to #F4F0E8, no shadow.
- Status pills: small, no background by default, just a colored dot + text. Filled background only for the active filter.
- Buttons: primary = solid accent, white text, no shadow, 8px radius. Secondary = transparent with 1px border in #E8E3DA. No "ghost with hover background" mush.
- Inputs: flat, no shadows, 1px bottom border only on focus. Background matches surface.
- Sheets/panels: open from the right on desktop (480px wide), bottom on mobile. Framer Motion, spring not tween, ~300ms.
- Map pins: filled circle 12px with 2px white ring, no labels. Active pin scales to 16px.

## Microinteractions
Use Framer Motion. Filter changes animate the list with a subtle stagger (~20ms). List ↔ map hover sync is instant. Sheet opens spring { stiffness: 300, damping: 30 }. If in doubt, less.

## Empty states
Every empty state needs: a one-line headline in Fraunces, a one-sentence explanation, and a primary action. Example:
> Nowhere to go yet.
> Save your first place — paste a Google Maps link or search for somewhere you've been thinking about.
> [+ Add a place]

## When unsure
Open Linear or Things 3 in your head. Ask: would they ship this? If no, redo it. If you're reaching for a gradient, a drop shadow, or a card grid — stop and reconsider.