# Design Language for scire.bar ## Aesthetics and Tone scire.bar is the after-hours **observation lounge of the Meridian Knowledge Society** — a fictional 1931 establishment perched on the top floor of a chrome-and-lacquer tower, where the cocktail rail has been replaced by a long brass *ledger of things worth knowing*. "Scire" is Latin for *to know*; the `.bar` is taken literally — a polished bar at which one does not order drinks but **draws down ideas**, each served on an etched glass coaster, each with its own provenance card. The mood is **high Art Deco at midnight**: black lacquer surfaces catching gold light, fluted columns, sunburst inlays, the hush of a private club after the orchestra has packed up. It is opulent but not gaudy — restrained the way a 1930s ocean-liner smoking room was restrained: every ornament is *machined*, symmetrical, stepped, never organic. Tone is **elegant-sophisticated with a low confiding murmur** — the voice of a maître d' who has read every book behind the bar and will tell you, quietly, which one to take home tonight. Nothing shouts. There is no neon, no glow, no glassmorphic frost, no hand-drawn wobble, no photography, no warm cottagecore haze — the corpus is drowning in all of those. This is **cold gold on warm black**: candor delivered with cocktail-hour composure. ## Layout Motifs and Structure The spine of the site is a **single vertical "service rail"** — a literal rendered brass bar that runs down the centre-left of the viewport at all times, like the edge of the counter. Content is **plated to the right of the rail** in a sequence of full-height "rounds," each round a stepped Art Deco cartouche (a rectangle whose corners are not rounded but *notched* in two-step ziggurat cuts). This is an **immersive vertical-scroll narrative**, not a card-grid, not a bento box, not a dashboard — the corpus has 92% card-grid; this site refuses it. Composition rules: - **Strict bilateral symmetry within each round.** A central axis; sunburst fans radiating from a single point at the top of each cartouche; mirrored fluted pilasters left and right. - **The rail is a progress instrument.** A small brass bead travels down the rail as you scroll, clicking past engraved tick-marks — one tick per "round of knowledge." Seven rounds total: *The Aperitif* (what knowing feels like), *The First Pour* (a small true thing), *The Long Draw* (a deeper idea, fully developed), *The Chaser* (a counter-argument), *The Coaster* (provenance — where this came from), *The Tab* (an open question left unpaid), *Last Call* (a single sentence to leave with). - **Ma / negative space is generous** — wide black margins frame each cartouche so the gold reads as inlay on lacquer, never as fill. - Navigation is minimal: no header bar, no hamburger. A vertical run of seven brass studs nested *into* the rail; clicking a stud slides the bead and the plate to that round. The wordmark **SCIRE** sits stamped at the very top of the rail in stepped capitals, hairline-ruled above and below. - At narrow widths the rail moves flush-left and thins to a 4px brass line; cartouches go full-width but keep their notched corners and central sunburst. ## Typography and Palette **Typefaces — Google Fonts only:** - **Poiret One** (400) — the **Art Deco display face**. Used for the SCIRE wordmark, round titles ("The Long Draw"), and pull-quotes. Its geometric thins and circular bowls are pure 1930s travel-poster lettering. Letter-spacing 0.18em on the wordmark, 0.08em on titles. Never used below 22px. - **Cinzel** (400, 600) — a **flared Trajan-roman capital** used *only* for small all-caps labels: the rail tick-mark engravings, "PROVENANCE", "OPEN TAB", section numerals (I–VII rendered as Roman). Tracked at 0.22em. This supplies the engraved-brass authority. - **Marcellus** — the **serif body face** for all running prose: the ideas themselves, the provenance notes, the chaser arguments. Marcellus is a quiet, slightly humanist Roman with just enough flare to sit beside Cinzel without clashing. Generous line-height (1.75), measure capped at ~62 characters. - **DM Mono** (300, 400) — a restrained **mono** used sparingly for one thing only: the "tab" — the open questions, rendered as if pencilled on a bar chit, monospaced and slightly faded. (Mono is 94% in the corpus; here it is deliberately demoted to a single accent role rather than a primary voice.) **Palette — lacquer & gold, cold and deliberate:** - `--lacquer` **#0C0A07** — near-black with a brown undertone; the bar top, the dominant ground. - `--lacquer-deep` **#070504** — the margins and the void behind the rail; almost pure black. - `--brass` **#C9A227** — the structural gold: the rail, the bead, the cartouche keylines. - `--brass-bright` **#F2D27A** — highlight gold for the sunburst tips and the wordmark; the "candlelight catching the edge." - `--brass-shadow` **#6E5616** — the recessed gold inside notches and flutes; gives the inlay depth. - `--bone` **#E7E0CC** — warm off-white for body prose on lacquer; reads as ivory bar-light, never clinical white. - `--absinthe` **#7FB069** — the single cool accent, used *once per page* — the live link colour and the "Last Call" sentence underline; a pale herbal green like an absinthe louche, the one non-metallic note in the room. - `--oxblood` **#5C1A1A** — deep burgundy reserved for the "Chaser" round's cartouche fill (a 6% tint over lacquer), marking it as the counter-argument — the bitter against the sweet. Contrast is high (gold/bone on near-black) but the gold is matte-gold, never saturated yellow. No gradients used as fills; only thin metallic *sheens* — a 2°-angled linear-gradient on the rail itself to fake brushed brass. ## Imagery and Motifs **All visual ornament is CSS-and-SVG geometry — no raster, no photography, no stock illustration, no hand-drawn jitter.** The motif kit: - **The sunburst fan** — a half-rosette of 17 tapering brass rays radiating from a point at the top centre of every cartouche, drawn in SVG with `--brass-shadow` cores and `--brass-bright` tips. Each round's fan has a slightly different ray count (13–21, all primes) so attentive readers notice. - **Stepped ziggurat frames** — every container, divider, and stud is built from two- or three-step rectilinear cuts; the "notched corner" is the signature shape, repeated at the scale of the whole cartouche and the scale of a 6px tick-mark. - **Fluted pilasters** — vertical groups of 5 thin brass lines flanking the central content column, like the reeded columns of a Deco cinema; they cast a faint inset shadow to read as relief. - **The etched coaster** — in the *Coaster / Provenance* round, the source material is presented inside a perfect circle scored with concentric brass rings and a chamfered rim — a glass coaster seen from above, with the citation engraved around its circumference following the curve. - **The brass bead & rail** — the scroll-position instrument; a small faceted sphere with two specular highlights, sliding in a channel, clicking audibly (a soft `tick` sound, ≤ 40ms, user-gesture-gated) past Roman-numeral ticks. - **Chevron rules** — section breaks are not lines but rows of tiny stepped chevrons (`▸▸▸` in stepped form), a Deco border staple. - **No icons in the modern UI sense** — affordances are rendered as miniature Deco objects: the "expand provenance" control is a tiny brass key; "back to top" is a stepped arrow inside a sunburst medallion. ## Prompts for Implementation Build scire.bar as **one HTML page, one CSS file, one ES module** — no framework, no build step, no analytics, no cookie banner, no chatbot. The experience is a **5-to-7-minute candlelit scroll down a brass bar**, paced like the seven rounds described above. **AVOID entirely: CTA buttons, "Sign up" / "Get started", pricing tables, plan comparison blocks, statistic grids ("10k users"), testimonial carousels, logo walls, FAQ accordions, feature-card grids, hero-with-button layouts.** There is nothing to buy here; there is something to *know*. Storytelling spine: the visitor arrives at an empty, gleaming bar (round 1 fades the rail into view, the bead resting at the top tick). As they scroll, the bead descends and each cartouche **assembles itself**: the sunburst fan draws ray-by-ray (`stroke-dashoffset` animation, staggered ~28ms per ray), the stepped frame extrudes from a hairline outward, then the prose **settles in line by line** as if poured. The *Long Draw* round is the longest — let it breathe over 2–3 viewport heights with the prose actually developing one substantive idea about the nature of knowing. The *Chaser* round arrives with its oxblood tint and an honest objection to what was just said. The *Coaster* round spins its concentric-ring coaster into place and engraves the provenance around the rim. The *Tab* round shows a faded DM Mono chit of unanswered questions, corner-clipped like a real bar receipt. *Last Call* is a single Poiret One sentence, centred, underlined in `--absinthe`, with the bead clicking to the final tick and the rail's brass sheen dimming by 20% — the lights going down. Motion vocabulary (prefer the corpus-underused ones): **path-draw-svg** for every sunburst; **stagger** for prose lines and ray sequences; **counter-animate** for the Roman numerals ticking as the bead passes (I→II→… rendered by swapping glyphs, not counting digits); **scroll-triggered** reveals throughout; a gentle **parallax** of the fluted pilasters (they drift at 0.92× scroll while content moves at 1×) — used quietly, not as spectacle. Explicitly **avoid cursor-follow blobs, magnetic buttons, tilt-3d cards, spring-bouncy elastic** — those are 80–90% saturated in the corpus and would shatter the composed Deco stillness. All animation respects `prefers-reduced-motion` (sunbursts appear instantly, bead jumps without sliding). CSS notes: simulate brushed brass with a `repeating-linear-gradient` at 2° (alternating `--brass` / `--brass-shadow` at ~0.5px) overlaid with a single soft specular `linear-gradient`; do *not* use `box-shadow` glow — use crisp 1px inset/outset shadows in `--brass-shadow` and `--brass-bright` to fake bevelled metal edges. The notched-corner cartouche is best done with `clip-path: polygon(...)` listing the ziggurat cuts. Keep the page on `--lacquer-deep` with content cartouches a hair lighter (`--lacquer`) so they read as objects *resting on* the bar. ## Uniqueness Notes Differentiators from the rest of the corpus: 1. **Art Deco as the leading aesthetic, executed in cold matte-gold-on-lacquer with strict bilateral symmetry** — not glassmorphism (83%), not hand-drawn (94%), not warm cottagecore, not dark-academia. Art-deco sits at ~5% in the frequency data and almost never as the *primary* language driving the whole layout; here the stepped-ziggurat / sunburst-fan vocabulary *is* the structure, not a decorative skin. 2. **A literal rendered "bar" as the navigational spine** — a brass counter-rail with a sliding faceted bead and engraved Roman tick-marks serving as both progress indicator and menu. This puns directly on the `.bar` TLD and replaces the corpus-default fixed header / hamburger / card-grid (card-grid is 92%; this site has zero cards). 3. **The "seven rounds" cocktail-menu-of-ideas structure with an oxblood Chaser of self-objection and a faded DM Mono bar-chit "Tab" of unanswered questions** — an editorial sequence no other site claims, and one that deliberately includes a counter-argument and an *unresolved* section, which CTA-driven layouts structurally cannot. 4. **Mono demoted to a single faded-pencil accent role** rather than a primary voice — a conscious inversion of the 94%-mono corpus norm. 5. **Single cool accent (`--absinthe` green) used exactly once per page** as the only non-metallic colour — disciplined restraint against the corpus's gradient-everything tendency (gradient 94%). Chosen seed: **victorian decorative bakery** — reinterpreted away from Victorian-bakery toward its sibling vocabulary *art-deco ornate luxury*: the "decorative ornate luxury establishment" DNA of the seed, pushed forward to 1931 and re-machined as Art Deco rather than Victorian filigree, and re-themed from a bakery to a knowledge bar. Avoided patterns flagged by frequency analysis: hand-drawn (94%), glassmorphism (83%), photography (98%), card-grid (92%), full-bleed (87%), warm-gradient palettes (94–98%), mono-as-primary (94%), cursor-follow (89%), magnetic (79%), spring (84%), tilt-3d (30%) — none used as primary devices here.