# Design Language for scire.dev ## Aesthetics and Tone `scire.dev` — Latin for "to know" — is a **knowledge instrument**, not a landing page. The aesthetic is **brutalist-crystalline**: raw structural concrete meets faceted gem geometry. Imagine a mineralogy lab where every specimen drawer is labelled in blunt stencil type, but the specimens themselves are cut obsidian, quartz, and tourmaline — fracture planes catching overhead fluorescent light in sharp, geometric flashes. The mood is **cold precision without coldness**. There is no warmth here, no gradients, no invitation. The site presents knowledge the way a periodic table presents elements: categorical, exhaustive, unapologetic. Yet it is not hostile — it is *legible*. Every element has a defined role, a defined boundary, a defined weight. Tone is **minimal-authoritative**: the page speaks in declarative sentences. No marketing copy, no calls-to-action, no testimonials. The site narrates itself through structure and proportion alone. Information density is high but never cluttered — the grid enforces breathing room with mathematical precision. The crystalline motif is the emotional counterweight to brutalism's rawness. Brutalism gives structure; crystal gives light. Fracture lines crack across panel edges like mineral cleavage planes, catching simulated refraction that is strictly monochrome — white-to-black prismatic scatter, no chromatic drift. ## Layout Motifs and Structure The page is a **dashboard** — not a scrolling narrative, not a hero-first page. It is a full-viewport instrument panel divided into a rigid 12-column, 8-row CSS grid. Every cell has a defined border weight (1px `#2a2a2a` on dark mode, 1px `#d0d0d0` on light mode). No gap between cells: borders touch, creating a continuous grid membrane across the entire viewport. **Grid anatomy (desktop 1440px):** - **Row 1** (64px): Navigation bar — domain mark left, mode toggle far right. No hamburger. All nav links are monospace caps, letter-spacing 0.2em. Border-bottom only. - **Rows 2–3, cols 1–4** (280px tall): Monolithic hero cell. Domain name `SCIRE` in Bebas Neue at 144px fills the cell. Subtext in IBM Plex Mono, 11px, `#888888`. - **Rows 2–3, cols 5–12**: Divided into 8 equal cards (2 rows × 4 cols). Each card is a **knowledge domain panel** — an icon, a label, and a single-line descriptor. These are the primary navigation artifacts. - **Row 4** (full width): A horizontal **status strip** — a scrolling ticker of data points (last updated timestamp, item count, active categories). Monospace, 12px, white on black or black on white. Border top and bottom. - **Rows 5–7, cols 1–8**: **Primary content well** — the active knowledge domain's entries fill this cell as a dense list, each entry a single row with icon, title, and tag cluster. No excerpts. No thumbnails. Pure list. - **Rows 5–7, cols 9–12**: **Context panel** — metadata about the selected item or domain. Tags, related links, a miniature crystalline SVG map of the domain's relational structure. - **Row 8** (full width): Footer strip — identical weight to nav bar. Version, license line, contact glyph. On mobile (below 768px): the 12-column grid collapses to a single column. Dashboard panels stack vertically, each full width. The status ticker remains fixed at the top below the nav. The crystalline context panel moves below the content well. **No parallax. No scroll-triggered entrance animations. No centered hero layouts.** The dashboard is fully visible on load. Content appears instantly — the viewport is the composition. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display — `Bebas Neue`**: Domain mark `SCIRE`, section headers, and all large numerals. Used at sizes 144px (hero), 48px (panel headers), 24px (sub-headers). Tracking 0.05em at all sizes. No italic — the face has none. The blunt geometry of Bebas Neue reads as industrial stencil against the crystalline facet geometry. - **Body & UI — `IBM Plex Mono`**: All body text, labels, metadata, status ticker, tags. At 11px for metadata, 13px for list entries, 15px for descriptors. Mono enforces the instrument-panel register — every character occupies the same width, every column of text aligns perfectly, reinforcing the grid membrane. - **Accent — `Space Grotesk`**: Used only for the single-line descriptor in knowledge domain cards and the context panel annotations. At 12–14px, weight 500. Its slightly geometric, slightly humanist quality introduces the only softness on the page — a whisper of legibility inside the brutalist frame. **Palette — strict monochrome, two modes:** Dark mode (default): - Background: `#0d0d0d` — near-black, not pure black; avoids harshness - Grid membrane: `#2a2a2a` — dark charcoal, visible but not aggressive - Primary text: `#e8e8e8` — near-white - Secondary text / metadata: `#888888` — mid-grey - Active state / selection: `#ffffff` — pure white - Crystal refraction highlight: `#c8c8c8` — light grey, used on SVG facet edges only - Status strip background: `#1a1a1a` - Card hover fill: `#161616` Light mode: - Background: `#f5f5f5` — off-white - Grid membrane: `#d0d0d0` — light grey - Primary text: `#111111` - Secondary text: `#666666` - Active state: `#000000` - Crystal highlight: `#999999` - Status strip background: `#e8e8e8` - Card hover fill: `#ececec` No color is ever used. Zero hue. The monochrome constraint is absolute — even SVG icon strokes, border colors, and hover states stay on the grey axis. The only perceived "color" comes from the geometric contrast of the crystalline facet patterns, which create tonal variation through shape and light/shadow simulation alone. ## Imagery and Motifs **No photography. No illustration. No gradient-mesh backgrounds.** The visual vocabulary is entirely structural: **Icon system — custom geometric glyphs:** Each knowledge domain card has a single icon. Icons are constructed from straight lines and crystalline polygon fragments only — no curves, no circles, no rounded corners. Every icon is built on a 24×24 grid using 1px strokes in `currentColor`. The icons read as cross-sections of mineral specimens: a hexagonal prism for mathematics, an octahedron wire-frame for logic, a trapezoidal rhombus for engineering, a starburst polygon for physics. The icon library has exactly 12 glyphs, one per domain. They double as navigation markers in the context panel's relational map. **Crystalline facet patterns:** The hero cell background and the context panel background carry a large SVG composed of irregular polygon facets — like a cracked obsidian surface viewed under raking light. Each polygon is filled with a slightly different shade within the monochrome range (`#0d0d0d` to `#1f1f1f` in dark mode, `#d8d8d8` to `#f0f0f0` in light mode). No animated shimmer — the crystal is still. The visual effect is purely geometric: depth through tonal stepping across facet planes. **The crystalline relational map:** In the context panel, when a knowledge domain is active, a miniature SVG renders the domain's relational structure as a **crystal lattice graph**: nodes are small diamonds (rotated squares, 6×6px), edges are straight 1px lines. The layout is force-directed but pre-computed (static SVG), with edges following the 45/90-degree grid discipline. This map is the only non-grid element on the page — it floats in the context panel as a contained ornament. **Grid membrane as motif:** The 1px border grid is itself the primary decorative motif. It is not hidden behind content — it is visible at all times. When a card is selected, its border weight jumps from 1px to 2px, and the adjacent cell borders dim to `#1a1a1a`, making the selection legible through border contrast alone. **Status ticker:** A single-line horizontal scroll strip showing live-ish data: `ITEMS: 2,847 · DOMAINS: 12 · LAST INDEXED: 2026-05-11T03:42:00Z · VERSION: 1.4.1`. Monospace, 12px, auto-scrolling at 40px/s via CSS `animation: marquee linear infinite`. Pauses on hover. ## Prompts for Implementation Build scire.dev as a **static knowledge instrument** — a fully-rendered dashboard that populates from a JSON data file on load. No server-side rendering required. No build step beyond a single HTML file with inline or linked CSS and vanilla JS. **Grid implementation:** Use CSS Grid with `display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 64px 140px 140px 32px 1fr 1fr 1fr 56px; height: 100dvh; overflow: hidden`. The dashboard must fill the viewport exactly with `overflow: hidden` on the body — no scrolling of the outer page. Content wells scroll internally. **Tilt-3D on knowledge domain cards:** Each of the 8 domain cards in rows 2–3, cols 5–12 responds to pointer movement with a subtle 3D tilt. Use `transform: perspective(800px) rotateX(Xdeg) rotateY(Ydeg)`. Calculate X and Y from the pointer position relative to the card center: `rotateX = (centerY - mouseY) / cardHeight * 8` and `rotateY = (mouseX - centerX) / cardWidth * 8`. Max rotation: ±8 degrees. Apply `transition: transform 80ms linear` on mousemove for fluidity. On mouseleave, ease back to flat with `transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1)`. The crystalline facet SVG in the hero cell also tilts — but at half the rotation factor (±4 degrees), creating a parallax depth relationship between hero and cards. **Crystal facet SVG construction:** Generate the facet polygon pattern using a Voronoi-style manual approach: place 40–60 seed points randomly within the cell bounds, then define polygon regions by hand or using a simple deterministic algorithm seeded by the domain name string. Color each polygon within the allowed tonal range. The SVG is inlined and static — no runtime generation. Both dark and light mode variants are pre-rendered and toggled via a CSS class on ``. **Content well behavior:** The primary content well (rows 5–7, cols 1–8) scrolls internally on `overflow-y: auto` with a custom scrollbar: 4px wide, `#333333` thumb, no track background. List entries appear instantly on domain selection — no animation. Active entry gets a `border-left: 2px solid #e8e8e8` marker (dark mode). Entries are filtered by tag via small monospace pill buttons above the list. **Context panel crystalline map:** Render the relational lattice graph as a pre-computed SVG. Use `` elements for edges and `` for diamond nodes. The entire graph sits in a 240×240 viewBox, scaled to fill the context panel's available height minus 48px for metadata. On domain change, the graph cross-fades (opacity 0→1 over 160ms). **Mode toggle:** A single character — `◼` (dark) or `◻` (light) — in the nav bar's far right. Click toggles a class on ``. No animation, no transition — the mode switch is instant, brutalist, decisive. Store preference in `localStorage`. **Avoid all of the following:** - CTA buttons ("Get started", "Sign up", "Learn more") - Pricing panels or subscription grids - Testimonial or stats sections - Hero-dominant full-screen splash - Parallax background layers - Staggered entrance animations - Gradient backgrounds or mesh textures - Any warm color (yellows, reds, oranges) **Storytelling approach:** The page tells its story through the grid itself. When a visitor arrives, the dashboard is already populated — the knowledge is already there, organized, waiting. There is no onboarding, no hero text explaining what the site is. The structure is self-explanatory: 12 domains, each a facet of the same crystal. The visitor navigates by clicking domain cards, scanning the content well, and exploring the lattice map. The experience is non-linear, non-narrative, instrument-like. Comprehension accumulates through exploration, not through scrolling a pre-scripted sequence. ## Uniqueness Notes **Chosen seed:** `aesthetic: brutalist, layout: dashboard, typography: bebas-bold, palette: monochrome, patterns: tilt-3d, imagery: icon-heavy, motifs: crystalline, tone: minimal` **Differentiators from other designs in the registry:** 1. **Full-viewport non-scrolling dashboard with internal scroll cells.** 84% of the registry uses centered layouts; 63% uses full-bleed scroll. scire.dev uses neither — it is a fixed 12×8 CSS grid that occupies exactly `100dvh` with no outer scroll. Content wells have internal scroll only. This is the instrument-panel paradigm, not the long-form web page paradigm. 2. **Absolute monochrome — zero hue, including in hover and active states.** 88% of the registry uses warm palettes; even "dark mode" designs tend to introduce accent colors. scire.dev admits no hue whatsoever. The entire visual language — icons, borders, SVG facets, hover fills, selection indicators — operates on the grey axis from `#0d0d0d` to `#ffffff`. Perceived depth comes exclusively from geometry and tonal stepping. 3. **Crystalline geometry as both motif and information architecture.** The crystalline facet pattern is not decoration — it encodes domain identity. The relational lattice map in the context panel is a literal crystal graph of knowledge relationships, rendered as a static SVG diamond-node diagram. The motif is structural, not cosmetic. 4. **Tilt-3D applied to knowledge navigation cards, not hero imagery.** The registry's tilt-3d implementations (6%) typically apply to hero images or decorative panels. Here, the 3D tilt is applied to the 8 primary navigation cards, making the gesture of domain selection feel physical — like tilting a mineral specimen under a lamp. The hero cell also tilts at half factor, creating a depth hierarchy between navigation and content. 5. **Latin domain name treated as a design constraint.** `SCIRE` in Bebas Neue at 144px is not a logo or wordmark — it is a declaration. The word means "to know" and the typography performs that claim: large, blunt, certain, occupying its cell without apology. **Avoided patterns (overused in registry):** - parallax (75%) — explicitly banned; no parallax layers anywhere - stagger (50%) — no staggered entrance animations - centered layout (84%) — replaced by dashboard grid - full-bleed (63%) — replaced by cell-bounded panels - warm palette (88%) — replaced by strict monochrome - hand-drawn aesthetic (56%) — antithetical to brutalist-crystalline - photography (86%) — no photographs; icon-heavy geometric vocabulary only