# Design Language for desca.dev

## Aesthetics and Tone

desca.dev is a **Memphis-Revival editorial magazine** filtered through the lens of 1930s Art Deco — imagine a Condé Nast archive room where someone has pinned both a Memphis Group poster from 1983 and a Harper's Bazaar cover from 1938 on the same corkboard and found they rhyme. The aesthetic is **elegantly restrained Memphis**: the geometric shapes and bold pattern vocabularies of Sottsass & Co., but desaturated into a muted, cream-and-charcoal world where the primary tension is between the rigid grid of Art Deco typography and the deliberately off-kilter placements of Memphis motifs.

The tone is **elegant-sophisticated without being precious**. No irony, no nostalgia kitsch. The site reads like a printed magazine issue that has been photographed at a slight angle — there is warmth in the imperfection, but every line is intentional. Content is set in long editorial runs with short, declarative callouts. Language is confident, not explanatory. The site does not explain what desca does — it demonstrates it through the quality of its own surface.

Mood references: a muted-palette Memphis poster silk-screened in three colors on cream paper; the grid of *Vogue* Paris 1936; a record sleeve from ECM Records where the photograph is full-bleed and the label name sits in the margin at 9pt.

## Layout Motifs and Structure

The structural metaphor is a **magazine spread opened flat** — not a single page but two facing pages read simultaneously, where the left column and right column have different optical weights and different information hierarchies. On desktop, this manifests as an asymmetric two-column split: a left column at **42vw** (the "image plate" column) and a right column at **52vw** (the "text body" column), separated by a **6vw** gutter that functions as the spine — never used for content, but marked by a faint hairline rule `#D4CDB8` at 0.5px.

**Magazine-spread principles:**
- Headlines bleed across the gutter from the right column into the left column's upper third — a classic spread-compositor trick that the eye reads as one gesture across the fold.
- No card components. Content lives in typographic blocks and full-bleed plates. The layout feels printed, not clickable.
- Section breaks are marked by **horizontal rule ornaments** — a Memphis-derived triple-line pattern (`▬ ▬ ▬`) rendered in SVG, 2px height, colored in `#B5987A`.
- The primary navigation is a **single horizontal strip** pinned to the top edge: domain wordmark left-aligned, three or four section links right-aligned, all set in the display condensed face at 11px uppercase with 0.25em letter-spacing. It disappears on scroll and returns on scroll-up.
- On mobile: the spread collapses to a **single full-width column** with the left-column plates stacked above their companion text blocks.

**Compositional rules:**
- Memphis geometric shapes (triangles, dots, zig-zag rails, concentric semicircles) appear as **negative-space silhouettes** — cut out from the muted palette using the background color, never filled with their own hue. This makes them feel like debossed surface ornaments rather than decorations.
- Wave-form motifs appear as **SVG baseline rules** beneath section headings — a smooth sine-wave drawn in 1px stroke at `#8C7A62`, amplitude 3px, period tied to the heading's character count.
- Typography and geometric ornament share the same x-height grid. No ornament is taller than the capital height of the running body text.

## Typography and Palette

**Display face — [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display)** (variable wght 400→900): Used for all headlines and the domain wordmark. Art Deco display logic: high contrast thick-to-thin strokes, tall ascenders, tight letter-spacing at -0.03em for large sizes (clamp(3.2rem, 6vw, 6.8rem)). Headlines are set in Black 900 italic for primary heads, Regular 400 italic for subheads and pullquotes. The italic cut carries the period elegance without artificiality.

**Body — [`Jost`](https://fonts.google.com/specimen/Jost)** (variable wght 100→900): The rational geometric counterpoint to Playfair's classicism. Used at weight 300 (Light) for running body text at 17px / 30px line-height, tracking +0.01em. Section labels and navigation items use weight 500 (Medium) at 11px uppercase, tracking +0.25em.

**Accent mono — [`DM Mono`](https://fonts.google.com/specimen/DM+Mono)** (Regular, Italic): Used only for metadata fields — dates, counts, index numbers. Weight Regular at 12px, tracking +0.04em.

**Palette — muted, warm, cream-forward:**
- `#F0EBE0` — Vellum (primary background, page ground)
- `#2A2622` — Carbon (primary text, wordmark)
- `#8C7A62` — Umber (wave-form rules, secondary ornament)
- `#B5987A` — Antique Bronze (Memphis ornament rules, rule lines)
- `#C8C0B2` — Warm Stone (muted secondary text, captions)
- `#4A3F35` — Dark Bark (headline accent, pullquote borders)
- `#D9D2C7` — Linen (section divider ground, alternate row tint)

No fully saturated hues. Memphis shapes appear in `#B5987A` and `#8C7A62` — two steps of the same warm brown family. The effect is a monochromatic Memphis system in sepia register, not the polychrome primary-color Memphis of the original.

## Imagery and Motifs

**Photography is vintage, monochrome, and grain-heavy.** Every photographic plate on the site is a black-and-white image from the 1930s–1950s era aesthetic — deep shadows, pronounced grain, high micro-contrast in the midtones. Images are sourced or styled as:
1. **Architectural details** photographed in raking light (stone cornices, ironwork grilles, terrazzo floors).
2. **Hands working** — a draftsman's hand on a blueprint, fingers pressing lead type into a composing stick.
3. **A single full-bleed plate** in the hero spread — a wide-format photograph of a 1940s studio or drafting room, printed to fill the entire left column at `100%` height, with no caption, no overlay.

All photographs are displayed with:
- A `sepia(18%) contrast(108%) brightness(97%)` CSS filter stack applied — warm tones without obvious vintage-filter artificiality.
- A `mix-blend-mode: multiply` grain texture overlay (`#C8C0B2` at 4% opacity, fine grain pattern SVG).
- No rounded corners. Images bleed edge-to-edge within their column.

**Memphis motifs (geometric, muted):**
- **Concentric semicircles**: SVG decorative element, 3–4 rings, stroke `#B5987A` at 1px, placed at section transitions aligned to the right column margin. Diameter tied to the current column gutter width (~96px max).
- **Diagonal zig-zag rail**: A 2px stroke SVG zig-zag, amplitude 6px, period 18px, running across 120px of width. Used as a visual comma between unrelated content blocks. Color `#8C7A62`.
- **Wave-forms as baselines**: Sine-wave SVG underlines beneath `<h2>` headings. Amplitude 3px, color `#8C7A62`, stroke 1px, drawn as a continuous `<path>` element whose width equals the heading's rendered pixel width, measured via JavaScript ResizeObserver.
- **Dot grids**: A 3×3 or 4×4 square grid of 2px filled circles, color `#C8C0B2`, spaced 10px. Appears as a corner ornament at section breaks and at the footer top edge.

## Prompts for Implementation

Build desca.dev as **a single-page magazine issue** — one unbroken vertical scroll that the reader traverses like turning through the editorial pages of a bound volume. No page transitions. No routing. Just one long, exquisitely typeset surface.

**Page architecture (top to bottom):**

1. **Masthead strip**: Navigation bar at 56px tall. Wordmark "desca.dev" in Playfair Display Black 900 at 22px left-aligned. Three section links (Work · Method · Contact) in Jost Medium 500 at 11px uppercase right-aligned. Background `#F0EBE0`, bottom edge hairline `#D4CDB8` 0.5px. Hides on scroll-down (transform: translateY(-100%) at 60ms), returns on scroll-up.

2. **Hero spread** (100vh min-height, two-column split): Left column — full-bleed architectural photograph, no text, no overlay except the grain texture. Right column — headline at clamp(3.6rem, 6.2vw, 7.2rem) Playfair Display Black italic, two lines max, tracking -0.03em; below it a deck subhead at clamp(1rem, 1.6vw, 1.25rem) Jost 300; below it a 60-word editorial paragraph in Jost 300 at 17px. Wave-form SVG drawn beneath the headline as a scroll-triggered entrance animation — the wave path draws left-to-right over 1.2 seconds at easing `cubic-bezier(0.25, 0, 0.1, 1)` when the element enters the viewport.

3. **First feature section**: Full-width text section, right column only (left column is empty except for a concentric semicircle SVG ornament). Long editorial paragraph run (250–320 words), Jost 300, 17px/30px. Above it: an `<h2>` at clamp(2rem, 3.2vw, 2.6rem) Playfair Display Regular 400 italic, with wave-form underline.

4. **Plate + caption spread**: Left column — a second vintage photograph (a hands/detail shot), right-aligned within column, bottom of image flush with baseline grid. Right column — a pullquote in Playfair Display Italic 400 at clamp(1.6rem, 2.4vw, 2.2rem), color `#4A3F35`, left-border 2px solid `#B5987A`, padding-left 1.5rem. Below the pullquote: a short attribution line in DM Mono Regular 12px `#C8C0B2`.

5. **Memphis ornament break**: Full-width horizontal rule zone, 80px tall. Contains: left — zig-zag rail SVG. Center — triple-rule ornament `▬ ▬ ▬` in Jost Light 11px uppercase, color `#B5987A`, letter-spacing 0.5em. Right — dot grid 4×4.

6. **Secondary editorial section**: Two equal columns (50/50), both containing text. Left column uses Playfair Display Regular italic for an `<h3>` + body copy. Right column uses Jost 300 for a denser body run. A diagonal zig-zag rail SVG sits in the gutter space between columns.

7. **Footer**: Background `#2A2622`. Text `#C8C0B2`. Wordmark in Playfair Display italic at 18px left. Copyright and index metadata in DM Mono 12px right. Top edge: dot-grid ornament in `#4A3F35` spanning full width.

**Scroll-triggered animation protocol:**
- Use `IntersectionObserver` with threshold `0.15` for all reveal animations.
- Default reveal: `opacity 0 → 1, translateY 28px → 0` over 700ms `ease-out`.
- Wave-form path draw: `stroke-dasharray` + `stroke-dashoffset` technique, computed from `SVGPathElement.getTotalLength()`. Draw direction: left-to-right. Duration 1.2s.
- Memphis ornaments: fade-in only, 600ms. No movement — they are static surface ornaments and should feel printed, not animated.
- Stagger children within a section using `animation-delay: calc(var(--child-index) * 80ms)`.
- No parallax. The magazine spread metaphor depends on content reading as a fixed surface, not a layered depth scene.

**Implementation notes:**
- CSS custom properties for all palette values at `:root`.
- All SVG ornaments defined once in a `<defs>` block and `<use>`-referenced — no inline repetition.
- Grain texture: a `<filter>` SVG `feTurbulence` + `feColorMatrix` applied via CSS `filter: url(#grain)` on a full-page `::before` pseudo-element, opacity 0.04.
- Wave-form SVG widths recalculated in a ResizeObserver so they track their headings' rendered widths on viewport resize.
- Photography alt text is descriptive, referencing subject and compositional register (e.g., "raking-light photograph of a stone cornice, high-contrast monochrome").

**AVOID:** Card grids, rounded corners on any element, icon libraries, bright saturated colors, modal overlays, hero video, sticky sidebars, infinite scroll, loading spinners.

## Uniqueness Notes

1. **Memphis in a muted sepia register** — Memphis (10% frequency) always appears in its original polychrome primary-color mode in the corpus. desca.dev takes Memphis into a single warm-brown monochromatic palette (`#8C7A62` / `#B5987A`), stripping out all saturation. This is Memphis as it would look in a 1930s printed ephemera archive — historically alien, visually fresh.

2. **Magazine-spread as a structural metaphor, not a layout pattern** — The corpus shows asymmetric layouts at 44% and full-bleed at 84%, but no design uses the physical metaphor of a *bound spread with a gutter-spine* as its organizing logic. The left column / right column / gutter-spine triad is not a CSS grid technique here — it is a conceptual frame that governs where content can and cannot appear.

3. **Wave-forms as inline typographic infrastructure** — Wave-form motifs appear in 0% of analyzed DESIGN.md files as a typographic element. All wave-form usage in the corpus is decorative background texture or hero illustration. desca.dev uses sine-wave SVG paths as *structural underlines* — functional punctuation tied to heading widths via JavaScript measurement, drawn on scroll entry.

4. **Vintage photography at 1% frequency combined with Art Deco display at 4%** — Both are among the rarest vocabulary items in the corpus. Combining them produces a period coherence (1930s editorial) that no existing design occupies. The muted palette reinforces the era without nostalgia-kitsch.

5. **No parallax despite scroll-triggered animations** — The corpus uses parallax at 92% and scroll-triggered at 46%. desca.dev uses scroll-triggered reveals but explicitly bans parallax, enforcing the magazine-spread metaphor: the surface is flat and printed, not a layered diorama.

Planned seed: aesthetic: memphis, layout: magazine-spread, typography: art-deco-display, palette: muted, patterns: scroll-triggered, imagery: vintage-photography, motifs: wave-forms, tone: elegant-sophisticated
<!-- DESIGN STAMP
  timestamp: 2026-05-07T11:45:47
  domain: desca.dev
  seed: aesthetic: memphis, layout: magazine-spread, typography: art-deco-display, palette: muted, patterns: scroll-triggered, imagery: vintage-photography, motifs: wave-forms, tone: elegant-sophisticated
  aesthetic: desca.dev is a **Memphis-Revival editorial magazine** filtered through the lens ...
  content_hash: 776009a05b5a
-->