# Design Language for scire.dev ## Aesthetics and Tone scire.dev -- from the Latin "to know" -- channels the visual energy of a 1970s university computing lab crossed with a radical underground magazine. The aesthetic is **retro** but not nostalgic: think of an alternate history where the Whole Earth Catalog was produced by a team of typographers obsessed with Letraset transfer sheets, cathode phosphor green, and the raw pulse of early electronic music. The mood is **energetic** -- not the shallow energy of startup hustle culture, but the crackling intellectual excitement of a late-night argument about epistemology, scrawled diagrams on chalkboards, the moment when a FORTRAN compile finally runs clean and the printout spools onto the floor. The visual world draws from three specific reference points: (1) the typographic experiments of Herb Lubalin and his Avant Garde magazine covers from 1968-1971, where serif letterforms were pushed to their structural limits; (2) the phosphor-glow aesthetic of DEC VT100 terminals, where green-on-dark characters burned themselves into memory; (3) the instructional diagrams in 1960s-70s scientific textbooks -- cross-hatched illustrations, hand-labeled axes, the beautiful austerity of knowledge rendered in ink before the age of digital illustration. The tone is **energetic** and intellectually charged. This is not a calm library; it is the workshop where knowledge is forged, tested, and occasionally detonated. Every visual element should feel like it is vibrating at a frequency just above rest -- alive with the potential energy of ideas about to be released. ## Layout Motifs and Structure The layout follows an **f-pattern** reading structure -- the natural scanning path of a reader encountering dense informational content. But this is not a generic f-pattern; it is weaponized. The horizontal "bars" of the F are treated as distinct compositional bands, each with different visual density, creating a rhythmic alternation between concentrated information zones and breathing spaces. **Structural Principles:** - **Primary Scan Bar (Top):** A full-width horizontal band occupying the top 15-20% of each "page" section. This is the high-density zone -- bold headlines, key data, the hook. Typography here is large (4rem-6rem), tightly tracked, and bleeds into the structural edges of the viewport. Background: deep charcoal (#1c1c24) with subtle organic-blob SVG shapes floating behind the text in muted steel (#4a4a5e). - **Secondary Scan Bar (Middle):** A narrower horizontal band (65-75% of viewport width, left-aligned) that contains the core narrative content. This bar is where the retro energy concentrates -- content is presented in two uneven columns (60/40 split), with the wider column carrying body text and the narrow column holding annotations, asides, and small illustrative blobs. - **Vertical Scan Zone (Left Edge):** The left 8-10% of the viewport is a persistent "margin column" -- a retro callback to the annotation margins of academic texts. This zone carries section numbers, small organic-blob icons, navigational dots, and occasionally a vertical text label rotated 90 degrees. Color: muted silver (#7a7a8e) on the charcoal background. - **Blob Interruptions:** At irregular intervals (every 2-3 sections), an organic blob shape breaks the f-pattern entirely, expanding from the margin column to consume 40-60% of the viewport width. These blobs carry pull-quotes, key insights, or visual diagrams, and their amorphous boundaries create a deliberate tension with the rigid f-pattern grid. The blobs use CSS `clip-path` with `polygon()` points animated via morph transitions -- never perfectly circular, always slightly amoebic. - **Section Spacing:** Sections are separated by 120px-180px of empty space, punctuated by a single thin horizontal rule (#3a3a4e, 1px) that extends only 40% of the viewport width from the left edge -- a restrained, retro-editorial gesture. - **No sticky navigation.** The site uses a fixed position indicator in the top-right corner: a small circle (16px diameter) that morphs between organic blob shapes as the user scrolls through sections, serving as both progress indicator and visual motif echo. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) -- weight 900 (Black) for maximum impact. This high-contrast serif with its dramatic thick-thin strokes channels the energy of 1970s editorial design -- the era when serif type was pushed to its expressive limits in magazine covers and protest posters. Used at 3.5rem-6rem for primary headings, 2rem-2.8rem for section titles. Letter-spacing: -0.03em (tight, aggressive). Line-height: 1.05. Transform: occasionally uppercase for single-word section headers to amplify the retro-editorial punch. - **Body / Narrative:** "Source Serif 4" (Google Fonts) -- weight 400 (Regular) for body, 600 (SemiBold) for emphasis. A classic serif with excellent readability at body sizes (1rem-1.15rem) that maintains the serif-classic identity without competing with the display type. Line-height: 1.65. Letter-spacing: +0.005em. Paragraph max-width: 42em. - **Annotations / Asides:** "IBM Plex Mono" (Google Fonts) -- weight 400 at 0.8rem-0.9rem. Used exclusively in the margin column, code references, and small labels. This monospace face bridges the retro-computing reference (terminal aesthetic) with the serif-classic primary voice. Color: always muted silver (#7a7a8e) to maintain visual hierarchy. - **Accent / Labels:** "Space Grotesk" (Google Fonts) -- weight 500 at 0.7rem-0.85rem, used sparingly for UI labels, section numbers, and navigational text. All-caps with +0.12em letter-spacing. This sans-serif provides geometric contrast against the dominant serif system. **Palette (Cool Grays):** - **Background Primary:** #0f0f17 -- near-black with a blue-violet undertone, evoking the darkness of a CRT monitor's unlit pixels - **Background Secondary:** #1c1c24 -- deep charcoal, the primary surface for content sections - **Surface Elevated:** #2a2a36 -- used for cards, blob interiors, and elevated elements - **Border / Rules:** #3a3a4e -- muted blue-gray for horizontal rules and structural lines - **Text Muted:** #7a7a8e -- silver-gray for annotations, margin text, and secondary information - **Text Primary:** #c8c8d4 -- cool off-white for body text, readable but not harsh - **Text Headlines:** #e8e8f0 -- bright cool white for display type, near-full brightness - **Accent Warm:** #d4a054 -- a single warm accent (aged amber/brass) used extremely sparingly for key highlights, the progress indicator blob, and interactive hover states. This warm note against the cool-gray field creates a deliberate chromatic tension -- like the amber power LED on a gray steel computer chassis. - **Accent Cool:** #5a7a9e -- a desaturated steel-blue for secondary accents, link underlines, and blob outlines ## Imagery and Motifs **Organic Blob System:** The primary visual motif is **organic blobs** -- amorphous, amoeba-like shapes that serve as both decorative elements and functional containers. These blobs are generated using SVG `` elements with smooth bezier curves, each one unique in silhouette but sharing a family resemblance: roughly elliptical, with 5-8 control points creating gentle undulations. No blob is ever symmetrical. No blob is ever a perfect circle or oval. **Blob Taxonomy:** 1. **Ambient Blobs (Background):** Large (300px-600px diameter equivalent), extremely low opacity (0.03-0.06), positioned in the background layer. Fill: #2a2a36 or #3a3a4e. These drift slowly using CSS keyframe animations (transform: translate + scale, 20-40 second cycles). They create a sense of organic atmosphere without demanding attention -- like cells under a microscope, barely visible. 2. **Structural Blobs (Content Containers):** Medium (200px-400px), used as clip-path masks for pull-quote sections and key insight panels. These have visible borders (1px #5a7a9e) and a slightly elevated surface (#2a2a36). When the user scrolls them into view, they morph from a compressed ellipse to their full organic shape over 800ms using CSS `transition` on `clip-path` coordinates. 3. **Icon Blobs (Margin):** Small (24px-48px), used in the margin column as section markers and navigational elements. Fill: #d4a054 (the amber accent) at 0.7 opacity. Each one has a unique organic silhouette. On hover, they pulse gently (scale 1.0 to 1.15, 400ms ease-in-out). 4. **Diagram Blobs:** Used in illustrative moments -- Venn-diagram-like overlapping blobs that visualize conceptual relationships (knowledge categories, skill intersections). These use semi-transparent fills (#5a7a9e at 0.2, #d4a054 at 0.15) so overlapping regions create third colors through additive blending. **Retro-Scientific Illustrations:** Secondary imagery draws from the visual vocabulary of vintage scientific diagrams: hand-labeled axes rendered in IBM Plex Mono, cross-hatched shading patterns created with repeating SVG `` elements at 45-degree angles (stroke: #3a3a4e, stroke-width: 0.5px, gap: 4px), and schematic connection lines with small terminal dots (4px circles in #7a7a8e). These elements appear in the annotation margins and within structural blobs, reinforcing the "knowledge as living organism" metaphor. **No Photography.** The entire visual system is abstract, diagrammatic, and typographic. Every visual element is generated through SVG, CSS, or typographic treatment. This zero-photography approach reinforces the domain's identity as a space of pure knowledge -- ideas without faces. ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens to a full-viewport screen (#0f0f17) with a cluster of 5-7 ambient blobs drifting slowly across the dark field. After a 1.5-second pause, the domain name "scire.dev" appears letter-by-letter (not typewriter-style, but morph-style: each letter starts as a small organic blob that morphs into its letterform over 600ms, staggered by 120ms per letter). The typography: Playfair Display Black, 5rem, #e8e8f0, centered horizontally but positioned at 38% from top. Below the name, after a 400ms pause, the tagline "to know" fades in at 1rem, Source Serif 4 Italic, #7a7a8e. A single amber blob (the progress indicator) appears in the top-right corner and begins its slow shape-morphing cycle. **Scroll-Triggered Section Reveals:** As the user scrolls past the hero, the f-pattern structure emerges. Each section enters the viewport with a coordinated animation sequence: 1. The left-margin elements (section number, vertical label) slide in from the left over 400ms (transform: translateX(-20px) to 0, opacity 0 to 1). 2. The primary scan bar headline morphs in -- each word starts as a compressed horizontal blob and expands to reveal the letterforms (clip-path animation, 500ms per word, staggered by 150ms). 3. The body text fades up from 15px below over 600ms, slightly delayed (200ms after headline completes). 4. Structural blobs, if present, morph from compressed ellipses to their full organic forms over 800ms. **Morph Transitions Between Sections:** The signature animation pattern is **morph** -- smooth shape interpolation between states. Every state change uses morph transitions rather than cuts or fades: - Navigation blob morphs between shapes as sections change - Structural blobs morph when entering/leaving viewport - On link hover, the underline (a thin #5a7a9e line) morphs into a small organic blob shape that envelops the text baseline - Section divider lines morph from 0% width to 40% width as they scroll into view **Interactive Blob Exploration:** At one or two key moments in the page, an interactive zone allows the user to hover over diagram blobs, causing them to expand, reveal labels (IBM Plex Mono, 0.75rem, #c8c8d4), and draw connection lines to adjacent blobs. This creates a living diagram that the user discovers through cursor movement -- a micro-experience of the "scire" (to know) concept made tangible through interaction. **Cross-Hatch Texture Layer:** Behind the main content, at very low opacity (0.02-0.04), a repeating SVG pattern of 45-degree cross-hatching covers the entire page. This provides a subtle paper-like texture that prevents the dark background from feeling like a void. The cross-hatch lines use #3a3a4e at the specified low opacity, creating a barely-perceptible grid that echoes vintage scientific paper. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables. This is a narrative knowledge space, not a conversion funnel. Every element tells part of the story; nothing exists purely to drive action. **Performance Note:** All blob shapes are defined as static SVG paths with CSS transitions on clip-path or transform properties. No JavaScript animation libraries required for the core experience -- morph transitions use CSS `transition: clip-path 800ms cubic-bezier(0.34, 1.56, 0.64, 1)` for the characteristic organic spring-settle motion. ## Uniqueness Notes **Differentiators from other designs:** 1. **F-Pattern as Compositional System, Not Just Reading Path:** While f-pattern appears at only 2% frequency in the portfolio, other uses treat it as a passive reading optimization. This design elevates the f-pattern into an active compositional framework -- the horizontal bars of the F become distinct visual bands with different densities, typographic scales, and color treatments, making the layout itself a rhythmic instrument rather than a convenience. 2. **Blob-to-Letter Morph Typography:** No other design in the portfolio uses organic blobs as the genesis state for typographic reveals. The signature animation -- where each letter of the domain name begins as an amorphous blob and morphs into its serif letterform -- creates a unique visual metaphor (knowledge emerging from formlessness) that ties the animation pattern directly to the domain's meaning ("scire" = to know). 3. **Zero-Photography Abstract Visual System:** While minimal imagery (95%) and photography (72%) dominate the portfolio, this design uses absolutely no photographic imagery. Every visual element is generated through SVG blobs, CSS cross-hatching, and typographic treatment. This creates a deliberately austere, diagrammatic visual world that stands apart from the photography-dependent majority. 4. **Single Warm Accent Against Cool-Gray Monotone:** The palette is almost entirely cool grays (#0f0f17 through #e8e8f0), with a single warm accent (#d4a054 amber) used for fewer than 5% of visual elements. This extreme chromatic restraint -- one warm note in a field of cool -- creates a distinctive visual signature unlike the warm (100%) and gradient (88%) palettes that dominate the portfolio. 5. **Retro-Scientific Diagrammatic Language:** The combination of cross-hatched SVG textures, hand-labeled axes in monospace type, and schematic connection lines creates a unique illustrative vocabulary borrowed from 1960s-70s scientific textbooks. No other design in the portfolio synthesizes this specific reference point with organic blob motifs. **Chosen Seed/Style:** aesthetic: retro, layout: f-pattern, typography: serif-classic, palette: cool-grays, patterns: morph, imagery: organic-blobs, motifs: organic-blobs, tone: energetic **Avoided Overused Patterns:** Deliberately avoided playful aesthetic (95%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered as primary pattern (96%), friendly tone (98%), vintage motifs (88%), and minimal/photography imagery (95%/72%). Every seed dimension targets underused categories to maximize portfolio diversity.