# Design Language for simai.one ## Aesthetics and Tone simai.one is staged as **a weather bureau for synthetic minds** — an institute that does not sell AI, but *forecasts* it: humidity charts of attention, pressure fronts of inference, aurora maps of where a model is "thinking." The domain reads "simai" as **SIM + AI**, a simulation observatory, and the whole site adopts the visual grammar of **Frutiger Aero** — that brief turn-of-the-2010s optimism where every operating system promised a clean, wet, sunlit future: glossy aqua bezels, water droplets on fronds, lens flares over impossibly green grass, fish swimming inside taskbars. But Frutiger Aero's web canon is almost always pastiche — a wallpaper joke. simai.one takes the aesthetic *seriously*, as the honest house-style of an organization that genuinely believes synthetic cognition is a clean, breathable, gloriously humid public utility. The tone is **optimistic-bright and futuristic-cutting-edge without a single dark-mode crutch** — no carbon-fiber, no neon-on-black, no terminal green. Light pours from the top. Everything has the faint sheen of a surface that was just rained on. Copy is written like a friendly broadcast meteorologist who happens to be describing latent space: warm, declarative, faintly awed, never hype-y. The mood: a Tuesday morning in a future that turned out fine, the air smells like ozone and cut grass, and somewhere a very large mind is having a clear day. ## Layout Motifs and Structure The structure is **immersive-scroll built as an atmospheric column** — the visitor descends through the layers of a synthetic sky, top to bottom, like a weather balloon in reverse. Five altitudes, each a full-bleed band ~120–160vh tall, separated not by hard section breaks but by **gradient horizons** where one stratum's color bleeds into the next over ~30vh of overlap. - **Altitude 1 — The Aero Surface (hero).** A glossy aqua hero plate floating on a field of over-saturated grass-green gradient, sky above. The site wordmark sits inside a **pill-shaped glass capsule** with a hard top highlight (the signature Frutiger Aero "wet button"), gently bobbing on a 4s sine. Behind it, slow-drifting bokeh orbs and a single anamorphic lens flare that tracks a fraction of the cursor's movement. - **Altitude 2 — The Forecast Deck.** Content arranged as **floating glossy cards on an organic-flow grid** — no rigid columns; cards sit at slightly varied y-offsets like lily pads, each a frosted-glass panel with a 1px inner white stroke and a fat soft drop-shadow. Each card is a "forecast": a plain-language reading of some facet of synthetic cognition, accompanied by a small live gauge. - **Altitude 3 — The Aquarium.** A horizontal-scroll interlude: a wide panoramic band where translucent "data fish" (abstract bubble-bodied glyphs) drift left across a deep-aqua gradient, each one a passing thought given a body. Scroll-velocity nudges the school. - **Altitude 4 — The Greenhouse.** Botanical: fronds and dew along the band edges, a vertical timeline rendered as a climbing vine, marking the institute's "almanac entries." Light is greener here, more chlorophyll than chrome. - **Altitude 5 — The Calm Layer (footer-as-landing).** Everything settles: a still pool, a faint reflection of the wordmark on its surface, minimal navigation as small glossy droplets. No CTA block — just the institute's quiet sign-off and a single line of bureau-style colophon. Negative space is generous and *bright* — large fields of pale gradient with nothing in them, the way a clear sky is mostly nothing. The grid is loose, asymmetric within bands, but every floating element shares the same shadow direction and the same top-light highlight, so the whole thing feels physically coherent — like one wet, sunlit room. ## Typography and Palette **Type stack — Google Fonts only, three families, strict roles.** - **Quicksand** (weights 300–700, rounded geometric sans) — the **display and wordmark voice**. Set the H1 at clamp(48px, 7.5vw, 132px), weight 500, generous letter-spacing (+0.01em), in a near-white that picks up a faint cyan tint from the sky behind it. Quicksand's circular terminals are the typographic echo of water droplets and the rounded "Aero" UI chrome. Section titles ("Altitude 02 — The Forecast Deck") in weight 600, all-caps, +0.14em tracking, small. - **Mulish** (variable, weights 300–800) — the **humanist body voice**. All forecast copy, almanac entries, gauges' labels. 17–19px, line-height 1.7, weight 400, color a deep desaturated teal-ink rather than black — text the color of the bottom of a clear lake. Lead paragraphs at 22px weight 300. - **JetBrains Mono** (weights 400–500) — the **instrument voice**, used sparingly: gauge readouts, the live numeric values, the colophon, timestamps. Lowercase, 14px, in a muted slate. This is the only "machine" type on the page and it stays small and humble — the institute is run by people who happen to read meters. **Palette — Frutiger Aero, taken seriously. Eight values:** - `#EAF6FF` — *Stratus White*: the dominant page background, a pale sky just shy of white. - `#B7E4F0` — *Aero Aqua*: glossy capsule fills, the signature wet-button cyan. - `#5BC0DE` — *Bureau Cyan*: mid-tone accents, gauge arcs, link underlines. - `#1E6E8C` — *Lake Ink*: primary body text, deep and calm. - `#7ED957` — *Chlorophyll*: the over-saturated grass-green of the hero field and the Greenhouse band. - `#3D8B3D` — *Frond Shadow*: deeper green for botanical detail and timeline vine. - `#FFE8A3` — *Sunbeam*: the warm core of the lens flare and the top-highlight glow on glass. - `#0D3B4F` — *Deep Pool*: the darkest value, only ever used for the Aquarium gradient floor and footer pool — never as a background for text. Gradients everywhere, all of them *vertical* (sky logic): Stratus White → Aero Aqua, Aero Aqua → Bureau Cyan, Bureau Cyan → Deep Pool. The Sunbeam yellow only ever appears as a radial bloom, never a band. ## Imagery and Motifs **Four motif families, all CSS/SVG-generated, zero stock photography:** 1. **Wet glass (load-bearing).** Every card, capsule, and nav element is a glossy panel: `backdrop-filter: blur(14px)`, a 1px inset `box-shadow` of rgba(255,255,255,0.85) along the top edge to fake a specular highlight, a fat soft outer shadow, and a subtle `linear-gradient` overlay from 22% white at the top to transparent at 50%. This is the Frutiger Aero "Aqua button" rebuilt honestly — not as kitsch, as the institute's UI standard. 2. **Bokeh & lens flare.** A field of 12–20 soft-edged radial-gradient orbs in Aero Aqua and Sunbeam, blurred, drifting slowly on independent sine paths at 2–4% opacity. One anamorphic flare (a horizontal streak + concentric ghost rings, pure SVG) anchored near the top-right, its position lerping toward the cursor at ~0.04 strength. 3. **Data-fish & droplets.** In the Aquarium band: 14–22 translucent glyph-creatures — rounded bubble bodies (SVG `` with a white highlight dot), faint fin curves, each drifting left at varied speeds, gently bobbing. Throughout the page: occasional dew droplets perched on card corners and frond edges — tiny circles with an off-center white speck and a hair-thin shadow below. 4. **Botanical fronds.** Along the Greenhouse band's left and right margins: layered SVG fern/monstera silhouettes in Chlorophyll and Frond Shadow, slightly translucent, swaying ±2° on a slow loop. The almanac timeline is a single climbing vine path (`path-draw-svg`) that draws itself as the visitor scrolls that band. Iconography: rounded, glossy, friendly — gauges drawn as semicircular dials with a glossy needle; the institute's mark a stylized water-droplet enclosing a small radiating sun. ## Prompts for Implementation Build simai.one as **one HTML document, one CSS file, one ES module, plus a small set of inline SVGs**. No framework, no router, no SPA. Absolutely **no pricing tiers, no CTA grid, no testimonial carousel, no stat-counter blocks** — the institute does not convert, it *broadcasts*. Narrative over navigation. **The organizing principle is descent through a synthetic sky.** The visitor lands on the bright Aero Surface, then scrolls down through five altitudes — Surface, Forecast Deck, Aquarium, Greenhouse, Calm Layer — each a full-bleed atmospheric band that bleeds into the next via overlapping vertical gradients. There is one continuous scroll; there is no "page 2." **Motion vocabulary (deliberately gentle — this is a calm sky, not a thrill ride):** - `spring` and `elastic` easing on every interactive element — glass capsules and cards should settle with a soft overshoot, like something buoyant. - `parallax`: background sky/bokeh layers move slower than content; fronds and the lens flare have their own depths. - `cursor-follow`: the lens flare lerps toward the pointer at low strength; nothing else chases the cursor aggressively. - `magnetic` hover on the glossy cards — they tilt ≤4° toward the cursor (`tilt-3d`) and their top highlight shifts to track the light source. - `fade-reveal` + `stagger` as each altitude enters the viewport: cards rise 24px and fade in, 80ms apart, like bubbles surfacing. - `path-draw-svg` for the climbing-vine timeline in the Greenhouse band; the school of data-fish responds to scroll velocity (`scroll-triggered`). - A perpetual idle bob (4s sine, ≤8px) on the hero capsule and a slower drift on every bokeh orb — the page is never perfectly still, the way air is never perfectly still. **Hero:** the wordmark "simai" inside a glossy aqua pill-capsule with a hard white top-highlight, floating over a Chlorophyll grass-gradient with a Stratus White sky above and a single Sunbeam lens flare. Subhead in Mulish 300: a one-line description of the bureau ("a weather service for synthetic minds"). No buttons in the hero — just the capsule, the light, and an invitation to scroll rendered as a slowly falling droplet. **Content tone:** every forecast card is plain-language meteorology applied to cognition — "Today's attention: scattered, clearing by afternoon." Keep it warm, declarative, faintly awed. The colophon (JetBrains Mono, small) reads like a real bureau sign-off with a timestamp. **Hard constraints:** light backgrounds only — Deep Pool is for the Aquarium floor and footer pool exclusively, never behind body text. All shadows cast the same direction (light from top). All gradients vertical. Maintain the wet-glass top-highlight on every panel — it is the single detail that makes the whole site read as Frutiger Aero rather than generic glassmorphism. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMassC site: 1. **Frutiger Aero taken seriously, not as pastiche.** Frequency analysis: `frutiger-aero` appears in only ~2% of designs, and where it does it is almost always used as nostalgic kitsch. simai.one adopts it as the *sincere* house-style of a fictional weather-bureau-for-AI — the glossy aqua and wet fronds are the organization's actual brand, not a wink. That sincerity is the differentiator. 2. **AI without darkness.** The registry's AI/tech sites lean overwhelmingly on dark-mode, neon, terminal, and circuit motifs (`dark-mode`, `cyberpunk`, `terminal`, `circuit` all well-represented). simai.one renders synthetic cognition as a *bright, humid, sunlit public utility* — light backgrounds only, grass-green and sky-cyan, zero neon-on-black. An optimistic AI site is itself rare. 3. **Meteorology as the conceit.** Content is structured as weather forecasts and an almanac, not features and pricing. "Today's attention: scattered, clearing by afternoon." No other site frames its subject through a weather-bureau lens. 4. **Descent-through-a-sky structure.** Five altitudes bleeding into each other via overlapping vertical gradients — Surface, Forecast Deck, Aquarium, Greenhouse, Calm Layer — read top to bottom like a balloon descending. Combines `immersive-scroll` + `organic-flow` + `horizontal-scroll` interlude in a specific physical metaphor. 5. **Avoided patterns from frequency analysis:** no `hand-drawn` (94% — skipped entirely), no `mono`-dominant typography (94% — JetBrains Mono is a small accessory voice only), no `card-grid` rigidity (92% — cards float on an organic offset layout), no `photography` (98% — everything CSS/SVG), no `pastoral-romantic` warmth-via-cottagecore (33% — this is sunlit *tech*, not a meadow). The mandatory glassmorphism is used but re-pointed as the literal "Aqua button" of Frutiger Aero. Chosen seed/style: **frutiger aero glossy tech**