# Design Language for bcd.day ## Aesthetics and Tone bcd.day is the Grand Exposition of Distributed Ledgers -- a single-day convocation imagined as if staged inside a 1927 world's fair pavilion where cryptography, rather than electricity, is the era-defining marvel. The aesthetic is **art-deco ornate luxury**, but in a strain almost never seen on blockchain event sites: the gilded chevron geometry of the Chrysler Building's sunburst crown, the stepped zigguratic typography of Cassandre travel posters, and the enameled inlay of a Jean Dunand lacquer panel -- all repurposed as the vernacular of a consensus protocol ceremony. Think of a program booklet for an opening gala where each session track is engraved on a brass medallion; think of ticker-tape parade confetti slowed to the cadence of block confirmation times; think of a pneumatic message-tube station reimagined as a mempool visualization. The tone is **opulent-grand** and **scholarly-intellectual** at once -- the voice of a master of ceremonies announcing distinguished delegates, not the restless hype of a crypto launch page. Every element should feel struck, forged, or engraved rather than rendered. The palette avoids the default crypto signals entirely -- no terminal green, no neon violet, no dark-mode black with cyan glow. Instead: lacquer black, aged vellum, champagne gilt, jade green of a Shanghai tea-house screen, and the oxblood of a Biltmore theater curtain. The cumulative feeling is of arriving at a ticketed event in formal dress circa 1930, handed a foiled program whose pages unfold into the day's schedule, speakers, keynote, and after-party -- but the program is about Merkle trees, finality guarantees, and the poetics of the hash function. This is not a tongue-in-cheek retro costume. It is a sincere argument: that the infrastructure of trust deserves the same ceremonial grandeur once afforded to ocean liners and expositions, and that a day-conference URL can be a commemorative artifact instead of a marketing funnel. ## Layout Motifs and Structure The layout is built on a **magazine-spread** structural logic fused with **diagonal-sections** and strict **ma-negative-space** discipline, resisting every current convention of event landing pages. There is no hero-with-countdown, no pricing tier cards, no logo bar of sponsors-arranged-by-generosity. Instead, the site unfolds as the eight-panel accordion program of a bound exhibition guidebook, read spread-by-spread with deliberate rhythm. **Primary structural units:** - **The Frontispiece** (panel 1): A full-viewport tableau centered on an engraved medallion -- a twelve-pointed sunburst with "bcd.day" set in a ziggurat monogram at center, flanked by the date in stacked Roman numerals, framed above and below by ornamental rules and deco chevron brackets. Surrounding negative space occupies roughly 60% of the viewport; nothing competes with the medallion except a single hairline of moving ticker text at the bottom edge reading the real-time block height from a mainnet endpoint, rendered in small-caps mono. The frontispiece does not scroll; the next panel enters via a slow curtain-pull reveal. - **The Program of the Day** (panel 2): A vertically oriented schedule rendered as an architectural cross-section -- imagine the facade of a deco theater with each session as a floor of the building, keynote at the pediment, workshops in the wings, after-party in the marquee. Times are set in narrow display figures with inlaid hairline rules. Sessions are hoverable; hovering engraves the speaker's portrait-card into an adjacent gilt cartouche to the right (desktop) or below (mobile). - **The Speakers' Gallery** (panel 3): A deliberately asymmetric portrait-plate arrangement recalling the pinned photographs of a society column. Portraits are monochrome duotones in champagne-and-lacquer with engraved decorative borders around each. They are NOT in a card-grid. They are loosely arranged as if pinned to a velvet board, with some slightly rotated (-2deg, +1.5deg), connected by delicate tramline rules that visually thread speaker-to-session. - **The Hall of Protocols** (panel 4): A horizontal-scroll corridor visiting featured topics (e.g., "On Finality," "The Liturgy of Gas," "Zero-Knowledge as Rhetoric"). Each station is a framed alcove with a deco-numbered plaque (I, II, III, IV) and a hand-set excerpt of 2-3 sentences of prose. - **The Registry** (panel 5): A single ceremonial panel for the registration/ticket button, set as a brass doorplate engraved with "PRESENT THIS CARD AT THE GATE" in small-caps. The button is not called a CTA -- it is called a "Request of Admission." - **The Colophon** (panel 6): Who published this exposition, set as a book colophon with printing ornaments, the date of the latest content update expressed in both Gregorian and block-height notation. Panels transition with a **curtain-draw** effect: a vertical seam opens from the center out, revealing the next panel underneath. A persistent left-edge gutter shows a thin vertical rule engraved with the current panel numeral in roman numerals. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Titles**: "Cormorant Garamond" -- an engraving-ready serif with dramatic high contrast, used exclusively in weight 300 (Light) or 500 (Medium) at large sizes (clamp(2.5rem, 6.5vw, 5.5rem)). Letter-spacing is stretched to 0.14em on titles to suggest the metal-type-spaced engraving of brass plaques. Ligatures enabled. All titles render with a subtle 1px text-shadow in champagne (#c9a24a) offset (0, 1px), evoking the gilt-on-black depth of a theater marquee lettering. - **Display Accents**: "Cinzel" -- a Roman-capitalis-monumentalis derivative used for section enumerations (roman numerals I through VIII marking the panels) and for the single-word callouts "REGISTRY," "GALLERY," "FRONTISPIECE." Weight 600. Letter-spacing 0.24em. - **Body Copy**: "EB Garamond" -- a revival of Claude Garamond's 16th century punches, carrying the warm humanist irregularity that prevents the page from feeling sterile. Set at 18px base, line-height 1.72, measure capped at 38em. Old-style figures enabled (`font-variant-numeric: oldstyle-nums`). - **Numeric / Tabular**: "Italiana" for the oversized date numerals on the frontispiece (expressive display serif with a single-weight deco silhouette) and "JetBrains Mono" for the live block-height ticker and any on-chain data (where the mechanical cadence must read unmistakably as present-tense machinery beneath the ceremonial shell). - **Small-caps / Labels**: "Cormorant SC" (small-caps variant of Cormorant) for session labels, dockets, and doorplate text. **Palette (eight defined tones, in exact hex):** - `#0d0b08` — **Lacquer Black**: Primary backdrop. Not pure black -- it has the warm undertone of Japanese urushi lacquer. - `#f3ead6` — **Aged Vellum**: Primary text on lacquer, and backdrop of the Gallery panel. The off-cream of a letterpress printed program of 1928. - `#c9a24a` — **Champagne Gilt**: Primary ornamental accent. Used for medallions, hairlines, monogram strokes, gilt text-shadow. - `#8c6b1f` — **Burnished Bronze**: Secondary gilt, used in hover states and shadow side of embossed elements. - `#2d5048` — **Shanghai Jade**: The jewel-tone accent, used for the accordion seam rules and the Hall of Protocols panel backdrop. Named for the green of painted screens in 1920s treaty-port salons. - `#6d1f2a` — **Biltmore Oxblood**: Reserved for the "Request of Admission" doorplate and single emphasis moments. Never used broadly. - `#1c1611` — **Curtain Shadow**: The between-panels curtain-pull reveal fill, slightly warmer than the lacquer black. - `#e8d9a8` — **Soft Ivory**: Used sparingly for the inner tone of gilt medallions to suggest beveled light-catching surfaces. The palette is deliberately warm-analogous (blacks, creams, golds, oxblood, jade) with zero cool-grays and zero blue. This alone distinguishes it from 90%+ of designs in the corpus. ## Imagery and Motifs **Imagery philosophy:** Zero photography. Zero stock illustration. Zero 3D renders. Every decorative element is rendered as hand-authored SVG or CSS ornament, in service of the conceit that the entire site is a printed program engraved on fine paper, not a photographic window. **Core motifs:** - **The Twelvefold Sunburst Medallion**: The signature identity element. A twelve-rayed radiant sun in champagne gilt with alternating long and short rays, center-filled by the ziggurat-monogrammed "bcd.day" glyph. Rendered as SVG, ~480x480 viewBox, rays drawn as narrow chevron-tipped isoceles triangles. On the frontispiece it occupies ~420px and slowly rotates 360deg over 240 seconds -- so slow the motion is almost subliminal. - **Ziggurat Monogram Glyphs**: Each of the eight panel headings has a custom two-letter glyph rendered as a stepped-pyramid interlock, echoing the setback-tower logotype style of 1930 RCA and Chrysler motifs. "FR" (Frontispiece), "PR" (Program), "GA" (Gallery), "HP" (Hall of Protocols), "RG" (Registry), "CO" (Colophon). These glyphs are drawn as SVG paths with filled champagne gilt on lacquer black. - **Chevron Border Frames**: All figure boxes (speaker portraits, session cards, the registry doorplate) are framed by layered chevron borders -- three concentric bands of diminishing champagne lines with mitered corners notched with a deco fanlight ornament. The corner fanlights are individually drawn SVG components, reused throughout. - **Hairline Rule System**: A strict rule hierarchy. Single 0.5px gilt hairline = within-panel divisions; double gilt-and-bronze hairline = section shifts; triple hairline with center filet-ornament = panel-to-panel divisions. The rules are animated on scroll: they draw in left-to-right via stroke-dashoffset over 1.6s. - **Cassandre-Inflected Vectors**: For the Hall of Protocols corridor, each station displays a large graphic panel in the style of A.M. Cassandre's 1930s travel posters -- stylized geometric compositions using only the palette's six primary tones: e.g., "On Finality" is a stylized ocean-liner prow transformed into a chain-of-blocks silhouette crossing a gilt horizon line; "The Liturgy of Gas" is a stylized fuel pump nozzle metamorphosing into an hourglass dripping coins. All hand-authored as flat geometric SVG -- no gradients, no soft shadows; purely crisp vector flats. - **Engraved Text-Shadow Technique**: Primary display headlines use a dual text-shadow: `text-shadow: 0 1px 0 #c9a24a, 0 -1px 0 #8c6b1f;` creating a subtle engraved-bevel effect as if pressed into the aged vellum. - **Ticker Tape Rule**: The bottom edge of the frontispiece and the colophon carries an animated ticker tape in mono small-caps scrolling block-height, timestamp, "PROGRAM IN PROGRESS" status, and session-begins-in countdowns. Moves at a dignified 40px/s -- brisk enough to feel live, slow enough to read at a glance. - **Confetti Coda**: In the after-party section of the program, falling confetti particles -- but each "confetti" is a tiny rotating chevron, diamond, or hairline ornament in the palette tones, each rotating at an independent slow rate, suggesting paper falling from a mezzanine. - **No emojis, no icon fonts, no stock svg-icon libraries.** If an icon is needed (rare), it is hand-drawn in the deco-glyph vocabulary -- e.g., a bell ornament for notifications, drawn as a stylized deco finial. ## Prompts for Implementation **Full-screen narrative -- the program unfolds:** Build the site as a series of full-viewport panels traversed via the **curtain-draw** transition. Use CSS `scroll-snap-type: y mandatory` on the main container with each panel `scroll-snap-align: start` and `min-height: 100vh`. Between panels, a thin Shanghai Jade seam rule is drawn, and as the next panel enters, a pair of curtain overlays (one from top edge, one from bottom edge) meet at the seam, then part outward, revealing the panel content from the center-horizontal line outward. Implement with `clip-path` animating from `inset(50% 0 50% 0)` to `inset(0 0 0 0)` over 1.4s with cubic-bezier(0.7, 0, 0.3, 1). No bounce. It must feel like theater machinery, not a spring. **Entry sequence:** On initial load, the frontispiece medallion assembles itself. The sunburst rays draw in one by one, 80ms apart, via SVG stroke-dashoffset animation -- like a brass medallion being struck ray-by-ray. Once all twelve rays are drawn, the central ziggurat monogram fades up from 0 opacity with a 0.8s ease-out, accompanied by a subtle scale from 0.92 to 1.0. Immediately after, the date-Roman-numerals below engage a **typewriter-effect** revealing letter-by-letter at 60ms/char. The ticker tape begins its leftward scroll only after the monogram completes. Total entry choreography: ~3.2 seconds. Do not shorten it. The ceremony is the point. **Scroll cadence:** Use Intersection Observer with `threshold: 0.35` to trigger panel-specific reveal choreographies. Each panel has a different reveal style: - Program panel: sessions engrave in top-to-bottom with a 120ms stagger per session, each fading from 0 opacity while its hairline rule draws in from left. - Gallery panel: portraits appear in a non-linear order (shuffled sequence stored as constant) at 90ms intervals, each with a gentle (-2deg → 0deg or 0deg → +1.5deg) rotation settle. - Hall of Protocols: horizontal-scroll corridor; use CSS `scroll-snap-type: x mandatory` with each station 88vw wide; as each station center-aligns, its Cassandre vector morphs via SVG path interpolation (using anime.js or a small hand-written rAF loop). **Cursor: the opera-glass.** On desktop, replace the default cursor with a custom cursor: a small gilt opera-glass (pair of linked circles) SVG, 24x24. When hovering over interactive elements, it pulses from 1.0 to 1.12 scale at 480ms cadence. When hovering over session cards in the Program, a ghost-text annotation (the session summary) appears as if handwritten in the margin in Cormorant Italic, with a brief 1s ink-draw reveal. **Microinteractions -- the brass buttons:** Any interactive button (including the Request of Admission) is rendered as an embossed brass plaque: chevron-bordered rectangle, champagne gilt letters engraved with the bronze/soft-ivory dual text-shadow. Default state is lacquer-background with gilt text; hover state inverts to gilt-background with lacquer text, with the transition animating through an intermediate 200ms polish-flash (a diagonal sheen rendered via a CSS gradient traversing left-to-right). On press, a 40ms inward displacement (translate3d(0,1px,0)). **Responsive considerations:** On mobile viewports, the magazine-spread logic collapses gracefully: the accordion program panel stays vertically stacked; the Hall of Protocols horizontal corridor becomes a vertical sequence of station panels; the Gallery's asymmetric pinned-photograph arrangement becomes a looser single-column with preserved rotations; the frontispiece medallion scales to 72% but is never cropped. Typography scales via `clamp()` everywhere; no viewport breakpoint should introduce a fundamentally different structure. **Block-height ticker implementation:** Use `fetch` against a free public mainnet JSON-RPC endpoint (e.g., cloudflare-eth.com) polling every 12 seconds for `eth_blockNumber`. Render in JetBrains Mono small-caps, prefixed with ornament glyphs (❦). If the fetch fails, degrade gracefully to a locally-timed ticker ("PROGRAM BEGINS IN ..."). Never display an error; the ceremonial pretense must hold. **AVOID explicitly:** countdown-timer heroes, pricing-tier grids, sponsor-logo arrays arranged in a bar, testimonial cards with photos, "As Seen In" media logos, generic SaaS gradient backgrounds, any occurrence of the word "revolutionary" or "unlock" or "seamless." The program booklet metaphor must hold throughout. **Storytelling spine:** Every scroll downward is framed as "turning the page." The URL should even update via History API to reflect the panel (`#frontispiece`, `#program`, `#gallery`, `#hall-of-protocols`, `#registry`, `#colophon`), so that the browser back-button navigates the program pages. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Art-deco as a blockchain vernacular -- unprecedented in this corpus.** The frequency analysis shows `art-deco` at 0%, `victorian-ornate` at 0%, and `opulent-grand` tone at 6%. Against 90% corporate, 34% generative, 30% hand-drawn, this design is the only one that argues for ceremonial 1927-expo grandeur as the native visual language of distributed ledger technology. It deliberately refuses the cyberpunk/terminal/dark-mode-neon cluster that dominates blockchain-adjacent design (cyberpunk 4%, terminal 10%, dark-mode 6%, dark-neon crypto near zero). The pure art-deco lane here is empty -- this design claims it. 2. **Program-booklet-as-website structural metaphor with curtain-draw transitions.** No other design treats the site as a bound exhibition program unfolding panel-by-panel. The 94% card-grid and 88% centered layouts are explicitly avoided. Instead, a magazine-spread + diagonal-sections + horizontal-scroll corridor hybrid, connected by theatrical curtain-draw transitions rather than scroll-fade. The user's progress through the site IS the turning of pages in a ceremonial document. 3. **Zero photography, zero stock imagery, zero gradients -- all hand-authored deco SVG.** While 94% of other designs use photography and 98% use gradients, this one uses neither. Every ornamental element is authored as flat deco-geometric SVG (sunburst medallions, ziggurat monograms, Cassandre-style panels, chevron frames, fanlight corner ornaments). The visual vocabulary is built from scratch rather than assembled from libraries. 4. **Eight-tone analogous palette with zero blue and zero cool-grays.** Of 50 designs analyzed, 96% use warm palettes but most blend with cool accents. This design strictly restricts itself to lacquer-black, vellum, champagne, bronze, jade, oxblood, curtain-shadow, and ivory -- a closed warm-analogous system with a single jewel-tone deviation. There is no #blue, no #cyan, no #slate, no #neutral-gray in the entire design. This palette discipline distinguishes it at a chromatic glance. 5. **Ceremonial typography with engraved text-shadow technique.** The dual text-shadow beveled engraving (`0 1px 0 #c9a24a, 0 -1px 0 #8c6b1f`) applied to all display headlines produces a struck-brass visual quality unique to this design. Combined with the Cinzel/Cormorant/EB Garamond/Italiana/Cormorant SC quintet -- none of which are in the mono-dominant 90% of the corpus -- the typography is entirely in the serif-humanist direction with display-deco accents. 6. **Real-time block-height ticker rendered as ceremonial ticker-tape.** The only "live" data in the entire design is the mainnet block number, rendered in small-caps mono sliding at the bottom edge of the frontispiece like confetti from a mezzanine balcony -- the machinery humming beneath the ceremony. This narrative unification of live data and ornamental presentation is not present in any other design. 7. **Named "Request of Admission" instead of CTA.** The design refuses contemporary marketing vocabulary. No "Sign Up," no "Get Started," no "Book Now." A single doorplate labeled "Request of Admission" in small-caps gilt. This single lexical choice carries the entire tone into the transactional surface, which is typically where ceremonial designs break character. **Chosen seed/style:** `art-deco ornate luxury` (from seeds.json line 21) -- unused elsewhere in the corpus. The seed is re-cast as a blockchain-event vernacular, arguing that cryptographic infrastructure deserves ceremonial presentation rather than techno-hype. **Avoided patterns from frequency analysis:** card-grid (94%), centered (88%), photography (94%), gradient (98%), mono-typography (90%), corporate aesthetic (90%), scroll-triggered standard reveal (94%), and the dark-mode-neon-crypto seed. Also deliberately avoided: the mysterious-moody tone (42%), stat-grid patterns, CTA-heavy layouts, and pricing blocks -- as directed.