# Design Language for candygirl.bar

## Aesthetics and Tone

candygirl.bar (v2) is a **Glitched Editorial Lookbook** -- a warm-inviting fashion editorial about a fictional musician/baker/candymaker named "Candy Girl," staged inside a deliberately broken magazine layout that bleeds into corrupted-tape glitch art. The editorial aesthetic is strong: oversized display, generous margins, full-bleed photo plates, captions in the gutter. But every other spread is gently corrupted -- a scan line tearing across a face, a chromatic-aberration split on a name, a baseline jitter on a date. The glitches feel deliberate, like a photographer's choice to print on faulty film stock for the texture.

The mood is **warm-inviting** despite the glitches. The glitch art is treated as the warm record of an analog magazine being reread, photocopied, and folded -- not as digital aggression. Muted-vintage palette saturates everything to read as a 1973 fashion magazine recovered from a basement: faded plum, dusty rose, sage cream, paper yellow.

## Layout Motifs and Structure

The composition is a **broken-grid** -- a magazine spread layout where columns intentionally misalign, text-blocks tilt 1-3 degrees, photographs are cropped at angles, and pull-quotes break the gutter at unexpected angles. The broken-grid is a deliberate compositional choice, not chaos: every break is composed, with margin-anchored grid-residues guiding the eye.

**Macro structure:**
- **Cover (Section 0, 100vh):** A full-bleed editorial cover. Large duotone-glitched photograph of Candy Girl (the character) at the center, with chromatic-aberration RGB-split on her name typed in oversized display across the top. The title "CANDY / GIRL // SPRING SUMMER" stacks at oversized scale. A small issue meta in the bottom corner: "ISSUE 03 // BAKERY EDITORIAL." A single scan-line glitch occasionally tears across her image.
- **Contents Spread (Section 1):** A broken-grid table of contents. Page numbers float at varying baseline-jittered heights. Three lead-photographs sit at tilted angles. Captions in the gutter.
- **Lead Story: "The Bakery" (Section 2-3):** A multi-spread editorial about the imagined bakery Candy Girl runs. Full-bleed photographs alternating with broken-text columns. Layered-depth motif gives each spread 3-4 z-stacked elements: a foreground product, a mid-layer pull-quote, a back-layer photographic plate, an overlay glitch-line. Pull-quotes break the grid at -2deg or +3deg rotation.
- **Fashion: "The Apron Series" (Section 4):** A series of three glitch-distorted portraits of Candy Girl in different aprons (cream, sage, dusty-rose). Each portrait has a different glitch treatment: vertical pixel-sort, horizontal scan-tear, RGB-split. Captions identify garments.
- **Recipe: "Burnt Honey Cake" (Section 5):** A single text-column spread (the only single-column moment) with the recipe in handwritten-feel italic, framed by photographs of the cake at four stages of baking. Each photograph has a subtle glitch sweep that animates as the user scrolls past.
- **Letter from the Editor (Section 6):** Short closing column with a small glitched signature.
- **Colophon (Section 7):** Standard editorial colophon, with the masthead ghost-glitching every 8s.

The scale-hover pattern is the dominant interaction: hovering any photograph causes it to scale up by 1.04, with the glitch-treatment intensifying momentarily (a stronger scan-line tear or chromatic split during the hover-in transition).

## Typography and Palette

**Fonts (all Google Fonts):**
- **Display headlines & cover title:** "Anton" weight 400 -- an oversized-display mandate (Anton is heavy, condensed, and editorial-display). Used at clamp(80px, 14vw, 240px) for the cover title and at clamp(48px, 7vw, 120px) for spread titles. Tracking -0.01em. Italics from "Anton" don't exist in Google Fonts (single weight only), so italics are simulated with a 6deg skew transform.
- **Sub-labels / dateline:** "Anton" weight 400 small-caps at 14px, tracking 0.16em, used for issue meta and caption labels.
- **Body text:** "EB Garamond" weight 400 at clamp(15px, 1.1vw, 18px), line-height 1.7. Italic EB Garamond for pull-quotes, recipe handwriting, and editor's signature.
- **Pull-quote oversized:** "EB Garamond" weight 500 italic at clamp(36px, 5vw, 96px), line-height 1.1. Pull-quotes are the moment of typographic intimacy against Anton's heavy display.

**Palette (muted-vintage mandate):**
- **#3D2533** Deep Plum Ink (primary type, masthead, structural ink)
- **#6B4255** Faded Plum (secondary ink, sub-labels)
- **#A87285** Dusty Rose (accent type, pull-quote highlights)
- **#C8AB91** Sage Cream (mid-tone surfaces, secondary photo wash)
- **#EBD8A8** Paper Yellow (page ground, primary surface)
- **#F4ECD5** Aged Vellum (alt page ground, body type surface)
- **#7A8463** Muted Olive (rare accent, recipe section)

The whole palette feels like a 1973 fashion magazine that has been kept in a cedar drawer for 50 years.

## Imagery and Motifs

**Core visual motifs:**

- **Glitch-art (imagery mandate):** All editorial photographs receive one of three glitch treatments:
  - **Scan-line tear:** A horizontal black band (1-3px tall) tears across the image, briefly displacing the pixels above and below it. Triggers occasionally (every 6-12s, random per image).
  - **Chromatic-aberration RGB split:** The red, green, and blue channels of the image are offset by 2-5px in different directions, creating a "wet film" feel. Static on most images; pulses harder on hover.
  - **Pixel-sort streak:** A vertical band of the image is pixel-sorted (pixels arranged by luminance), creating a smeared-light vertical stripe. Used on the "Apron Series" portraits.
  Glitches are not random; each photograph has an authored glitch pattern that animates predictably.
- **Layered-depth (motif mandate):** Each major spread has 3-4 z-positioned elements:
  - Background photographic plate (full-bleed, glitched)
  - Mid-layer photographic insert (smaller, at angle, with its own glitch)
  - Foreground pull-quote (italic Garamond, broken-grid angle)
  - Overlay glitch-line (a thin scan-line drifting horizontally across the whole spread)
  Each layer drifts independently on scroll (parallax-tied to layered-depth motif, not to a generic parallax preset).
- **Broken-grid residue lines:** Faint 1px grid-lines remain visible at 6% opacity behind the broken-grid composition, allowing the user to read the layout's intentional misalignment against an implied grid.
- **Crop-tilt photo frames:** Photographs are cropped at angles (1deg to 4deg tilts) with thin paper-edge borders.
- **Editor's marks:** Small handwritten-feel red-circle marginalia appear occasionally beside body paragraphs -- a copy-editor's mark, like "TK," "stet," "ital."

## Prompts for Implementation

**Opening:** Page loads on paper yellow. The cover photograph of Candy Girl fades in (1.0s) with a strong initial chromatic-aberration RGB-split that gradually settles toward a milder static aberration (over 1.6s). The oversized title "CANDY / GIRL" types in word-by-word (220ms per word), each word with a brief scan-line tear at the moment of arrival. The issue meta in the corner fades in last. By 2.6s the cover is settled.

**Scroll narrative:** As the user scrolls into the contents spread, page-number elements fade in at baseline-jittered y-positions (each number arriving 8-12px above or below its expected line). Lead photographs zoom-in-from-1.05-to-1.0 at their tilted angles, each with its first scan-line tear at the moment of arrival.

**Lead Story spreads:** As each spread enters the viewport:
- The full-bleed photograph fades in with a 600ms scan-line ramp-up then settles to its idle glitch loop
- The mid-layer photographic insert slides in from its tilted angle
- The pull-quote types in word-by-word at its broken-grid angle (italic Garamond, 240ms per word)
- The overlay scan-line begins its drift across the spread

**Scale-hover interaction:** Hovering any photograph:
- Scales the image to 1.04 (240ms ease-out)
- Intensifies the photo's glitch treatment for 800ms (stronger chromatic split or tear)
- Highlights the caption beside it (dusty-rose underline draws in)
- The implied grid-line beneath the image brightens briefly (10% to 16% opacity)

**Recipe spread:** The single-column recipe section feels intentionally calmer. The handwritten-italic body text reveals line-by-line with a 100ms stagger. The four cake-stage photographs along the gutter trigger their glitch sweeps as the user scrolls past each one.

**Apron Series:** The three portraits stack vertically. Each has its specific glitch treatment as a continuous idle loop -- pixel-sort streak drifting upward, scan-tear sweeping diagonally, RGB-split breathing. Hovering each portrait triggers its glitch to play 1.5x speed.

**Closing:** The editor's signature draws in via SVG stroke-dashoffset. The colophon's masthead text gets a brief ghost-glitch every 8s -- a fading double-strike of the text 4px to the left, fading over 240ms.

**Avoid:** No CTA-heavy layouts. No newsletter signup. No pricing blocks. No stat grids. This is an editorial lookbook; the only "shopping" is implied in the apron captions identifying garments.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Glitch-art treated as warm editorial texture, not digital aggression:** The glitches read as analog film damage in a 1973 magazine recovered from a basement -- warm-inviting tone applied to a typically harsh visual treatment. Glitch-art imagery is 2% in the batch and rarely paired with muted-vintage palette.

2. **Broken-grid layout with intentional residue grid-lines:** Faint 1px grid-lines remain visible at 6% opacity behind the broken composition, making the misalignment legibly intentional. Broken-grid is 4% in the batch; visible-grid-residue is original.

3. **Oversized-display typography (Anton) at extreme scales:** Cover title at clamp(80px, 14vw, 240px) treats type as the primary photograph. Oversized-display is 2% in the batch.

4. **Three authored glitch treatments rather than random visual noise:** Each photograph has a specific named glitch (scan-line tear, chromatic split, pixel-sort streak) that animates predictably -- the glitches read as photographer's choices, not chaos.

5. **Imagined editorial protagonist as the design's organizing principle:** The site is structured as a magazine *about* a fictional character named Candy Girl. Section flow follows magazine editorial logic (cover, contents, lead story, fashion series, recipe, editor's letter, colophon).

Chosen seed: aesthetic: editorial, layout: broken-grid, typography: oversized-display, palette: muted-vintage, patterns: scale-hover, imagery: glitch-art, motifs: layered-depth, tone: warm-inviting

**Avoided patterns from frequency analysis:** No parallax-only (96% -- parallax is tied to layered-depth motif), no centered/card-grid (96%/93%), no warm gradient flat (95%/78%), no mono (81%), no mysterious-moody (71%), no photography-as-fill (91% -- photography is heavily glitched-treated). Used: broken-grid (4%), oversized-display (2%), muted-vintage palette (1%), glitch-art imagery (2%), layered-depth motif (9%), scale-hover pattern (3%), warm-inviting tone (4%), editorial aesthetic (16% -- common but distinctive in this glitched application).