# Design Language for bada.city ## Aesthetics and Tone bada.city is a dopamine-saturated urban observatory — a site that feels like standing on the roof of a glass skyscraper at 2 AM while the entire city below has been re-rendered in candy-coated neon. It is not a real city; it is a city experienced through the euphoric lens of a data scientist who sees the world as streams of beautiful, interlocking metrics. Every number pulses. Every chart breathes. Every grid cell hums with the quiet satisfaction of information perfectly organized. The dopamine aesthetic here is not shallow or childish — it is the precise, controlled rush of pattern recognition. The candy brightness is deployed with the restraint of a luxury jeweler arranging gemstones in a velvet-lined case. Colors are vivid and saturated, but each one earns its place through contrast and spatial discipline. There is no visual noise; there is visual intensity, curated and composed. The overall feeling should be that of a premium data dashboard from a parallel universe where analytics software was designed by Yayoi Kusama and Dieter Rams together — obsessively colorful yet rigorously structured. The luxurious tone manifests not through gold leaf or serif gravitas, but through the sheer quality of visual rhythm: perfect spacing, immaculate alignment within the portfolio grid, and animation timing that feels handcrafted rather than parametric. Luxury here means every pixel has been considered, every transition has weight and purpose. ## Layout Motifs and Structure The site is built on a **portfolio-grid** system — a repeating, structured matrix of cells that tiles the viewport like a city block map viewed from above. This is not a loose masonry layout or a chaotic broken-grid; it is a deliberate, rigid grid with consistent gutter widths (16px) and cell proportions that follow a 4:3 / 1:1 / 16:9 rhythm across rows. **Grid Architecture:** - **Desktop:** A 4-column grid at 1200px max-width, with cells that alternate between single-column (1fr) and double-column (2fr) spans. Rows alternate between tall (400px) and short (200px) heights, creating a staccato visual rhythm reminiscent of a city skyline silhouette. - **Tablet:** Collapses to a 2-column grid preserving the height alternation. - **Mobile:** Single column, but cells retain their individual height ratios (never uniform), so the skyline rhythm persists vertically. **Structural Zones:** 1. **Observatory Deck (Hero):** Full viewport height. The grid is visible but empty — faint ruled lines at 10% opacity in lavender (#e0b0ff) on a deep midnight background (#0d0221). A single data-viz animation occupies the center: a radial bar chart that assembles itself from scattered particles, forming the letters "bada.city" as its bars reach their final values. Below, a single line of humanist type: a city-data aphorism. 2. **The Grid District (Main Content):** The portfolio grid fills 3-5 viewport heights. Each cell contains a self-contained data visualization or metric display — not decorative illustrations, but actual-looking charts, graphs, and numerical readouts rendered in CSS/SVG. Cells are color-coded by category using the candy-bright palette. The grid scrolls naturally but each cell triggers its own entrance animation as it crosses the viewport threshold. 3. **Control Room (Footer):** A single full-width bar at the bottom, styled as a status bar or dashboard footer — showing mock "live" data tickers, a miniature sparkline, and copyright text in a small humanist face. Background: deep grape (#1a0533). **Anti-Patterns:** - No hero carousel, no testimonial sections, no pricing tables. - No sidebar navigation — navigation is embedded within the grid as specially styled cells. - No floating elements or overlapping layers — the grid is sovereign; everything lives within it. ## Typography and Palette **Typography:** - **Display / Grid Headers:** "Outfit" (Google Fonts) — a geometric sans-serif with humanist warmth. Used at 2.5rem-5rem for the hero wordmark and grid section labels. Weight: 700 (Bold). Letter-spacing: -0.02em for that tight, confident feel. The rounded terminals of Outfit give it softness that prevents the bold weights from feeling aggressive — crucial for maintaining the dopamine-positive mood. - **Body / Data Labels:** "Source Sans 3" (Google Fonts) — a humanist sans-serif optimized for readability at small sizes, perfect for data annotations, chart labels, and paragraph text. Used at 0.875rem-1rem, weight 400 (Regular) and 600 (Semibold) for emphasis. Line-height: 1.65. The open counters and generous x-height make it legible even against saturated color backgrounds. - **Numerical / Data Readouts:** "DM Mono" (Google Fonts) — a monospaced face used exclusively for numbers, percentages, and data values within the grid cells. Used at 1.5rem-3rem for large metric displays. Weight: 500 (Medium). The mono spacing ensures numerical columns align perfectly, while the DM Mono letterforms are warmer and less clinical than typical code fonts. **Palette:** The candy-bright palette is built on five anchor colors plus two structural darks: | Role | Name | Hex | Usage | |------|------|-----|-------| | Primary | Electric Orchid | #bf5af2 | Hero accents, primary data series, interactive states | | Secondary | Candy Coral | #ff6f91 | Secondary data series, hover states, warm highlights | | Tertiary | Laser Lime | #a8ff3e | Success states, positive metrics, tertiary data series | | Accent | Cyan Shock | #32e0f6 | Links, focus rings, chart axes, cool-side highlights | | Highlight | Mango Burst | #ffb938 | Warnings, featured cells, sparkline peaks | | Background Deep | Midnight Grape | #0d0221 | Primary background, hero zone | | Background Mid | Dusk Plum | #1a0533 | Grid cell backgrounds, footer, card surfaces | | Text Primary | Pale Lavender | #f0e6ff | Body text on dark backgrounds | | Text Secondary | Dusty Orchid | #b088c0 | Secondary text, captions, muted labels | | Grid Lines | Ghost Violet | #2d1854 | Grid borders, dividers, structural rules | **Color Rules:** - Each grid cell gets ONE dominant candy color for its data visualization, drawn from the five anchors. No cell mixes more than two anchor colors. - Text is always Pale Lavender (#f0e6ff) or Dusty Orchid (#b088c0) — never the candy colors for body text. - The background never exceeds #1a0533 in lightness — the candy colors must always sing against near-black. ## Imagery and Motifs **Data Visualization as Imagery:** The site contains no photographs, no illustrations, no icons in the traditional sense. Every visual element is a data visualization — charts, graphs, metrics, sparklines, progress rings — rendered in CSS and inline SVG. These are not real data; they are fictional city-themed metrics presented as if they are real, creating the fiction that bada.city is a living dashboard for an imagined metropolis. **Visualization Types (one per grid cell):** 1. **Radial Bar Charts:** Concentric arcs in different candy colors, representing fictional district activity levels. Arcs animate from 0 to their final angle on scroll-trigger. 2. **Sparkline Ribbons:** Thin SVG path lines (2px stroke) that trace fictional time-series data — transit volume, energy consumption, pedestrian flow. Each sparkline uses a single candy color with a soft glow (filter: drop-shadow with 4px blur in the same color at 40% opacity). 3. **Dot Matrix Grids:** Small 8x8 or 12x12 grids of circles where each dot's fill color and size encodes a fictional data dimension. Dots animate in with a cascade pattern from top-left to bottom-right. 4. **Percentage Rings:** Large donut charts (SVG circle with stroke-dasharray animation) showing single fictional metrics — "District Pulse: 73%", "Network Uptime: 99.2%". Ring color from the candy palette, background ring in Ghost Violet. 5. **Vertical Bar Clusters:** Groups of 5-8 thin vertical bars of varying heights, resembling a city skyline in miniature. Each bar is a different candy color. Bars grow upward from baseline on scroll-trigger. 6. **Isometric Block Stacks:** Small CSS-rendered isometric cubes stacked in columns of varying height — a literal miniature city made of data blocks. Each cube face uses a tinted variant of a single candy color (lighter top face, medium left face, darker right face). **Motif: The Pulse Line** A continuous horizontal SVG sparkline runs behind the grid — a single thin line in Electric Orchid (#bf5af2) at 8% opacity that undulates gently, spanning the full width of the viewport. It is always visible behind the grid cells, creating the sense that the city has a heartbeat. This line uses a slow CSS animation (60s loop) to shift its wave pattern. **Motif: Grid Glow** On hover, any grid cell gains a subtle 1px border glow in its dominant candy color (box-shadow: 0 0 12px [color] at 30% opacity). This is the only hover effect — restrained, but it makes the grid feel alive and responsive. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site is experienced as a single continuous scroll from the empty observatory deck into the dense, vibrant grid district and out through the control room footer. There is no navigation bar at the top — the site is a vertical journey. The hero is 100vh of breathing space: the midnight grape background, the faint grid lines, and the assembling radial-bar wordmark. The scroll begins with emptiness and fills with data, mirroring the experience of a city waking up. **Scroll-Triggered Animations (Primary Pattern):** Every grid cell has an IntersectionObserver-driven entrance animation. When a cell crosses 20% into the viewport: - The cell background fades from transparent to Dusk Plum (#1a0533) over 400ms (ease-out). - The data visualization within the cell animates from its zero state to its final state over 800ms (cubic-bezier(0.34, 1.56, 0.64, 1) — a slight overshoot for dopamine satisfaction). - The cell label (in Outfit 700) fades in 200ms after the visualization completes. **Timing Discipline:** - All entrance animations use the same 800ms duration. - Stagger between cells in the same row: 100ms offset per cell (left to right). - No animation replays — once triggered, a cell stays in its final state. - The radial-bar hero animation plays once on page load, duration: 1800ms. **AVOID:** - CTA buttons, pricing blocks, stat-grids that look like marketing dashboards. - Parallax scrolling — the grid scrolls at a uniform rate. - Cursor-follow effects or magnetic elements. - Any content that breaks the grid — no full-bleed images, no overlapping elements. - Generic tech-startup copy. All text should read like data annotations and observatory field notes. **CSS Architecture Notes:** - Use CSS Grid (not flexbox) for the portfolio grid — `grid-template-columns: repeat(4, 1fr)` with `grid-column: span 2` on featured cells. - SVG visualizations should be inline (not background images) for animation control. - Use CSS custom properties for the candy palette to enable potential theme switching. - Prefer `stroke-dasharray` / `stroke-dashoffset` animations for chart drawing effects. - All text on dark backgrounds must pass WCAG AA for the target audience (Pale Lavender on Midnight Grape passes at 13.8:1). ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Data visualization as the ONLY imagery:** While data-viz appears in only 2% of existing designs and most sites use minimal/photography imagery (93%/54%), bada.city uses no photographs, no illustrations, no decorative imagery whatsoever. Every visual element is a functional-looking chart, graph, or metric display. The site is a gallery of fictional urban data, not a portfolio of images. This is a fundamentally different visual vocabulary. 2. **Portfolio-grid as rigid urban cartography:** The portfolio-grid layout (2% frequency) is used here not as a loose image gallery but as a strict, city-block-inspired matrix with enforced proportions and consistent gutters. The grid IS the content — it represents the city map itself. Cells are districts, not cards. This architectural commitment to the grid metaphor distinguishes it from the asymmetric (93%) and centered (86%) layouts that dominate the collection. 3. **Candy-bright palette on near-black without kitsch:** The candy-bright palette (4% frequency) is typically associated with children's brands or playful, casual designs. Here it is deployed against Midnight Grape (#0d0221) and Dusk Plum (#1a0533) backgrounds with the precision of luxury data products — think Bloomberg Terminal redesigned by a confectioner. The luxurious tone (9% frequency) prevents the bright colors from reading as frivolous; they read as premium and deliberate. 4. **No parallax, no stagger as primary pattern:** Despite parallax (97%) and stagger (95%) dominating the collection, bada.city uses neither as its primary animation strategy. Scroll-triggered (29%) cell-level animations with uniform timing replace the ubiquitous parallax depth illusion. The grid scrolls flat and honest; individual cells animate internally without the grid itself distorting or layering. 5. **Dopamine aesthetic treated as precision instrument:** The dopamine aesthetic (6% frequency) is not implemented as maximalist chaos or overwhelming stimulation. Instead, the dopamine response is engineered through precise animation timing (the cubic-bezier overshoot), color saturation against dark backgrounds (high chroma on low lightness), and the satisfaction of watching ordered data assemble itself. It is controlled euphoria, not sensory overload. **Documented Seed:** aesthetic: dopamine, layout: portfolio-grid, typography: humanist, palette: candy-bright, patterns: scroll-triggered, imagery: data-viz, motifs: tech, tone: luxurious **Avoided Patterns (from frequency analysis):** - corporate aesthetic (54%) — replaced with dopamine - asymmetric/centered layout dominance (93%/86%) — using rigid portfolio-grid instead - minimal imagery (93%) — using data-viz exclusively - parallax/stagger patterns (97%/95%) — using scroll-triggered cell animations - mono typography (97%) — using humanist (Outfit + Source Sans 3) with DM Mono only for numerical data - friendly tone (61%) — using luxurious instead - warm palette (100%) — candy-bright is cool-leaning (orchid, cyan, lime) despite its saturation