# Design Language for localcop.dev ## Aesthetics and Tone `localcop.dev` is a **Bauhaus police blotter printed on sun-aged newsprint** — a neighborhood watch bulletin that has been redesigned by a 1923 Dessau workshop student who moonlights as a graffiti chronicler. The aesthetic is disciplined geometry colliding with the raw energy of a city at 3 AM: stark primary-adjacent colors bled through sepia-toned grain, oversized block type that commands the wall, and the faint impressions of rubber stamps, beat-reporter ink, and asphalt texture layered beneath every surface. The tone is **energetic without being frantic** — the urgency of a dispatch radio crackling to life, the confidence of a cop who knows every street by name. Nothing here apologizes. Every element asserts itself: thick rules, heavy type, deliberate geometric blocks cut against organic diagonal paper grain. The mood is simultaneously retro-authoritative and vitally alive. Inspiration: László Moholy-Nagy's typographic posters, 1970s NYC police precinct bulletin boards, Berenice Abbott's street-photography geometry, and the weathered hand-painted lettering of a bodega that has stood on the same corner for fifty years. **Avoid:** corporate blue confidence, glassmorphism polish, soft drop shadows, any hero CTA. This is a document, a record, a dispatch — not a product pitch. ## Layout Motifs and Structure The page is structured as an **organic-flow broadsheet**: content moves diagonally across a broken Bauhaus grid, not in clean columns. Think of a police briefing board where evidence photos, incident reports, and map fragments are pinned at irregular angles — but the underlying grid is rigid and geometric, so the disorder is *composed*. **Grid system:** - Base grid: 12-column, 8px unit, but columns are intentionally violated by oversized type elements that span 7–9 columns. - Section breaks are heavy black horizontal rules (4px), but they are *not* flush to the edge — they stop 40px short on the right, as if the page was torn and re-attached. - The primary reading axis runs 15° off the horizontal for the hero display text, snapping back to 0° for body copy. **Spatial relationships:** - Content blocks are separated by *incident tape yellow* gutters (not white space) — thin 2px stripes of #D4A017 at each section boundary, evoking crime-scene tape. - Large section numerals (01, 02, 03…) sit in the far left gutter, oversized at 120px, semi-transparent at 8% opacity, like watermarks from an old form. - Pull-quote fragments are rotated –3° and stamped with a red diagonal overprint "FILED" mark, referencing official-document bureaucracy. **Responsive:** - At mobile, the diagonal type collapses to 0° but the torn-rule asymmetry and incident-tape gutters persist. - The oversized section numerals shrink to 60px and shift to right-anchored, creating a reversed-mirror version of the desktop layout. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Primary display — `Bebas Neue`**: All-caps, ultra-condensed, used for hero headlines and section titles. Set at 120–200px on desktop, tight leading (0.9em), letter-spacing –0.02em. The condensed geometry is pure Bauhaus workshop discipline. - **Secondary display — `Oswald`**: Weight 700, used for sub-headlines and incident-number labels. Set at 36–64px, uppercase, tracked +0.08em. Provides the muscular mid-register contrast that Bebas Neue's extreme condensation leaves open. - **Body text — `IBM Plex Mono`**: Weight 400/500. All body copy in monospace, reinforcing the dispatch/blotter register. 15px/1.7 leading. Makes the page feel like a filed report, not a marketing brochure. - **Accent stamps — `Special Elite`**: Used exclusively for stamped labels ("FILED", "DISPATCH", "INCIDENT #", precinct annotations). Typewriter-era imperfection in a single-use role. **Palette — sepia-nostalgic with Bauhaus primaries slicing through:** - `#1C1208` — **Deep Asphalt** (near-black with warm brown undertone): primary text, heavy rules, backgrounds of hero section - `#F2E8D0` — **Aged Newsprint** (warm off-white): primary page background, body text backgrounds - `#C8A96E` — **Faded Sepia** (medium warm tan): grain overlay base, secondary panels, incident-number watermarks - `#D4A017` — **Incident Tape Yellow** (muted gold-yellow): section boundary stripes, accent highlights, hover states - `#8B1A1A` — **Dispatch Red** (deep, slightly desaturated): "FILED" stamp color, urgent accent markers, active navigation indicator - `#2C3E50` — **Precinct Blue** (dark steel blue): secondary dark tone for map-block backgrounds, contrast panels - `#4A3728` — **Ink Brown** (deep warm brown): Bauhaus rule color variant, sub-panel borders **Grain overlay:** A CSS-generated noise texture at 60% opacity over all surfaces — `filter: url(#grain)` via inline SVG feTurbulence, giving every panel the feel of aged newsprint rather than a screen. ## Imagery and Motifs **Grain overlay is the primary texture:** every section of the page has a dense photographic-grain noise layer — SVG feTurbulence with baseFrequency 0.65, numOctaves 4. The grain shifts intensity as the user scrolls (lighter in hero, denser in lower sections), simulating a newspaper that has been handled more at the bottom. **City-urban motifs:** - A **street-map fragment** (abstract, not real) rendered as fine-line SVG — block intersections at 45°, one-way arrow indicators, crosswalk hatch marks — floats behind the hero section at 12% opacity. This is the neighborhood beneath every story. - **Rubber-stamp marks**: rectangular ink-stamp impressions (borders with degraded corners, slightly rotated 2–4°) appear on key content elements — date stamps, case numbers, "ACTIVE INVESTIGATION" banners. - **Incident tape diagonals**: `repeating-linear-gradient` stripes of `#D4A017` / `#1C1208` at 45°, used as thin decorative bands at 8px height between major sections — evoking police tape. - **Architectural line-art**: thin 1px SVG silhouettes of city skyline elements (water tower, fire escape zig-zag, brownstone roofline) appear in the footer at 20% opacity, very low contrast. - **Bauhaus geometric cutouts**: solid rectangles and circles in `#8B1A1A` and `#2C3E50`, cut into the layout at asymmetric angles, referencing Herbert Bayer's typographic designs. These are pure geometric shapes, not icons. - **Type as image**: the word "LOCAL" is used as a full-bleed background element behind the hero, set at 600px, 3% opacity, rotated 90° — the domain name itself becomes texture. ## Prompts for Implementation Build localcop.dev as a **single continuous dispatch scroll** — one long page that reads like a police briefing rolled out across a table. No tabs, no modals, no carousels. The visitor unfurls it top to bottom, each section a new incident in the record. **Macro structure (top to bottom):** 1. **Hero Dispatch Block (`100svh`).** Full-bleed `#1C1208` background. Grain overlay at 40% opacity. The street-map SVG ghost floats behind at 12% opacity. Centered (but slightly left-shifted by 40px) `Bebas Neue` headline at 160px: `LOCAL COP` — with `LOCAL` in `#F2E8D0` and `COP` in `#D4A017`. Below it, a single line in `IBM Plex Mono` 15px: `dispatch · incident log · precinct intelligence`. A 4px `#D4A017` rule spans 60% of the viewport width (not full), sitting 24px below the sub-headline. No CTA button — only a thin animated downward-pointing chevron in `#C8A96E`, breathing (opacity 0.4 → 1.0 → 0.4 in a 2s ease-in-out loop). 2. **Incident Tape Transition.** An 8px stripe of `repeating-linear-gradient(45deg, #D4A017, #D4A017 10px, #1C1208 10px, #1C1208 20px)`. Full-width. No padding. 3. **Overview Panel (`min-height: 80vh`).** Background: `#F2E8D0`, grain at 60% opacity. Left column (65%): Oversized section numeral `01` in `#1C1208` at 120px / 8% opacity, watermarked behind the copy. Body in `IBM Plex Mono`. Right column (35%): A `#2C3E50` panel containing a Bauhaus geometric cutout — a `#8B1A1A` filled circle (diameter 120px) overlapping a `#F2E8D0` rectangle. No photography, no icons, no stock art. 4. **Feature Blocks (3 sections, each `min-height: 60vh`).** Each section alternates background between `#F2E8D0` and `#C8A96E`. Section titles in `Oswald` 700 48px. The torn-rule asymmetry (rules ending 40px from right edge) separates each. Pull quotes rotated –3°, stamped with `Special Elite` "FILED" marks in `#8B1A1A`. Spring animation: as each section scrolls into view at 80% threshold, the section title springs in from x: –40px, opacity 0, with a `cubic-bezier(0.34, 1.56, 0.64, 1)` spring curve (overshoot characteristic). The `Special Elite` stamp drops in at 200ms delay with a `scale(0.6) rotate(–8deg) → scale(1) rotate(–3deg)` spring transition. 5. **Map Intelligence Section (`100vh`).** Background: `#2C3E50`. The street-map SVG reappears here at full opacity (not ghost), drawn in `#C8A96E` 1px lines. `Bebas Neue` text overlaps the map at strategic intersections. Grain overlay at 70% — heaviest on the page, simulating a much-handled map. 6. **Footer (`min-height: 40vh`).** Background: `#1C1208`. Architectural silhouettes at 20% opacity. `IBM Plex Mono` type in `#C8A96E`. Section numeral watermarks at 8% opacity, stacked. **Spring animation details (pattern: spring):** - All scroll-triggered reveals use `IntersectionObserver` at `threshold: 0.15`. - Entry: `transform: translateY(30px); opacity: 0` → `transform: translateY(0); opacity: 1` with `transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 400ms ease`. - Stagger child elements by 80ms increments. - The Bauhaus geometric cutouts (circles, rectangles) use a separate spring: `scale(0.85) → scale(1)` with `cubic-bezier(0.34, 1.56, 0.64, 1)` at 500ms. They arrive slightly before their container text (–100ms offset), so the shape *announces* the section and the text confirms it. - No looping animations except the hero chevron breathe. **Grain implementation:** ```html ``` Apply via `filter: url(#grain)` on a `::after` pseudo-element with `position: fixed; inset: 0; pointer-events: none; opacity: 0.55; mix-blend-mode: multiply`. **DO NOT include:** pricing tables, testimonial carousels, stat counters, feature comparison grids, sign-up forms, or any CTA-heavy layout patterns. This is a dispatch document, not a SaaS pitch. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: `bauhaus`, layout: `organic-flow`, typography: `oversized-display`, palette: `sepia-nostalgic`, patterns: `spring`, imagery: `grain-overlay`, motifs: `city-urban`, tone: `energetic`. **Differentiators from every other design in the registry:** 1. **Police blotter as design metaphor.** No other site in the registry uses the physical language of law enforcement documentation — rubber stamps, incident tape, filed-report typography (`Special Elite` as stamp face, `IBM Plex Mono` as report body) — as the primary visual system. The domain name `localcop.dev` is not treated as a tech product but as a precinct artifact. 2. **Bauhaus geometry cutting through sepia nostalgia.** Frequency analysis shows `bauhaus` at 5% and `sepia-nostalgic` at 1% — both underused. Combining them creates a genuine anachronism: workshop-era constructivism printed on aged newsprint, not the chrome-and-white Bauhaus revival that design portfolios default to. The solid `#8B1A1A` circles and `#2C3E50` rectangles are pure Moholy-Nagy, dropped into a 1970s police-bulletin board. 3. **Type rotated into the layout grid, not just styled.** The 15° hero text rotation and the –3° pull-quote stamps are structural, not decorative — they define the spatial energy of the page in the same way that a 1920s Russian Constructivist poster uses diagonal type as a compositional axis. The frequency report shows no other design in the registry rotating display type as a grid element. 4. **Grain as variable-intensity environmental texture.** Most sites using `grain-overlay` (2% frequency) apply a flat texture uniformly. This design varies grain intensity section-by-section (40% hero → 60% body → 70% map), creating a tactile narrative of increasing wear — the page has been handled most at the bottom, least at the top. 5. **Street-map SVG as recurring character.** The abstract city-grid SVG appears twice at different opacities — as a ghost in the hero (12%) and at full presence in the Map Intelligence section — creating a structural echo across the page that doubles as world-building. No other design in the registry uses the same decorative element at two different narrative intensities as a repetition device. **Avoided overused patterns:** `full-bleed` (76% — used only for hero, all other sections are constrained), `minimal` (38% — strongly avoided, the design is dense and declarative), `glassmorphism` (21% — zero usage), `dark-mode` (13% — used only for hero and footer panels, not as a page-wide mode), `spring` animations as page-wide wallpaper (38% spring usage — here spring is targeted only to scroll reveals and geometric stamps, not applied indiscriminately).