# Design Language for candygirl.bar ## Aesthetics and Tone candygirl.bar is a **holographic confectionery deck** — a single, swooping web experience where iridescent navy foil meets rounded soft-serve typography. Imagine the inside of a holographic trading-card sleeve laid against a midnight bartop: light bends as you tilt the page, sugar-plum highlights ricochet across deep navy laminate, and every diagonal slice reveals another curl of metallic candy ribbon. The mood is **after-hours sweet shop** — a dim members-only counter where each cocktail is poured into prismatic glass, where the menu shimmers chrome-blue when caught at the right angle, where the hostess greets you by first name and slides a foil-wrapped lozenge across the bar. This is **approachable-casual** intentionally — not corporate, not childish. The visitor should feel as if they wandered into a friend's late-night kitchen and the friend happens to make holographic candies for a living. The tone is conversational without being chirpy, knowing without being cool. Copy uses lowercase first letters in headlines, contractions in body, and small parenthetical asides that read like a wink. There are no exclamation marks. There are, however, small hand-drawn-feeling SVG marks (a curl, a spiral, a half-moon) that punctuate paragraphs in the way an emoji might in a text message. The aesthetic spine is **holographic** — but a specific, restrained dialect of it. Not the chaotic spectrum-burst of TikTok thumbnails. This is **navy holographic**: the rainbow lives inside a deep midnight base, surfacing only along edges, gradients, and the highlight points of curves. Think of holographic Pokémon cards from 1999 photographed under a single warm desk lamp, or Sailor Moon's transformation foil seen through a tinted car window. Iridescence is a guest, not a host. Underneath everything is a **soft grain overlay** — fine film-noise at 3-6% opacity, blended in `multiply` mode — to keep the metallic surfaces from looking digitally sterile. The grain mimics the way real holographic foil catches dust and fingerprints. It is the design's secret weapon against the cold-render trap that holographic sites usually fall into. The narrative scroll is **a diagonal flight through a candy laboratory** — the visitor descends the page like a marble rolling down a tilted glass tray, each section a slanted plate where one process unfolds (the sourcing, the pour, the wrap, the gift). Sections do not stack rectangularly; they rake across the viewport at a consistent **−7° angle**, with content bleeding past the diagonal cut into the next plate's negative space. ## Layout Motifs and Structure The page is built on a **diagonal-sections grid** — the only design in the cohort committing fully to consistent off-axis composition. Every full-bleed section is sliced at **−7°** (rotation, not skew, to preserve text legibility) with the section beneath rotated **+7°** in alternation. The content within each section uses a standard 12-column grid that is itself untilted; only the section *frames* tilt. This produces a feeling of cascading glass shelves rather than a tilted poster. **Hero (Section 1 — Counter)** A full viewport-height landing where the brand wordmark `candygirl.bar` sits centered-left, set in a rounded sans at clamp(72px, 11vw, 168px), with the dot of the `.bar` rendered as an actual holographic candy disc — a 120px circle filled with a conic-gradient navy/silver/lilac that slowly rotates (24s loop). Behind the wordmark, a single **flowing-curve SVG ribbon** in chrome-navy runs from upper-right to lower-left across the entire viewport, casting a soft 80px blur drop-shadow in lilac. The ribbon is animated via `path-draw-svg` over 2.4s on first paint, then settles into a 14s drift loop where its control points wobble within a 6px radius. No CTA buttons appear in the hero. Instead, three short lines of approachable copy ("we make candy with a hologram inside / open thursday through sunday / scroll down, the door's unlocked") sit beneath the wordmark in a soft humanist mono. **Section 2 — Sourcing (the diagonal cut begins)** The first −7° plate. A wide horizontal slab in deep navy (#0A0E2A) with a fine grain overlay. Content is split: left two-thirds shows a slow-loading photographic still of a hand pouring sugar from above (duotone-treated to navy/lilac, cropped tight), right one-third holds a vertical column of 4 sourcing notes in rounded sans. The diagonal cut means the photograph spills into the next section's upper-right corner. **Section 3 — The Pour (+7° plate)** A counter-tilted plate that visually catches what fell from Section 2. Background shifts to a chrome-metallic gradient (linear-gradient at 117° from #1A2447 through #6A78A8 to #2A3158). A single oversized SVG illustration of a flowing candy ribbon dominates the center, animated to pour from the upper edge into a glass at the lower edge over a 6s scroll-triggered timeline. Three captions in a soft serif italic float along the curve like steam labels on a kettle. **Section 4 — The Wrap (−7° plate)** A masonry of **scale-hover** product cards — six holographic candy SKUs, each a square photograph wrapped in a thin chrome border. On hover, cards scale to 1.08 with a 320ms cubic-bezier(0.34, 1.56, 0.64, 1) easing (overshoot springiness), and the holographic foil sheen sweeps across the card via a CSS `linear-gradient` mask animated through `background-position`. This is the only section that uses scale-hover prominently — it is the design's signature interaction beat, justified by the conceit that you are picking up candy and the candy catches the light when you reach for it. **Section 5 — The Gift (+7° plate)** A horizontal scroll trapped within this single section — five "gift box" tiles slide left as the user scrolls vertically (scroll-jacked for 240vh of vertical input mapped to 600vw of horizontal travel). Each tile is a vignette: the candy in a friend's hand, the candy on a kitchen counter, the candy in the moonlight. Photography is duotone navy/silver with a soft grain overlay. **Section 6 — Hours & Visit (−7° plate, the last cut)** A quiet plate. Hours displayed as a vertical list in oversized rounded sans. Address in a single line of soft serif. A small interactive map embedded as an SVG illustration (not a real map service) with the bar marked by a tiny holographic dot that pulses every 2.4s. No "book now" button. Only "see you soon" in a small handwritten-feeling stroke at the bottom. **Footer** Pulled flat (no diagonal). A single horizontal line of: wordmark left, social glyphs center (custom SVG curls, not standard logos), copyright right. Set in 14px rounded sans with 0.04em tracking. The diagonal cuts are achieved via `clip-path: polygon()` on each section wrapper, with the inner content un-rotated to keep typography legible. A 1px chrome-gradient hairline traces each cut as a subtle "edge of foil" detail. ## Typography and Palette **Typography is rounded-sans-led** — explicitly, deliberately, against the cohort's mono-default reflex. - **Display & Wordmark:** *Quicksand* (Google Fonts), weight 700, with optical letterspacing of −0.018em at display sizes. Quicksand's perfectly circular terminals and even stroke contrast give the brand a confectionery softness without veering into childish territory. Used for the hero wordmark and all H1s. - **Headings (H2/H3):** *Sniglet* (Google Fonts), weight 800, used at clamp(28px, 4vw, 56px). Sniglet's slightly irregular roundness adds a hand-feel that pairs with the casual tone. - **Body:** *Nunito* (Google Fonts), weights 400/600/700. Nunito's high x-height and round counters keep paragraphs readable at small sizes against the navy background, and it sits in the same rounded-sans family as Quicksand and Sniglet, creating a tight typographic system. - **Italic accents & captions:** *Caveat* (Google Fonts), weight 500 — a handwritten-feeling script used sparingly for image captions and the small parenthetical asides ("the door's unlocked", "see you soon"). Limited to clamp(16px, 1.4vw, 22px). - **Numerics & metadata:** *Nunito*, tabular-nums variant, lowercase, with 0.06em letterspacing. There is **no monospace anywhere** on this site — the absence is intentional and is part of the differentiator from cohort norms. **Palette — navy-metallic with holographic accents:** | Token | Hex | Role | |---|---|---| | `--ink-deep` | `#070A1F` | Page base, deepest plates | | `--ink-navy` | `#0A0E2A` | Section 2 base | | `--navy-rich` | `#1A2447` | Mid-tone navy | | `--chrome-blue` | `#6A78A8` | Metallic mid-light | | `--chrome-silver` | `#B8C4DE` | Metallic highlight | | `--foil-lilac` | `#C8B8E8` | Hologram lilac glint | | `--foil-pink` | `#F4C8DC` | Hologram pink glint | | `--foil-mint` | `#B8E8DC` | Hologram mint glint | | `--foil-gold` | `#E8D8A8` | Hologram warm glint | | `--paper-cream` | `#F4ECE0` | Section 6 paper-light plate | | `--text-on-dark` | `#E8E4D8` | Body copy on navy (warm off-white, not pure white) | | `--text-on-light` | `#1A2447` | Body copy on cream | The **holographic effect** is implemented as a `conic-gradient` cycling foil-pink → foil-lilac → chrome-silver → foil-mint → foil-gold → chrome-blue → foil-pink, applied at 18% opacity in `screen` blend mode over a navy base. This produces the iridescent glint without the saturated chaos of a literal rainbow. ## Imagery and Motifs **Photography:** All photographic content is duotone-mapped to `--ink-navy` (shadows) and `--chrome-silver` (highlights), with a 4% grain-overlay and a faint 1-2px chromatic aberration along high-contrast edges (red channel offset −1px on x, blue channel +1px on x). Subjects are exclusively confectionery process shots — sugar mid-pour, ribbon mid-curl, foil mid-twist — never finished products on flat backdrops, never people's faces. The photographs feel like field notes from inside the candy lab. **Motif system — flowing-curves:** A library of 12 hand-drawn SVG ribbon paths is embedded site-wide. Each path uses 4-6 cubic Bézier control points, stroke `--chrome-silver`, stroke-width 1.5px, with a `--foil-lilac` 12px feGaussianBlur drop-shadow filter. Ribbons appear as: 1. The hero's diagonal flight ribbon (full viewport width, animated) 2. Section dividers in place of horizontal rules — small 80px curl glyphs centered between sections 3. List bullet replacements — instead of `•`, each list item is preceded by a 14px ribbon-curl SVG 4. Around photographic subjects — a single ribbon arcs *behind* each candy product card, suggesting wrapping **Custom iconography:** A 24-glyph icon set drawn as single-stroke flowing curves (no sharp corners anywhere) — for menu items, hours, social, contact. Glyphs are inscribed in 32×32 boxes with a consistent 1.5px stroke. No filled icons exist in the system. **Grain overlay:** A 256×256 PNG of pre-generated film grain (R-channel only, alpha 0.06) is tiled site-wide as a `position: fixed; inset: 0; pointer-events: none; mix-blend-mode: multiply;` overlay. This single tile costs ~3KB and unifies the entire surface. A second, finer grain (128×128, alpha 0.03) is applied locally to product cards in `screen` mode to add holographic shimmer to highlights. **Holographic foil texture:** The signature texture used on the wordmark dot, on hover sheens, and on the section-divider curls. Implemented as a CSS-only effect: `background: conic-gradient(from var(--angle), foil-pink, foil-lilac, chrome-silver, foil-mint, foil-gold, chrome-blue, foil-pink); mix-blend-mode: screen; --angle: 0deg;` with `--angle` animated via `@property` from 0deg to 360deg over 24s. **No stock photography. No illustration of human figures. No emoji. No third-party icon libraries.** Every visual element is either the in-house photograph set, the custom SVG ribbon library, the 24-glyph icon set, or a CSS-generated holographic gradient. ## Prompts for Implementation **Narrative-first build directive:** The page is a **descent through a candy laboratory**, not a marketing brochure. Every implementation decision should serve the question "does this feel like the visitor is sliding down a tilted glass tray full of holographic candy?" If a feature does not, cut it. There is no pricing table. There are no testimonials. There are no statistics. There is no "About Us" tile-grid. There is no email-capture modal. There is no hero CTA. The visit *is* the conversion. **Section construction:** Build each diagonal plate as a `
` with `clip-path: polygon(0 0, 100% 7vh, 100% 100%, 0 calc(100% - 7vh))` (alternating direction). Inner content lives in an un-clipped child div with appropriate padding to clear the diagonal cut. The first and last sections (hero and footer) have flat clip-paths to anchor the page. **Diagonal angle math:** Use `--cut-angle: 7deg` as a CSS custom property, with section heights designed so the diagonal cut never bisects a line of text. Test at viewport widths 360px, 768px, 1024px, 1440px, 1920px — at narrow widths, reduce `--cut-angle` to `4deg` via media query to preserve content density. **Holographic implementation:** Define the conic-gradient as a CSS custom property `--foil-conic` with the `from var(--foil-angle)` syntax. Animate `--foil-angle` from `0deg` to `360deg` via `@property --foil-angle { syntax: ''; initial-value: 0deg; inherits: true; }` and a 24s linear infinite keyframe animation. Apply `mix-blend-mode: screen` over navy bases, `mix-blend-mode: multiply` over light bases. Reduce gradient opacity to 12-18% — never let the rainbow dominate. **Scale-hover spec (signature interaction):** Product cards transform on hover with `transform: scale(1.08) translateZ(0)` and `transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1)`. The overshoot is essential — without it the cards feel mechanical. Pair with a holographic sheen sweep: a `::before` pseudo-element with the foil conic-gradient, opacity 0 at rest, opacity 0.4 on hover, with `background-position` animated from `-100% 0` to `200% 0` over 800ms on hover-enter. **Flowing-curve animation:** The hero ribbon uses `stroke-dasharray` / `stroke-dashoffset` for the initial path-draw (2.4s, ease-out), then transitions into a subtle wobble where the SVG path's control points are perturbed via JS — implement using `requestAnimationFrame` with sin/cos offsets at frequencies 0.07Hz and 0.11Hz on different control points to avoid synchronized motion. Wobble amplitude ≤6px to remain subtle. **Grain overlay:** Pre-generate the grain PNG offline (do not generate it via JS at runtime — costs framerate). Apply via `position: fixed; inset: 0; pointer-events: none; z-index: 9999; mix-blend-mode: multiply; opacity: 0.6; background-image: url('grain-256.png'); background-repeat: repeat;`. The fixed positioning ensures the grain does not scroll, which is exactly the cinematic feel we want. **Color application rules:** Body copy on navy backgrounds uses `--text-on-dark` (#E8E4D8, warm off-white) — never pure white, which clashes with holographic warmth. Body copy on the cream Section 6 plate uses `--text-on-light` (#1A2447). Links are underlined with a 1px chrome-silver line that thickens to 2px on hover. No link colors — links are differentiated by underline and weight only. **Type rendering:** Set `text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;` globally. For the wordmark, use `font-feature-settings: 'ss01' 1` if Quicksand's stylistic set 1 is enabled — adds slight personality to the `g` and `y`. **Motion budget:** Honor `prefers-reduced-motion: reduce`. When set, the holographic conic-gradient freezes at angle 47deg, the ribbon wobble stops, the scroll-triggered horizontal scroll in Section 5 becomes a vertical stack, and scale-hover reduces to a 1.02 scale with no overshoot. **Performance constraints:** The grain PNG is the single largest static asset — keep it under 8KB. All photography is delivered as 1600w AVIF with a 1024w fallback. The holographic CSS effects must run on the GPU — use `will-change: transform, background-position` on hover targets only (never globally). Total CSS payload target: under 14KB gzipped. **No-go list:** - No CTA-heavy hero (hero has no buttons) - No pricing block (the bar's pricing is "ask the bartender") - No stat-grid ("we made 100,000 candies!" etc. — this site is too understated) - No testimonials carousel - No newsletter modal, no exit-intent popups, no chat widget - No third-party fonts beyond the four named Google Fonts - No icon library (FontAwesome, Lucide, etc.) - No utility CSS framework (Tailwind, etc.) — bespoke CSS only - No JavaScript framework — vanilla JS, ≤10KB gzipped of script total ## Uniqueness Notes **Chosen seed (from assignment):** aesthetic: holographic, layout: diagonal-sections, typography: rounded-sans, palette: navy-metallic, patterns: scale-hover, imagery: grain-overlay, motifs: flowing-curves, tone: approachable-casual. **Differentiators from the cohort (frequency-analysis grounded):** 1. **Diagonal-sections committed completely.** Frequency analysis shows only 3% of cohort designs use diagonal-sections, and most that do use them only as a hero accent. candygirl.bar uses −7°/+7° alternating clip-path cuts on every full-bleed section, making the diagonal *the* structural primitive. The cohort defaults to full-bleed (89%), centered (80%), or card-grid (72%) — this design refuses all three. 2. **Navy-metallic palette (2% in cohort).** The deep navy + chrome-silver + lilac/pink/mint foil-glint combination is essentially absent from the cohort. We avoid the warm/gradient default (96%/95% prevalence) entirely — no warm sunset, no terracotta, no creamy-pastel. The page lives in cool deep tones with metallic mid-values, and the warm notes appear only as 4% holographic glints. 3. **Scale-hover as the signature interaction (1% in cohort).** Cursor-follow (73%), magnetic (62%), and tilt-3d (15%) dominate cohort interactions. candygirl.bar's signature is the springy 1.08 scale with cubic-bezier overshoot on product cards — a tactile, candy-grabbing feel that the cohort rarely commits to as a primary beat. 4. **Rounded-sans-led typography stack (4% in cohort).** Mono dominates the cohort at 96%. This design contains zero monospace and zero serifs (Caveat is a script, not a serif). The Quicksand → Sniglet → Nunito → Caveat stack is unusual in its commitment to a single typographic family lineage. 5. **Approachable-casual tone (2% in cohort).** Most cohort designs default to pastoral-romantic (24%), warm-inviting (23%), or energetic (15%). candygirl.bar is conversational, lowercase-headlined, knowing-but-not-cool — a deliberate departure from both the chirpy and the sophisticated tonal extremes. 6. **Flowing-curves motif (4% in cohort).** Vintage (26%), nature (21%), and tech (18%) dominate cohort motifs. This design's site-wide library of 12 hand-drawn ribbon paths used as bullets, dividers, hero hero-element, and product-card backings creates a unique motif coherence. 7. **No human figures, no faces, no smiles.** The photography is exclusively process — hands, sugar mid-air, ribbon mid-curl. This is unusual on a "girl" domain and is itself the design choice: candygirl is a brand voice, not a person, not a model. 8. **Grain-overlay (9% in cohort) used architecturally, not decoratively.** The grain is a functional anti-sterility shield against the cold-render holographic trap, not a stylistic flourish. It is fixed-positioned across the whole viewport in multiply blend mode — many cohort sites use grain as a hero-only or section-only accent. 9. **No CTA, no pricing, no stats, no testimonials, no email capture.** The cohort frequently violates the "AVOID CTA-heavy layouts" guidance. This design holds the line — the visit *is* the experience, not a funnel. 10. **Patterns from frequency analysis avoided:** parallax (94%) is not used (we use scroll-triggered diagonal reveals instead), magnetic (62%) is not used, cursor-follow (73%) is not used. The signature is scale-hover and path-draw-svg — specifically because they are 1% and 22% in the cohort respectively. **Avoided patterns:** hand-drawn (95%), photography-as-default (98%), full-bleed (89%), card-grid (72%), cursor-follow (73%), magnetic (62%), warm palette (95%), gradient palette (96%), mono typography (96%), pastoral-romantic tone (24%), warm-inviting tone (23%). Each avoidance is an intentional cohort-differentiation move.