# Design Language for bada.city ## Aesthetics and Tone bada.city (bada = 바다, Korean for "sea") envisions a fictional coastal city where Victorian civic architecture has been reclaimed by the ocean -- council chambers with barnacle-encrusted columns, wrought-iron street lamps hung with dried seaweed, public notices posted on sun-bleached boards outside the harbormaster's office. The visual identity merges Victorian ornamental sensibility (the decorative exuberance of William Morris wallpapers, the civic gravitas of municipal buildings) with the raw, weathered textures of a port town battered by decades of salt wind. Think of the administrative heart of a Hayao Miyazaki coastal town -- Spirited Away's bathhouse meets a British seaside borough hall. The domain suggests both "sea city" and the Korean internet slang register where .city implies community/hub. The tone is raw-authentic: municipal communications stripped of marketing gloss, written with the directness of a harbor bulletin board and the quiet beauty of a well-maintained public garden being slowly overtaken by wild coastal plants. ## Layout Motifs and Structure The layout follows an **F-pattern** reading structure -- the natural scanning pattern of information-heavy documents -- reflecting the civic/municipal information architecture of a city portal. **Primary structure:** - **Opening viewport (100vh):** A creamy-pastel background (#F0E9DD) with a large Victorian-style city seal centered at the top (SVG: circular border with decorative rope knots, containing a stylized wave-over-buildings silhouette). Below the seal, "bada.city" in a clean grotesk typeface, then a subtitle: "Municipal Registry of Maritime Affairs." Below this header, two columns emerge: a wider left column (65%) for primary content and a narrower right column (35%) for sidebar notices and marginalia. - **F-pattern content flow:** The left column contains the primary reading flow -- long-form articles, registry entries, and proclamations styled as official municipal documents with decorative first-letter drop caps, section numbers (Article I, Article II...), and ornamental rules between entries. The right sidebar contains "Public Notices" -- smaller cards with different background tints (#E8E0D2) containing brief announcements, tide tables, harbor schedules, and botanical observations. - **Glitch disruptions:** Periodically (every 3-4 screen heights), a section glitches -- the text momentarily shifts color to inverted (#3D3229 background, #F0E9DD text), horizontal displacement bars streak across for 200ms, and the content "corrects" itself back. This represents the unstable nature of the city -- the sea encroaching on the civic order, digital entropy eating at the municipal record. - **Interstitial panoramas:** Between major content sections, full-width strips (15vh height) contain CSS-rendered coastal cityscapes -- layered silhouettes of Victorian rooftops, church spires, lighthouse towers, and harbor cranes against a pastel sky gradient. These are purely decorative breathing spaces. - **Footer:** Styled as a municipal seal/stamp section -- the city seal repeated smaller, "Filed and Recorded" text, and a date stamp. Background: #3D3229 with #F0E9DD text. ## Typography and Palette **Fonts:** - **Headlines/Logotype:** "DM Sans" (Google Fonts) -- a clean, low-contrast geometric grotesk with a modern Scandinavian character but enough personality to avoid sterility. Weight 700 for the logotype, 500 for section headers. Size: clamp(22px, 3.5vw, 44px). Letter-spacing: 0.03em. Its geometric construction references Swiss rationality while the slight warmth suits the civic tone. - **Body text:** "Libre Baskerville" (Google Fonts) -- a web-optimized Baskerville with excellent readability for long-form municipal text. Weight 400, line-height: 1.8. Size: clamp(15px, 1.1vw, 17px). The serif letterforms give the long-form content the gravitas of official documents while remaining comfortable for extended reading. - **Notices/Labels:** "Space Mono" (Google Fonts) -- used for sidebar notices, tide tables, date stamps, and any "official record" text. Weight 400, size: 13px, letter-spacing: 0.05em. The monospace treatment reinforces the bureaucratic, record-keeping nature of these elements. **Color Palette:** - **Bleached Linen** #F0E9DD -- primary background, the sun-faded cream of old notice boards - **Iron Ink** #3D3229 -- primary text, the warm near-black of Victorian cast-iron lettering - **Driftwood** #B8A892 -- secondary text, borders, and decorative elements - **Tide Pool Green** #6B8F7A -- accent for nature-related content, botanical observations, and hover states - **Harbour Slate** #5A6B7A -- used in the cityscape silhouettes and sidebar headers - **Notice Cream** #E8E0D2 -- sidebar card backgrounds, slightly different from the main background to create depth - **Rust Patina** #A67B5B -- warm accent for drop caps, article numbers, and active states -- the color of weathered iron bolts on a dock A creamy-pastel palette inspired by the aged surfaces of a coastal town: sun-bleached paint, weathered iron, driftwood, and tide-pool lichen. ## Imagery and Motifs **Core visual motifs:** - **Victorian city seal:** An SVG seal combining municipal and maritime symbols -- a circular rope-knot border enclosing a composition of stylized waves below a row of simplified building silhouettes with a lighthouse at center. Rendered in #3D3229 on light backgrounds or #F0E9DD on dark backgrounds. Appears as the hero element and as a small watermark in the footer. - **Ornamental drop caps:** Each major article/section begins with a large decorated first letter (3-4 lines tall, floated left). The drop cap is rendered in #A67B5B with a miniature nature illustration nested within or around the letter (a vine climbing through the counter of a "B," seaweed draped over a "T"). Implemented as SVG inline elements. - **Glitch artifacts:** CSS-generated horizontal bands of color inversion that sweep across sections. Implemented with pseudo-elements using `mix-blend-mode: difference` and translateX animations. The glitch is subtle -- not aggressive cyberpunk, but more like a old TV signal fading in and out, representing the sea's erosion of the city's order. - **Minimal nature elements:** Small botanical sketches (single leaves, small fern fronds, a hermit crab, a piece of coral) appear in the sidebar margins as tiny SVG illustrations in #6B8F7A at 0.6 opacity. These suggest nature slowly reclaiming the civic space. - **Cityscape silhouettes:** The interstitial panoramas are built from CSS clip-path shapes -- each building is a polygon with Victorian roofline details (pointed gables, chimney stacks, decorative cornices). Layered at 3 depths: foreground buildings in #5A6B7A, mid in #B8A892, background in #E8E0D2. The sky behind is a subtle gradient from #F0E9DD to a slightly warmer #F5E6D4. - **Decorative rules:** Between articles, horizontal rules are not simple lines but ornamental borders -- a thin line with a small Victorian ornament at center (a shell, an anchor, a compass rose, or a botanical element) rendered as inline SVG. ## Prompts for Implementation **Full-screen narrative experience:** The page loads with the creamy background already present (no dramatic fade-in -- this is a civic portal, not a theatrical experience). The city seal draws itself via SVG stroke animation: the rope-knot border first (1.2s), then the internal composition (0.8s). The logotype and subtitle fade in simultaneously (400ms). The two-column layout assembles itself: the main column content area's left border rule draws top-to-bottom (600ms), then the sidebar header "Public Notices" types itself in Space Mono (typewriter effect, 60ms per character). **F-pattern reinforcement:** The left column's content uses strong left-aligned headers with generous left padding (creating the F-pattern's strong horizontal top bars). Article section numbers ("Art. I", "Art. II") are positioned in the left margin, pulling the eye to the left edge. Sidebar content is intentionally lower-contrast (#B8A892 headers) so it doesn't compete with the F-pattern's primary scan path. **Glitch mechanic:** Use Intersection Observer to trigger glitch effects at predetermined scroll positions. The glitch sequence: (1) a mix-blend-mode:difference pseudo-element sweeps left-to-right over 200ms, (2) 3 horizontal bars (10px height each) flash in inverted colors at random Y positions for 150ms, (3) everything resolves. The effect is rare enough (every 3-4 full screens) to be surprising but frequent enough to establish as a motif. **Responsive approach:** On mobile (<768px), the F-pattern collapses to a single column. The sidebar "Public Notices" become expandable accordion sections between main articles (toggled via tap). Drop caps reduce from 4 lines to 2 lines. Cityscape panoramas reduce to 2 layers. Glitch effects remain (they're lightweight). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, card-grid layouts, neon gradients, generic hero-with-button, parallax scrolling. No photography. No centered layouts. **Storytelling emphasis:** The narrative is a municipal record that's slowly being eroded by the sea. Each article/section tells a story about the city's relationship with the ocean, while the glitch disruptions and botanical intrusions in the margins represent the sea's relentless presence. The tone never breaks character -- this is always a civic document, even as nature slowly renders it obsolete. ## Uniqueness Notes **Differentiators from other designs:** 1. **F-pattern two-column civic portal with glitch erosion:** No other design uses the F-pattern reading layout (3% frequency), and the combination with periodic glitch disruptions representing environmental entropy is conceptually unique -- the format of order (municipal records) being visually undermined by chaos (the sea). 2. **Victorian drop caps with embedded botanical illustrations:** Large ornamental first letters containing miniature nature drawings within their letterforms is a typographic treatment not found in any other design in the collection. It physically merges text with nature imagery. 3. **CSS-rendered Victorian cityscape panoramas:** The interstitial silhouette strips built from clip-path polygons create architectural breathing spaces unique to this design. Unlike hero images or gradient dividers, these are narrative illustrations embedded in the page structure. 4. **Municipal document voice as design personality:** While other designs adopt artistic, commercial, or technical voices, bada.city's civic-document tone (article numbering, official seals, dated records) creates a world-building exercise through typography and content structure alone. **Chosen seed/style:** victorian-ornate aesthetic, f-pattern layout, sans-grotesk typography (DM Sans), creamy-pastel palette, glitch patterns, minimal imagery, nature motifs, raw-authentic tone **Avoided overused patterns:** Avoided centered layout (93%), card-grid (80%), photography imagery (73%), gradient palette (96%), parallax (90%), scroll-triggered as primary (83%), mono as primary typography (90%), mysterious-moody tone (73%). Instead used f-pattern (3%), glitch patterns (not in top patterns), creamy-pastel (3%), nature motifs (20% but uniquely applied as civic-erosion metaphor), sans-grotesk (6%).