# Design Language for double-standard.org ## Aesthetics and Tone double-standard.org lives in the productive friction between two aesthetic registers that are never supposed to meet: **cottagecore pastoral softness** and **futuristic geometric precision**. The site embodies its name literally — it holds two standards simultaneously without apology, and the visual argument IS the content. Think of a Victorian terrarium sealed with a laser-cut brass lid, or a pressed-botanical archive printed onto titanium foil. The surface is warm, handmade, organic; the skeleton beneath is cold, angular, machined. The mood is **futuristic-cutting-edge** expressed through cottagecore's lens: natural terracotta and aged parchment are the *context* in which hard geometric forms become strange and arresting. Where a standard futurist site reaches for black and electric blue, double-standard.org reaches for burnt sienna and aged cream — and the geometry hits harder for it. Fern-green accents feel alien when clipped inside hexagonal frames. Warm grain textures make crisp SVG polygons look like fossil impressions. This is a **portfolio site** — the work is everything. The aesthetic exists to make each portfolio piece feel like a specimen in a natural-history cabinet: classified, framed, precious, but described with scientific exactness. **Mood references:** A Murano glass botanical specimen cabinet. The inside cover of a 1910 Kew Gardens illustrated monograph if Zaha Hadid had designed the binding. A terracotta-colored oscilloscope trace. ## Layout Motifs and Structure The layout engine is a **portfolio-grid** — but not a blameless Masonry clone. The grid is built on a **tight 12-column, 8px-gutter system** that deliberately interrupts itself. Portfolio cards occupy 4 columns at rest, but every third card breaks rank: it spans 8 columns and punches through its row like a slab printing plate slipped sideways out of alignment. This "misregistered specimen" break occurs every 3 cards and is never random — it is the grid *accounting for* double standards. **Grid specifications:** - Desktop (1280px+): 12-col, 24px gutters, 48px outer margins, cards at 360px–760px wide - Tablet (768–1279px): 8-col, 16px gutters, cards at 2-col or 4-col spans - Mobile: single column, full-bleed cards with 16px padding **Structural motifs:** - Cards have **asymmetric borders**: a 2px solid line on the left and bottom only, color `#A85C38` (terracotta-stroke), leaving top and right open — like a mounting corner for a specimen slide - A **fixed left rail** (80px wide on desktop) holds a vertical wordmark rotated 90° counterclockwise, acting as a constant spine like a bookshelf edge - **Section dividers** are not horizontal rules — they are a single SVG geometric fragment (a partial hexagon or a 3-sided open polygon) that bleeds off the right edge, rendered in `#C47A5A` at 30% opacity - **No hero banner.** The grid begins immediately below an 80px-tall masthead strip. First card is visible above the fold. - **Scroll-triggered card reveals**: each card enters with a `transform: translateY(24px) → translateY(0)` + `opacity: 0 → 1` over 420ms `cubic-bezier(0.16, 1, 0.3, 1)`, staggered 60ms per card, triggered at 15% viewport intersection — never parallax, never spring ## Typography and Palette **Primary typeface — Display:** [Jost](https://fonts.google.com/specimen/Jost), weights 200 and 700, all caps for headings. Jost is a geometric sans in the Futura tradition (explicitly modelled on Futura/Kabel), available on Google Fonts. Used at `clamp(2.4rem, 5vw, 4.8rem)` for the site wordmark and portfolio section titles. Letter-spacing: `0.18em` at display size, `0.08em` at subhead size. **Secondary typeface — Body/Card Labels:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), weight 300 italic for captions and 500 for card titles. Card titles at 1.1rem, captions at 0.8rem. DM Sans's low-contrast strokes read as soft against terracotta backgrounds without competing with Jost's geometric authority. **Accent typeface — Micro/Taxonomy:** [Space Mono](https://fonts.google.com/specimen/Space+Mono), weight 400 only, used exclusively for taxonomy tags, dates, and catalog IDs (e.g., `SP-0041 / 2024`). Size: 0.7rem, letter-spacing 0.15em. The monospace grid of Space Mono reads as a specimen label. **Palette:** - `#E8D5C4` — parchment-warm (primary background, the aged-paper base) - `#A85C38` — terracotta-stroke (borders, active states, primary accent) - `#C47A5A` — clay-mid (hover states, secondary fills, card image overlays at 20%) - `#3D2B1F` — dark-humus (primary text, wordmark, heaviest typographic weight) - `#5C7A56` — specimen-green (secondary accent, taxonomy tag backgrounds, rare geometric fills) - `#F2E8DC` — cream-light (card surface backgrounds, slightly lighter than parchment base) - `#1A1A1A` — near-black (used only in Space Mono labels, never in body text) **Grain overlay:** A 200×200px tileable SVG noise texture at 4% opacity is layered over the entire `` background using `mix-blend-mode: multiply`, creating the tactile parchment feel that connects the futuristic geometry to a handmade substrate. ## Imagery and Motifs **Photography treatment:** Portfolio piece images are displayed inside cards with a dual treatment: a `#C47A5A` color overlay at 15% opacity on hover (fading in over 300ms), plus the grain texture overlay (persistent). Images are always `object-fit: cover` at a fixed 3:2 aspect ratio. No circular crops. No drop shadows. Cards feel like mounted photographic plates. **Geometric shape motifs:** The signature visual element is the **partial hexagon** — not a full hexagon, but a 3-sided or 4-sided open polygon fragment, like a hex that has been clipped by the edge of a slide cover. These appear as: 1. **Background accent shapes:** Large (180–320px) low-opacity (`#A85C38` at 8%) SVG polygon fragments positioned behind portfolio card groups, one per section row, alternating left-bleed and right-bleed 2. **Card corner marks:** A 24×24px SVG triangle (equilateral, open, 1.5px stroke in `#A85C38`) positioned at the top-right corner of each card — like a mounting-corner ornament but geometric rather than folded-paper 3. **Section transition elements:** At each scroll-triggered section reveal, a 60px partial hexagon fragment animates in from off-screen left using `transform: translateX(-40px) rotate(0deg) → translateX(0) rotate(15deg)` over 600ms, then rests at 15° rotation — as if settling like a leaf or a cut gem **Motif library:** - Partial hexagons (3–5 sides, open polygons) in terracotta stroke, 1.5–2px - Right-angle triangles (corner marks) in terracotta stroke - A thin-stroke diamond (rhombus, 40×24px) used as a bullet/divider in taxonomy rows - NO circles. NO organic blobs. NO leaf silhouettes. The geometry is always angular, precise, crystalline — the "futuristic" half of the double standard enforced with discipline. **Grain overlay implementation:** CSS: `background-image: url('noise.svg')` on `body::before` pseudo-element, `position: fixed`, `inset: 0`, `pointer-events: none`, `opacity: 0.04`, `mix-blend-mode: multiply`, `z-index: 9999`. The noise SVG uses an `` filter at `baseFrequency="0.65"` and `numOctaves="4"`. ## Prompts for Implementation Build double-standard.org as a **single-page portfolio with no interior navigation** — all work lives on one scrollable canvas, divided into loose thematic clusters rather than named sections. The visitor scrolls through a cabinet of specimens; the page is the portfolio in its entirety. **Page structure (top to bottom):** 1. **SPINE RAIL + MASTHEAD STRIP (fixed/sticky, 80px tall)** Left 80px: wordmark "double—standard" in Jost 200 weight, rotated 270°, color `#3D2B1F`, tracking 0.18em. Right of rail: domain in Space Mono 0.7rem. No navigation links. No hamburger. The masthead is a spine, not a menu. 2. **OPENING STATEMENT (120px tall, single text block)** One line in Jost 700 all-caps, clamp(2.4rem, 4vw, 3.6rem): a brief, cryptic studio descriptor — not a tagline, not a headline. Example: "WORK MADE TO HOLD TWO THINGS AT ONCE." Left-aligned, starting at column 2 of 12. Right side is empty — the asymmetry is deliberate. 3. **PORTFOLIO GRID (main content)** Cards in the 12-col asymmetric grid described in Layout. Each card contains: - Image (3:2, cover, grain-overlaid) - Card title: DM Sans 500, 1.1rem, `#3D2B1F` - Taxonomy row: Space Mono 0.7rem tags in `#5C7A56` backgrounds (pill shape, 2px border-radius — almost rectangular), plus a date in `#1A1A1A` - The triangle corner mark (SVG, top-right, terracotta) - Left+bottom border only (`#A85C38`, 1.5px) Hover state: image overlay fades to `#C47A5A` 15%, card lifts `translateY(-4px)` over 200ms, border color shifts to `#3D2B1F`. Scroll-trigger: each card animates in at 15% intersection (`translateY(24px)→0`, `opacity:0→1`, 420ms ease-out, 60ms stagger). 4. **INTERSTITIAL GEOMETRY BREAKS (between card clusters)** Every 6–8 cards, insert a full-width 40px-tall strip with only a partial hexagon SVG fragment and a Space Mono catalog notation like `CAT / 001–006`. This resets the eye and enforces the specimen-catalog metaphor. 5. **FOOTER STRIP (80px, borderless)** Left: "© double-standard.org" in Space Mono 0.7rem. Center: a 3-sided polygon fragment (20px). Right: an email address and one external link, both in Space Mono. No social icons. No colophon. Clean. **Animation specifications:** - Scroll-triggered card entrances: IntersectionObserver at `threshold: 0.15`, `rootMargin: "0px 0px -40px 0px"`. CSS class toggle (`is-visible`). Transition: `transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 420ms ease`. Stagger via `transition-delay` set inline per card. - Hexagon fragment settle: CSS keyframe, fires once on section enter, no loop. - Hover lifts: `transition: transform 200ms ease, border-color 200ms ease`. No JS. - NO parallax. NO spring physics. NO cursor-follow. NO magnetic effects. No scroll-velocity tracking. **What to AVOID in implementation:** - No full-bleed hero sections - No CTA buttons ("Contact Us", "Hire Me", "View All Work") - No stat grids (client counts, years of experience) - No pricing blocks - No testimonial carousels - No gradient backgrounds (the warmth comes from the terracotta palette, not CSS gradients) - No hand-drawn illustration or SVG scribbles - No circular image crops - No drop shadows (use border and lift instead) ## Uniqueness Notes **Seed:** aesthetic: cottagecore, layout: portfolio-grid, typography: futura-geometric, palette: terracotta-warm, patterns: scroll-triggered, imagery: grain-overlay, motifs: geometric-shapes, tone: futuristic-cutting-edge **Differentiators from the 95-design corpus:** 1. **Cottagecore aesthetics weaponized as a futurism substrate.** The corpus shows cottagecore is unused as a named aesthetic. More importantly, no existing design deploys a warm pastoral palette (`terracotta-warm` appears 0% in frequency) as the *ground* for hard futuristic geometry. The usual move is to do futurism in dark mode with neon — double-standard.org does it in aged parchment with terracotta borders, making the geometry stranger and more arresting than black-background alternatives. 2. **Portfolio-grid with misregistration logic.** Portfolio-grid sits at a lower frequency than `centered` (93%) or `full-bleed` (80%). More distinctively, the 3+1 misregistration rule (every third card spans 8 columns, breaking the grid row) is not documented in any read reference design. It is a structural metaphor, not a responsive accommodation — the grid is designed to have a slip, because a double standard is a structural inconsistency. 3. **Grain-overlay as the connective tissue between aesthetic registers.** Grain-overlay is at 1% in the corpus — the rarest imagery pattern. Here it serves a specific conceptual function: the feTurbulence SVG noise applied to the `body::before` at 4% opacity and `mix-blend-mode: multiply` makes the parchment base and the crisp geometric SVGs share the same visual fingerprint, binding the two registers together without blending their identities. This is the "grain" that holds a double standard together. 4. **Scroll-triggered used without parallax.** The corpus shows scroll-triggered at 43% but parallax at 91% — the two are usually paired. double-standard.org strips parallax entirely, using only clean threshold-based IntersectionObserver card reveals. The result is scroll-triggered motion that feels precise and intentional rather than ambient and decorative — consistent with the futuristic-cutting-edge tone delivered through a cottagecore palette. 5. **Asymmetric partial-border card system as the primary motif.** Left+bottom borders only on cards (mounting corners) is a structural decision that recurs at zero documented designs in the reference corpus. Combined with the triangle corner SVG mark, it creates an unmistakable visual vocabulary — a specimen-slide aesthetic that no other portfolio in the corpus uses.