# Design Language for doublestandard.xyz ## Aesthetics and Tone `doublestandard.xyz` is a **tech tutorial site rendered as a graffiti-tagged subway station wall** — but cleaned up just enough to read. The conceit: every tutorial is a stencilled piece of street knowledge, each code block a spray-can tag with precise letterforms, the entire site a documentation wall that a technically literate street artist left behind before disappearing. It is not edgy-for-edginess. It is instructional and warm — the voice of someone who mastered something hard and left a guide chalked on the wall for whoever comes next. The graffiti aesthetic is channeled through **art-deco geometry rather than wild-style chaos**: stencilled letterforms with sharp bevels, spray-fade gradients that desaturate into muted concrete tones, modular rectangular panels that evoke both city blocks and the regulated layout of a technical manual. Every decorative spray burst is controlled — dusted, not dripping. The site feels like a beautifully typeset zine that happens to have been silk-screened onto weathered plaster. Color temperature is deliberately cool-neutral — bleached concrete, aged aerosol, industrial steel — never the warm sunset gradients that saturate 87% of the registry. The muted palette enforces the tutorial vibe: this is information, not entertainment; the user is here to learn, not to be dazzled. ## Layout Motifs and Structure The layout is **modular-blocks** — one of the rarest patterns in the registry at 1%. The page is composed of rectangular panels of four sizes (1×1, 2×1, 2×2, 3×1), arranged on an 8-column CSS Grid with 12px gutters, each panel sitting at a slightly different background tone (three values cycling: `#2A2A2A`, `#232325`, `#1E1E20`). There is no centered-column spine. There is no full-bleed hero. The blocks tile from edge to edge — the grid IS the page. Key structural rules: - Each block has a **1px border in `#3A3A40`** (a steely graphite) with a subtle inset bevel rendered as a 0.5px inner highlight at `rgba(255,255,255,0.04)`. - Block headers (the tutorial step label, the section name) are set in a **bold condensed art-deco display font** and painted as if stencilled — the letterforms have deliberate horizontal spray-fade, fading to 30% opacity at their right edge. - **No sticky header.** Navigation lives in a 1×4 block at the top-left that scrolls with the page. Its four links are single art-deco glyphs + abbreviations. Lateral navigation only. - Tutorials are long-form. Each step is its own 3×1 block — left column holds the step number rendered as a large art-deco numeral (128px, ultra-condensed), right two columns hold the prose and code. The asymmetry is deliberate and non-repeating. - The **code blocks** live in 2×1 panels with a micro-grid background (`repeating-linear-gradient` at 1px intervals in `rgba(255,255,255,0.03)`) that simulates graph paper or a technical stencil board. - **Tropical fish motifs** appear as small spot-illustrations: a 48×48 px silhouette of a fish (angelfish, surgeonfish, clownfish) stamps each section header like a rubber stamp. The fish are rendered as flat stencil art — no gradients inside them, only a 1px outline and a single flat-fill tone from the muted palette. ## Typography and Palette **Type system (all Google Fonts):** - **Display / stencil labels — `Bebas Neue`** (Google Fonts, condensed all-caps). Set at 72–128px for step numbers and block titles. Letter-spacing: 0.04em. Applied with a horizontal linear-gradient mask that fades from `#E8E4DC` (weathered cream) at the left to transparent at 60% — the spray-stencil fade effect. This is the signature typographic gesture of the site. - **Subheadings and panel labels — `Archivo Black`** (Google Fonts, geometric grotesque black weight). Set at 18–24px, all-caps, letter-spacing 0.12em, in `#C4BEB2` (muted concrete). - **Body prose — `IBM Plex Sans`** (Google Fonts). Set at 15px / 1.7 line-height in `#B8B2A8` on the dark block grounds. Light weight (300) for paragraph text, medium (500) for inline emphasis. Contrast is deliberately low — around 4.8:1 — echoing the legible-but-faded quality of old instructional stencils. - **Code — `IBM Plex Mono`** (Google Fonts). 13px, line-height 1.6, in `#D4CFC6` on the code-panel ground `#191919`. Comments rendered in `#6A6560`. The monospace family matches the body grotesque for tonal coherence. **Palette (hex values, muted industrial):** - `#1A1A1C` — near-black, primary surface (body background) - `#232325` — block surface A (slightly lighter) - `#2A2A2E` — block surface B (slightly bluer-grey) - `#3A3A40` — block border / divider line - `#4E4E56` — secondary border / steel tone - `#9A9490` — muted midground (fish silhouettes, decorative spray bursts) - `#B8B2A8` — prose text (aged concrete white) - `#C4BEB2` — label / subheading (slightly warmer) - `#E8E4DC` — display type hot-point (weathered cream, used for stencil fade starts) - `#D6581A` — single accent (aerosol brick-orange, used only for step-number glyph and active link; <5% of pixel area) The palette is entirely cool-neutral-to-warm-grey with a single hot accent. No gradient washes. No neon. The brick-orange `#D6581A` is the only chromatic departure — earned, not decorative. ## Imagery and Motifs All imagery is **custom-illustration** (the rarest imagery category in the registry at 2%). No photography. No stock. No gradient meshes. **Tropical fish as stamp motifs.** Each tutorial section begins with a fish stamp: a 48×48 px flat stencil silhouette drawn in SVG. The roster is six species: angelfish (triangular fin), surgeonfish (oval with scalpel-tail), lionfish (spiky, detailed), clownfish (two thick vertical bars), pufferfish (spherical with spike outlines), triggerfish (rectangle body with dorsal spike). Each fish is a single `` in `#9A9490`, stroked with `1px #3A3A40`. The fish do NOT move or animate on their own — they are stamps, not characters. **Spray-burst halos.** Each block corner may carry a decorative spray burst: a radial svg of ~20 tiny dots at variable radii (4–18 px from center), each dot between 1–3 px, in `rgba(184, 178, 168, 0.12)`. This is the "paint-hit" ghost. It has zero interactivity, zero animation. It is pure texture. **Stencil-letter decoratives.** On the site's main landing block (3×2, top-center), the site name "doublestandard" is rendered in 200px `Bebas Neue` using an SVG text with a clipping mask: the fill is a grainy spray-paint texture (fine-noise SVG filter, `feTurbulence` at 0.65 frequency, `feColorMatrix` to desaturate). The effect: big hollow-stencil letters with rough spray-paint fill. This is the hero graphic — it replaces a traditional hero image entirely. **No external imagery loaded.** Every visual element is SVG or CSS. Page weight is minimal. ## Prompts for Implementation Build this as **a modular-grid tech tutorial site that reads like a printed instructional sticker-book** — every block is a self-contained unit, and scrolling through the page feels like sliding down a mural, discovering the next stencilled panel. Implementation vows: **Vow 1 — The grid is the design.** Use CSS Grid with `grid-template-columns: repeat(8, 1fr)` and `gap: 12px`. Every element is positioned by explicit `grid-column` and `grid-row` spans. No flex-row wrappers inside the grid. No absolute positioning for layout. The modular-blocks pattern means every piece of content has a defined grid address. At 1024px viewport, the 8-column grid yields ~116px columns. Below 768px, collapse to 4-column; below 480px, single-column stacked. **Vow 2 — The stencil-fade is a CSS mask, not a JPG.** The display text horizontal fade is achieved via: ```css .stencil-label { background: linear-gradient(to right, #E8E4DC 0%, #E8E4DC 40%, transparent 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } ``` Apply this to every `Bebas Neue` heading. The fade direction reverses on right-aligned labels. **Vow 3 — Ripple on interaction, not on scroll.** The one animation pattern is **ripple** (our seed; 21% in registry, used deliberately not reflexively). Implement as: when a user clicks any block or taps a fish stamp, a CSS/SVG ripple expands from the click point. The ripple is NOT a bright-color Material-style ring — it is a desaturated concrete-grey ring, `2px solid rgba(184,178,168,0.4)`, expanding from 0 to 120% block-width over 480ms with `opacity` decaying from 0.6 to 0. Triggered only on explicit interaction. Never triggered by scroll. **Vow 4 — Code blocks as technical stencil boards.** Each code panel (`2×1` grid block) must render: - Background: `#191919` - Micro-grid: `repeating-linear-gradient(#1E1E1E 0px, #1E1E1E 1px, transparent 1px, transparent 12px), repeating-linear-gradient(90deg, #1E1E1E 0px, #1E1E1E 1px, transparent 1px, transparent 12px)` (graph-paper effect) - A 1px left border in `#D6581A` (the brick-orange accent) — this orange line is the only chromatic mark in the code block - Line numbers in `#4E4E56` - Syntax highlighting: keywords in `#E8E4DC`, strings in `#9A9490`, numbers in `#D6581A`, comments in `#6A6560` **Vow 5 — No parallax. No scroll-triggered stagger. No spring physics.** These three patterns are the most overused in the registry (91%, 68%, 45%). This site uses NONE of them. Scroll is native, instant, zero-transform. Blocks simply exist. The only motion is the ripple on click and a `200ms ease` `opacity` transition on block hover (from 1.0 to 0.95 background overlay — a subtle darkening, not a lift or scale). **Vow 6 — Tutorial narrative in second person, imperative.** All prose is written as direct instructions: "Open your terminal. Run the following. Notice that X happens." No introductions, no motivational preamble, no "in this tutorial we will learn." The voice is the stencilled wall: terse, complete, authoritative. Each step block ends with a ▸ (right-pointing triangle, Unicode U+25B8) in `#D6581A` — the only decorative character beyond the fish stamps. **Structural anti-patterns to avoid:** - No CTA buttons ("Get Started", "Sign Up", "Try Free") - No pricing blocks - No stat grids ("10k users · 99% uptime") - No testimonial carousels - No hero with background video/image ## Uniqueness Notes **Chosen seed:** aesthetic = **graffiti**, layout = **modular-blocks**, typography = **art-deco-display**, palette = **muted**, patterns = **ripple**, imagery = **custom-illustration**, motifs = **tropical-fish**, tone = **tech-tutorial**. **Differentiators from the registry:** 1. **Modular-blocks layout at 1% frequency.** This is the least-used layout in the registry. 93% of designs use centered and 80% use full-bleed. doublestandard.xyz uses neither — it is a pure 8-column CSS Grid where blocks tile to viewport edges with no central spine, no hero, and no full-bleed washes. The structural anti-pattern IS the design. 2. **Custom-illustration only, no photography.** Photography appears in 93% of registry designs. This site has zero raster images. Every visual element is SVG or CSS: fish stamps, spray-burst halos, the stencil-letter hero, the micro-grid code backgrounds. The site loads fast and renders crisply on any display density. 3. **Ripple as the sole interaction pattern, with zero scroll animation.** Three of the most overused animation patterns — parallax (91%), stagger (68%), spring (45%) — are completely absent. The only animation is a desaturated ripple on click, making interaction feel deliberate and tactile rather than cinematic. Scroll is silent. 4. **Graffiti + art-deco-display at 3% and 5% frequency respectively, fused.** Most graffiti aesthetics in the registry lean wild-style or lo-fi. This site channels graffiti through art-deco stencil geometry: `Bebas Neue` with horizontal spray-fade masks, fish stamps as rubber-stamp motifs, and spray-burst dots as controlled textures. The result is graffiti for engineers — structural, legible, technically precise. 5. **Tech-tutorial tone at 2% frequency, treated as a visual constraint.** The 2% tone means this is a rare usage context. The tutorial voice (second-person imperative, no preamble) shapes every layout decision: block sizes are determined by instructional need, not visual drama. Step numbers are the largest typographic element on the page because step sequence IS the navigation.