# Design Language for scire.dev ## Aesthetics and Tone scire.dev — *scire*, the Latin verb "to know," the buried root of *science* and *conscience* — is presented as **an axonometric blueprint of knowledge itself**: a cool, drafting-table world where ideas are drawn the way an engineer draws a gearbox, in measured 30°/150° isometric projection, exploded into labelled layers, dimensioned, cross-sectioned. The mood is **the quiet of a structural-drawing room at 6am** — graphite-cool, faintly cyan, lit by the diffuse light of a north-facing window and the glow of a CAD monitor. Nothing here is "warm and inviting"; it is *precise and inviting* — the seduction of a clean exploded view, of a diagram so honest you understand the machine before you read a word. Tone is **scholarly-intellectual, but builder-handed** — not a dusty library, a workshop where thinking is fabricated. Copy reads like the margin notes of a careful technician: terse, declarative, occasionally dryly funny ("Step 1: assume nothing. Step 2: see Step 1"). No hype, no exclamation marks, no "revolutionary." The site behaves like a technical manual that happens to be beautiful: every section is a *plate* (Plate I, Plate II…), every concept is *rendered in projection*, every transition is the snap of a drafting arm locking into place. The reader should feel they have been handed the cutaway drawing of an idea and trusted to follow the call-out lines. ## Layout Motifs and Structure The page is built on a **true isometric coordinate system** rather than a flat grid: a faint background lattice of three line-families at 30°, 150°, and 90° (vertical) — the classic isometric paper — runs the full bleed behind everything at 4–6% opacity, and major elements *snap to its nodes*. Content lives in a **single descending column of "plates"** (6–8 of them), each plate a self-contained technical drawing of one concept. - **The masthead** is an *exploded title block* in the lower-left corner of the first viewport, drafting-style: domain name, a fake drawing number ("DWG. SCIRE-001"), a revision letter, a "SCALE: 1:1 (CONCEPTUAL)" line — set in mono, boxed with a 1px line, exactly like the title block of an engineering sheet. - **Each plate** is laid out as: a large isometric illustration on one side (alternating left/right per plate, so the eye zig-zags down the sheet), and on the other side a **call-out stack** — short numbered notes (① ② ③) connected to points on the drawing by thin **leader lines** with a small filled dot at the drawing end and a horizontal "shelf" at the text end, exactly as parts are labelled in an assembly diagram. - **Navigation** is a **vertical drawing-index rail** pinned to the right edge: "I · II · III · IV…" in mono, the active plate's numeral drawn inside a small isometric cube that has visibly *rotated* into focus. No hamburger, no top bar, no logo soup. - **Between plates**, a thin **dimension line** runs across the column — arrowheads at both ends, a gap in the middle holding a measurement that's actually a section label ("├─── METHOD ───┤"). Negative space is generous and *deliberately asymmetric*: drawings sit off-center on their half, the way a real plate leaves room for the title block. - **The footer** is a **bill of materials**: a small ruled table listing the "components" of the site (typeface, palette refs, the four ideas covered) with quantities and a notes column — closing the manual. This is **layered-depth + immersive-scroll + asymmetric**, deliberately *not* card-grid, *not* centered-hero, *not* bento-box. ## Typography and Palette **Type system (Google Fonts only):** - **Drawing-annotation face / body:** `IBM Plex Mono` (weights 400, 500; italic for leader-line side notes). This is the hand of the whole sheet — call-outs, title block, dimension labels, index rail, captions, body copy at a comfortable 16–17px with generous 1.7 line-height. Plex Mono's slightly humanist, slightly technical character reads like a good CAD annotation font without being a novelty terminal face. - **Plate headlines / the big stuff:** `Archivo Expanded` (weight 600–700, set wide with `letter-spacing: 0.02em`, uppercase) — broad, mechanical, confident, like a header stamped across the top of a blueprint. Used only for plate titles ("PLATE III — INFERENCE") and the masthead domain. - **One expressive accent:** the Latin word **SCIRE** itself, set once, very large, in `Spectral` (light italic) — a single serif breath of "this is about *knowing*, an old idea" amid all the mono and the engineering type. It appears watermark-large behind Plate I and never again. **Palette — cool drafting room, "blueprint-graphite":** - `#0E1418` — **ink black-blue**, the deepest line weight and the footer panel. - `#1B2630` — **drafting slate**, primary dark surface for the hero / first plate background. - `#E8ECEE` — **vellum white**, the main "paper" the plates are drawn on. - `#CDD6DA` — **tracing grey**, the isometric lattice lines and secondary rules on vellum. - `#3A5C6E` — **section blue**, the mid-tone for filled isometric faces and dimension lines. - `#67D1C4` — **CAD cyan**, the single luminous accent — leader-line dots, the active index cube, hover states, the "current layer" highlight. Used sparingly, like a highlighted entity in a model. - `#D98C3F` — **rust-orange annotation**, used *only* for true warnings / "note" emphasis — the one warm note, and it earns its warmth by being rare. Contrast pairings: vellum `#E8ECEE` text-on-slate `#1B2630` for the hero; ink `#0E1418` text-on-vellum for the plates; cyan `#67D1C4` reserved for interaction and "you are here." ## Imagery and Motifs All imagery is **bespoke isometric line-and-flat-fill illustration** — no photography, no stock, no hand-drawn wobble. Every drawing obeys the 30° projection and uses only the palette faces. - **Plate I — The Apparatus of Knowing:** an exploded isometric of an impossible instrument — a brass-less astrolabe rebuilt from a CPU heatsink, a quill, a fiber-optic strand, and a stack of index cards — floating apart in mid-air, each component on its own leader line. This is the "what is scire.dev" plate. - **Plate II — The Stack:** a cutaway isometric tower (like a sliced layer cake) whose strata are labelled "observation / data / model / inference / claim / doubt" — *doubt* is the foundation slab, drawn thickest. Cross-hatched cut faces in section blue. - **Plate III — Inference Engine:** an isometric gear train where the gears are made of small glyphs (∴, ⇒, ∀) meshing; the output shaft drives a single tiny lamp that lights in CAD cyan. - **Plate IV — The Workbench:** a top-down-ish iso of a desk strewn with measured tools — calipers on a graph, a soldering iron resting on an idea, a notebook open to a half-finished proof — everything dimensioned with little arrow lines as if it were a fixture drawing. - **Recurring motifs:** isometric cubes that *rotate* on scroll; leader lines that *draw themselves* (SVG path-draw) from drawing to label; the faint iso lattice everywhere; corner registration marks (⌐ ¬ L ⌐) at the four corners of each plate like crop marks on a print; a running "REV" letter in the corner that increments as you scroll (A → B → C…), implying you are revising your understanding. - **No icons in the conventional UI sense** — where you'd expect an icon, there's a tiny isometric object instead (a 24px iso cube for "menu," a tiny iso magnifier for "search"). ## Prompts for Implementation Build scire.dev as a **single HTML page, one CSS file, one ES module** — no framework, no build step. It is a ~90-second descent through 6–8 technical plates, the manual of an idea called "knowing." **Storytelling spine (top to bottom):** 1. **Masthead plate (slate background, full viewport).** Background: the iso lattice at 5% in tracing grey. Center-back: the word **SCIRE** set huge in Spectral light italic, vellum-white at 8% opacity, half-bled off the top. Lower-left: the **title block** — `scire.dev` in Archivo Expanded, then mono lines: `DWG. SCIRE-001 · REV A · SCALE 1:1 (CONCEPTUAL) · "to know — verb, Latin, present infinitive."` A single dimension line runs along the bottom of the viewport with the section label `├─── BEGIN ───┤`. Subtle: a slow parallax where the lattice drifts 8px against SCIRE as you start to scroll. No buttons. The only affordance is the scroll itself and the index rail fading in on the right. 2. **Plates II–VII**, each: enters with the iso illustration assembling — components spring/settle into projection from slightly offset positions with a short stagger (the *snap* of a drafting arm, ~220ms, gentle ease), then the **leader lines draw themselves** outward (SVG `stroke-dashoffset` animation), and finally the numbered call-out notes ① ② ③ fade up at their shelves. Each plate has a wide Archivo Expanded headline ("PLATE III — INFERENCE"), the alternating-side drawing, and the call-out stack. As a plate scrolls into the center band, its index numeral on the right rail rotates into a small iso cube and lights cyan; leaving, it rotates back to flat. Hovering any call-out dot pulses it cyan and brightens just that leader line. 3. **Inter-plate dimension lines** with section labels ("METHOD," "EVIDENCE," "DOUBT," "PRACTICE") slide their measurement text in from one arrowhead toward the gap. 4. **Closing plate — Bill of Materials (ink-black-blue panel).** A ruled mono table: `ITEM | DESCRIPTION | QTY | NOTES` listing the typefaces, the seven palette swatches (rendered as actual color chips), and the ideas covered. Last row, in rust-orange: `NOTE — drawings are conceptual; the machine is yours to build.` The REV letter in the corner has reached its final value. A final dimension line: `├─── END ───┤`. **Interaction details:** keep motion mechanical and *settled*, not bouncy — think pneumatic damper, not rubber band; the iso cubes on the rail are the only things that "rotate." Reduce-motion: lattice static, drawings appear already assembled, leader lines pre-drawn. Cursor: a small crosshair `+` reticle replacing the default pointer over the drawings only (CSS `cursor: crosshair`), reinforcing the drafting feel — but no elaborate JS cursor-follower. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonials, logo walls, email capture, hero buttons, FAQ accordions, dark-mode toggles, chatbots, cookie banners. There is nothing to convert; there is something to understand. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **A literal isometric coordinate system as the page's skeleton.** Isometric appears as an *aesthetic label* in ~13% of designs and as "isometric-icons" imagery in ~4%, but those are almost always isometric *illustrations dropped onto a flat grid*. Here the 30°/150°/90° lattice *is* the layout grid — elements snap to iso nodes, the index cubes truly rotate in projection, drawings explode along leader lines. The geometry isn't decoration; it's the substrate. 2. **The engineering "plate + title block + bill of materials" document model**, used end to end — drawing numbers, revision letters, dimension lines as section dividers, a BOM as the footer. No other design in the corpus structures itself as a literal technical manual. 3. **Cool blueprint-graphite palette and crosshair drafting feel** — pushing hard against the corpus conventions of warm (98%) and gradient (94%) palettes, photography (98%) and hand-drawn (94%) imagery, card-grid (92%) layouts, and cursor-follow (89%) flourish. Single luminous cyan accent + one rare rust note; otherwise slate, vellum, and tracing grey. 4. **Latin etymology as a single typographic gesture** — the word SCIRE in Spectral light italic, watermark-scale, appearing exactly once — gives the otherwise mechanical, mono-heavy page one quiet humanist breath, framing "dev" knowledge as an old human verb rather than a tech buzzword. **Chosen seed/style:** *isometric technical docs* — rendered as `aesthetic: isometric, layout: layered-depth, typography: mono, palette: cool-grays, patterns: path-draw-svg, imagery: isometric-icons, motifs: grid-lines, tone: scholarly-intellectual`. **Avoided overused patterns (from frequency analysis):** hand-drawn aesthetic (94%), glassmorphism (83%), photography imagery (98%), card-grid layout (92%), warm palette (98%), gradient palette (94%), cursor-follow (89%), magnetic (79%), spring-bounce as primary feel (84% — used here only as a damped settle). Leaned instead toward underused isometric, cool-grays, layered-depth, path-draw-svg, and a scholarly-intellectual builder tone.