# Design Language for docomade.com ## Aesthetics and Tone docomade.com is **a private archive of horizons — a Y2K-futurism vault built into the floor of a 1999 luxury observatory, where every parallax depth is a question of "how far?" written in gold on aged tracing paper.** The wordmark "docomade" is read as the Japanese **どこまで (doko-made)** — *"until where, to what extent, how far"* — the polite-formal interrogative that punctuates contracts, mountaineering logs, expedition manifests, cosmological surveys, and the careful conversations of asset managers. The site treats that single word as a navigational instrument. The visitor descends through stratified parallax planes the way a 1999 IBM ThinkPad screensaver descends through its own crystal lattice — except the lattice has been recast in **brushed 18k gold over warm matte black**, the title cards have been **dipped in oolong tea and aged for twenty-six years**, and the soundtrack is a slow legato pad in B-flat minor at 56bpm. The mood is **professional-luxurious-with-a-millennial-undercurrent** — the aesthetic of a Tokyo-Marunouchi sovereign-wealth office that, one weekend in 2001, was decorated by an art-director who genuinely believed the year 2000 had ushered in a new visual century. Brushed-chrome was foundational, gold leaf was a commitment, geometry was destiny, and every surface — from the elevator buttons to the laminated org-chart — had to glint like a Bee Gees lapel pin under fluorescent light. Twenty-five years later the office still operates, the gold leaf is still on the walls, but the laser-cut signage has acquired a soft brown patina, the laminated org charts have been replaced by hand-numbered pages of vellum, and the door handles have been wrapped in waxed leather. **The Y2K dream survived — gracefully, expensively, with a librarian's soft hand.** Tonally the site is **professional (6% in registry — claimed)**: it never cracks, never winks, never slangs, never raises its voice. It writes in two-clause sentences, sets monetary amounts with non-breaking thin spaces, footnotes its claims, and capitalizes "Horizon" as a proper noun. But underneath the professionalism is the muffled hum of a Y2K-era CRT (the registry's **y2k-futurism (2%)** aesthetic — claimed) — a faint chromatic shimmer at 30Hz, a brushed-gold reflection that drifts across the screen as the cursor crosses, a lenticular crystal motif that catches light the way a Swatch Irony watch caught a 1999 dance-floor strobe. The contradiction is the point. **Y2K futurism aged into a luxury private archive: the future as a filed document, dated, sealed, gold-trimmed, bound in waxed paper.** ## Layout Motifs and Structure The structural commitment is **parallax-sections (1% in the registry — explicitly claimed and exercised across the entire site)**, not the dominant immersive-scroll (8%) and not the conventional full-bleed (92%) stack. docomade.com is composed of **seven discrete horizon-plates**, each of which is a **full-viewport parallax theatre with five independent depth-layers** moving at differential rates as the visitor scrolls. The seven plates correspond to seven answers to the question "**doko made?**" — *Until the horizon. Until the gold runs out. Until the contract expires. Until the lattice fractures. Until the paper turns. Until the next century. Until you decide.* Each plate is a different physical environment rendered in the same Y2K-luxury vocabulary, and each plate's parallax behaviour is engineered separately — there is no single global parallax controller; there are seven small, hand-tuned depth scripts, each holding only the depths required by its own plate. Within each plate, the depth-layers are **(1) the brushed-gold backplate** (deepest, near-stationary, drifts at 0.08× scroll speed), **(2) the aged-paper midground** (a sheet of warm cream tracing paper with edges curling, drifts at 0.22× scroll speed and rotates ±0.4° as the cursor moves), **(3) the crystalline lattice** (the registry's **crystalline (10%)** motif — claimed; a faceted hexagonal-prism cluster floating mid-stage at 0.55× scroll speed with sub-layer rotation around the Y-axis), **(4) the typographic plate** (the geometric-sans wordmarks and ledger numerals at 1.0× scroll speed, the conceptual subject of the plate), and **(5) the foreground filigree** (gold hairline ornaments at 1.4× scroll speed, parallaxing past the camera like dust caught in a sunbeam). The five layers obey **stagger (75% — claimed and dignified)**: when a plate enters the viewport, the layers do not appear simultaneously; they fade-in and translate-up in a 90ms-staggered cascade beginning with the gold backplate and ending 540ms later with the foreground filigree. **The stagger is the breath of the site.** Between plates there are no traditional section breaks. Instead, plates are joined by **horizon transitions**: a 240px-tall band where the next plate's brushed-gold rises from below while the current plate's foreground filigree settles to the floor — a meeting in the middle, like two strata of an architectural model touching. The site never feels like seven separate pages; it feels like one continuous descent through seven luxury display-cases, the way the Vienna Kunsthistorisches descends through period rooms. The navigation is anchored to a **fixed right-edge gold-leaf vertical scrollbar** (custom, not the browser's), drawn as a thin 2px gold filament running the full viewport height with seven small crystalline lozenges marking the seven plates. The lozenges glow with a pale champagne luminance when their plate is active. Below 760px width the parallax simplifies — depth-layers collapse from five to three, and the gold-leaf scrollbar moves to the bottom edge as a horizontal index. The mobile experience is not a degraded layout; it is a different, equally-considered presentation of the same archival sensibility, the way an art catalogue and the gallery wall present the same paintings to two different reading bodies. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available:** - **`Sora`** (variable: weight 100–800) — the principal typeface, serving the registry's **geometric-sans (3%)** mandate (claimed). Sora is Mukund Rathi's 2021 geometric grotesque, drawn with absolute circular `o`s, perfectly horizontal `e`-bars, and a near-mathematical relationship between counters and cap-heights. It carries the Y2K-luxury voice — formal, geometric, slightly futurist, capable of the precision required for ledger numerals while still being warm enough for narrative paragraphs. All headlines, navigational labels, and ledger numbers are set in Sora at weight 200 (display sizes 88–168px) or weight 600 (mid-display 28–44px). - **`Cormorant Garamond`** (weights 300, 400, 500 italic) — the secondary typeface, used exclusively for the **interrogative epigraph at the top of each plate** (the seven phrasings of "doko made?" rendered in Japanese-like cadence but English form). Cormorant's high contrast and slightly Mannerist ductus echoes the calligraphic certificates issued by Edo-era trading houses, which is the conceptual ancestor of the docomade archive. - **`JetBrains Mono`** (weight 400, 500) — the technical/footnote typeface, used at 11px–13px for archive-numbers, plate-coordinates ("Plate III · 35.6762°N 139.6503°E"), filing-references, and the gold-leaf scrollbar's plate-labels. JetBrains Mono is the registry's **mono (96%)** baseline — used here in tiny doses and only for technical captions, never for body text. **Type pairing rule:** Sora carries voice and structure; Cormorant Garamond carries the recurring question; JetBrains Mono carries the apparatus of archive (numbers, coordinates, footnotes). The three never overlap in role. Body paragraphs are Sora 400 at 16px/28px line-height with optical-size adjustment to 17 for paragraphs longer than three sentences. **Palette — claiming the registry's gold-black-luxury (1%):** - **`#0B0907`** — *waxed-paper black* — the foundational background of every plate. This is not a true black; it is a black with the smallest possible warm bias (≈ 4% red and 2% green over pure black), the colour of an oil-rubbed waxed-leather portfolio under low museum lighting. - **`#1A1611`** — *vault-shadow brown-black* — the secondary surface, used for cards, the gold-leaf scrollbar's track, and the seven crystalline lattice deep-faces. Reads black at first glance, reveals warmth on inspection. - **`#C8A24A`** — *18k gold-leaf* — the principal gold, used for headlines, hairline filigree, the wordmark, the seven horizon-coordinate digits, and the chromatic shimmer of the brushed-gold backplates. This specific gold is mixed from the average reflectance of three reference samples: the gold-leaf border of an 1898 Japanese stock certificate, the embossed gilt of a 1962 Hermès leather appointment book, and the metallic ink of a 1999 PalmPilot V boot screen. It is **not** the saturated yellow of fast-food gold or the orange-bias of pirate-treasure gold; it is **green-bias gold, the gold of museums and watchmaker's loupes**. - **`#E6C76C`** — *champagne-gold highlight* — the secondary gold, used as a hover glow, as the active-plate indicator on the scrollbar lozenges, and as the highlight on raised filigree. Approximately ΔE 12 from the principal gold — close enough to read as the same family, far enough to read as illuminated. - **`#F4EAD0`** — *aged-vellum cream* — the tertiary tone, the colour of the registry's **paper-aged (3%)** imagery (claimed). Used for the midground tracing-paper, for body-paragraph text on dark plates, and for the surface of the rare "exposed document" cards. Produced by photographing a sheet of 1962 Mitsubishi tracing paper through warm-tungsten studio lighting and sampling the eigenvalue. - **`#3B5BAA`** — *crystalline-azure facet* — the singular accent, used only for the crystalline lattice's interior-facet shading, for selected text, and for the link-underline-draw animation. A muted royal blue with a slight desaturation, calibrated so it reads as a *rare jewel facet*, not as a UI primary. - **`#7E5C2C`** — *patina bronze* — the deep-shadow accent, used for the inner shadow of waxed-paper folds, for the deepest part of crystal facets, and for the scrollbar's resting state. The colour of forty-year-old gold leaf where the dust has settled into the crevasses. The seven colours are deployed in a **strict 50/30/15/4/1 distribution** across every plate: 50% waxed-paper black, 30% vault-shadow brown-black, 15% aged-vellum cream and 18k gold-leaf combined, 4% champagne-gold highlight and patina bronze, 1% crystalline-azure facet. The blue is **always rare, never decorative**. It marks only the most important interactive moment on each plate. ## Imagery and Motifs The visual world is built from four motif families. There are **zero photographs of people**, **zero stock illustration**, **zero icon library**, and **zero generative AI imagery**. Everything is hand-composed from SVG, CSS, a small WebGL shader for the crystalline lattice, and one carefully prepared raster texture for the aged-paper plate. **1. Crystalline Lattice (motif: crystalline, 10% in registry — claimed).** The signature motif. A cluster of seven interlocking hexagonal prisms floats mid-stage on every plate, rendered as faceted SVG with each face shaded by a CSS conic-gradient mixing the 18k gold-leaf, vault-shadow brown-black, and crystalline-azure-facet. The seven prisms correspond to the seven plates of the site, and each plate's "active" prism rotates ten degrees further around the Y-axis than the previous, so the lattice cumulatively rotates 70° from first plate to last. The faceting is **not** the holographic rainbow of the registry's holographic (11%) aesthetic — it is the **dispersed, milky gold-and-blue refraction of Edo-period quartz inkstones**, slow-moving, never glittery. A slight WebGL fragment shader applies a 2% chromatic-aberration shimmer only at the prism edges, so the crystal looks like it is **almost** projecting RGB but is instead projecting a single warm-cool gold-azure axis. This is the Y2K-futurism heartbeat — the prism is what 1999 thought "the year 2000 will look like" rendered from the perspective of 2026 with twenty-six additional years of restraint. **2. Aged Paper (imagery: paper-aged, 3% in registry — claimed).** Every plate's midground is a single full-bleed sheet of **warm cream tracing paper photographed at 600dpi against a deep-vault background**, with edges curling slightly inward and four small rust-spots at the corners from where archive-clips once held it. The paper is positioned at 0.22× scroll-speed and rotates ±0.4° in response to cursor movement, giving the unmistakable feeling that the visitor is a hand hovering over a document on a vault desk. The texture is a single 2048×2730 lossy WebP at 56kb, applied with `mix-blend-mode: lighten` over the waxed-paper-black background, so the paper "lifts" out of the dark without breaking the colour discipline. **The aged paper is the central tactile metaphor of the site**: every word docomade.com publishes is treated, structurally and visually, as a document filed in a vault and lifted from a drawer for review. **3. Brushed-Gold Backplates.** Each plate's deepest layer is a **brushed-18k-gold rectangle**, drawn as a CSS gradient with twelve overlapping linear-gradients at micro-different angles to create the illusion of brushed metal. A subtle CSS animation of `background-position` moves the brush-grain at 0.5px/sec, so the gold appears to **breathe** — a slow respiratory shimmer that catches the eye exactly the way a brushed-steel Rolex catches the wrist's micro-rotation. This is the Y2K-luxury foundation, and it is the material from which all other gold elements feel cut. **4. Hairline Filigree.** The foreground layer is composed of **gold-hairline filigree** — 0.5px-stroke SVG ornaments inspired equally by 1999 PalmPilot welcome screens, Edo trading-house seals, and Art Nouveau ironwork. Each plate has its own filigree set: spiral motifs for the *horizon* plate, lattice motifs for the *lattice* plate, paper-fold motifs for the *paper* plate, and so on. The filigree drifts at 1.4× scroll-speed across the foreground, never thick enough to obscure content, always present enough to remind the visitor that they are inside an ornamented archive. The filigree is **CSS-stroke-animated on plate-entry** (registry **path-draw-svg (26%)** — used in moderation, only on the seven plate-entry filigrees, not as a global decoration). **Cursor follow** (registry pattern, 81% — used here with discipline): the cursor leaves a **soft champagne-gold lozenge trail** — three lozenges, each fading at 200/400/600ms — shaped like the seven scrollbar markers. The trail is 8% opacity. It is barely visible. **It is felt more than seen.** **No icons.** Where other sites would use a hamburger, a chevron, a search-glass: docomade.com uses **typographic glyphs only**. The menu is the word "**Index**" at 11px JetBrains Mono. The forward arrow is "**→**" at 24px Sora 200. The search prompt is "**doko made?**" at 14px Cormorant 400 italic. The site refuses every icon-library convention and instead constructs all its UI from typography alone. ## Prompts for Implementation Build docomade.com as **one HTML document, one CSS file, one ES module, one tiny WebGL shader, and one prepared raster image**. The asset budget is: `lattice.glsl` (the WebGL fragment shader for the crystalline prism cluster, 1.4kb), `filigree.svg` (a single sprite-sheet of seven plate-specific gold-hairline filigree sets, 38kb), `paper.webp` (the 2048×2730 aged-tracing-paper texture, 56kb), `gold-grain.svg` (a 256×256 tiling brushed-gold micro-grain noise, 6kb), and `wordmarks.woff2`-equivalent only via Google Fonts (Sora, Cormorant Garamond, JetBrains Mono). No photographs, no third-party widgets, no analytics, no cookie banner. **Storytelling structure:** the site is a **descent through seven horizons**, not a hierarchy of pages. Each plate begins with the same recurring question — *doko made?* — set in Cormorant Garamond italic, and answers with one declarative gold-set sentence in Sora 200 at 168px. The seven answers are the spine of the site: - Plate I — *Until the horizon recedes.* - Plate II — *Until the gold runs thin.* - Plate III — *Until the contract is countersigned.* - Plate IV — *Until the lattice splits along its axis.* - Plate V — *Until the paper turns to vellum.* - Plate VI — *Until the next century opens its envelope.* - Plate VII — *Until you decide you have arrived.* Each plate contains only what is necessary to set, illuminate, and footnote its answer: a single gold-illustrated diagram, a 90-180 word body paragraph in Sora 400 at 16px, a single Cormorant-italic pull-quote, a footnote reference number, and one moment of crystalline-azure interactivity (a hover-state that draws the underline of a single named entity in the body text). **Animation choreography (registry stagger — claimed):** every plate enters with a 540ms five-step stagger — gold backplate first (90ms after viewport-trigger), aged paper second (180ms), crystalline lattice third (270ms), typographic plate fourth (360ms), foreground filigree last (540ms). Each step uses a custom cubic-bezier (0.22, 0.61, 0.36, 1.0) — a slow start, a long graceful glide, a soft settle. **No bounces, no springs, no overshoots**. The site has the gravity of a museum drawer easing closed. **Parallax engineering:** five layers per plate, scroll-rates 0.08 / 0.22 / 0.55 / 1.0 / 1.4. Implemented with `Element.animate()` driven by `scroll-timeline` where supported, and a `requestAnimationFrame` fallback that updates `transform: translate3d(0, ...)` on each layer. The crystalline lattice layer additionally rotates around Y at `cursorX × 0.06°/px` for a mild subject-following parallax that costs nothing on mobile (where touch position drives a single momentary rotation on tap). The foreground filigree drifts horizontally at 0.5px/scroll-px to break the strict vertical reading and add a sense of three-dimensional presence. **Cursor follow:** three champagne-gold lozenges, 8% opacity, shaped as the scrollbar marker. They fade at 200/400/600ms. On touch devices the cursor-follow is replaced by a momentary gold-lozenge that appears at the touch-point and fades after 300ms. **No CTA-heavy sections, no pricing blocks, no stat-grids, no testimonial walls.** docomade.com is an immersive narrative archive. The final plate (Plate VII) closes with a single gold-set line — *"Until you decide you have arrived."* — beneath which is one quiet form: a 1px-bordered 360×56 input prompting *"How far?"* in Cormorant Garamond 300 italic. The input writes its content directly to a server log; there is no acknowledgement, no thank-you page, no autoresponder. **The visitor's answer is filed.** **Performance budget is irrelevant** to the brief, but the asset diet is deliberately small: under 110kb total before fonts. The site is mostly empty space, gold, paper, and questions. ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating other CMassC sites and to lean into the underused patterns surfaced by frequency analysis: 1. **Y2K-futurism aged into luxury, not styled as nostalgia.** The 2% of CMassC sites that have used the y2k-futurism aesthetic reach for chrome blobs, blue-pink gradients, low-poly rendered objects, Bonzi-Buddy mascots, "click here for the future!" copy, and saturated cyan-magenta. docomade.com instead presents Y2K-futurism **as it would have aged into luxury archival material** — brushed gold instead of chrome plastic, waxed-paper black instead of cyber-purple, crystalline lattices that rotate **slowly** instead of glittering, and copy that whispers in two-clause Sora paragraphs instead of shouting in Comic Sans. **Y2K not as a meme, but as a serious 1999 design hypothesis given twenty-six years to mature.** This has not been done elsewhere in the registry. 2. **Parallax-sections as the structural commitment, not a decorative effect.** Only 1% of registry sites have claimed parallax-sections as their layout. docomade.com is built **entirely** on parallax — seven plates × five depth-layers × independent scroll-rates per layer. The parallax is not garnish on a vertical stack; it is the load-bearing structural choice. Each plate has its own hand-tuned parallax script. Every transition between plates is a parallax meeting. The visitor never experiences a static viewport. This is parallax taken seriously, in a registry where most sites use it as a small hero-section flourish. 3. **Gold-black-luxury palette in only 1% of registry — claimed and exercised in strict 50/30/15/4/1 distribution.** The dominant warm-palette (96%) and gradient-palette (97%) are explicitly avoided. There are no warm sunsets, no aurora gradients, no candy brights, no pastels. The palette is two near-blacks, two golds, one cream, one bronze, and one rare crystalline-azure used at 1% of surface. The discipline of the palette ratio is itself a uniqueness statement. 4. **Geometric-sans typography (3%) as principal voice, with Cormorant Garamond italic as recurring interrogative.** Almost every CMassC site uses mono (96%), humanist (46%), or handwritten (34%) as principal type. docomade.com's principal is **Sora geometric-sans at weight 200** — austere, mathematically circular, futurist-quiet — paired with a single Cormorant Garamond italic role for the recurring question that animates the entire site. The pairing is not a generic "sans+serif" pairing; it is a structural assignment: Sora carries voice, Cormorant carries the question, JetBrains Mono carries the apparatus. 5. **Crystalline as a unifying motif rotated 70° across the seven plates, not as wallpaper.** While 10% of registry sites use crystalline motifs, almost all use them as ambient decoration. docomade.com instead uses **a single seven-prism cluster** that is the same object on every plate, rotated cumulatively 70° across the descent. The motif is **a literal navigation indicator**: the visitor's progress through the seven horizons is directly readable from the crystal's rotational state. This narrative use of a motif (object-as-progress-marker) is rare in the registry. 6. **Stagger (75%) deployed with patience, not punch.** The stagger pattern is claimed but executed at **museum speeds** — 90ms steps, 540ms full cascade, slow-start cubic-bezier. Most stagger implementations in the registry are 50-80ms cascade total with springy easing. docomade.com extends and dignifies the pattern, rendering it as the breath of an archive, not as a UI flourish. 7. **Paper-aged imagery (3%) as the central tactile metaphor, treated photographically.** Where other registry sites use paper-aged as a noise overlay or a marketing illustration, docomade.com uses a **600dpi photograph of 1962 Mitsubishi tracing paper**, full-bleed, parallaxed at 0.22× scroll-speed, rotated ±0.4° on cursor movement. The paper is the document the visitor is hovering over. The metaphor is consistent across all seven plates. 8. **Professional tone (6%) without warmth-inviting (25%) softening.** The registry's professional sites tend to also be warm-inviting; docomade.com explicitly is not. It is professional in the manner of a Tokyo asset-management vault — capitalized, footnoted, monospaced where numerical, never apologetic, never folksy, never breaking into casual register. The warmth, when present, comes only from the gold and the cream paper — never from the prose. **Avoided patterns from frequency analysis:** - **Hand-drawn aesthetic (96%):** entirely absent — every line is geometric, every form is engineered. - **Photography (98%):** the only raster image is the aged tracing paper texture; there are no people, places, products, or scenes. - **Card-grid (80%) and centered (80%) layouts:** there are no card-grids and the composition is asymmetric within each parallax plate, with the wordmark left-anchored at the rule of thirds. - **Cursor-follow (81%) used heavily:** present here only as a 8%-opacity champagne lozenge trail — the most restrained possible interpretation. - **Magnetic (72%) and spring (80%) motion:** entirely absent — all motion is slow-start cubic-bezier easing, no overshoot, no bounce, no spring. - **Gradient palette (97%) and warm palette (96%):** the only gradient is the brushed-gold backplate's micro-gradient grain; the palette is strictly the seven listed colours. **Chosen seed (from assignment):** aesthetic: y2k-futurism · layout: parallax-sections · typography: geometric-sans · palette: gold-black-luxury · patterns: stagger · imagery: paper-aged · motifs: crystalline · tone: professional. Every one of these eight tokens is **claimed and exercised in the body of the design**, none used decoratively or as a label.