# Design Language for candygirl.xyz ## Aesthetics and Tone candygirl.xyz is **The Aurora Confectionery** — a holographic candy laboratory rendered as a living isometric vitrine, where every confection is a small machine and every machine refracts the northern lights. Picture a 2026 reissue of a 1996 pressed-tin candy-tin lid as imagined by a Reykjavík stage-lighting designer: cyan-magenta-violet auroras curling across foil-stamped pastilles, sugar dragees that hover one millimetre above the shelf, and a friendly proprietor whose voice is the same temperature as a shop bell at 4 PM. The site never says *welcome* and never says *buy*. It opens, instead, with a single isometric storefront that tilts toward the visitor as the page loads, the aurora curtain behind it brightening one frame at a time as if dawn were happening over a candy-store skyline made entirely of lozenge towers and lollipop antennae. The mood is **friendly without being saccharine** — friendly the way a real candy-shop owner is friendly: she remembers the visitor's name, she has a paper bag already half-folded, she does not interrupt browsing. The tone register lands at **friendly**, currently 8% in the corpus, deployed against an aesthetic register of **holographic** (8% in the corpus). Both are deliberately under-represented and pair against the corpus's defaults: instead of warm-inviting bakery copy in pastoral handwritten fonts, candygirl.xyz writes in clipped cinematic title cards set in **bebas-bold** condensed display caps (5% in the corpus) with copy short enough to fit on a rolled candy wrapper. The aesthetic is **holographic** in a very specific sense — not the early-2020s "iridescent foil PNG slapped on a hero" version, but a structural holographic: every refractive surface in the design is built from layered conic-gradients and CSS `filter: hue-rotate()` cycling slowly across an analogous palette. There is no single hero image. There is no photographed candy. Every confection is an inline SVG isometric icon (also 4% in the corpus) drawn from a strict 2:1 axonometric grid, faceted like cut sugar, rendered in the same five hues. The refraction lives in the gradient overlays the JavaScript paints on top of those icons; the icons themselves are flat. This is how holographic stays cheap (under 200kb) and stays unique (no stock foil textures, no Lottie files, no WebGL). The tone is **friendly** but the typography is **bebas-bold** — and that contradiction is the single most important design decision on the site. Bebas in caps reads as a 1960s movie marquee or a Berlin nightclub poster; the friendly copy underneath reads like a candy-shop proprietor saying *come in, take your time, the strawberry pastilles are fresh.* The dissonance is the charm. The visitor is greeted by a marquee that says **OPEN** in 320px Bebas Neue, and the line beneath it says, in 14px Inter, *the door is already unlocked.* ## Layout Motifs and Structure The page is a **single full-bleed scene** (full-bleed at 89% in the corpus, but specifically here as one continuous holographic vitrine, not a stack of full-bleed sections). The viewport opens onto an isometric storefront occupying 100vw × 100vh, with the aurora curtain behind it filling the remaining negative space. There is no scroll until the visitor activates the slide-reveal mechanism described below. The page is `overflow: hidden` on the body until the third interaction. The layout grid is the **2:1 isometric axonometric grid** — every shelf, candy jar, lollipop tower, and signage element snaps to a 30° / 150° / 270° axis. Coordinates are computed in JS as `(x*0.866 + y*0.866, x*0.5 - y*0.5)` so every element is placed on an integer isometric tile (32px × 32px base unit). The shop has a strict architectural plan: ``` [aurora curtain — full backdrop] | [marquee sign — OPEN, 320px Bebas] | +-----[shop facade — 12 isometric tiles wide]-----+ | | [left bay] [center bay — door] [right bay] 3 candy jars 1 hovering bell 3 lollipop trees stacked vertical 1 paper bag, half-folded stacked vertical | | +-----[shop floor — 16 isometric tiles wide]------+ | [floor caption — 14px Inter, lowercase] | candygirl.xyz / open today ``` There are **exactly 11 isometric icons** on the visible storefront. Each is one inline SVG, 4-8kb, drawn on a 256×256 viewBox, rendered at the isometric tilt without any 3D transform (the tilt is built into the SVG path data, not applied via CSS). The eleven are: three candy jars (raspberry pastille, sour-pear drop, violet bonbon), one hovering bell, one paper bag, three lollipop trees (cyan, magenta, gold), one marquee sign, one front door, one floor-tile pattern. The structural innovation is **slide-reveal as the primary navigation gesture** — slide-reveal sits at 3% in the corpus and is here the entire page choreography. There is no scrollbar, no nav, no menu. Instead, when the visitor moves the cursor (or finger) across the storefront from left to right, the front door slides open horizontally on a 1200ms ease-out, revealing a second isometric scene *inside* the shop: a counter, a cash register made of pastel lozenges, a wall of pull-out drawers labeled in tiny Bebas caps. Sliding right-to-left closes it again. The slide-reveal is bidirectional, replayable, and continuous — the door does not snap open/closed; it tracks the cursor's horizontal position 1:1 within the central bay. A second slide-reveal happens **vertically**: pulling the marquee sign down (cursor-drag on its lower edge) reveals the day's hand-lettered candy list — six items in 18px Bebas, prices in 14px Inter, set as if chalked. Releasing the sign lets it spring back up with a 320ms cubic-bezier(0.34, 1.56, 0.64, 1) overshoot. The negative space *around* the storefront is the **aurora curtain** — a single full-viewport canvas painted with three superimposed conic-gradients (cyan→magenta, magenta→violet, violet→gold) drifting at three different rotation speeds (one full rotation per 47s, 71s, 113s — coprime values so the moiré never repeats). The curtain is layered behind the storefront via `z-index: -1`, and each isometric icon casts a thin **prismatic shadow** onto the floor — a 12px-blur drop-shadow stacked three times in cyan / magenta / gold at 4px offsets each, which is what produces the "holographic refraction" without any image asset. There is **no card grid**, no bento, no asymmetric block layout. The entire page is one architecture. This is what makes candygirl.xyz visually distinct from 89% of the full-bleed sites in the corpus: full-bleed is the canvas, but the canvas holds a single coherent isometric scene rather than stacked sections. ## Typography and Palette **Fonts (Google Fonts only):** - **Bebas Neue** — display marquee. Used at 320px for the OPEN sign, 96px for shop-section headers, 32px for candy-drawer labels, 18px for the lowered candy-list. All-caps, letter-spacing +0.04em at large sizes, +0.08em at small. This is the bold-bold sound of the page. - **Inter** — body and caption. Used at 14px regular for lowercase friendly copy, 12px medium for prices and timestamps, 11px medium for the address line. Lowercase by default — uppercase Inter would break the friendly register. - **Caveat** — handwritten accents only. Used exactly twice on the page: the chalk-lettered candy list when the marquee is pulled down (28px), and the proprietor's signature in the lower-right (22px). Caveat is the warmth that softens the Bebas marquee. The Bebas / Inter / Caveat trio is the typographic ladder: marquee shout → friendly caption → handwritten warmth. Bebas-bold is at 5% in the corpus, intentionally rare; Caveat is folded into the broader handwritten 32% but used here at extremely low quantity (two strings, ~50 characters total). Inter is everywhere quietly. **Palette — analogous, hex values:** Analogous palettes sit at 5% in the corpus. The candygirl.xyz palette is an analogous sweep across the cyan→magenta→violet arc of the visible spectrum, with two warm anchors and one near-black for grounding. All eight values are below. - `#0B0420` — *midnight ink* (background base, the deepest sky behind the aurora; used for body, marquee shadow, prismatic-shadow base) - `#1A0938` — *plum night* (storefront facade fill, a single step warmer than the background) - `#3A1B6B` — *violet pane* (the deep violet end of the analogous sweep; aurora gradient stop A) - `#7B3FCC` — *electric lilac* (mid-violet, the candy-jar fill for violet bonbons, aurora stop B) - `#C94BCF` — *magenta neon* (the magenta stop of the analogous sweep, aurora stop C, lollipop-tree #2) - `#FF6FB5` — *bubblegum hot* (warm anchor 1, raspberry pastille fill, the marquee letter inner glow) - `#FFC857` — *honey gold* (warm anchor 2, hovering-bell metal, the chalk-list price tags, lollipop-tree #3) - `#F5F0FF` — *pearl haze* (off-white text color — never pure white, always the off-pearl that catches the violet cast) The analogous arc runs **midnight ink → plum night → violet pane → electric lilac → magenta neon → bubblegum hot**, with **honey gold** as the single counterpoint anchor that prevents the page from collapsing into one cool wash. The aurora curtain animates a hue-rotate cycle through `#3A1B6B → #7B3FCC → #C94BCF → #FF6FB5` at 113-second period, which means the entire page subtly breathes color across 113 seconds without any image swap. Typography is colored with intent: the marquee OPEN is `#F5F0FF` filled, with a `#FF6FB5` inner glow (text-shadow stack of three offset shadows); section headers are `#FFC857` (honey gold against plum); body Inter is `#F5F0FF` at 84% alpha; Caveat handwriting is `#FFC857` for prices and `#F5F0FF` at 92% for the signature. ## Imagery and Motifs **No photography. No 3D renders. No WebGL.** Imagery is built from inline SVG isometric icons (4% in the corpus) plus CSS conic-gradients (the aurora). Total external assets: **zero PNGs, zero JPGs, zero videos.** The page's "imagery" is entirely vector + CSS-painted. **The 11 isometric icons** (each is one `` element, 4-8kb, hand-authored to the 2:1 isometric grid): 1. **Raspberry Pastille Jar** — a hexagonal glass jar containing six layered pastilles in `#FF6FB5`, each pastille a stack of three ellipses to suggest depth. The jar's lid is `#FFC857`. The jar itself is faceted with three visible planes (top diamond, left rhombus, right rhombus) at the standard isometric angles. 2. **Sour-Pear Drop Jar** — same hexagonal vessel, filled with `#7B3FCC` candies (stylized; pear-green would break the analogous palette, so we lean into the violet — these are *enchanted* sour-pears). 3. **Violet Bonbon Jar** — `#C94BCF` candies in the same hexagonal jar form. The three jars together compose the left bay. 4. **Hovering Bell** — a brass shop bell drawn in `#FFC857` with a tiny `#F5F0FF` highlight, hovering 8px above the floor tile beneath it. The hover is a 2.4s ease-in-out vertical loop. 5. **Paper Bag, Half-Folded** — a kraft-colored bag (`#FFC857` at 70% alpha over `#F5F0FF`) with one corner lifted, drawn at the 30° axonometric tilt. Sits next to the bell on the center bay. 6. **Cyan Lollipop Tree** — a vertical stack of three candies on a stick, the candies in three sizes ascending (smallest at top), colored with the violet-pane stop (`#3A1B6B`) trimmed in pearl haze. The "tree" reads as both lollipop and pine. 7. **Magenta Lollipop Tree** — same form, `#C94BCF`. 8. **Gold Lollipop Tree** — same form, `#FFC857`. The three trees compose the right bay. 9. **Marquee Sign** — a horizontal isometric panel hung from two pearl-haze chains; the panel is plum-night fill, the word OPEN is set in 320px Bebas Neue at the design-time render. 10. **Front Door** — a tall isometric rectangle with a single round honey-gold knob and a small viewport-shaped window of `#7B3FCC`. The door slides horizontally on the slide-reveal interaction. 11. **Floor Tile Pattern** — a tessellation of rhombic tiles in alternating plum-night / violet-pane, generated as a single repeatable SVG pattern with a 64px tile. **The aurora-lights motif** (3% in the corpus) is the soul of the page. It manifests as: - The full-viewport conic-gradient curtain behind the storefront (the slow 113-second hue cycle). - Thin auroral filaments drawn as inline SVG paths over the marquee sign — six paths, each a Bezier curve sweeping left-to-right, animated via `stroke-dashoffset` to "ribbon" across the marquee on a 9-second loop. - The prismatic drop-shadows beneath every isometric icon — three stacked filters in the analogous hues, simulating the way an aurora would refract through faceted candy. - A single celestial sweep that occurs **once on page load**, after a 4-second hold: the aurora brightens from 60% opacity to 100% over 2.6 seconds, then settles back to 75% as ambient. This is the page "waking up." **Decorative pattern: candy-foil grain.** A 1024×1024 SVG `` with `feTurbulence baseFrequency="0.9" numOctaves="2"` is applied at 6% opacity over the entire viewport to give the holographic surface a fine candy-foil grain. It is a single SVG filter, no PNG, no asset. **No icons in the conventional sense** — no UI icons, no social icons, no chevrons. The eleven isometric objects ARE the page. Hovering each reveals a tooltip in 14px Inter (caption text from the proprietor: *raspberry pastille — 7 left*, *sour-pear drop — try one*, *the bell rings every hour, you'll know*). ## Prompts for Implementation Build candygirl.xyz as **one HTML document, one CSS file, one ES module, and one `shop/` directory of eleven hand-authored SVG files**. No framework. No bundler. No Lottie. No WebGL. No canvas elements. No external imagery — not even a single PNG. Total page weight target: **under 110kb gzipped**, because the only "image" on the page is vector and the only animation is CSS keyframes plus a small JS state machine for the slide-reveal. **AVOID, absolutely:** - Hero CTAs, primary buttons, "shop now" links, "add to cart" affordances. There is no commerce surface on this page. The shop is a vitrine. - Newsletter signups, email capture, contact forms, age gates, cookie banners (handle the cookie banner via `Set-Cookie` headers, not a UI element). - Pricing tables, product grids, stat counters, "trusted by" logos, testimonial blocks. - Carousels, slideshows, autoplay video, autoplay audio, hero videos behind text. - Social-share buttons, Instagram embeds, footer link rosters of any kind. - **Cursor-follow effects** (73% in the corpus — refused outright). - **Magnetic hover** (62% in the corpus — refused). - **Spring physics** (75% — refused; the only spring is the marquee return-snap, and that is `cubic-bezier`, not a real spring). - **Parallax sections** (94% — refused). - **Stagger animations** (76% — refused; animations on this page are choreographed in unison, not staggered). - **Gradient buttons / gradient backgrounds applied to UI** (96% in the corpus). The aurora is a *backdrop atmosphere*, not a UI gradient. No buttons have gradients. - **Mono-spaced fonts of any kind** (96% in the corpus — refused; this is a deliberate departure). - **Photography, including hero photography, candy photos, lifestyle photos** (98% in the corpus — refused). - **Card grids, bento boxes, asymmetric blocks** (the page has zero cards). - **Drop shadows on cards** (no cards exist). - **Gradient meshes** (the aurora is conic, not mesh). - **Glassmorphic cards** (73% in the corpus — refused). - **3D tilt on hover** (15% — refused; the page is already in 2:1 isometric, additional 3D would muddy the axonometric). **DO, structurally:** ```

OPEN the door is already unlocked

…
…
…
…
…
…
…
…
…

candygirl.xyz · open today — eun

``` Each `
` contains one inline SVG icon plus a `
` set to `aria-hidden` until hover. The figcaption text is in 14px Inter (proprietor copy). The marquee is an `

` because the OPEN sign IS the page's heading. The floor-line includes the address, hours, and proprietor's signature in Caveat. **Animation rules:** 1. **Aurora curtain** — three superimposed conic-gradients rotate continuously at 47s, 71s, 113s (coprime, so the visible pattern never repeats). The hue cycle is a CSS `@keyframes` driving `filter: hue-rotate(0deg → 360deg)` over 113s, infinite, linear. Ambient throughout. 2. **Aurora wake** — on page load, the aurora opacity holds at 60% for 4 seconds, then transitions to 100% over 2.6 seconds (`cubic-bezier(0.16, 1, 0.3, 1)`), then settles to 75% over 1.4s. This is the only "intro" animation. 3. **Auroral filaments** — six SVG paths over the marquee, each a `stroke-dashoffset` animation on a 9-second loop, phase-offset by 1.4s across the six. Stroke-width 1.5px, stroke `#F5F0FF` at 60% alpha. 4. **Hovering bell** — vertical translate (-8px → 0px → -8px) on a 2.4s ease-in-out infinite loop. The only continuous in-scene motion besides the aurora. 5. **Slide-reveal — front door (horizontal)** — the door's `transform: translateX()` tracks the cursor's horizontal position within the central bay 1:1, clamped to [0, 96px]. Pulling the cursor right opens the door; left closes it. The interior scene (counter, register, drawer wall) is positioned behind the door and revealed by the door's translation, not by opacity. 6. **Slide-reveal — marquee (vertical)** — pointerdown on the lower edge of the marquee enables drag; the marquee's `transform: translateY()` tracks the cursor's vertical drag from 0 to 140px. The chalk-lettered candy list is positioned behind the marquee panel and revealed by the panel's lowering. On pointerup, the marquee springs back via `cubic-bezier(0.34, 1.56, 0.64, 1)` over 320ms with overshoot. 7. **Confection hover (tooltip)** — hovering a figure raises its tooltip via `opacity 0 → 1` over 240ms with a 6px upward translation; no scale, no glow, no card. Just text appearing. 8. **Prismatic shadow on icons** — every confection has a `filter: drop-shadow()` stack of three shadows in cyan / magenta / gold, offset by 4px each. Static, no animation. This is the holographic refraction. 9. **Reduced motion** — `@media (prefers-reduced-motion)` disables the aurora hue-cycle, the bell hover, the filament stroke-draw, and the wake animation. The slide-reveals remain (they are user-initiated, not autoplayed). **Interaction copy (the eleven confection captions and the chalk list):** - Jar Raspberry: *raspberry pastille — 7 left* - Jar Pear: *sour-pear drop — try one* - Jar Violet: *violet bonbon — slow to dissolve* - Hovering Bell: *the bell rings every hour, you'll know* - Paper Bag: *the bag is yours, take what fits* - Door: *push left, the door opens itself* - Lolli Cyan: *cyan stick — keeps the cold out* - Lolli Magenta: *magenta stick — keeps the dark out* - Lolli Gold: *gold stick — keeps the quiet in* - Marquee: *pull down for today's chalk* - Floor Line: *candygirl.xyz · open today — eun* **The chalk list** (revealed by lowering the marquee — handwritten in Caveat): 1. *raspberry pastille — 1.20* 2. *sour-pear drop — 1.40* 3. *violet bonbon — 1.60* 4. *cyan lolli — 2.00* 5. *magenta lolli — 2.00* 6. *gold lolli — 2.20* **Narrative arc.** The visitor arrives. The aurora is dim. After four seconds, the aurora wakes — the sky brightens like dawn over a candy-shop horizon, and the marquee letters glow from inside. The visitor reads OPEN. They notice the door. They drag the cursor right; the door slides open one millimetre at a time, revealing the counter inside. They drag the marquee down; today's chalk appears. They hover the bell; the bell tells them it rings every hour. They never click anything. Nothing scrolls. There is no second page. The visitor leaves when they choose. The aurora keeps cycling. ## Uniqueness Notes **Three or more differentiators from the corpus of 100 prior designs:** 1. **Holographic-as-architecture, not holographic-as-foil.** Holographic at 8% in the corpus is almost universally executed as iridescent foil PNGs or gradient-text effects. candygirl.xyz uses zero foil assets and zero gradient text. The "holographic" identity is built entirely from layered conic-gradients on the aurora curtain plus three-color drop-shadow stacks on every isometric icon. The refraction is structural, not surface-applied. 2. **Slide-reveal as primary navigation.** Slide-reveal at 3% in the corpus is the third-rarest animation pattern. candygirl.xyz uses slide-reveal not as a section transition but as the *only* navigation gesture: a horizontal slide (door) and a vertical slide (marquee). There is no scroll, no menu, no clickable nav. The page navigation is two physical drag gestures, replayable infinitely. This is unique among the corpus's full-bleed pages, none of which use slide-reveal as the primary interaction. 3. **Bebas-bold paired with friendly tone.** Bebas-bold at 5% and friendly at 8% are individually rare; their combination is unprecedented in the corpus. Bebas typically lives in cinematic/editorial designs with bold-confident or energetic tones. Pairing it with friendly proprietor copy — clipped marquee shouting OPEN above a 14px Inter line saying *the door is already unlocked* — is the central typographic dissonance and the design's signature. 4. **Single coherent isometric scene, not stacked sections.** Of the 89% of corpus designs using full-bleed layout, almost all stack multiple full-bleed sections vertically. candygirl.xyz refuses stacking: the entire page is one architectural drawing, eleven isometric objects on a 2:1 axonometric grid, with the entire viewport committed to one scene. This is closer to a stage set than a webpage. 5. **Aurora-lights motif rendered in CSS, not video or canvas.** Aurora-lights at 3% in the corpus would typically require video loops or WebGL particle systems. candygirl.xyz produces the aurora from three superimposed conic-gradients with coprime rotation periods (47s, 71s, 113s) so the visible pattern never repeats. Total cost: approximately 40 lines of CSS. No assets, no canvas, no GPU shader. 6. **Isometric-icons (4% in the corpus) deployed at scale.** Where most isometric-icon usage in the corpus appears as small spot-illustrations or feature-row icons, candygirl.xyz places eleven isometric SVG icons on a single architectural grid as the entire content of the page. The icons are not decoration; they are the storefront. **Avoided patterns from frequency analysis:** - Cursor-follow (73%) — refused. - Magnetic hover (62%) — refused. - Spring physics (75%) — refused (the marquee return-snap is `cubic-bezier`, not a spring). - Parallax (94%) — refused; nothing parallaxes. - Stagger (76%) — refused; animations are choreographed in unison. - Gradient backgrounds applied to UI (96%) — refused; the aurora is environment, not UI. - Mono fonts (96%) — refused; Bebas + Inter + Caveat is the entire stack. - Photography (98%) — refused; eleven SVGs are the only imagery. - Card grids (72%) — refused; zero cards. - Hand-drawn aesthetic (95%) — refused; isometric vectors are mathematically precise. - Glassmorphism (73%) — refused; refraction is not blur. - Asymmetric layout (52%) — refused; the layout is rigorously axonometric. **Chosen seed (from assignment):** *aesthetic: holographic, layout: full-bleed, typography: bebas-bold, palette: analogous, patterns: slide-reveal, imagery: isometric-icons, motifs: aurora-lights, tone: friendly.* Of these eight axes, **five are below 10% frequency** in the corpus (holographic 8%, slide-reveal 3%, isometric-icons 4%, aurora-lights 3%, bebas-bold 5%, friendly 8%, analogous 5%). The combination is statistically improbable in the corpus — meaning candygirl.xyz lands in a design region that has not been visited before by any of the 100 prior sites. The full-bleed axis (89%) is the only "common" axis, and it is reinterpreted here as a *single coherent scene* rather than a stacked-section convention, which is itself a departure. The candy-shop conceit — a holographic isometric vitrine where slide-reveal is the only verb and the only voice is a friendly proprietor named *eun* whose signature appears once in honey-gold Caveat — is a design that could only exist at the intersection of these eight rare axes. Removing any one of them collapses the identity: lose the isometric and you lose the architectural rigor; lose the aurora and you lose the holographic atmosphere; lose the slide-reveal and the page becomes static; lose the friendly tone and the Bebas marquee becomes hostile. The eight axes are interlocked, and that interlock is the design's signature.