# Design Language for bcd.day ## Aesthetics and Tone `bcd.day` is a **skeuomorphic BCD wall-clock floating in a Frutiger-Aero sky** — a single, oversized instrument that displays the current day in **Binary-Coded Decimal**, the 1960s mainframe number-encoding that quietly survives inside every wristwatch, calculator, and microwave you have ever owned. The site's premise is one sentence long: *here is today, rendered in the format your appliances see it in*. Everything else — the parallax sky, the glass bezels, the soft pastel light — is the **room the clock hangs in**. The mood is the precise emotional register of **a Sunday afternoon in 2004 with a brand-new iPod Mini on the kitchen counter, an iMac G4 humming on the desk, and a freshly-installed copy of Mac OS X 10.4 Tiger throwing aqua-blue light onto the wall** — but rendered with the **rawness** of a phone-camera photograph rather than the gloss of a marketing render. The bubbles are real bubbles. The blur is real out-of-focus blur. The sky is the sky out of an actual window in May at 4:17pm. Skeuomorphism here is not nostalgic kitsch — it is **honest depiction of a real object that happens to live in a browser**. The clock has weight. The glass has thickness. The hardware would, if you reached out, be cool to the touch. The tone is **raw-authentic**: no marketing copy, no value props, no "delight," no exclamation marks, no smileys, no startup-friendly verbs. The single voice on the page is the voice of someone explaining BCD to a friend at a kitchen table at 11pm — *"so each digit gets its own four bits, and the bits are just on or off, see, like little lights, and that's how the calculator knows it's Tuesday."* Curious, unhurried, slightly tired, completely sincere. The page does not try to convince anyone of anything. It just shows you today. The visitor's experience is contemplative, almost meditative — they scroll slowly through five parallax leaves of a softly-lit blue-green-pink sky while the BCD clock hangs steadily in the foreground, its sixteen little glass lamps flickering on and off as the seconds tick over. By the time they reach the bottom of the page they have learned what BCD is, why it exists, and what today looks like to a microwave oven. They leave with a quiet new fact and the visual aftertaste of a sky. ## Layout Motifs and Structure The page is composed as **five parallax leaves** stacked vertically, each one full-viewport, with a **single skeuomorphic instrument** — the BCD clock itself — sitting on a fixed Z-plane in the foreground that **never scrolls vertically with the page** but instead drifts laterally by 8–14 pixels as parallax leaves pass behind it, like a chandelier seen from a moving boat. **The five leaves (top to bottom):** 1. **Leaf 1 — *The Sky*.** A pastel sky gradient (peach-cream at the bottom, baby-blue at the top, a single soft horizon band of mint at 64% height) with **out-of-focus glass bubbles** drifting upward at three depth-rates. The wordmark `bcd.day` is set in clean Frutiger-style lowercase, weight 400, blurred to 6px Gaussian as it enters viewport, sharpening to 0px over 600ms. No tagline. No nav. Just the words and the sky and the bubbles and, hanging dead-center in the foreground, the clock — currently displaying today's date. 2. **Leaf 2 — *The Lamps*.** The sky deepens slightly (still pastel, slightly cooler). The clock floats off-center to the right. To its left, a single block of body copy — 320px wide, ragged-right, no headline — explains: *"There are sixteen lamps on the front of this clock. Four lamps for the year's tens, four for the year's ones, four for the month, four for the day. A lamp is on when its bit is set. Read each row of four lamps as a number from 0 to 9 and you have today's date."* As the visitor scrolls into this leaf, **a single lamp on the clock face lights up with a soft pulse**, drawing the eye. 3. **Leaf 3 — *The Glass*.** The sky shifts to the warmest moment of the gradient — a peach-and-rose blush, the kind of light that happens about an hour before sunset. The clock rotates in 3D space (subtle, ~7° around the Y-axis) so the visitor can see the **edge of its glass bezel** — a thick, refractive dome with a visible highlight rolling across its top curve. A second copy block, this time only two sentences: *"Skeuomorphism used to be a slur. It just means a thing that looks like the thing it replaced. The clock looks like a clock because that is what it is."* 4. **Leaf 4 — *The Encoding*.** Sky goes blue-violet, twilight register. The clock now displays the **same date a second way** — a strip of sixteen small binary digits underneath the sixteen lamps, `0010 0000 0010 0110` style, in monospace numerals. The visitor sees the same number twice: as glass lamps and as text. A copy block: *"This is what your microwave sees when it shows the time. It does not see the digits 5 and 4. It sees four bits and four bits."* 5. **Leaf 5 — *The Day*.** The sky cools to a final mint-and-cream wash. The clock fills 80% of the viewport now, photographed close — you can see the dust on the glass, the tiny serial number engraved into the brushed-aluminum bezel (`bcd.day · v1 · made by hand`), and a colophon line in 11px text along the bottom edge: today's full date in long form (`Monday, the fourth of May, two thousand and twenty six`), followed by the BCD encoding, followed by *"thank you for scrolling."* No CTA. No newsletter. No social links. The page ends. **Macro layout rules:** - The clock's foreground Z-plane is **always there** — across all five leaves, the same physical instrument is visible. It never disappears, never re-enters; the visitor never loses sight of it. The sky behind it changes; the clock does not. - All copy blocks are **set on the left third** of leaves 2–4, hard-aligned to a 24px baseline grid, with a max-width of 36 characters per line. - **Negative space dominates** — every leaf is at least 60% empty sky. Nothing competes with the clock. - **No nav bar. No footer. No sticky anything.** The site has one column, one instrument, five leaves, and a colophon. That is all. ## Typography and Palette **Typography — Frutiger-clean, two faces, all from Google Fonts:** - **Body & wordmark — [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans)**, weights 300 (body) and 400 (wordmark), set at 17px / 1.6 line-height for body, and `clamp(5rem, 11vw, 11rem)` for the wordmark. Nunito Sans is the **closest Google-available cousin to Adrian Frutiger's 1976 Frutiger** — the same humanist warmth, the same open apertures, the same friendly two-storey lowercase `g`. It carries the exact visual register of a 2004 Apple .Mac welcome email, which is what we want. Tracked at `-0.005em` body, `-0.018em` wordmark. No italic anywhere. - **Numerals & monospace — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)**, weight 400, used **only** for the binary digit strips on leaves 4 and 5 and for the colophon serial number. Set at 13px with letter-spacing `0.06em`. The mono is the only place the design "shows its work" — the rest of the page is hand-warm sans-serif. - **The clock face uses no typography at all** — it is a grid of sixteen lamps, each either glowing or dim. No labels. No tick marks. No "12" at the top. The reader learns to read it by reading it. **Palette — pastel, eight values, no gradients darker than `#A8B8C8`:** | Token | Hex | Use | |---|---|---| | `Sky-Top` | `#BCD9E8` | top of leaf 1 sky gradient — baby blue, the exact shade of the Mac OS X 10.4 default desktop | | `Sky-Mint` | `#C8E4D2` | horizon band on leaves 1–2 — pale mint, like a peppermint Tic-Tac dissolved in water | | `Sky-Cream` | `#F5E9D4` | bottom of leaf 1, body of leaf 5 — cream, slightly warm, the color of unbleached printer paper | | `Sky-Peach` | `#F5D4C8` | leaf 3 warm-light register — pastel peach, an hour before sunset | | `Sky-Twilight` | `#C8C0E0` | leaf 4 violet register — pale twilight, the moment between blue and purple | | `Glass-Highlight` | `#FFFFFF` | the rolling specular highlight on the clock's bezel dome (used at 0.85 opacity) | | `Lamp-On` | `#7DD3C0` | a single lamp lit up — soft jade, slightly cooler than mint, the green of a 2003 PowerBook G4 indicator LED | | `Lamp-Off` | `#D4D8DC` | an unlit lamp — pale dove grey, with a subtle inset shadow to suggest a deep recessed socket | | `Bezel-Aluminum` | `#B8BEC4` | the brushed-aluminum body of the clock — neutral cool grey, the tone of an early-2000s Apple Pro Speaker | | `Ink` | `#3A4048` | all body copy — soft charcoal, never pure black, three steps off `#000` to keep the page in pastel register | The palette is **deliberately under-saturated** — every color is desaturated 8–14% from where a typical Frutiger-Aero design would place it. This is the rawness: a real photograph of a sky at 4:17pm, not a synthwave illustration of one. ## Imagery and Motifs **Imagery is minimal by mandate** — only three custom-rendered visual elements appear on the page, all generated procedurally in inline SVG and CSS, no raster files except where noted. - **The BCD Clock (the instrument).** Hand-built as inline SVG, ~640 × 240 viewBox. Construction: a rounded-rectangle aluminum bezel with a 12px CSS `border-radius`, brushed-metal effect from a tiled SVG noise pattern (turbulence, `baseFrequency="0.9"`, opacity 0.18) over `Bezel-Aluminum`. A glass dome over the lamp grid implemented as a ``-filtered overlay rectangle with a 36% white linear gradient running diagonally top-left to top-right (the rolling highlight). Sixteen circular lamps in a 4×4 grid, 28px diameter each, 16px gap. Each lamp has two states: **on** (`Lamp-On` fill, with a soft 12px outer glow at 40% opacity in the same hue) and **off** (`Lamp-Off` fill, with a 2px inset shadow in `#9CA0A4` to simulate a recessed socket). Below the lamp grid: a thin engraved bar with the day-of-week in Nunito Sans 12px caps, hand-engraved style (1px inset white shadow over `#8A8E94` text on the aluminum). The clock is the only "object" on the page. - **The Bubbles.** ~14 floating glass bubbles per leaf, sized 24–180px diameter, drifting upward at 4–18 seconds per traversal at three depth rates (slow/middle/fast for parallax). Each bubble is a CSS-only construction: a circle with a radial-gradient interior (`Sky-Mint` at center 35% opacity → transparent at edge) and a single 4px white highlight crescent at upper-left, all wrapped in a 1px inset white border at 22% opacity. **Half the bubbles are blurred 4–10px** (the "blur-focus" pattern) — they sit on the out-of-focus depth plane, behind the clock. The other half are crisp and float in front. - **The Sky.** Pure CSS `linear-gradient` between the five Sky-* tokens, stretched across the full document length. Above the gradient, a single ``-driven noise overlay at 4% opacity simulates the slight grain of a phone-camera photograph (the rawness). No clouds, no birds, no sun, no horizon. Just gradient and grain. **No photographs. No icons. No decorative illustrations. No emoji. No mascots. No 3D renders. No Lottie. No logos other than the wordmark.** The page is the clock and the sky. **The futuristic motif is delivered minimally — through behavior, not decoration:** - The clock's lamps **update in real time** — every second a different lamp flickers as the seconds-of-day count (encoded into 17 bits) ticks over. This is the only "futuristic" element, and it is invisible until noticed. - A faint scan-line passes vertically down the clock face every 23 seconds — a 1px pale-cyan line at 18% opacity, sliding from top to bottom in 800ms, like a CRT or a flatbed scanner head. This is the only nod to "tech motif." - The cursor, when over the clock, becomes a **soft circular focus reticle** (24px ring, `#7DD3C0` at 50% opacity, blurred 3px). Outside the clock it is the system default. This is the only custom cursor. ## Prompts for Implementation **The story to tell.** A visitor lands on a calm pastel sky. In the foreground, a softly-glowing aluminum-and-glass clock is showing today's date in a number system their microwave understands. They scroll. The sky changes color the way a real sky changes color over the course of an hour. The clock stays put. Five short blocks of text, set in clean Frutiger-style sans, explain — without urgency, without selling — what they are looking at and why it is interesting. By the bottom of the page they understand BCD, they have watched a sky pass, and they leave. **Bias every implementation decision toward the question: would a quiet object behave this way?** - A real clock does not animate when you scroll. It just hangs there. The clock should hang there. - A real sky does not transition between colors discretely; it crossfades. The leaves should crossfade their gradients via overlapping fixed-position layers, not snap. - A real bubble does not pulse or attention-grab. The bubbles drift. They do not respond to the cursor. - A real piece of body copy does not slide in from the side with a stagger. Copy fades in over 800ms with a 6px upward translate, once, when 30% of its bounding box enters the viewport. Never again. **Animation discipline:** - **Parallax** is the dominant motion (corpus 91% — high frequency, but executed here as physical-Z-depth-of-glass-instrument, not decorative scroll-jacking). Three depth rates: distant sky (0.25× scroll), middle bubbles (0.7× scroll), foreground crisp bubbles (1.4× scroll). The clock itself is on a separate plane that does not parallax with vertical scroll but **drifts laterally** ±8px as a function of scrollY (a chandelier on a moving boat). - **Blur-focus** is the signature gesture (rare in corpus — emphasize). On page load, the wordmark and the clock both enter at 6px Gaussian blur and sharpen to 0 over 700ms with a `cubic-bezier(0.2, 0.7, 0.2, 1)` easing. On hover over any copy block, that block sharpens by 1px while everything else softens by 1px (a focal-attention effect, like a camera racking focus). This is the only hover interaction on the page. - **Lamp pulse.** Each second, exactly one lamp transitions between states (because the seconds-of-day BCD encoding shifts). The transition is a 220ms fade with a 12px glow-bloom at peak, tapering to the steady-state 6px glow over 400ms. No bounce. No spring overshoot. It is a real lamp turning on. - **Scan-line** every 23 seconds, 800ms vertical sweep, ease-in-out. Once per cycle. Subtle. - **Wordmark blur on idle.** If the page sits unscrolled for 30 seconds, the wordmark slowly re-blurs to 4px over 4 seconds — *the visitor has stopped paying attention; the page goes a little out of focus, the way reality does when you stop looking*. Resharpens on the next scroll event. This is the soul of the site. **Implementation specifics:** - Build the clock as a single component with a `now()` tick on `requestAnimationFrame`-throttled-to-1Hz, computing the BCD encoding of the current local date (year-tens, year-ones, month, day → 16 bits, with the 17th bit being seconds-mod-2 for the optional "heartbeat" lamp). Render lamps via a 16-element array map. - Sky gradient is one fixed-position `
` per leaf, each 100vh tall, with `position: sticky; top: 0;` and a `clip-path` reveal driven by scroll position — leaves crossfade their `opacity` by ±1.0 as the visitor scrolls through them. - Bubbles are 42 absolutely-positioned CSS-only circles with `animation: drift Xs linear infinite;` where X is a per-bubble random 4–18s. Each `drift` keyframe moves the bubble from `bottom: -200px` to `bottom: 110vh` while drifting `translateX` by `±60px` in a sine wave (use `cubic-bezier`-approximated keyframes at 25% / 50% / 75% offsets). - Use CSS custom properties for the entire palette so the sky-state can interpolate smoothly: `--sky-top` and `--sky-bottom` set on the body, transitioned over 1200ms when scroll-state crosses leaf thresholds (use `IntersectionObserver` with a 50% threshold). - Set `font-feature-settings: "ss01", "kern", "liga", "tnum"` on body for tabular figures in the binary strips. - Set `prefers-reduced-motion` to disable parallax depth-rates (collapse all three to 1.0×) but keep the lamp-pulse and the scan-line, since those are the *content*. **AVOID with extreme prejudice:** - Hero CTA buttons. Pricing tables. Stat grids. Feature cards. Testimonial sliders. Newsletter modals. Cookie banners. Sticky headers. "Learn more" anywhere. "Get started" anywhere. Social-proof rails. Logo walls. Trust badges. FAQ accordions. Roadmap timelines. "What we do / Who we are / Why us" tri-columns. Hamburger menus. Any verb that ends in *-ify*. Any heading that uses the words "powerful," "seamless," "intuitive," "delightful," "magical," "intelligent," or "smart." Any subhead under 14px. Any copy block over 60 words. Any animation that "delights." Any dark mode. Any toggle. Any settings panel. Any login. Any signup. Any account. - The page does not have a goal. The page is a clock in a sky. Build it that way. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **skeuomorphic**, layout = **parallax-sections**, typography = **frutiger-clean**, palette = **pastel**, patterns = **blur-focus**, imagery = **minimal**, motifs = **futuristic**, tone = **raw-authentic**. **Frequency-analysis context** (from `tools/design/frequency.sh`, 49 designs analyzed): - **skeuomorphic aesthetic: 4%** — extremely rare. The corpus is dominated by hand-drawn (85%) and editorial (57%); skeuomorphism appears only twice and both times as "leather portfolio" or "haunted herbarium" — never as honest depiction-of-an-instrument. `bcd.day` is the first registry entry where skeuomorphism is **the literal subject of the page** (the BCD clock IS a real-looking object, not a decorative texture). - **parallax-sections layout: 12%** — uncommon. Where it does appear (algoha, annual.quest, archetypic.dev), it is used to layer textured spreads. Here it is used to keep **a single foreground object stable while five sky-states pass behind it** — the physics is inverted: the parallax is the *background* moving past a fixed *foreground*, the way you look at a chandelier from a moving boat. No other registry entry uses parallax this way. - **frutiger-clean typography: 6%** — rare. The dominant typographic registers are mono (95%) and humanist (34%) and handwritten (32%). `bcd.day` uses Nunito Sans as the closest Google-available cousin to actual 1976 Frutiger, and pairs it with JetBrains Mono **only** for the 16-bit binary digit strips — so the typographic story is "warm humanist sans for the human reading, cold mono for the appliance reading." The two voices are typeset. - **pastel palette: 10%** — uncommon. Where pastel appears it is usually warm/creamy (creamy-pastel 4%). Here pastel is **eight values across blue-mint-cream-peach-twilight**, deliberately under-saturated 8–14% from typical Frutiger-Aero brightness, to land in "phone-camera-of-a-real-sky" territory rather than "vector illustration of a sky." - **blur-focus pattern: novel application** — blur appears occasionally as bokeh-background (6%) but never as the *primary interaction model*. Here blur-focus is the load animation, the idle animation, the hover-attention model, AND the parallax depth signal (out-of-focus bubbles read as "behind"). Four functions, one gesture. - **minimal imagery: 24%** — moderately common, but typically paired with maximalist typography. Here minimal imagery is paired with **minimal typography** and **minimal copy** and **minimal interaction** — the page is genuinely small. One object, five leaves, ~250 total words of body copy. - **futuristic motifs: 4%** — rare. Where futuristic appears it is sci-fi-hud (6%) or cyberpunk (18%). Here futuristic is delivered **only through behavior** — a real-time updating clock, a periodic scan-line, a focus reticle cursor — never through chrome, neon, glow-cyan, or HUD frames. The only "tech-looking" element is the binary digit strip, and it is set in 13px JetBrains Mono with no styling. - **raw-authentic tone: 8%** — uncommon. Where it appears it usually means brutalist or anti-design. Here raw-authentic means **no marketing voice at all** — the body copy is one person explaining a thing they find interesting, in five short paragraphs, and the page never asks for anything. **Three-plus differentiators from every other entry in the registry:** 1. **The page is a single instrument with a real-time function.** Every other site in the corpus is a composition of regions (hero, about, features, etc.). `bcd.day` has one component — a BCD clock — that **actually computes today's date in BCD and updates every second**. The site is not a representation of a clock. It is a clock. This is unprecedented in the registry, where even the "skeuomorphic" entries (a6c.boo, LegalDebug.com) treat skeuo as decoration rather than literal-object-depiction. `bcd.day` is the first design where the skeuomorphism is **functional** — the rendered object does the thing it looks like it does. 2. **Parallax is inverted: foreground is fixed, background scrolls.** In all 6 corpus entries that use parallax-sections (algoha, annual.quest, archetypic.dev, et al.), the background is slow and the foreground is fast — a standard depth-cue. `bcd.day` inverts this: the **foreground (the clock) is locked in place** with only ±8px lateral drift, and **the entire sky-with-bubbles parallaxes behind it through five color-states**. The visitor scrolls through *time-of-day in the sky* while the *clock stays exactly where it is*. No other entry does this. 3. **Blur-focus is a four-function gesture: load, idle, hover, depth.** Bokeh appears occasionally in the corpus as decoration; nowhere is it elevated to **the primary affordance language**. Here, every important state-change in the page is a focus change — the wordmark sharpens on load, blurs on idle, the body copy racks-focus on hover, the back-plane bubbles are blurred to indicate depth. The page is essentially a **camera with five focal distances**, and the visitor moves between them via scroll, idle, and hover. This is the conceptual unification the design rests on. 4. **The page is genuinely small.** ~250 words of body copy, one custom SVG instrument, two fonts, eight colors, five leaves, zero CTAs, zero forms, zero footers, zero nav. In a corpus of 49 designs that average 2–4 hero sections, 3–6 supporting regions, and 800+ words of marketing copy each, `bcd.day` is **the smallest design in the registry by an order of magnitude**, and the smallness is the point — the rawness, the authenticity, the sky. 5. **The wordmark re-blurs after 30 seconds of inactivity.** This is the design's emotional fingerprint. The page notices when you have stopped paying attention and gently goes a little out of focus, in sympathy. No other site in the registry has an "I notice you have stopped looking" affordance, and certainly none of them respond to it with humility rather than a re-engagement modal. **Avoided patterns (per frequency analysis):** - No **photography** (93% of corpus — abstain). - No **centered hero** in the conventional sense (93% of corpus — `bcd.day` is centered only in the sense that one object hangs on the vertical axis; there is no hero stack, no h1-then-tagline-then-CTA). - No **mono-as-default-body-text** (95% of corpus — mono is reserved here only for the 16-bit binary strips, which is the entire point: humans read in humanist sans, machines read in mono). - No **vintage motifs** (89% of corpus — `bcd.day` faces forward, not backward; the "futuristic" register is delivered through real-time behavior). - No **stagger animation** (69% of corpus — copy fades in once, plain, no cascade). - No **scroll-triggered counters** (counter-animate 4% but ubiquitous in spirit — `bcd.day` has a real-time clock that updates every second, which is the opposite of a marketing counter that animates from 0 to N once).