# Design Language for cafe-sweets.xyz

## Aesthetics and Tone

**Concept: The Confection Laboratory, ca. 1974+1—a retro-futuristic patisserie broadcast from a moonbase galley.**

cafe-sweets.xyz is not a bakery website. It is a transmission—a long, slow, single-channel feed from an imaginary research kitchen where pastries are *specimens*, frostings are *coolant gels*, and every éclair has a circuit number. The whole site reads like the opening 45 seconds of a 1970s sci-fi educational film about pâtisserie: amber CRT glow, plotter-pen line work, a calm narrator voice, and one slow zoom across a table laid out like a control panel. The mood is *cinematic-tech-tutorial*—half Kubrick galley, half Julia Child diagram—warm enough to want to eat, technical enough to feel studied, weird enough to remember.

We commit hard to **cinematic** as the lead aesthetic (only ~3% of designs do—this is one of the things that will make the site stand out). Cinematic here means *single-shot composition*: the homepage is staged like a film frame, not a scrolling feed. The viewport is the lens. Motion happens *within* the frame—a saucer tilts, a syrup blob deforms, a circuit-line pen draws across a recipe card—rather than panels marching past on scroll. Scrolling exists, but it's used the way a film cut is used: deliberate, infrequent, narratively earned. Each major section is one *shot*, not one *block*.

The tone of voice is **tech-tutorial**: matter-of-fact, mildly over-precise, faintly funny because of the precision applied to soft things. We caption desserts with serial numbers (`UNIT 04 — RHUBARB MERINGUE / FIRMWARE v0.9.2`), measure ingredients to four decimal places, and timestamp the syrup. The narrator never panics, never sells, never says *delicious* or *artisan*. They say *parameters held within tolerance* and *thermal profile nominal*. The implicit promise is comfort through competence: this is a kitchen run by an extremely calm machine that happens to love sugar.

Visually we lean **retro-futuristic** (only ~4% prevalence—an uncrowded lane). The palette and surface treatment evoke an old aerospace-monitor aesthetic—warm phosphor, brushed aluminum, beige plastic, a soft amber overcast—then we drop in the actual pastries as deeply saturated, almost-too-real photographic studies, like a fresh strawberry tart sitting on a launch console. The collision of lab and confection is the entire point. The site should feel discovered, not designed, like found footage from a kitchen that maybe never existed.

Reference touchstones (mood only, not to copy):
- The interior diagrams in *2001: A Space Odyssey* press kits
- Saul Bass title sequences (the geometric ones, not the cut-paper ones)
- Mid-1970s Braun and Tektronix product photography
- Ettore Sottsass typewriter posters before Memphis
- The way a freshly poured glaze actually looks under tungsten light at 1/60s

## Layout Motifs and Structure

**Hero-dominant** is the load-bearing layout decision (only ~4% of sites use this—we lean into it heavily).

The first viewport is *the entire site's identity*. It occupies a full 100vh / 100vw stage—no above-the-fold compromise, no peek of the next section. Inside this stage we compose like a film still:

- **Left third**: a vertical type column running floor-to-ceiling, set in oversized geometric sans, all caps, locked into a 12px baseline grid. This is the title card.
- **Center two-thirds**: the *specimen plate*—a single hero pastry, photographed from above at a perfect 90°, sitting on a circular metallic dish that aligns to a circular SVG schematic ring (concentric circuit traces, tick marks every 5°, faint compass labels at N/E/S/W). The pastry is the only photographic element on the page until you scroll.
- **Lower bar**: a CRT-style status strip running edge-to-edge, monospaced, animated character-by-character: `▍ TRANSMISSION 04.05 ▍ THERMAL 71.2°C ▍ SUGAR LATTICE STABLE ▍ NEXT WINDOW 11:00 KST ▍`. This bar is the only place we use mono type—everywhere else is geometric sans.

Below the hero we use **stacked cinematic shots**, each its own 100vh stage. There is no card-grid. There is no bento-box. There is no pricing block, no testimonial wall, no stat counter, no "as featured in." Each stage is one moment:

1. **Stage 01 — The Plate**: hero (above).
2. **Stage 02 — The Schematic**: a full-bleed exploded diagram of one pastry, each ingredient labeled with thin elastic-drawn callout lines that animate in like a plotter. The ingredient list reads like a parts manifest (`SUBSTRATE: 00 FLOUR / 220g / TENSILE 0.8`).
3. **Stage 03 — The Process**: a horizontal time-strip of six frames showing the same dessert through a 6-step bake, captioned with timestamps and oven temps.
4. **Stage 04 — The Catalog**: a single asymmetric column, left-aligned, listing all current confections as numbered specimens. No images here—just type. The previous stage's photography is the visual; this stage is the *index*. Restraint earns the next reveal.
5. **Stage 05 — The Window**: a giant typographic statement of opening hours, formatted like a flight schedule, with the live current-window highlighted by a slow elastic underline.
6. **Stage 06 — The Sign-Off**: the closing frame. A wide black band. A single small dish at center. End-credit-style scrolling list of suppliers, baristas, neighborhood, license plate of the delivery van. Then nothing.

**Grid spec**: 12-column geometric grid at desktop, 6-column at tablet, 2-column at mobile, with a 24px gutter and a 24px baseline. We pin major elements to that grid *visibly*—thin 1px hairlines run vertically through the page at column boundaries, like a designer's setup guides intentionally left on. They're part of the look, not a slip-up.

**Negative space rule**: every stage must give at least 35% of its viewport to clean dish-color background (#F0E6D2 or #0E1014 depending on stage). The pastry is small and the air around it is loud. This is the *cinematic frame*, not the Instagram crop.

**Navigation**: minimal-navigation. A small rotating-dot indicator on the right edge shows which stage you are in (six dots, one filled). No top bar. No menu. The only persistent UI is a tiny `[ MENU 4-5 ]` chip in the top-left that, when pressed, doesn't open a menu—it scrolls you to Stage 04 (the catalog). This is a deliberate, slightly cheeky tech-tutorial choice: we are telling you the menu *is* part of the film, not above it.

## Typography and Palette

**Type stack (Google Fonts, real, all confirmed available):**

- **Display (geometric-sans, primary): Space Grotesk**, weights 300/500/700. We use it at 12vw for stage titles, locked tight at -0.04em letter-spacing. Geometric-sans is one of the most underused type categories in our corpus (~2%)—we lean into it as a signature.
- **Body (humanist supporting): Public Sans**, 400/500. Used only at 16–18px for narration and captions. Never bold. Always one weight per stage to keep the cinematic stillness.
- **Monospace (single use, the status bar only): JetBrains Mono**, 400, 12px, tracked +0.06em. This is the only mono on the site. It's a *device* font, not a body font, and is rationed accordingly.
- **Numerals: Space Grotesk's tabular figures** for any number—timestamps, gram weights, temperatures—so columns of numbers align like a mission log.

**No serifs. No handwritten. No display ornaments.** The whole identity sits inside three very disciplined faces. The restraint is part of the cinematic feel.

**Palette: retro-futuristic (only ~4% prevalence—a deliberately uncommon lane).** Eight tokens, each named.

| Token | Hex | Role |
|---|---|---|
| `lab-amber` | `#E8B042` | Primary signal color. CRT phosphor warmth. Used for the live status bar, accent rings, the underline-draw on opening hours. |
| `dish-cream` | `#F0E6D2` | Light-stage background. The "plate." Unbleached, slightly warm. |
| `console-bone` | `#D9CFB8` | Light-stage secondary—diagram fills, schematic shading. |
| `vacuum-ink` | `#0E1014` | Dark-stage background. Near-black with a blue undertone—reads as a darkroom, not as pure black. |
| `panel-graphite` | `#1F2530` | Dark-stage secondary. Used for circuit traces and panel lines on the dark stages. |
| `coolant-mint` | `#A7E3C2` | Cool counterpoint. Used sparingly—frosting blob highlights, the "stable" status indicator. |
| `syrup-rose` | `#E0668C` | The single warm/sweet accent. The pastry's color. Used in tiny doses (active dot, the syrup-blob motif). |
| `pen-cobalt` | `#2A4DB3` | Plotter ink. Used only for the elastic schematic lines and the circuit motif strokes. Never as a fill. |

The site alternates light stages (`dish-cream` background) and dark stages (`vacuum-ink` background) on each scroll—1, 3, 5 light; 2, 4, 6 dark—so scrolling itself becomes a film cut between *kitchen* and *control room*. A 1.2s cross-dim transition handles the swap so the eye doesn't whiplash.

**Texture overlays (always-on, very subtle):** a 3% opacity 1024×1024 grain at multiply, plus a 2% horizontal CRT-scanline at screen blend, plus a barely-there warm vignette at the corners. Together these give every photograph a faint *broadcast* feel. Without them the photography looks like food blog work; with them it looks like a frame from a film.

## Imagery and Motifs

**Imagery: organic-blobs as the headline visual motif (only ~7% prevalence), photography as the substrate (universal, but used sparingly here).**

The signature visual element on cafe-sweets.xyz is a set of slow-deforming **organic blob shapes** that represent frosting, glaze, syrup, and ganache—rendered as morphing SVGs (animated `d` attributes through smooth keyframes), filled with `coolant-mint` or `syrup-rose`, and *placed deliberately* so they read as droplets caught at the moment of viscosity collapse. Each blob has a faint pen-cobalt outline drawn with the elastic-curve technique (we ease the path with custom cubic-bezier `cubic-bezier(0.34, 1.56, 0.64, 1)` so the morph overshoots and settles—true elastic motion).

The blobs are not decorative chaos. There are exactly **four named blobs** on the site:

- **Glaze 01** — top-right of the hero, behind the type column, very slow 14s morph cycle.
- **Glaze 02** — bottom-left of Stage 03, faster 6s morph synced to the bake-time-strip.
- **Glaze 03** — used as the cursor trail on dark stages: a tiny `syrup-rose` blob that follows the pointer with elastic spring physics (stiffness 120, damping 14).
- **Glaze 04** — full-bleed reveal at Stage 06, fills the entire viewport during the sign-off black-band, then dissolves.

**Photography**: extremely controlled. Three rules:
1. Always shot top-down (90°) or dead profile (0°)—no three-quarter angles, ever. Cinematic compositions only.
2. Always one specimen per frame—no plate clusters, no flat-lays of multiple desserts, no hands.
3. Always lit with a single warm key + soft fill, shadow falling roughly 7 o'clock. Consistency is the brand.

Three or four photographs total across the entire site. The restraint is the point.

**Motifs:**

- **Circuit traces** (only ~5% prevalence—uncrowded). Fine, geometric circuit-board pen lines in `pen-cobalt` run as background ornament on dark stages and as labels around schematic rings on light stages. These are real-feeling traces—right angles only, 45° corners, with little square pads where lines terminate—not abstract squiggles. They're drawn at 1px to 1.5px stroke and animate in via `path-draw-svg` (`stroke-dasharray` reveal) over 800–1400ms with stagger.
- **Concentric schematic rings** behind every photographed pastry, like a target reticle redesigned by an industrial designer in 1971: three rings, tick marks every 5°, four cardinal labels (`N E S W`), and a small `+` at the center.
- **Inventory tags**: every pastry is captioned with a tag in the form `UNIT-04 / RHUBARB-MERINGUE / FW v0.9.2 / ⌀ 92mm`. The tag floats off the dish on a thin pen-cobalt elastic leader line.
- **Plotter ink callouts**: ingredient labels are connected to ingredients with elastic curves that animate as if drawn by a 1980s flatbed plotter.

**No icons.** No emoji. No iconography library. The decorative load is carried entirely by the four blobs, the circuit traces, the schematic rings, and the typography. If we ever feel we need an icon, the answer is "set the word in tabular numerals instead."

## Prompts for Implementation

Implementation must protect the *cinematic stillness*. These are non-negotiable:

**Stage-as-frame, not section-as-card.** Each of the six stages is `min-height: 100vh; display: grid;` with a grid-template that places the photograph, the type column, and the schematic as named areas. Use CSS Grid with explicit named areas per stage—no flex hacks. Stages are full-bleed; nothing is contained inside a max-width centered wrapper. The 12-column hairline grid is rendered as a single fixed `position: fixed; inset: 0; pointer-events: none;` SVG behind everything, drawn with 1px `panel-graphite` lines at 8% opacity. It stays put while content scrolls past—reinforcing the *single set, multiple shots* feel.

**Storytelling-by-scroll, not parallax-by-scroll.** Avoid generic parallax. Instead use **scroll-triggered cuts**: when a stage's center crosses the viewport center, a `requestAnimationFrame`-driven sequence fires, animating the stage's elements in over 900–1300ms with `cubic-bezier(0.34, 1.56, 0.64, 1)` (the elastic curve). Each stage has a *single beat*—one thing reveals, one thing animates, then it stops. No element should be in motion for longer than 1.4s at a time. Stillness is the brand.

**Elastic motion, applied with restraint.** The elastic pattern (~17% of designs use it—we use it as the *only* easing function on the site) shows up in:
- The blob morphs (the SVG `d` keyframes overshoot and settle).
- The schematic-ring rotation (each ring rotates once on stage-enter, overshooting by ~6° before settling).
- The plotter-pen callout lines (drawn with a ~5% overshoot then snap-back).
- The cursor blob trail (spring physics, always elastic).
We do not use elastic for type entry—type uses a calm 600ms `ease-out`. Elastic is for *physical* objects only, never for letters. The discipline of *what gets which easing* is part of the language.

**Type animation: extremely restrained.** Stage titles enter via a slow rise-and-mask (translateY 24→0, opacity 0→1, 700ms ease-out, 60ms stagger across letters). No typewriter effect. No kinetic typography. The numbers in the inventory tags `counter-animate` from 0 to their final value over 1.1s, but only once when their tag enters view, and only the numerical portion—the labels are static. This makes the numbers feel like a real device booting, not a marketing widget.

**Status bar (the CRT strip).** Bottom of the hero, full-width, 32px tall, `vacuum-ink` background, `lab-amber` text in JetBrains Mono. The strip cycles four messages with a typewriter-style character-by-character print at 28ms/char, holds for 3000ms, then erases right-to-left and prints the next. This is the only typewriter effect on the site, contained to this strip.

**Color stages.** Implement the alternating light/dark stage backdrop as a `body::before` fixed full-viewport layer whose `background-color` and `--text-color` CSS variables are swapped via `IntersectionObserver` whenever a new stage enters the center 50% of the viewport. The swap eases over 1100ms. Photography gets a slight `filter: contrast(1.05) saturate(1.05)` on dark stages and `filter: contrast(0.96) saturate(0.94)` on light stages, so the same image reads differently in each shot—like real film stocks behaving differently under different lights.

**Cursor blob.** On non-touch devices, render a 24px `syrup-rose` SVG blob that follows the cursor with spring physics (use a simple Verlet integration in JS, ~120 stiffness, ~14 damping, max-velocity-clamped). The blob's `d` morphs slowly even at rest (a 6s background morph cycle). Disable on touch—use a 1px `pen-cobalt` tap-ripple instead.

**Circuit-trace generator.** Write a small utility that, given a bounding box, generates a deterministic right-angle path (only 90° and 45° corners, terminating in 4×4 square pads) and draws it with `stroke-dasharray` for the path-draw reveal. This generator drives every circuit ornament on the site so the visual language stays internally consistent without anyone hand-drawing 30 SVGs.

**Hard constraints (do not implement these things—they break the language):**
- No CTA banners. No "Order now" buttons floating mid-scroll. No newsletter modal. No exit-intent popup.
- No pricing block. No tiered cards. No "Standard / Premium / Pro."
- No stat-grid (`100+ pastries · 5★ rating · 12 years experience`)—we are a transmission, not a brag.
- No testimonial wall. No avatar grid. No logo soup.
- No carousel, no slider, no auto-rotating banner.
- No card-grid catalog. The catalog is Stage 04, set as a typographic list, period.
- No hero video background. (Video would compete with the cinematic stillness; let one photograph hold the frame.)
- No gradient backgrounds. Solid `dish-cream` or solid `vacuum-ink` only. The gradient pattern is at 96% prevalence—skipping it is a real differentiator.

**What we DO want, at full intensity:**
- One single ordering pathway exists, but it's expressed as a calm Stage 05-attached `[ REQUEST WINDOW 11:00 ]` chip, monospaced, sitting under the schedule. Click → simple email/contact form on a /window route. No dialog modal. The site can be a film *and* still take orders.
- Real photography of real pastries, shot to spec (top-down, single specimen, single warm key, 7-o'clock shadow).
- The four named blobs, the circuit-trace generator, the schematic rings, the inventory tags—all built once, used everywhere.
- Sound: a single 8s ambient room-tone loop (warm hum + faint paper rustle) that auto-plays muted and unmutes on user gesture. Optional, tasteful, dismissable. This is the *audio frame*.

**Performance and motion-respect:** all elastic and stage-transition motion is gated by `@media (prefers-reduced-motion: reduce)`—everything still appears, but in a single 200ms fade. The site degrades to a calm, very-readable typographic document, which is itself beautiful.

## Uniqueness Notes

Five concrete differentiators from the other 100+ designs in the corpus:

1. **Hero-dominant + cinematic + stage-by-stage composition.** Where ~89% of sites use full-bleed and 80% use centered/card-grid layouts, cafe-sweets.xyz commits to *hero-dominant* (~4%) and treats every section as a cinematic *shot* rather than a *block*. Six full-viewport stages, one beat each, with a fixed hairline grid that stays put while shots cut over it. This is unique among the 100 designs reviewed.

2. **Geometric-sans + JetBrains-mono only, used as a device, not as a body face.** Most designs in the corpus use mono everywhere (~96% prevalence!) or pair it with humanist body. We invert that: geometric-sans (Space Grotesk) carries the entire identity, humanist (Public Sans) carries only narration, and mono (JetBrains Mono) is **rationed to a single 32px CRT status strip**. The mono treatment is the most disciplined in the corpus.

3. **Retro-futuristic palette without gradients.** ~96% of sites use gradients; we use exactly zero. The retro-futuristic palette is built from eight named flat tokens with a 1.2s cross-dim alternation between *light kitchen* and *dark control room* stages. This light/dark cinematic alternation is the page's primary motion vocabulary—an idea no other design in the corpus uses.

4. **Elastic motion as a physical-object dialect.** Where elastic (~17%) is usually applied to type and UI affordances, here it is *strictly* reserved for physical objects—blob morphs, schematic-ring rotation, plotter-pen callouts, cursor spring. Type uses calm `ease-out`. The discipline of *what easing applies to what category* is itself the language. This object/letter divide is unique in the corpus.

5. **Tech-tutorial voice applied to pastry, with circuit-trace ornament and four named organic-blob frostings.** Tech-tutorial tone is at 6%, circuit motifs at 5%, organic-blobs imagery at 7%—we combine all three. The result: a confection laboratory that captions a meringue with `UNIT-04 / FW v0.9.2 / ⌀ 92mm`, draws elastic circuit traces between ingredients, and lets four named SVG blobs (`Glaze 01–04`) carry all the sweetness visually. No other design fuses these three uncommon elements.

**Bonus differentiators:**
- **Anti-CTA stance.** No order buttons, no pricing tiers, no stat counters, no testimonial wall, no logo soup, no carousels. The order pathway exists but is implemented as a single calm chip. This restraint is the brand.
- **Hairline grid as ornament.** A fixed 12-column SVG hairline grid sits behind the entire site at 8% opacity—visible setup guides intentionally kept on. It reads as *editorial precision*, not as a leaked Figma artifact.
- **Sound as an audio frame.** A single 8s warm room-tone loop, muted by default, dismissable. No site in the reviewed corpus ships with intentional audio.
- **Cursor as a syrup blob.** The cursor follower is a continuously-morphing `syrup-rose` SVG blob with real spring physics, not a circle. It is the only cursor of its kind in the corpus.
- **The opening-hours stage staged as a flight schedule.** Stage 05 sets opening hours like `KE 0011 / DEPART 11:00 KST / GATE B / STATUS BOARDING` styled monospace—a small visual joke that fits the broadcast frame.

**Avoided patterns from frequency analysis:**
- Avoided: `gradient` (96%), `mono` as primary body face (96%), `photography` as primary visual load (98%), `parallax` as a pattern (94%), `card-grid` layout (72%), `centered` layout (80%), `hand-drawn` aesthetic (95%), `pastoral-romantic` tone (24%), `warm-inviting` tone (23%).
- Embraced: `cinematic` aesthetic (3%), `retro-futuristic` palette (4%), `hero-dominant` layout (4%), `geometric-sans` typography (2%), `tech-tutorial` tone (6%), `circuit` motif (5%), `organic-blobs` imagery (7%), `elastic` pattern (17%, used with strict scope).

**Chosen seed:** *aesthetic: cinematic, layout: hero-dominant, typography: geometric-sans, palette: retro-futuristic, patterns: elastic, imagery: organic-blobs, motifs: circuit, tone: tech-tutorial.*
<!-- DESIGN STAMP
  timestamp: 2026-05-09T11:58:29
  domain: cafe-sweets.xyz
  seed: seed:
  aesthetic: Concept: The Confection Laboratory, ca. 1974+1—a retro-futuristic patisserie bro...
  content_hash: e339890f4636
-->