# Design Language for aei.st ## Aesthetics and Tone aei.st is a **memphis-design solarium pressed flat against a terracotta evening** — imagine if Ettore Sottsass had been commissioned in 1986 to design a roadside data observatory in Tuscany, and the only paint available was the kind that dried into baked-clay dust. The aesthetic is **memphis bold shapes filtered through a warm-inviting terracotta dusk**, where every squiggle, checkerboard, and lozenge is rendered not in the typical lime-and-magenta of vintage Memphis Group postcards, but in cured-clay oranges, cocoa browns, and the dusty pink of a sun-bleached awning. The mood is **eclectic-warm and vaguely hospitable** — a domain that hosts data the way a courtyard hosts a long lunch. The doubled vowels and the stutter of the letterforms in "aei" are read as **a sequence of three open mouths** — the "a" wide, the "e" half-closed, the "i" pursed — and the design literalizes this rhythm: every Memphis primitive on the site arrives in triads, three squiggles per row, three diagonal sashes per section, three lozenges per cluster. The `.st` extension is read as **stationary** — a grounded, baked-earth permanence beneath the playful primitives floating above. Visitors should feel they have walked into a warm room where someone has been arranging colored tiles on a long pine table; nothing here is selling anything; the tiles are simply being arranged. The tone is unabashedly **warm-inviting** — never sterile, never icy, never aggressive. The site does not announce itself, it invites you to lean against the doorframe and watch the diagonals slide. Underneath the playfulness sits a quiet competence: the Memphis primitives are precise, the diagonals are exact, the warmth is engineered, not casual. This is hospitality with the crispness of a typeset menu. ## Layout Motifs and Structure The composition is built on **diagonal-sections** at a fixed **18-degree counter-clockwise rake** — every section boundary is a slanted seam, never a horizontal cut. (Diagonal-sections are at 2% in the frequency analysis: this site claims that empty room.) The page reads as **seven slabs of warm clay leaning against one another**, each slab tilted, each one a different terracotta tone, each one carrying its own cluster of three Memphis primitives. - **The 18-degree rule.** Every section divider, every floating squiggle baseline, every diagonal sash, every typographic underline is slanted at exactly 18° — not 15°, not 20°, not 22.5°. This single shared angle is the connective tissue of the entire design. Diagonals at any other angle are **forbidden**. - **The Slab Sequence (vertical scroll, seven slabs):** 1. **Greeting Slab** — terracotta `#C8623E`, hosts the wordmark and a single squiggle. 2. **Triad Slab** — dusty cream `#F4E4C9`, three lozenges arranged diagonally. 3. **Data Slab** — burnt sienna `#A04A2E`, hosts a small hand-rendered chart. 4. **Quietude Slab** — clay-pink `#E8B89A`, mostly empty space, a single floating checkerboard. 5. **Triad Slab II** — cocoa brown `#5C3A28`, three squiggles in a horizontal row. 6. **Data Slab II** — terracotta-warm `#C8623E` again, a second chart in conversation with the first. 7. **Farewell Slab** — soft cream `#F4E4C9` with a single Memphis confetti scatter and one farewell line. - **No card grid, no bento, no full-bleed hero.** The page is **slabs all the way down**. There is no navigation bar, no footer block, no logo wall, no testimonial row. - **Triadic clustering.** Every Memphis primitive on a slab appears in groups of exactly **three** — three squiggles, three lozenges, three checker-tiles, three confetti motes. Singletons exist only as the wordmark itself; pairs are forbidden. - **The 18° gutter.** Where two slabs meet, a 4px hairline of `#2A1810` (charred-wood near-black) runs along the seam. This hairline is the only true straight edge in the design, and it is always slanted. - **Slide-reveal as transition mechanic.** As the visitor scrolls, each new slab **slides in from the upper-right** along the 18° axis, overlapping the previous slab by 12vh before settling. (Slide-reveal sits at 2% in the frequency analysis — this site adopts it as its sole scroll-driven pattern, replacing the parallax/stagger that 90%+ of designs lean on.) ## Typography and Palette **Fonts (Google Fonts only — eclectic-hybrid means three voices in conversation, never blended):** - **Display & Wordmark — *Fraunces* (Variable, opsz 144, wght 900, SOFT 100)** — Used exclusively for the "aei.st" wordmark and the seven slab numerals. Set at 18° rotation, 144px → 220px, optical-size cranked to maximum, soft axis cranked to maximum so the serifs swell into terracotta blobs. Fraunces is chosen for its squashy, almost-edible curves; at SOFT 100 it stops looking like a serif and starts looking like a hand-pressed clay glyph. - **Editorial Body — *DM Mono* (Regular 400, Italic 400)** — Used at 16px/1.62 for all running prose. The mono adds a typewritten, courtyard-menu cadence; italics are used for slab subtitles and never for emphasis within prose. (Mono sits at 94% in the frequency analysis — but this design pairs it with two non-mono faces, breaking the typical mono-only treatment.) - **Accent & Captions — *Caprasimo* (Regular 400)** — Used at 11px–14px, all-caps, letter-spacing 0.18em, for slab labels ("SLAB 03 / DATA"), chart captions, and the single farewell line. Caprasimo is a chunky, cartoonish serif with terracotta-colored DNA — it looks like Cooper Black went to art school. Reserved exclusively for ornamental typographic punctuation. The three faces never share a line. Fraunces lives only in the wordmark and slab numerals. DM Mono lives only in body prose. Caprasimo lives only in labels and captions. This strict separation is the **eclectic-hybrid** principle: not blended fonts, but three distinct voices that take turns speaking. **Palette — terracotta-warm, eight tones, hand-mixed:** - `#C8623E` — Terracotta (primary slab base, two slabs) - `#A04A2E` — Burnt Sienna (data slab base) - `#5C3A28` — Cocoa Brown (triad slab II base, primary text on cream) - `#E8B89A` — Clay Pink (quietude slab base, soft tile fills) - `#F4E4C9` — Dusty Cream (greeting/farewell slab bases, body text on dark) - `#2A1810` — Charred Wood (the 18° hairlines, all hairline strokes, never a fill) - `#D9A066` — Sun-Bleached Tan (squiggle fills, accent confetti) - `#7B9E5C` — Olive Leaf (the single non-warm accent — appears exactly **three times** on the entire page, as the small green dot inside the third lozenge of each triad cluster, and never anywhere else) Gradients are **forbidden**. Every fill is flat, hand-mixed, slightly imperfect at the edges (a 0.5pt warm-edge halo at `#2A1810` 14% opacity to suggest baked clay rather than printer ink). ## Imagery and Motifs **Memphis-Group primitives, retrofitted to terracotta. No photography, no 3D renders, no stock illustration. Every visual is SVG, hand-built, and warm-tinted.** The design uses the canonical Memphis vocabulary — squiggles, checkerboards, lozenges, confetti, sashes — but each primitive is **filtered through a terracotta sensibility**: filled with cured-clay tones, edged with charred-wood hairlines, and rotated to the shared 18° axis. **The Six Memphis Primitives (each appears in triads, never alone except as accent):** 1. **The Squiggle** — A 5-bend hand-drawn sine line, 240px wide, 64px tall, 6pt stroke in `#2A1810`, no fill. Three squiggles per cluster, each rotated to a slightly different phase but all sitting on the 18° axis. On hover, the squiggle's bends animate in sequence (200ms per bend, ease-out-back) like a centipede stretching. 2. **The Checkerboard Tile** — A 3×3 checkerboard of `#5C3A28` and `#F4E4C9` squares, 96px total, rotated 18°. Three per cluster. The checker pattern is hand-irregular: each cell is offset by ±2px from its grid position to suggest hand-cut tile. 3. **The Lozenge** — A flattened oval, 180×72px, filled with one of the eight palette tones. Three per cluster, stacked diagonally. Inside the third lozenge of every cluster sits the single `#7B9E5C` olive dot — the only cool color on the page. 4. **The Diagonal Sash** — A 12px-thick band running corner-to-corner across a slab, filled with `#D9A066`. Each slab has at most one sash, and it carries the slab's numeral in Fraunces. 5. **Confetti Scatter** — Tiny 4–10px primitives (dots, plus-signs, half-circles, tiny squiggles) scattered across the farewell slab in a triadic-clustered Poisson distribution: every confetti mote belongs to a group of exactly three. 6. **The Wedge** — A right triangle, 96px hypotenuse, filled in burnt sienna `#A04A2E`, used as a corner anchor on data slabs. Three wedges per data slab, one per corner (the fourth corner is always empty — this asymmetry is intentional). **Data Visualization (the *imagery: data-viz* anchor):** The two data slabs each host a **hand-rendered chart** — but not a chart that conveys real data. The charts are **decorative data-viz**: a slanted bar chart whose bars are stacked Memphis lozenges (Slab 03), and a polar-coordinate squiggle plot whose radials are hand-drawn squiggles fanning out at 18° increments (Slab 06). Captions in Caprasimo read "FIG. 03 / WARMTH OVER TIME" and "FIG. 06 / SQUIGGLE FREQUENCY (THREE-CLUSTERED)" — fictional rigor, the visual humor is that the chart claims data while displaying ornament. The bars/radials animate on slab-reveal: each bar fills bottom-up over 480ms, each radial draws outward from the center over 720ms with a 60ms stagger. **Retro-patterns as background fill:** Slabs II, IV, and VI carry a **subtle retro pattern background** at 6% opacity: tiny hand-drawn dots arranged in a diamond grid (Slab II), 3px-spaced hand-drawn diagonal hatch (Slab IV), and a sparse confetti sprinkle (Slab VI). The pattern is rendered as an SVG `` element, never tiled raster. (Retro-patterns sit at 6% in motifs — this design adopts them deliberately to lean further into the Memphis lineage.) ## Prompts for Implementation Build aei.st as **a single-route, vertically scrolled, seven-slab solarium** — one HTML file, one CSS file, one JS module. Treat the page as a 75-second amble through a warmly-lit room where Memphis primitives are being arranged on baked clay slabs. There is no CTA, no pricing block, no stat grid, no testimonial row, no contact form, no email signup. There is only the slab sequence. **Storytelling structure (seven slabs, vertical scroll, slide-reveal transitions):** 1. **Greeting Slab.** The visitor lands on a terracotta `#C8623E` field. The wordmark "aei.st" sits center-left in 220px Fraunces, rotated 18°, with a single 240px squiggle floating above the period. After 1.4s of stillness, the squiggle's bends animate once, left to right, like a wave hello. No subtitle, no nav, no scroll cue beyond the slab's lower-right corner peeking out at 18°. 2. **Triad Slab I.** Cream `#F4E4C9` field. Three lozenges (terracotta, sun-bleached tan, dusty cream with the olive dot) stacked diagonally. A single line of DM Mono italic body prose sits below: *"three primitives, one angle, eighteen degrees."* The line types itself in over 1.8s, mono cursor blinking on completion. 3. **Data Slab I.** Burnt sienna `#A04A2E` field. Three burnt-corner wedges anchor three corners. The slab numeral "03" sits in Fraunces 220px on the diagonal sash. The Memphis-lozenge bar chart (FIG. 03 / WARMTH OVER TIME) occupies the slab center, animating bottom-up on slab-reveal. Six bars, each a stack of 1–6 lozenges, no axis labels, only the caption in Caprasimo. 4. **Quietude Slab.** Clay-pink `#E8B89A` field. Mostly empty. A single 96px checkerboard tile floats slightly off-center. A single line of Caprasimo all-caps reads "SLAB 04 / REST" along the lower-right diagonal seam. Five seconds of cursor stillness here triggers one extra confetti mote (warm tan) to drift across the slab from upper-right to lower-left at the 18° angle, taking 4 seconds. This is the only "easter egg" interaction on the entire site. 5. **Triad Slab II.** Cocoa brown `#5C3A28` field, body text now flips to dusty cream `#F4E4C9`. Three squiggles arranged in a horizontal row, each at 18°, each phase-shifted. The DM Mono prose line: *"warmth is a function of repetition; repeat."* The squiggle bends animate sequentially on visibility, left-to-right, total duration 1.2s. 6. **Data Slab II.** Terracotta `#C8623E` again. The polar-coordinate squiggle plot (FIG. 06 / SQUIGGLE FREQUENCY) draws outward from the center, 12 radial squiggles fanning at 18° increments — but the plot stops at radial #12, leaving the 13th position visibly empty (a deliberate asymmetry that mirrors the missing-corner wedge motif). 7. **Farewell Slab.** Cream `#F4E4C9` field. A single Caprasimo line: *"THE TILES STAY WARM AFTER YOU LEAVE."* Confetti scatter across the slab, every mote in a cluster of three. No "thanks for visiting", no social links, no email. The browser tab favicon is a single warm-tan squiggle. **Animation directives — slide-reveal is the soul of the build:** - **Slide-reveal scroll mechanic.** As the visitor scrolls, each incoming slab translates in from `translate(45vw, -25vh) rotate(0deg)` to `translate(0, 0) rotate(0deg)` over 720ms with a `cubic-bezier(0.22, 1, 0.36, 1)` easing — the slab appears to slide diagonally into place along the 18° axis. Slabs overlap by 12vh during the transition, so two slabs are visible simultaneously for ~300ms. Use IntersectionObserver, not scroll listeners. - **No parallax.** The 90%+ parallax convention is absent. Slabs do not move at different rates; they slide in, settle, and stay flat. - **No cursor-follow.** The 54% cursor-follow convention is absent. The cursor is a default cursor; no glow, no trail, no magnetic snap. - **Memphis primitive reveal.** Within each slab, the three primitives in each cluster reveal in stagger (220ms apart) but always **left-to-right along the 18° axis** — never top-down, never radially. - **Squiggle animation.** Squiggles animate by stroke-dashoffset draw on first reveal (400ms per bend, 5 bends = 2s total per squiggle), and by phase-bend on hover (each bend nudges 4px perpendicular to the squiggle axis, releases on mouseout with a soft spring). - **Chart animation.** Lozenge bar chart fills bottom-up; squiggle polar plot draws center-outward. Both charts animate exactly once on first reveal and never replay. - **No micro-interactions on text, no underline-draw, no magnetic buttons.** The body is text; the play is in the primitives. **CSS engineering notes:** - The 18° rotation should be applied via a single CSS custom property `--aei-tilt: 18deg`. Every diagonal element references this property. Changing one value reorients the entire site. - Slab backgrounds are flat `background-color`, never gradients. The slab edges are achieved via `clip-path: polygon(...)` cut at 18°, so each slab is a parallelogram that overlaps its neighbors by the 12vh gutter. - Memphis primitives are inline SVG, never image tags. Each primitive is a `` referenced by `` so a single SVG sprite block lives in the document head. - The 0.5pt warm-edge halo on every fill is achieved with `filter: drop-shadow(0 0 0.5px #2A1810);` applied at 14% via `opacity` or via a duplicated SVG layer. - Set `font-feature-settings: "ss01", "ss02"` on Fraunces to enable its swashy alternates in the wordmark. **AVOID — explicit anti-patterns for this build:** - No CTA buttons, no "Get Started", no "Learn More", no email capture. - No pricing tiers, no plan-comparison block. - No stat grid ("12,000 customers / 99.9% uptime"), no testimonial carousel, no logo wall. - No hero-with-product-screenshot. - No dark-mode toggle (the design has its own internal warm/dark sequencing across slabs; a global toggle would flatten this). - No newsletter signup, no chatbot bubble, no cookie banner pretending to be friendly. - No icons from icon libraries — every visual mark is a hand-built Memphis primitive. ## Uniqueness Notes This design's differentiators, each a deliberate departure from the patterns documented in the frequency analysis: 1. **Memphis as warm-clay, not lime-magenta.** Memphis sits at only 4% in the aesthetic frequency analysis, and the 4% that exists tends to use the canonical 1980s neon-and-pastel palette. aei.st refuses the neon and renders Memphis primitives in baked terracotta — a chromatic recontextualization that is, as far as the corpus shows, unique to this site. 2. **Diagonal-sections claimed at 2% frequency.** Diagonal-sections is at 2% in the layout frequency analysis. Most sites use centered (76%), full-bleed (84%), card-grid (56%), or asymmetric (56%). aei.st commits **exclusively** to diagonal-sections — there is not a single horizontal seam on the page. The 18° rake is the entire compositional grammar. 3. **Eclectic-hybrid typography at 4%.** Eclectic-hybrid sits at 4% in the typography frequency analysis. aei.st's three-voice typographic separation (Fraunces / DM Mono / Caprasimo, never blended) is a strict eclectic-hybrid implementation, while 94% of designs lean on mono-only treatments. 4. **Slide-reveal at 2% replacing parallax at 92%.** Parallax is the dominant scroll pattern (92%), with stagger and spring close behind. aei.st replaces all of these with slide-reveal (currently 2%) — slabs slide in along the 18° axis, with no parallax and no cursor-follow. This is a near-empty corner of the pattern space. 5. **Data-viz at 4% repurposed as ornament.** Data-viz sits at 4% in the imagery frequency analysis, and where it exists it tends to convey real data. aei.st's data-viz is **decorative-fictional** — Memphis-lozenge bar charts and squiggle polar plots that claim rigor while displaying ornament. The visual humor is the contradiction. 6. **Retro-patterns at 6% as Memphis lineage.** Retro-patterns sits at 6% in motifs. Combined with the Memphis aesthetic, the retro-pattern backgrounds at 6% opacity reinforce the 1980s solarium reference without becoming a kitsch homage. 7. **Terracotta-warm palette at 4%.** Terracotta-warm sits at 4% in the palette frequency analysis. Pairing it with Memphis (also 4%) creates an intersection that is statistically nearly empty — this site occupies that nearly-empty corner deliberately. 8. **The triadic clustering rule.** No other design in the corpus enforces a strict "every primitive appears in clusters of exactly three" rule. This rule is read off the doubled-vowel "aei" letterform itself — three open mouths, three open mouths-worth of primitives. 9. **Warm-inviting tone at 20% rendered without softness.** Warm-inviting is the most common tone in the corpus (20%), but it is usually rendered through soft pastels, rounded sans, and cottagecore imagery. aei.st renders warm-inviting through chunky Memphis primitives, a hard 18° rake, and crisp serifs at SOFT 100 — warmth as engineering precision, not as visual softness. This is warmth with a straight edge. 10. **The 97/3 cool-warm ratio inverted.** Where many warm-palette designs include a cool accent for contrast, aei.st permits the cool olive `#7B9E5C` to appear **exactly three times** on the page (one per triad lozenge cluster on three of the seven slabs). This deliberate scarcity makes warmth the grammar and coolness the rare punctuation. **Chosen seed:** *aesthetic: memphis, layout: diagonal-sections, typography: eclectic-hybrid, palette: terracotta-warm, patterns: slide-reveal, imagery: data-viz, motifs: retro-patterns, tone: warm-inviting* **Avoided patterns from frequency analysis:** hand-drawn aesthetic (92%), glassmorphism (62%), photography imagery (96%), full-bleed layout (84%), centered layout (76%), card-grid (56%), gradient palette (92%), parallax pattern (92%), stagger pattern (62%), cursor-follow pattern (54%), mono-only typography (94%). None of these dominant patterns appear in this design.