# Design Language for aei.st ## Aesthetics and Tone aei.st channels the visual spirit of a forgotten 1927 Parisian exposition pavilion -- one where Cassandre's poster work meets Buckminster Fuller's geodesic fantasies, all printed on stock that has yellowed beautifully over a century. The aesthetic is **avant-garde**: an unapologetic collision of Art Deco geometric precision with speculative futurism, rendered entirely through the tactile warmth of aged paper. Imagine a manifesto for a movement that never existed, typeset on a Linotype machine, its pages warped and foxed by time, yet describing technologies that feel impossibly contemporary -- quantum entanglement, neural meshes, synthetic biology -- in the ornamental language of the Roaring Twenties. The tone is **minimal** -- not minimalism as whitespace fetish, but minimalism as restraint. Every element earns its place. There is no friendliness, no conversational warmth, no playful wink. Instead, the site communicates with the cool confidence of a museum placard beside a priceless artifact. Sentences are short. Typography does the emotional heavy lifting. Silence -- visual silence, the vast negative spaces between elements -- is the primary compositional tool. The site whispers where others shout. The mood oscillates between archival reverence and quiet technological awe: a love letter to futures past, printed on paper that remembers everything. ## Layout Motifs and Structure The layout follows a **ma-negative-space** philosophy borrowed from Japanese spatial aesthetics -- "ma" (間), the charged void between objects that gives them meaning. Rather than filling the viewport, content occupies deliberate islands separated by vast, breathing expanses of textured paper. The negative space is not emptiness; it is the primary design element, creating tension and rhythm through what is absent. **Structural Principles:** - **Golden Section Anchor Grid:** An invisible 8-column grid based on golden ratio proportions (1:1.618) governs all placement. Content blocks snap to columns 2-4 or 5-7, never spanning the full width. The outermost columns (1 and 8) remain perpetually empty, forming paper margins that frame the content like a broadsheet's gutters. - **Vertical Cadence System:** Sections are separated by a minimum of 40vh of empty paper-textured space. This creates a scrolling rhythm where the reader alternates between content absorption and meditative pause. The paper texture continues through these voids, reinforcing the material metaphor. - **Asymmetric Drift:** No two consecutive content blocks share the same horizontal alignment. If a heading sits at column 2, the following paragraph drifts to column 5. If an image anchors left, the caption floats right. This deliberate asymmetry creates a visual path that zigzags down the page like reading a hand-composed broadsheet where the typesetter made intentional, artistic placement decisions. - **Floating Notation Layer:** A secondary layer of small, rotated annotations (at -3deg to +5deg tilts) occupies the margins. These are decorative -- snippets of pseudo-mathematical formulae, dates, archival reference numbers (e.g., "REF. AEI-1927-IV-038") -- rendered in a small monospace font at 0.65rem and opacity 0.35. They create the impression of marginalia in a research notebook without competing for attention. - **Section Dividers:** Horizontal rules are replaced by thin Art Deco geometric borders -- a single line flanked by small diamond or chevron ornaments, rendered in CSS using `border-image` or inline SVG. These dividers span only 30-40% of the viewport width, centered, maintaining the ma principle. ## Typography and Palette **Typography:** - **Headlines / Display:** "Poiret One" (Google Fonts) -- a pure Art Deco geometric typeface with perfectly circular bowls, uniform stroke width, and the unmistakable elegance of 1920s Parisian poster design. Used at 4rem-7rem for primary headings, 2.5rem-3.5rem for section titles. Weight: 400 (the only available weight). Letter-spacing: +0.08em for an airy, engraved-billboard quality. Line-height: 1.05. All display text is set in uppercase, reinforcing the monumental, inscriptional quality of Art Deco lettering. - **Secondary Display / Subtitles:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif inspired by vintage Scandinavian design with a distinctly Art Deco skeleton: tall ascenders, uniform stroke weight, and elegant geometric curves. Weight: 300 (Light) for subtitles and navigation, 600 (SemiBold) for emphasis. Size: 1.2rem-2rem. Letter-spacing: +0.12em. Always uppercase. This font bridges the display and body typographic registers. - **Body / Long-form:** "Spectral" (Google Fonts) -- an elegant, high-contrast transitional serif with fine hairlines and sharp bracketed serifs, designed specifically for screen reading. Its formal, scholarly character complements the Art Deco display fonts without competing. Weight: 300 (Light) for body text, 500 (Medium) for emphasis. Size: 1.05rem-1.15rem. Line-height: 1.85 for generous leading that reinforces the spatial breathing of the layout. Letter-spacing: +0.01em. - **Notation / Marginalia:** "IBM Plex Mono" (Google Fonts) -- used exclusively for the floating annotation layer: reference numbers, pseudo-formulae, small-print metadata. Weight: 300 (Light). Size: 0.6rem-0.75rem. Opacity: 0.3-0.45. Color: #6B5B4F. **Palette:** The palette enforces **high-contrast** through a stark opposition between near-black ink and aged-paper warmth, punctuated by a single accent derived from Art Deco metallic gold. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Paper Base | Foxed Parchment | `#F0E6D3` | Warm, yellowed paper -- the dominant background tone. Not white, never white. | | Paper Shadow | Aged Vellum | `#D9CBAE` | Deeper paper tone for subtle depth in layered sections and card backgrounds. | | Primary Ink | Printer's Black | `#1A1611` | Near-black with warm brown undertones, evoking letterpress ink absorbed into fibrous paper. | | Secondary Ink | Faded Charcoal | `#4A4035` | For body text and secondary elements -- softer than the primary, like a second-press print. | | Accent | Tarnished Gold | `#B8860B` | Dark goldenrod -- the single chromatic accent. Used sparingly for Art Deco ornaments, divider chevrons, and interactive highlights. Never applied to large surfaces. | | Accent Hover | Burnished Brass | `#DAA520` | Brighter gold for hover states and active elements. The only moment of luminosity in the palette. | | Foxing Spots | Paper Stain | `#C4A76C` | Semi-transparent spots scattered across the paper texture to simulate age-related foxing. Applied as CSS radial gradients at opacity 0.15-0.25. | | Counter-shade | Soot Wash | `#2E2820` | Very dark warm gray for inverted sections -- rare, used only for one or two statement blocks where text reverses to parchment-on-soot. | ## Imagery and Motifs **Paper-Aged Texture System:** The foundational visual layer is a **paper-aged** texture that covers the entire viewport. This is achieved through multiple overlapping CSS techniques: 1. **Base Paper:** A subtle `background-image` using CSS gradients -- a combination of `repeating-linear-gradient` at slight angles (2deg, 175deg) with stops alternating between `#F0E6D3` and `#EDE0CC` at irregular intervals (0, 23%, 24%, 47%, 48%, 71%, 72%, 100%) creates a faint horizontal fiber pattern like handmade paper. 2. **Foxing Simulation:** 12-15 `radial-gradient` circles scattered across the page using `background-position` with viewport-relative units. Each circle uses `#C4A76C` at center fading to transparent, with diameters between 80px and 250px, at opacity 0.08-0.2. These simulate the age spots that appear on old paper. 3. **Edge Darkening:** A `box-shadow: inset 0 0 200px rgba(26,22,17,0.15)` on the `` creates a subtle vignette that darkens the paper toward the viewport edges, evoking the way old documents darken at their margins. 4. **Grain Layer:** A `::before` pseudo-element on `` with a CSS noise pattern (`filter: url(#noise)` referencing an inline SVG `feTurbulence` with baseFrequency 0.9 and numOctaves 4) at `opacity: 0.04` and `mix-blend-mode: multiply` adds microscopic grain. **Futuristic Motifs:** Superimposed on the aged paper are **futuristic** decorative elements rendered in the Art Deco visual language: - **Geometric Constellations:** SVG patterns of connected nodes and edges forming abstract polyhedra -- icosahedra, dodecahedra, truncated octahedra -- drawn with thin strokes (0.5px-1px) in `#B8860B` at low opacity (0.12-0.2). These float in the negative space between content blocks, slowly rotating via CSS `@keyframes` (360deg over 120s). They evoke both Art Deco sunburst geometry and futuristic molecular/network diagrams. - **Chevron & Sunburst Ornaments:** Small decorative elements placed at section dividers and content block corners. Pure CSS chevrons (using `border` and `transform: rotate(45deg)`) and sunburst patterns (radial arrangements of thin lines using `conic-gradient`) in tarnished gold. These are the primary Art Deco fingerprint. - **Blueprint Grid Whisper:** In certain sections, a faint grid of thin lines (`#4A4035` at opacity 0.04) appears behind content, as if the page were printed over a discarded architectural blueprint. The grid uses a `repeating-linear-gradient` with 1px solid lines every 40px in both axes. - **Counter-Animated Numbers:** Large typographic counters (numbers, dates, reference codes) that animate using a **counter-animate** pattern -- digits roll upward like an analog odometer or a split-flap display at a train station. Each digit column independently increments using `@keyframes` that translate a strip of digits vertically, with each column offset by a slight delay (100-200ms stagger). The numbers themselves are rendered in "Poiret One" at 5rem-8rem in `#1A1611` at opacity 0.08, serving as enormous watermark-scale background elements that silently count while the reader scrolls. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site unfolds as a singular, unbroken vertical scroll -- a reading experience that feels like unrolling a very long, very beautiful scroll of aged paper. There is no navigation bar. There is no hamburger menu. There is no header in the conventional sense. The domain name "aei.st" appears once, in the center of the first viewport, set in "Poiret One" at 6rem, letter-spaced at +0.3em, in `#1A1611`. Below it, nothing -- just paper -- for at least 30vh. Then the first content block drifts in from the left margin. **Scroll-Driven Choreography (Minimal):** Animation is used with extreme restraint. Elements do not bounce, flip, or scale. Instead, they perform only two types of motion: 1. **Fade-translate:** Content blocks begin at `opacity: 0; transform: translateY(24px)` and resolve to `opacity: 1; transform: translateY(0)` over 800ms with `ease-out` timing. Triggered when the element's top edge crosses the 75% viewport threshold. Each block within a group staggers by 150ms. 2. **Counter-animate watermarks:** The large background numbers described in Imagery roll their digits continuously using CSS `@keyframes` -- this is the only perpetual animation. Everything else is triggered once and holds its final state. **Interaction Model:** Hover states are subtle and gold-accented. Links and interactive elements have no underline by default. On hover, a thin 1px bottom border draws itself from left to right using `transition: width 400ms ease-out` in `#B8860B`. No element changes color on hover -- only the gold border appears. Cursor remains `default` except over explicitly clickable elements where it becomes `pointer`. **Art Deco Section Transitions:** Between major content sections, a full-width decorative divider appears: a thin horizontal line (1px, `#B8860B`) flanked by two small diamond shapes (8px CSS squares rotated 45deg). This divider fades in 200ms after the preceding content has fully appeared. The line is only 35% viewport width, centered, with 32.5% transparent margins on each side. **AVOID:** - CTA-heavy layouts, pricing blocks, stat-grids - Cards with shadows and rounded corners - Gradient backgrounds or color transitions - Hamburger menus, sticky navigation, floating action buttons - Photography or bitmap imagery of any kind - Emoji, icons from icon libraries, or illustrative vector art - Any animation that draws attention to itself rather than the content **BIAS TOWARD:** - Full-screen narrative with deliberate pacing - Vast negative space as a compositional element - Typography-driven hierarchy (no visual aids beyond type size and weight) - Material authenticity (everything should feel printed on real paper) - The uncanny beauty of old documents describing future technologies ## Uniqueness Notes **Differentiators from other designs:** 1. **Art Deco x Futurism Temporal Collision:** No other design in the portfolio combines 1920s Art Deco decorative language with speculative futuristic content. This is not retro-futurism (which typically evokes 1950s-60s space age); it is specifically the pre-war European avant-garde applied to post-2020 technological concepts. The visual language of Cassandre and Lempicka is used to frame ideas about neural networks and quantum computing. 2. **Ma-Negative-Space as Primary Element:** While other designs use whitespace for breathing room, this design treats negative space as the dominant compositional material -- content occupies less than 40% of the total page area. The remaining 60%+ is intentional, textured void. The ma-negative-space layout pattern appears in only 8% of existing designs; here it is the entire structural philosophy. 3. **Paper-Aged Material Fidelity:** The paper-aged imagery pattern (0% frequency in existing designs) is implemented not as a decorative overlay but as the foundational material reality of the site. Every pixel of background is treated as physical paper with fiber grain, foxing spots, edge darkening, and vignetting. No other design achieves this level of material simulation. 4. **Counter-Animate Mechanical Watermarks:** The counter-animate pattern (4% frequency) is used here in a novel way -- not as a visible UI element (stats counter, pricing ticker) but as enormous, nearly-invisible background watermarks. These rolling odometer digits operate at 0.08 opacity, creating a subliminal sense of time passing, of data accumulating, that reinforces the archival-futuristic theme without demanding conscious attention. 5. **Zero-Icon, Zero-Image Visual System:** The design contains no photographs, no illustrations, no icons, no SVG art beyond geometric ornaments. All visual interest comes from typography, paper texture, geometric Deco ornaments, and negative space. This is radically austere compared to 62% of designs using photography and 95% using minimal/icon imagery. **Chosen Seed / Style:** `aesthetic: avant-garde, layout: ma-negative-space, typography: art-deco-display, palette: high-contrast, patterns: counter-animate, imagery: paper-aged, motifs: futuristic, tone: minimal` **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with avant-garde (0%) - centered layout (95%) -- replaced with ma-negative-space (8%) - scroll-triggered patterns (100%) -- replaced with counter-animate (4%) - warm palette (100%) -- replaced with high-contrast (54%, still common but essential for the concept) - friendly tone (95%) -- replaced with minimal (0%) - mono typography (95%) -- replaced with art-deco-display (0%) - minimal imagery (95%) -- replaced with paper-aged (0%) - parallax patterns (70%) -- no parallax used - vintage motifs (54%) -- replaced with futuristic (4%)