# Design Language for a6c.xyz ## Aesthetics and Tone This site is a **frosted greenhouse on a windless lake at the moment before sunrise** — the half-second after the sky has decided to be blue but before any single object has decided to be itself. The aesthetic is **glassmorphism rendered as a contemplative practice**, not as a UI fad: every surface is a pane of breathed-on glass, and every pane sits at a different distance from the eye, like cold-frame greenhouses set up in a row at dawn. The domain `a6c.xyz` reads as a private cipher — six characters, mostly silent — and the design treats it as a koan rather than a brand. There is no shouting. There is no urgency. There is the quiet labour of looking. The mood is **zen-contemplative** but not austere. Where most "zen" sites freeze themselves into rigid Japanese-museum minimalism, this one keeps a gentle warmth in its bones: soft particles drift like dust through cathedral light, edges blur instead of crisping, and small playful curvatures in the typography keep the contemplation from tipping into solemnity. Think **Brian Eno's *Music for Airports* pressed onto frosted acrylic**: every shape is hovering, slightly out of focus, slightly translucent, slightly amused by being a shape at all. Inspirational touchstones: Hilma af Klint's chalk-pastel diagrams seen through a layer of ice; Isamu Noguchi's Akari lamps photographed in fog; the Apple visionOS ambient blur but kinder, less corporate, more like a winter aquarium at closing time; the way breath fogs a cold window when you stand close to it for no reason at all. ## Layout Motifs and Structure The structure is a **bento-box mosaic floating over an out-of-focus deep field**, but the bento is not the rigid Japanese-lunchbox grid that most sites borrow. It is a **lopsided bento** — eight to twelve translucent rounded-rectangle panes of varying size and depth, asymmetrically arranged so one pane always feels slightly larger than its neighbours, the way a single rice-ball always sits a little too proud in a real bento. The grid breathes; cells are 1×1, 1×2, 2×1, 2×2, 3×2, with one deliberate 1×3 vertical "scroll" cell that anchors the composition. Spatial logic operates in **four parallax layers of depth**, each measured in `z` not pixels: - **z=−40 (Far field):** a slow-drifting bokeh background of out-of-focus circular highlights in cyan, lavender, and pale rose, rendered as canvas particles that respond to scroll velocity at 0.15× rate. Never sharp. Never still. - **z=−10 (Mist layer):** a single horizontal band of `backdrop-filter: blur(60px)` that sweeps across the viewport like ground fog, used to soften transitions between sections. - **z=0 (Bento panes):** the load-bearing content surfaces. Each pane is `rgba(255,255,255,0.18)` over `backdrop-filter: blur(28px) saturate(1.4)`, with a 1px inner stroke at `rgba(255,255,255,0.45)` that catches "light" along its top-left edge — a faint diagonal gradient that simulates a lens flare across glass. - **z=+15 (Particle layer):** drifting motes — ~80 small particles, each 2–6px, with a subtle radial-gradient glow, moving on Perlin-noise paths at < 8 px/sec. They pass *in front of* the bento panes, occasionally occluded by the panes' frosted blur as they cross behind. The bento panes are arranged on a **3-column desktop grid that decomposes to a 2-column tablet layout and a soft single-column "stacked stones" mobile layout**. Crucially, on mobile the panes do not fully stack into rectangles — they retain a slight horizontal offset of ±8px that suggests stones placed in a stream rather than a list. Vertical rhythm is governed by the `clamp(72px, 9vh, 112px)` "breath" — the gap between panes is the same as one slow inhale. **Progressive disclosure** is the dominant interaction grammar. On first paint, only three panes are populated; the rest are empty frosted glass. As the viewer scrolls, hovers near a pane, or simply rests their cursor, panes "exhale" content — a heading materialises through the frost over 600ms, then a body of text rises 8px from below over a further 400ms with a soft 0.7-tension spring. Nothing is ever dumped onto the screen; everything is *invited* into visibility. ## Typography and Palette Typography is **playful-rounded** — a deliberate counter-move against the brittle geometric sans that dominates glassmorphism on Dribbble. The rounded forms keep the contemplation soft. - **Display:** [Quicksand](https://fonts.google.com/specimen/Quicksand), variable axis `wght 300-700`. Used for hero headings at 14–18 vw with extremely loose tracking (`letter-spacing: 0.18em`). The lowercase `a`, `g`, `q` of Quicksand have a single-storey roundness that pairs beautifully with the soft circular bokeh in the background. - **Body:** [Nunito](https://fonts.google.com/specimen/Nunito), `wght 300/400/600`, set at 17px / 1.7 line-height inside the bento panes. Body text is `rgba(20,28,42,0.78)` — never pure black, always slightly translucent itself, as if the words too were made of glass. - **Detail / Numerals:** [Sniglet](https://fonts.google.com/specimen/Sniglet) at `wght 400`, used sparingly for any numeric labels, footnote markers, and the address bar tag `a6c.xyz` itself, which appears once in the corner of the page like a small porcelain stamp. - **Asian fallback (for occasional CJK glyphs):** [Gowun Dodum](https://fonts.google.com/specimen/Gowun+Dodum), a soft Korean rounded sans that harmonises with Quicksand's curves. Palette — **translucent-frost** — eight values, none of them fully saturated, all of them designed to read correctly when stacked behind 28px of backdrop blur: - `#E8F4FF` — Glacier mist (page base) - `#C9D9F0` — Frosted periwinkle (mid-depth gradient stop) - `#A6B8DC` — Soft cornflower (deepest gradient stop, behind bokeh) - `#FBE7F0` — Quartz pink (warm bokeh accent, ~30% of particles) - `#D9F2EC` — Mint breath (cool bokeh accent, ~25% of particles) - `#F5E1FF` — Lilac vapour (rare bokeh accent, ~10% of particles) - `#141C2A` — Deep slate (text, used at 78% opacity) - `#FFFFFF26` — Pane glass (15% white, the universal pane fill) A single accent — `#FF7A8A` *coral whisper* — appears exactly **three times** on the page: once as the underline-on-hover for the primary text link, once as the smallest bokeh particle (a single 3px speck), and once as the dot above the `i` in a quiet phrase deep in the third bento pane. It is the design's heartbeat. It is never used for buttons. ## Imagery and Motifs No photography. No stock imagery. No illustrations of people. The entire visual vocabulary is built from **two motif families**: 1. **Bokeh fields.** Out-of-focus circular highlights generated procedurally with canvas + radial gradients. Each particle has: radius (8–48px), opacity (0.12–0.42), color (one of the three accent bokeh hues), and a slow drift vector. The bokeh is the *only* "image" on the site and it is generative, not a JPG. Every viewer sees a slightly different field; the seed is derived from the day-of-year. 2. **Particle effects.** Smaller, sharper drifting motes (the z=+15 layer described above), behaving like cathedral dust caught in a sunbeam. On cursor proximity, particles within 80px gently *retreat* from the cursor at 0.4× the cursor's velocity vector — they are shy, not magnetic. (Most cursor-particle effects attract; this one breathes away.) Decorative motifs inside bento panes: - **Frosted glyphs:** a small library of simple geometric shapes (a circle, a soft square, a horizontal line, a tilde, a sine wave) drawn at 1px stroke in `rgba(20,28,42,0.18)` and used as section dividers inside panes. They feel like marks left on a foggy window by a fingertip. - **Inner light gradients:** every bento pane carries a single faint diagonal highlight (15% opacity white, 0–25% along the top-left axis) to simulate a light source from upper-left at 10 a.m. Consistent across all panes — this is what binds the composition. - **No icons, no emoji, no logos.** If a concept needs visual representation, it is represented by a frosted glyph from the library or by negative space. ## Prompts for Implementation Treat this site as a **slow-bloom ambient instrument**, not a landing page. The viewer should be able to leave it open in a background tab for ten minutes and return to find that it has, almost imperceptibly, shifted: a particle has drifted across a pane, a bokeh highlight has rotated by 3 degrees, the mist layer has softened. The site is alive in the way a candle flame is alive — small, continuous, never demanding attention. **Macro narrative arc — five contemplative beats, no sections, no anchors:** 1. **Arrival (full viewport).** Black-blue pre-dawn. The bokeh fades up over 4 seconds. A single empty frosted bento pane materialises in the centre at 320×240, and inside it the lowercase string `a6c.xyz` types itself in Quicksand 32px over 2 seconds. Nothing else. No nav. No "scroll for more." The viewer simply *exists* with the pane for a beat. 2. **Bloom.** As the viewer scrolls (or after 6s of stillness, whichever comes first), the central pane multiplies into the lopsided bento mosaic. Panes arrive on staggered 80ms delays with a soft scale-from-0.94 + opacity transition. The mist layer slides in horizontally, low across the viewport. 3. **Inhabit.** The bento now fills the viewport. Each pane holds a single quiet sentence, a single quiet shape, or a single quiet number. Examples (write actual content for these — no placeholders): "six characters, mostly silent" / "a domain is a held breath" / a slow analog clock rendered in 1px strokes / a single line of weather data fetched from the user's locale. Progressive disclosure activates: deeper content appears only on hover/focus. 4. **Drift.** Halfway down the page, the bento dissolves and the entire viewport becomes the bokeh field, full-bleed, with one centred Quicksand sentence floating at 9 vw, animating its `wght` axis from 300 to 500 to 300 over 8 seconds, in time with a sine-wave `letter-spacing` modulation. This is the contemplative centre. There is nothing to click. There is nothing to do. 5. **Return.** The bento mosaic re-condenses below, smaller this time (60% scale), and one final pane in the lower-right contains a quiet line of footer information — a single mailto, a single date, the words "made slowly." The page does not end with a CTA. It ends with an exhale. **Animation grammar (use sparingly, never simultaneously):** - All transitions use `cubic-bezier(0.32, 0.72, 0.18, 1.0)` — a custom curve that overshoots by 0.4% and settles. Default duration 600ms. - Bento panes respond to cursor proximity within 240px with a subtle 3D tilt (max ±2 degrees on X and Y axes), driven by `transform: perspective(1200px) rotateX() rotateY()`. The tilt is so slight it reads as breathing, not as parallax. - On scroll, the bokeh field translates at 0.15× scroll velocity, the mist layer at 0.5×, the bento panes at 1×, and the particle layer at 1.2× — gentle parallax depth without ostentation. - **Avoid:** spring overshoot greater than 1%, bouncing, magnetic cursor effects, anything described as "snappy" or "punchy." **Implementation specifics:** - Use `backdrop-filter: blur(28px) saturate(140%)` on every bento pane, with `-webkit-backdrop-filter` paired. Provide a graceful fallback for Firefox: a static `rgba(255,255,255,0.72)` fill that approximates the frost without the live blur. - The bokeh canvas runs at `requestAnimationFrame` capped to 30fps to stay calm — 60fps is too eager for this site's tempo. - Particle layer uses Perlin noise for drift paths; seed the noise with the user's session timestamp so each visit is different but deterministic within the visit. - Sound (optional, gated behind a small frosted toggle in the corner): a ~12-second loop of pink noise with a slow low-pass sweep, looped imperceptibly. Off by default. - Cursor: replace the OS cursor with a 14px circle of `rgba(20,28,42,0.4)` with a `backdrop-filter: blur(6px)` — a tiny lens, not a pointer. **AVOID at all costs:** - Hero CTAs ("Get started", "Sign up", "Learn more"). There is nothing to get and nothing to start. - Pricing tables, feature grids, testimonial carousels. - Stat counters, animated big numbers, social proof badges. - Hand-drawn aesthetic flourishes — this site is *mechanical glass*, not paper. - Vintage textures, grain overlays, paper noise — the surface is glass, not fibre. - Warm gradient backgrounds (overused in the wider corpus). The base palette is cool, frost-blue, deliberately. - Mono fonts (overused). Typography here is exclusively rounded. - Photography (overused). Everything is generative. ## Uniqueness Notes Three or more deliberate differentiators from a generic site, and from the other 20 sites in this corpus: 1. **Lopsided bento, not Dribbble bento.** Bento-box layout occurs at only 5% in the corpus and almost everywhere it appears it is the rigid Japanese-lunchbox grid borrowed from Apple's marketing pages. This site uses a *deliberately asymmetric* bento with a 1×3 anchor cell and ±8px stone-stream offsets on mobile — closer to suiseki stone arrangement than to a UI trend. 2. **Particles that retreat from the cursor instead of being attracted to it.** Cursor-reactive particle systems on the public web are universally *magnetic* — particles either follow the cursor or are pushed by it. This site inverts that: particles within 80px of the cursor *back away* at 0.4× cursor velocity, like dust disturbed by an approaching hand. It is the same arithmetic as magnetic attraction with the sign flipped, and it produces a profoundly different psychological reading: the site is *shy*, not *eager*. 3. **Counter-bento progressive disclosure.** Bento panes typically dump all their content on first paint. Here, only 3 of 8–12 panes are populated initially; the rest are empty frosted glass that fill in *only as the viewer rests attention nearby*. The site's content surface area is a function of how long the viewer is willing to be still. This is **progressive disclosure (5% in corpus) used at the structural level**, not just for hover-states. 4. **Glass that is the entire palette, not just an accent.** Glassmorphism on the public web is almost always one or two frosted cards over a saturated photographic background. Here every layer is glass — z=−40 bokeh through z=+15 particles — and the background itself is a generative bokeh field, not a photograph. There is no "real" image anywhere on the page. The site is *all glass, all the way down*. 5. **Coral whisper accent used exactly three times.** Most accent colors on the public web are spammed across CTAs, links, and decorative bullets. Here the single warm accent `#FF7A8A` appears in only three pixel locations on the entire page. The viewer may or may not consciously notice; either way it is the design's heartbeat. 6. **Rounded typography against glass.** Glassmorphism corpus reaches 30% but is overwhelmingly paired with geometric/grotesk type (Inter, Space Grotesk, SF Pro). Pairing it instead with Quicksand + Nunito + Sniglet — three Google-Fonts rounded sans — is a deliberate softening that distinguishes this design from every other glass site. 7. **Zen-contemplative tone in a corpus dominated by friendly/professional/conversational.** Tone vocabulary in the corpus skews toward warm-inviting, friendly, professional. `zen-contemplative` appears in only 5% of designs. This site is unhurried in a way that is genuinely rare on the contemporary commercial web. **Chosen seed (from assignment):** aesthetic: glassmorphism, layout: bento-box, typography: playful-rounded, palette: translucent-frost, patterns: progressive-disclosure, imagery: bokeh-background, motifs: particle-effects, tone: zen-contemplative. **Patterns avoided per frequency analysis:** - Avoided **photography** (85% in corpus) — replaced entirely with generative bokeh. - Avoided **warm palette** (95%) and **gradient palette** (90%) — using cool translucent-frost instead. - Avoided **mono typography** (90%) — using exclusively rounded sans. - Avoided **full-bleed + centered + parallax-vintage hand-drawn** (the dominant 75–85% cluster) in favor of bento-box, progressive-disclosure, and zen-contemplative — each of which sits at 5–10% in the corpus. - Avoided **hero CTAs, pricing blocks, stat-grids** per the SDESIGN.md guidance — there is no commercial surface on this site at all.