# Design Language for holos.dev ## Aesthetics and Tone holos.dev is **a dark room where a whole thing is being assembled out of light**. The name *holos* is Greek for "whole, entire, complete" — the root under *holism*, *hologram*, *catholic*, *holography* — and this site treats that idea literally: the visitor watches scattered, half-transparent fragments drift in deep space and slowly stack, register, and resolve into one coherent form. It is the moment a hologram snaps into focus; the moment a system diagram stops being boxes and arrows and becomes a thing you can *see all at once*. The aesthetic word is **ethereal** — but ethereal in the precise, engineering sense: thin luminous planes, soft volumetric glow, depth you can almost reach into, nothing solid, everything made of layered light hovering in front of black. And yet the **voice is grounded-earthy** — and that tension is the whole point. The visuals float; the writing has its boots on. Where most ethereal/dark-neon sites pile on cosmic mysticism ("transcend", "unleash", "infinite possibility"), holos.dev sounds like a senior engineer who has shipped enough things to be calm about it. Plain words. Short sentences. Dry warmth. Headlines that read like something a person actually said in a code review: *"It works. Here is why."* / *"Small parts. One picture."* / *"Built it. Use it."* The copy is typed out, character by character, in a monospace cadence — you literally watch the sentences land — which keeps even the most luminous screen feeling like a working terminal, not a séance. Ethereal eyes, dirt-under-the-fingernails mouth. Inspiration touchstones (mood, not literal): a holographic stage volume with the house lights off; long-exposure photos of light-painting where strokes hang in midair; the layered acetate cels of hand-drawn animation, backlit; depth-of-field bokeh from a fast lens at night; the calm, lowercase, no-bullshit register of a good README; the smell of a workshop. The result should feel **luminous but honest** — like opening a lab notebook that happens to glow. ## Layout Motifs and Structure **The governing grid is a Z-pattern, executed in depth rather than only on the flat plane.** The eye is walked along the classic Z reading path — top-left → top-right → long diagonal sweep down → bottom-right — but each of the four Z anchors sits on a *different depth layer*. Top-left is closest to the viewer (sharp, bright); top-right sits a little further back (slightly blurred, dimmer); the diagonal mid-point sits furthest back (a soft glow-blur, the "vanishing" layer); bottom-right comes forward again, fully resolved, as the payoff. So the Z is not just a reading path — it is a flight path *through* a stack of translucent panes, and the diagonal of the Z is the line along which the fragments are seen converging into the whole. **Layered-depth is the structural motif made literal.** Every section is built from 3–5 stacked z-planes: a far backdrop plane (deep void + faint geometric scaffolding), one or two mid planes (drifting translucent shards, the typed text), and a near plane (a thin bright frame, a glowing line, a small label). Planes parallax at different rates on scroll and tilt slightly on pointer movement, so the page reads as a shallow diorama box rather than a flat document. Content "snaps to layer" — a paragraph that is being typed sits on the active near plane, sharp and bright; once it's finished and you scroll on, it recedes a layer, dims, and softly blurs, the way a finished step recedes in your attention. Nothing slides off-screen sideways; things move **toward you and away from you**. **Structure, top to bottom:** 1. **Assembly (hero, Z-anchor 1 → 2).** Top-left near plane: the word `holos` set huge in geometric sans, with a single typed line landing beneath it character by character — *"a whole, made of small clear parts."* Top-right, set back: a slow generative cloud of translucent geometric shards (triangles, thin rings, line segments) drifting in loose orbit, not yet aligned. The first Z-diagonal is drawn as a faint dashed neon guide-line from the top-right shard cloud down toward the next anchor. 2. **The Parts (what it is, Z within).** Three or four typed "fragment cards" — each one a thin glass pane holding one short typed statement about the project — arranged along a Z so the eye steps through them. As you reach each, the matching shard in the background cloud rotates and locks into position, a quiet *click* of geometry. By the end of the section the cloud is visibly more ordered than when you arrived. 3. **The Whole (the centerpiece, full-screen narrative).** One long scene: the now-ordered shards complete their convergence and resolve — over a slow scroll — into a single coherent holographic object hanging in the void (a layered wireframe form: think an exploded-then-assembled diagram, or a slowly rotating polyhedral "system" made of glowing edges). As it assembles, short grounded captions type themselves at the front plane: *"here's the shape of it."* / *"every edge was a decision."* / *"nothing here is magic."* This is the storytelling heart — watching scatter become structure. 4. **The Notebook (docs / what's inside, gentle stack).** A loose vertical stack of translucent panes — each a "page" of the lab notebook — that the reader scrolls through, each page a typed entry. Hover brings a page forward one layer (sharper, brighter) and gently pushes its neighbours back. No grid of identical cards; a leaning, slightly-imperfect pile of glowing pages. 5. **The Margin (about / footer, last Z-anchor).** A final wide near-plane band: the holographic whole-object, now small and calm and fully resolved, sitting beside a short grounded sign-off and a few quiet word-links. The Z-diagonal's dashed guide-line arrives here and simply stops, like a cursor at the end of a line. Navigation is **minimal and floating**: a small flat label-strip that hovers on the near plane, three or four lowercase word-links, no sticky bar, no mega-menu, no button stack. Scroll moves you deeper; that's the verb. ## Typography and Palette **Type — Google Fonts only, three families, strict roles.** - **Sora** for the largest display moments and the site name `holos`. It is a clean, modern **geometric sans** — even strokes, near-circular bowls, calm and a touch futuristic without being cold. Used at clamp(56px, 10vw, 168px), tight tracking (-0.02em), set in a single luminous color on the near plane, sometimes with a faint outer glow so it reads as backlit. - **Space Grotesk** as the secondary geometric voice — section titles, fragment-card statements, nav links, the short curator-style labels. Also geometric in construction but with a few quirky cuts (the sliced terminals, the distinctive `g`) that keep the type from feeling generic. Section titles at clamp(26px, 4vw, 52px), generous line-height (1.3–1.4). - **JetBrains Mono** for every line of body/narrative copy — because all the prose on this site is *typed out*, and it has to land on a fixed-width grid for the typewriter cadence to feel like a terminal rather than a teleprompter. 16–18px, line-height 1.75, comfortable measure (60–68ch). A blinking block caret follows the live line. No serif anywhere. The contrast in the system is **geometric-display vs. monospace-prose** — luminous headline, working terminal. **Palette — dark-neon: a true void, three neon emitters, and one warm earthbound tone.** - `#05060a` — *void* — the dominant background: near-black with the faintest blue-violet undertone, deep enough that glow reads cleanly on it. - `#0c0f18` — *deep field* — a half-step lighter, used for the far backdrop plane and for the faint geometric scaffolding so the depth layers separate. - `#13182a` — *slate haze* — used for translucent glass panes (at ~55–75% opacity over the void), the "frosted" surface the typed text sits on. - `#e8edf7` — *paper-white* — the brightest text and the bright thin frame-lines; not pure white, slightly cool, like backlit acetate. - `#3df0d3` — *aurora teal* — primary neon emitter: the live caret, active links, the leading edges of the resolving holographic object, the "locked-in" shard highlight. - `#7a6cff` — *spectral violet* — secondary neon emitter: the Z-diagonal guide-line, mid-plane shard glow, hover halos on notebook pages, the dashed scaffolding. - `#ff5fa2` — *signal magenta* — third neon emitter, used sparingly: a single emphasized word in a typed line, the "this one matters" edge, the caret in the centerpiece scene. - `#c9a26b` — *worn brass* — the one **grounded-earthy** tone, deliberately *not* neon: a matte, slightly muddy warm ochre used at most twice per page — a small underline beneath a key noun, the rim of the final resolved object, the footer hairline. It is the "boots on the ground" color; it never glows. Its job is to keep the whole luminous scene honest. Gradients are allowed but must read as **light, not paint**: soft radial bloom around emitters (`radial-gradient(circle, rgba(61,240,211,0.22), transparent 70%)`), thin linear sheens along glass-pane edges, a very slow violet→teal mesh deep in the backdrop. No fully-saturated neon flooding a whole panel; neon is always *edges and points and halos* against the void, never a fill. Worn brass never appears in a gradient — it's flat, every time. ## Imagery and Motifs **All imagery is generative geometric abstraction — no photography, no stock, no clip-art icons, no 3D model imports, no Lottie.** The visual vocabulary is exactly four things: 1. **Drifting geometric shards.** Thin translucent triangles, open rings, single line-segments, small wireframe polygons — rendered in SVG or a light canvas — floating in loose orbit on the mid planes. Early in a section they're scattered and mis-rotated; as the reader progresses they rotate and translate into alignment. Each shard is mostly transparent with a thin neon-stroke edge and a soft bloom; they overlap freely, depth read by blur amount and opacity, not by occlusion. 2. **The resolving whole-object.** The centerpiece: a layered wireframe form built from glowing edges (teal leading edges, violet trailing edges, the occasional magenta "key" edge, a worn-brass rim once it's complete) that assembles from the shard cloud over a scroll and then slowly rotates. It should read as *a diagram of a system finally seen entire* — exploded, then converged. Deterministic, so it's the same shape every visit. 3. **Faint geometric scaffolding.** On the far backdrop plane: a low-opacity (6–12%) field of thin construction lines — a perspective grid that recedes, a few dashed circles, alignment ticks — drifting and parallaxing very slowly. It's the "this was engineered" texture; it never competes with the foreground. 4. **The typed line itself, with its caret.** The prose *is* an image here. Monospace characters arriving one at a time on a bright glass pane, a block caret blinking and leading, occasionally a word landing in signal magenta. The act of typing — the rhythm, the caret, the slight pause at a period — is a primary visual element, not just text rendering. **Motifs:** layered depth above all (the seed motif, made literal — every scene is a shallow lit diorama); scatter resolving into structure; the alignment tick / registration mark; the thin glowing edge against the void; the blinking caret. Recurring small detail: a tiny **registration-mark glyph** (a crosshair-in-a-circle, like a print alignment target) used as the section marker, in worn brass — the one earthy thing that punctuates the light. No nebulae, no star-fields-as-decoration, no lens-flare clip-art, no glassmorphism-everywhere blur — the depth is real depth (parallax + scale + selective blur), not a frosted-card filter. ## Prompts for Implementation Build holos.dev as **one HTML file, one CSS file, and two or three small ES modules** — no framework, no router, no build step, no GSAP/Three/Lottie. The animation budget is: CSS transitions, keyframes, and 3D transforms (`translateZ`, `perspective`, `rotateX/Y`) for the depth layers; one `requestAnimationFrame` loop for the drifting shards and the assembling whole-object (SVG or a small canvas); a JS typewriter that reveals copy character-by-character with a blinking caret and a slight pause on punctuation; and a single `IntersectionObserver` to trigger each section's reveal-and-typing. That is enough. **Storytelling is the organizing principle.** Bias hard toward a full-screen, scroll-driven narrative — the page is the story of *scatter becoming whole*. The Parts → Whole arc must read as a single continuous assembly: shards locking in as you scroll past statements, then the centerpiece resolving the whole object while grounded captions type themselves at the front plane. The typewriter is non-negotiable for the prose: every paragraph types in, monospace, with a caret; the reader experiences the writing as someone *thinking out loud at a keyboard*, which is exactly what makes the ethereal visuals feel honest. AVOID, completely: CTA-heavy layouts, "Get Started" / "Sign Up" button stacks, pricing tables or tiers, stat-grids of big numbers, testimonial carousels, logo / "trusted by" walls, hero-with-signup-form, feature-comparison checklists. There is nothing to convert here; there is a thing to *see assembled*. **Motion direction.** Two registers, kept distinct: (a) **drift** — the shards, the scaffolding, the floating nav: slow, continuous, slightly random, long loops (8–14s), gentle easing, never snapping; (b) **register** — when a shard locks into the whole, or a notebook page comes forward, or a section snaps to the near plane: a crisp settle with a tiny overshoot, `cubic-bezier(0.34, 1.3, 0.5, 1)`, like a part clicking into a jig. The typewriter caret blinks on a steady ~1.05s cycle and never eases. Pointer movement applies a small `rotateX/rotateY` tilt to the whole diorama (max ~6deg) so depth is felt, not just seen. `prefers-reduced-motion` freezes the shard rAF loop, drops the prose in fully rendered (no per-char typing, caret static at end), and disables the tilt. **Layout mechanics.** Implement the Z-pattern explicitly, in depth: a `perspective`-enabled scene container; each section is a stack of absolutely-positioned planes at different `translateZ` depths (far backdrop, 1–2 mid planes, near plane). Place the four Z-anchors near the four viewport corners but at four different depths (near, mid-back, far, near again) and draw the Z-diagonal as a dashed `spectral-violet` SVG line from anchor 2 toward anchor 3. Glass panes: `slate-haze` fill at 55–75% opacity, a thin `paper-white` or neon top-edge sheen, a soft outer bloom, *no* heavy backdrop-blur (the recede-blur is a CSS `filter: blur()` applied to whole receded layers, which is the real-depth move, not a glassmorphism card). Background of everything: `void` (#05060a); the far plane is `deep-field`; emitters are points/edges/halos only. The worn-brass registration mark sits flat on the near plane at section starts. **Type in practice.** `holos` and the one hero word in Sora, huge, backlit-glow. Section titles, fragment-card statements, nav links, short labels in Space Grotesk. Every line of real reading copy in JetBrains Mono, typed in character-by-character with a block caret, on a bright glass pane, fixed measure 60–68ch. Text is `paper-white`; links and live caret are `aurora-teal`; at most one word per typed line gets `signal-magenta`; the `worn-brass` earthy tone appears at most twice on the whole page (one key-noun underline, the final object's rim / the footer hairline) and never glows. **Performance note is irrelevant per instructions — prioritize the visual experience.** But keep the shard rAF loop cheap (low shard count, low-res canvas scaled up, or pure SVG with CSS transforms), and gate the typewriter so off-screen sections don't run. ## Uniqueness Notes Three-plus differentiators from the rest of the registry: 1. **Ethereal aesthetic (5%) anchored by a grounded-earthy voice (3%) — a deliberate clash.** Almost every ethereal / dreamy site in the registry leans into cosmic mysticism and breathless copy. holos.dev keeps the luminous layered-light *visuals* but pairs them with a dry, plain-spoken, README-register voice and a flat matte "worn brass" tone that refuses to glow. The whole site is about being honest *and* beautiful at once — light you can audit. 2. **A Z-pattern layout (4%) executed in depth, not on the flat plane.** Z-pattern is rare in the registry and usually a 2D reading path. Here the four Z-anchors live on four different `translateZ` depths and the Z-diagonal is a literal flight line *through* a stack of translucent planes — the layout and the layered-depth motif (10%) are the same gesture: scatter converging along the diagonal into one whole. 3. **The prose is the animation.** Typewriter-effect (10%) is used not as a hero-headline gimmick but as the *only* way body copy ever appears — every paragraph types in, monospace, with a blinking caret and punctuation pauses. Combined with geometric-sans display type (4%) and JetBrains Mono everything-else, the site reads as "luminous diagram + working terminal" simultaneously. 4. **Geometric-abstract imagery (6%) as the only image type, semantically tied to content — scatter → structure.** No photography (≈99% across the registry), no icons, no 3D imports, no glassmorphism-card filter. Every visual is a deterministic generative thing: drifting wireframe shards that *lock into* an assembling whole-object as you scroll, plus faint engineering scaffolding. The picture you leave with is the thing being built in front of you. **Avoided overused patterns from the frequency analysis:** hand-drawn aesthetic (96%) — none; glassmorphism (67%) — explicitly avoided; the panes use real-depth selective `filter: blur()` on receded layers, not a frosted-card look; photography imagery (98%) — none; card-grid (87%) and centered (85%) layouts — replaced by the depth-Z and a leaning notebook stack; warm (98%) and gradient-flooded warm palettes — inverted to a true void with neon edges-and-halos plus one matte non-glowing earthy tone; humanist typography (54%) — replaced by geometric-display + monospace; cursor-follow (88%) and magnetic (81%) — omitted in favor of a subtle whole-scene depth tilt and slow ambient drift. Acknowledged-common patterns kept and used as the planned seed: **typewriter-effect (10%)** as the prose mechanism, **layered-depth (10%)** as the structural motif, **parallax (95%)** only in the strict sense of multi-rate depth planes. **Chosen seed/style:** aesthetic: ethereal, layout: z-pattern, typography: geometric-sans, palette: dark-neon, patterns: typewriter-effect, imagery: geometric-abstract, motifs: layered-depth, tone: grounded-earthy.