# Design Language for layer-2.id

## Aesthetics and Tone

`layer-2.id` is an **urban magazine printed on bronze newsprint** — dense, ambitious, unapologetically loud. Imagine the editorial spread of a downtown Jakarta architecture journal: full-bleed photographs of concrete overpasses at dusk, columns of type that refuse to stay in their lanes, pull-quotes the size of headlines, and a color palette that reads like oxidized copper meeting afternoon sunlight through smoked glass.

The aesthetic is **maximalist city journalism** — not cluttered, but *charged*. Every surface carries intent. The grid is a magazine spread that broke open and reassembled itself at a slight diagonal. Honey amber, raw concrete gray, ink black, and warm cream jostle against each other the way signage does on a city block: each element asserting its territory while the whole reads as one coherent streetscape.

The tone is **bold-confident** — the site knows what it is. It does not hedge. Headings are declarations. Subheadings are arguments. Body copy is evidence. The implied reader is someone who moves fast through the city and still notices details: the texture of a weathered poster, the rhythm of scaffolding, the way neon reflects in rain-wet asphalt.

## Layout Motifs and Structure

The layout is a **magazine-spread compositor** — a CSS Grid system with 12 named columns and 3 named rows per section that intentionally breaks its own rules. Feature blocks span 7 columns; caption blocks occupy the remaining 5 but start from row 2, creating a vertical offset that mirrors the overlapping panels of a broadsheet spread.

Key structural decisions:

- **Hero zone**: Full-viewport magazine spread. Two asymmetric columns — left carries a massive display headline set at 96px that wraps into 3 lines; right carries a portrait-format "cover image" placeholder (icon mosaic, not photography) that overflows its container by 40px at the top, bleeding into the navigation zone. A thin amber rule (2px, 100% width) divides the hero from the body below.

- **Body grid**: A 12-column master grid with a 24px gutter. Articles and modules snap to 3-col, 4-col, 5-col, or 7-col widths. No two adjacent blocks share the same column count, ensuring the staggered-brick visual rhythm of a newspaper spread.

- **Pull-quote interruptions**: Every third scroll section features a full-width pull-quote that spans all 12 columns, set in condensed type at 64px, with a thick amber left-border (8px). These act as visual breathing marks between dense content blocks.

- **Footer zone**: A dense 4-column grid of icon-labeled city categories, rendered like the index of a printed guide — type-heavy, no whitespace padding, honest about its density.

- **Spring animation system**: Page entrance uses a spring-physics reveal — elements enter with `cubic-bezier(0.34, 1.56, 0.64, 1)` easing, overshooting their resting position by ~8px before settling. Section transitions use the same spring curve at staggered delays (60ms apart), so content cascades onto the page like pages fanning open.

## Typography and Palette

**Type system (all Google Fonts, verified):**

- **Display & masthead — `Commissioner`** (variable, wght 100–900). The primary display workhorse. Set at wght 800–900 for all hero headlines (96px desktop, 52px mobile). Commissioner's humanist grotesque anatomy gives the site warmth that keeps it from feeling corporate, while its weight range enables the bold-confident voice. Masthead logotype uses wght 900, tracking -2px, uppercase.

- **Section headers & pull-quotes — `Playfair Display`** (variable, italic axis). Pull-quotes are set in Playfair Display italic at 56px, creating a serif/grotesque contrast that mirrors the mix of typefaces in print journalism. Section-level h2 headings use Playfair Display wght 700 at 36px for a classical editorial register.

- **Body & captions — `Source Serif 4`** (variable, optical sizes). Body copy at 18px, opsz 18, wght 400. Captions and metadata at 13px, opsz 12, wght 300, tracked at +0.08em. Source Serif 4's optical size axis ensures small captions stay crisp without separate typeface switching.

- **Labels, tags, categories — `Barlow Condensed`** wght 600, uppercase, 11px, tracking +0.12em. City-beat journalism taxonomy: INFRASTRUCTURE / TRANSIT / CULTURE / URBAN PLANNING, rendered like kicker labels above headlines in a broadsheet.

**Color palette:**

| Role | Name | Hex |
|---|---|---|
| Primary amber | Honeyed gold | `#C8860A` |
| Deep amber | Burnt honey | `#8B5A02` |
| Warm cream | Newsprint | `#F5EDD8` |
| Light parchment | Column fill | `#FAF4E8` |
| Ink black | Headlines | `#1A1612` |
| Concrete mid | Body text | `#3D342A` |
| Concrete light | Dividers | `#8C8070` |
| Amber overlay | Accent wash | `#C8860A22` |
| Urban rust | Highlight | `#B85C2A` |

Background: `#F5EDD8` (newsprint cream). Foreground: `#1A1612` (ink black). Primary accent: `#C8860A` (honeyed gold). Secondary accent: `#B85C2A` (urban rust).

## Imagery and Motifs

The site is **icon-heavy** — no photographs. The visual vocabulary is a system of **city-infrastructure icons** rendered as dense, confident line-weight SVGs at 2px stroke, with occasional filled variants at key focal points.

**Icon system architecture:**

- **Transit icons**: Metro line symbols (circle with line-number inside), bus route markers, pedestrian crossing figures — all at 48×48px on a 4px grid. Rendered in ink black on cream, or amber on black in inverted contexts.

- **Urban fabric icons**: Building silhouettes (5–12 story variants), street grid fragments, bridge cross-sections, water tower profiles, fire hydrant side-views, manhole cover patterns. These are not decorative — they function as section identifiers, replacing the conventional "feature photo" with an architectural icon cluster.

- **Layer indicators**: The "layer-2" concept is literalized through a stacked-layers motif — translucent amber rectangles (opacity 0.15) stacked at slight 2–3° rotations behind text blocks, evoking the overlapping print layers of offset lithography. On the hero, three such layers stack behind the headline, each shifted 8px right and 4px down.

- **City-grid background texture**: A repeating SVG pattern of urban block outlines — rectangles of varying sizes, all stroke `#C8860A` at 0.3 opacity, tiled at 80×80px — applied as a CSS `background-image` to the hero section. At scroll, the texture parallaxes at 0.3× scroll speed, creating the sensation of moving through the city.

- **Spring-loaded icon reveals**: Icons in the body grid enter with the spring-physics curve. Each icon in a cluster staggers by 40ms, creating a "fanning out" effect as the section enters the viewport.

## Prompts for Implementation

Build this as **a single long-scrolling city dispatch** — structured like a special-edition urban magazine that never ends. The implementation must honor three editorial laws:

**Law 1 — The Grid Is the City Map.**

The 12-column CSS grid is named like a city coordinate system. Define named areas: `masthead`, `feature-left`, `feature-right`, `sidebar-upper`, `sidebar-lower`, `pull-quote`, `icon-cluster`, `category-index`. Every content block must declare its grid area by name, never by column number alone. The grid is the mental model; the layout is its expression.

```css
/* Hero section grid */
.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "masthead masthead masthead masthead masthead masthead masthead masthead masthead masthead masthead masthead"
    "feature-left feature-left feature-left feature-left feature-left feature-left feature-left feature-right feature-right feature-right feature-right feature-right";
  gap: 24px;
}
```

**Law 2 — Spring Physics Are Non-Negotiable.**

Every element that enters the viewport does so with spring easing. Use the Intersection Observer API. When an element's `isIntersecting` fires, apply:

```js
element.animate([
  { transform: 'translateY(24px)', opacity: 0 },
  { transform: 'translateY(-6px)', opacity: 1 },
  { transform: 'translateY(0)', opacity: 1 }
], {
  duration: 520,
  easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
  fill: 'forwards',
  delay: element.dataset.springDelay || 0
});
```

Stagger delays within grid sections: `data-spring-delay="0"`, `60`, `120`, `180`. The spring overshoot of -6px on the middle keyframe is the signature micro-beat that makes the page feel physical rather than digital.

**Law 3 — Icons Must Tell the Urban Story.**

Do not use a generic icon library. Draw every icon in the SVG sprite as if designing a city transit map: consistent 2px stroke weight, rounded linecaps, no filled shapes except solid-fill variants explicitly marked `--filled`. The icon sprite lives in a `<defs>` block in the page `<head>` and is referenced via `<use>`. Each icon has a semantic `<title>` and `aria-label`.

**Additional implementation notes:**

- The amber pull-quote border (`border-left: 8px solid #C8860A`) should animate in as a draw: start at `height: 0`, expand to `height: 100%` over 400ms when the pull-quote enters the viewport.

- The stacked-layer motif behind hero text: three `<div>` elements with `position: absolute`, `background: #C8860A`, `opacity: 0.1–0.15`, `transform: rotate(Xdeg) translateX(Ypx)`, each successive layer shifted 8px right and 4px down, giving a print-registration-offset effect.

- The city-grid background texture: a single SVG `<pattern>` element with `patternUnits="userSpaceOnUse"` and `patternTransform="translate(0, var(--scroll-offset))"`. JavaScript updates `--scroll-offset` on `scroll` event at 0.3× scroll position.

- Mobile (< 768px): collapse to single-column, preserve the magazine typography. Headlines drop from 96px to 48px, still Commissioner wght 900. Pull-quotes remain at 40px Playfair Display italic, full-width. The urban density feeling must survive the small screen — no padding inflation.

- AVOID: CTA buttons, pricing blocks, stat counters, hero carousels, testimonial grids, feature comparison tables. This is editorial journalism, not SaaS marketing.

## Uniqueness Notes

**Chosen seed (per assignment):** aesthetic = **maximalist**, layout = **magazine-spread**, typography = **commissioner-versatile**, palette = **honeyed-neutral**, patterns = **spring**, imagery = **icon-heavy**, motifs = **city-urban**, tone = **bold-confident**.

**Differentiators from other designs in the registry:**

1. **The icon system replaces photography entirely with custom SVG city infrastructure drawings** — not a generic icon library, but a bespoke set of transit, building, and urban-fabric marks that collectively constitute the visual identity. No other design in the registry uses hand-architected SVG icons as the sole imagery medium at this density.

2. **The magazine-spread grid uses named areas as a semantic layer** — grid area names map to editorial roles (masthead, feature-left, sidebar-upper, pull-quote) rather than column indices. This means the layout is self-documenting: any developer reading the CSS immediately understands the editorial hierarchy without a mockup.

3. **Spring physics as a unifying design principle rather than an accent** — where most designs apply spring easing to one or two hover effects, this design bakes spring physics into the foundational scroll-reveal system. The overshoot keyframe at the midpoint of every entrance animation creates a page-physical sensation unique in the registry.

4. **The stacked-layer amber offset motif literalizes the "layer-2" domain concept** — the decorative behind-text layers are not arbitrary; they directly reference the site's own name and the concept of layered urban systems (infrastructure below the street, transit below the city, data layers beneath the visible web). No other design in the registry uses its own domain name as a structural design metaphor.

5. **Barlow Condensed label typography renders city-beat taxonomy** — the use of uppercase condensed kicker labels (INFRASTRUCTURE / TRANSIT / CULTURE) is lifted directly from broadsheet newspaper design and creates a visual grammar that immediately signals editorial journalism rather than tech startup, civic portal, or blog — all of which appear elsewhere in the registry.

**Patterns avoided from frequency analysis:**
- `art-deco-display` (5% — overused, avoided)
- `oversized-display` (4% — overused, avoided in favor of commissioner-versatile at 2%)
- Generic `serif-classic` (4% — avoided in favor of Playfair Display used selectively for pull-quotes only)
- `frutiger-clean` (4% — avoided entirely)
- `display-bold` (4% — Commissioner at wght 900 provides display weight without the separate display-bold pattern designation)
<!-- DESIGN STAMP
  timestamp: 2026-05-08T11:18:45
  domain: layer-2.id
  seed: seed
  aesthetic: `layer-2.id` is an **urban magazine printed on bronze newsprint** — dense, ambit...
  content_hash: 057a90e52ec0
-->