# Design Language for paragram.dev ## Aesthetics and Tone Paragram.dev is a cryptic city intelligence platform — imagine a noir detective's war room rebuilt as a browser tab. The aesthetic draws from skeuomorphic realism: every panel looks like it was physically bolted to a steel desk, every card carries the weight of a leather-bound ledger, and every data glyph presses into the screen like ink into paper. The tone is **mysterious-moody**: midnight harbor fog, the amber glow of a streetlamp reflected in wet cobblestones, whispered transmissions on a shortwave radio. There is secrecy here — the user feels they have gained access to something that was not meant for everyone. Visual inspiration: The communication center aboard a 1940s maritime vessel; a detective's evidence board in a rain-soaked city precinct; the leather-and-brass instrument panels of a deep-sea submersible. Not the gleaming future — the textured, scarred past rendered in razor-sharp resolution. Depth is created through layered surfaces: a matte charcoal base, inset panels that appear recessed with subtle inner shadows, raised control elements with highlight edges that catch a low-key ambient light from the upper-left. Every element has physical mass. Nothing floats without tether. ## Layout Motifs and Structure The composition is a **command dashboard** — not a marketing page, but a live intelligence room. The viewport is treated as a fixed-frame window into a larger operational space. **Primary grid:** 12-column with 8px base unit. Outer gutters: 24px. Inner panel gutters: 16px. No full-bleed hero sections — the screen edge is always bordered by a 6px inset frame, like a monitor bezel, rendered in a dark brushed-metal gradient. **Left sidebar (220px):** A tall navigation column resembling a switchboard panel. Each nav item is a raised rectangular button with embossed labels. The active item illuminates with a warm amber glow — a backlit switch, not a highlight class. **Main area (center-right):** Divided into a 2×3 grid of dashboard cards. Each card is a distinct physical surface: cork-board texture for annotation panels, dark lacquered wood grain for data read-outs, brushed steel for control inputs. Cards are inset — not floating — using box-shadow `inset 0 2px 6px rgba(0,0,0,0.6)`. **Header bar (56px):** A thin instrument strip across the top. Monospaced coordinates, a glowing status indicator (green if online, amber if scanning), and a circular icon mark. No hamburger menus. No gradient hero text. **Scroll behavior:** The page does not scroll vertically in a traditional sense. Instead, content within each dashboard card reveals via scroll-triggered transformations — cards "open" like filing drawers being pulled out, panels "slide" to reveal deeper layers. The bezel frame remains fixed; only the interior panels animate. **City map underlay:** Behind the primary grid, at ~6% opacity, a stylized city grid — orthogonal streets, block outlines, no labels — provides spatial grounding. This is not a decorative flourish; it is the substrate of the platform's identity. ## Typography and Palette **Primary typeface — Display & Headers:** `Playfair Display` (Google Fonts, serif). Used at weight 700 for all panel titles and primary labels. Letter-spacing: -0.02em. The contrast between thick and thin strokes reinforces the mechanical-precision feel. Sizes: H1 48px, H2 32px, H3 22px. **Secondary typeface — Body & Data:** `Libre Baskerville` (Google Fonts, serif). Weight 400 for body text, 700 for callout values. Chosen for its authoritative ink-on-paper density. Line-height 1.65. Size: 15px base, 13px for data labels. **Accent typeface — Monospace/Coordinates:** `JetBrains Mono` (Google Fonts, monospace). Used exclusively for numerical readouts, coordinate strings, timestamps, and status codes. Lends the dashboard its teletype authenticity without leaning into terminal cliché. **Color Palette:** | Role | Name | Hex | |------|------|-----| | Base background | Harbor Midnight | `#0d1117` | | Surface panel | Dredge Slate | `#141c26` | | Raised control | Wet Iron | `#1e2a38` | | Border/edge light | Fog Line | `#2e3d50` | | Primary text | Parchment | `#e8dcc8` | | Secondary text | Ash Vellum | `#a89880` | | Accent primary | Amber Signal | `#c8841a` | | Accent secondary | Verdigris | `#4a7c74` | | Accent tertiary | Maritime Rust | `#7a3b2e` | | Status glow | Harbor Green | `#2ecc71` | | Highlight edge | Brass Catch | `#d4a832` | The palette is a coastal-blend — not the bright nautical blues of a sailing brand, but the bruised palette of a working harbor at 3am: oxidized metals, weathered wood, salt-bleached charts. ## Imagery and Motifs **Icon system:** Custom SVG icons styled as **stamped metal glyphs** — as if each icon was die-cut from a brass plate and press-fitted into a panel recess. Icons carry visible edge bevels (1px highlight on top-left, 1px shadow on bottom-right). Size: 20×20px at baseline, 32×32px for primary panel icons. Never outline-only; always volumetric. **City-urban motifs:** Orthogonal city grid lines appear as background texture at low opacity. Specific motifs include: fire escape silhouettes, manhole cover radial patterns used as decorative disc elements, window-grid dividers that mirror the city block structure, telegraph pole crosshatching as subtle border textures. **Skeuomorphic surface details:** - Cork board panels: `repeating-radial-gradient` noise at 3px scale, warm tan tone, with push-pin icons at card corners - Leather card backs: subtle diagonal grain via SVG `feTurbulence` filter, dark brown `#2a1a10` - Brushed metal strips: linear gradient from `#2e3d50` to `#1a2530` with 0.5px horizontal scan lines - Paper overlay: semi-transparent noise texture (5% opacity) across all text panels for aged-document feel **Decorative motifs:** - Compass rose watermark at 4% opacity behind primary data panels - Riveted corner brackets on all major card frames (4px × 4px squares in Brass Catch `#d4a832`) - Wax seal-style circular badge for the platform logo — deep red `#7a3b2e` with embossed letter forms - Thin ruled lines (1px, `#2e3d50`) between data rows, like printed ledger paper ## Prompts for Implementation **Core narrative experience:** The user arrives in a fog-wrapped command room. The bezel frame fades in first (200ms), then the header instruments boot up in sequence — each status light blinks once, coordinates scroll in on a ticker, the logo seal "stamps" into place with a brief scale pulse (0.8 → 1.0, 150ms ease-out). This boot sequence is 800ms total and runs only on first visit. **Scroll-triggered card reveals:** Each dashboard card begins as a "closed drawer" state — only the header strip (32px) is visible, showing the card title and a small icon. As the user scrolls or clicks, the card expands downward using `max-height` transition (400ms cubic-bezier(0.4, 0, 0.2, 1)), revealing inner content that slides up from beneath the header like paper being fed from a slot. **Panel depth animation:** When the user hovers over a raised control element (nav button, card action), it depresses — `box-shadow` transitions from outer highlight to inner shadow, `transform: translateY(1px)`, giving physical button press feedback. Duration: 60ms ease-in, 120ms ease-out for release. **City grid parallax:** The background city-grid SVG moves at 0.15x scroll velocity relative to the fixed bezel frame, creating a subtle sense that the dashboard is positioned above a physical map. Use CSS `transform: translateY(calc(var(--scroll-y) * 0.15px))` via JS scroll listener. **Amber signal pulse:** The primary accent elements (active nav indicator, status lights, important data values) emit a very slow ambient pulse: `opacity` oscillates 0.85 → 1.0 → 0.85 over 3.2 seconds with `ease-in-out`, suggesting warm lamplight breathing rather than a digital blink. **Typography in motion:** Panel titles use a "ink spreading" entrance: text begins at `opacity: 0` and `letter-spacing: 0.3em`, then animates to final `opacity: 1` and `letter-spacing: -0.02em` over 600ms. This mimics ink being pressed into parchment and spreading to fill letterforms. **Color mode:** The entire experience is dark-only. No light mode toggle. The darkness is part of the identity — this platform does not broadcast; it receives. **AVOID:** CTA blocks with gradient buttons, pricing tier tables, testimonial carousels, stat counters (12M users, 99.9% uptime), floating chat widgets, cookie consent pop-ups with heavy UI, full-bleed hero photography, any stock imagery of smiling people at computers. **AVOID in patterns:** Do not default to photography backdrops, editorial two-column blog layouts, or hand-drawn illustration styles — all heavily overused in the existing design library. ## Uniqueness Notes 1. **Skeuomorphic dashboard at 1% frequency** — This design commits fully to physical surface simulation (cork, leather, brushed metal, inset panels) at a time when flat and glassmorphism dominate. The skeuomorphic treatment is not retro-kitsch but precise and restrained: every texture serves spatial communication, not decoration. 2. **City-urban as structural substrate, not decoration** — Most designs using city motifs apply them as hero imagery (skyline photos, map pins). Here, the city grid is the actual layout substrate — the block-and-avenue structure of orthogonal streets *is* the grid system, making motif and function inseparable. 3. **Noir-maritime color palette (coastal-blend in shadow register)** — Coastal palettes typically run light (sandy whites, sky blues). This inverts the palette to the harbor-at-midnight register: same geography, opposite luminosity, resulting in a deeply unusual color combination with no match in the existing design library. 4. **Scroll-triggered drawer mechanics instead of page scroll** — Rather than vertical page scroll revealing sections, the scroll gesture operates on individual cards as drawer-opening mechanisms. The page itself does not move; only card internals expand. This reverses the standard scroll-narrative pattern while still using scroll as the interaction verb. 5. **Typography: serif-classic for a dashboard context** — Dashboards almost universally use geometric sans or monospace faces. Deploying `Playfair Display` and `Libre Baskerville` in a data-dense command room creates unexpected cognitive weight — data feels like documentary evidence rather than live metrics, aligning with the mysterious-moody tone. 6. **Avoided patterns from frequency analysis:** photography (88% — not used), minimal aesthetic (41% — not used), hand-drawn (58% — not used), editorial layout (51% — not used), terminal aesthetic (31% — not used). The design is differentiated on every major overused axis. **Chosen seed:** aesthetic: skeuomorphic, layout: dashboard, typography: serif-classic, palette: coastal-blend, patterns: scroll-triggered, imagery: icon-heavy, motifs: city-urban, tone: mysterious-moody