# Design Language for chloe.cx ## Aesthetics and Tone chloe.cx is a **playable game engine editor**, not a website. The entire page is staged as if the visitor has pulled up a real-time editor -- something in the lineage of Unreal's viewport, Unity's Scene View, Blender's 3D pane, Godot's docked interface, and id Tech's `radiant` level-editor -- and is watching a level being authored, gizmos and all. The domain's three-letter extension `.cx` is reframed as an **engine version tag**: "Chloe Engine / Build cx". This is not a marketing surface pretending to be a tool; it is a tool that happens to be explaining itself. The tone is **authored by an engineer who is sincerely excited, not performatively mysterious**. Panels have dock-handles. Numeric inputs have drag-scrubbers. Coordinate gizmos tag every heading with local-space position. Keyframes tick along a timeline at the bottom of the viewport. The cursor leaves a subtle raycast line. The mood sits in the **futuristic-cutting-edge / bold-confident** register -- the opposite of the collection's dominant mysterious-moody haze. There is no fog. There is a grid. Light is directional. Shadows are hard. The interface is **honest about being an interface** -- rulers, safe-frames, snap guides, pixel coordinates are all visible on purpose, not hidden as chrome. Inspirational touchpoints: Naughty Dog's GDC tooling slides, the UI of Media Molecule's *Dreams*, the dev-menus of Valve's Hammer and id's Radiant, the oscilloscope-like clarity of Resolume and TouchDesigner, the *edit-mode* overlays in Blender. Crucially **not** inspired by: generic neon cyberpunk skylines, "futuristic" glowing blue circle diagrams, or crypto-dashboard chrome. The aesthetic is **technical, legible, and proud of its wiring** -- closer to a FPGA datasheet than to a sci-fi film poster. ## Layout Motifs and Structure The layout is a true **hud-overlay crossed with split-screen**, used as a persistent editor chrome that wraps the entire scroll experience -- not a hero-then-cards page. The viewport is permanently divided into **five docked zones** laid out in a single CSS Grid that spans 100vh on first paint and releases on scroll: ``` +------------------------------------------------------------+ | TOP MENU BAR: File Scene Build Render Help 00:42:17 | +------------+----------------------------------+------------+ | OUTLINER | | INSPECTOR | | (scene | VIEWPORT | (props, | | graph) | (story scroll) | sliders) | | | | | +------------+----------------------------------+------------+ | TIMELINE / KEYFRAMES / CONSOLE STRIP | +------------------------------------------------------------+ ``` - **Top Menu Bar (36px):** Monospace menu items with an always-running local wall-clock, a frame-rate counter that actually measures document FPS, and a build-hash chip reading `CHLOE.CX @ cx.build.0426a`. - **Left Outliner (264px, collapsible to 48px):** A literal scene-graph tree of every section on the page. Each heading gets an entry with a discipline glyph (camera, light, mesh, script). Clicking an entry **teleports the viewport** via smooth-scroll to that section; the current section highlights with a 1px inset border in Gizmo Yellow. - **Right Inspector (312px):** Live property sheet for whatever is currently in view. When the viewport is on the "Rendering Pipeline" section, the Inspector shows sliders for shadow-bias, TAA sample count, exposure EV -- and those sliders actually affect the viewport's rendering (see Prompts). - **Main Viewport (flex):** This is where the **narrative** happens. It is not paginated into cards. It is one continuous 3D-ish stage down which the visitor scrolls, with each section behaving as a **scene sequence** -- props dolly in, lights rig up, debug overlays toggle. - **Bottom Strip (140px):** A dual-row strip: top row is a **keyframe timeline** showing the scrollable length of the page with ticks at every `
`; bottom row is a **console** that scrolls engine log lines (`[INFO] Loaded Hero.mesh (1.2 MB)`, `[WARN] Normal map missing on Chloe_Avatar_01`, `[OK] Shader 'grid_floor' compiled in 12ms`) keyed to scroll position. Within the Viewport, compositions use **isometric-technical** framings: 30° dimetric scene setups with vanishing points visible as thin construction lines. Heading blocks align to **three-point gizmo axes** -- X runs right in Axis Red (#E5484D), Y runs up in Axis Green (#4CC38A), Z recedes in Axis Blue (#3B82F6) -- which protrude from headings like Maya move-handles. This replaces the collection's overused card-grid entirely. Negative space is filled not with "room to breathe" but with **technical callouts**: dimensional tolerances, frustum wireframes, bounding-boxes drawn in 1px dashed lines around important prose blocks. ## Typography and Palette **Typography (all Google Fonts, no exceptions):** - **Display / viewport titles:** **"Major Mono Display"** (Google Fonts) -- an all-caps monospaced display face with deliberately technical, stencil-like bearings. Used only for scene-sequence titles at clamp(3rem, 8vw, 7rem), weight 400, letter-spacing 0.04em. Its openings feel stamped into sheet metal, not typeset. This is the *marquee* voice of the engine editor -- the text you would see baked into a splash screen. - **Body / prose inside the Viewport:** **"Inter"** (Google Fonts) weight 400 at 16px, line-height 1.5. Chosen because it is the honest workhorse of actual editor UIs -- Figma, Linear, VS Code forks -- and because it prevents the page from drifting into "fake futuristic." Inter grounds the tech fantasy in readable prose. - **UI chrome, HUD labels, console:** **"JetBrains Mono"** (Google Fonts) weight 400/500 at 11px for dock labels, 12px for console lines, 13px for Inspector property names. Tabular numerals on always. Critical: this is the font of the Outliner, the Inspector, the Timeline, the Console, and the coordinate readouts -- anywhere the engine is "talking about itself." - **Numeric scrubbers & gizmo axis labels:** **"Space Mono"** (Google Fonts) weight 700 at 10px, letter-spacing 0.08em, ALL CAPS. Only used on axis letters (X / Y / Z), frame counters, build-hash chips, and drag-scrubber readouts. Space Mono's wider eye gives the little numeric stamps personality. Four fonts is deliberate -- it mirrors how real engines mix a brand display face with one body face, one UI mono, and one stencil numeric. No handwritten, no serif. No font pretending to be elegant. **Palette (engineered from a dark desaturated base with precise gizmo accents):** | Role | Hex | Use | |------|------|-----| | Viewport BG | **#0E1014** | The main editor canvas; nearly-black with a blue tint so the grid reads | | Panel BG | **#15181E** | Outliner, Inspector, Bottom Strip -- 1 tonal step brighter than viewport | | Dock Seam | **#23262E** | The 1px hairline separating docked panels | | Hull Chrome | **#2E333D** | Resize-handles, menu-bar bg, inactive panel headers | | Grid Line | **#1E2230** | The infinite editor floor-grid and the minor rulers | | Type-Base | **#D6DAE3** | Default readable body color on dark panels -- cool-gray white | | Type-Dim | **#8892A0** | Secondary labels, axis callouts, construction lines | | Axis Red (X) | **#E5484D** | X-axis gizmo, error log level, "destructive" operations | | Axis Green (Y) | **#4CC38A** | Y-axis gizmo, OK log level, "compile success" state | | Axis Blue (Z) | **#3B82F6** | Z-axis gizmo, INFO log level, hyperlink default | | Gizmo Yellow | **#F5D90A** | Selected/active element; the "you are here" marker | | Hot Magenta | **#E6427A** | Reserved for one single element per page -- the brand mark `chloe.cx` | This is a **high-contrast dark-neon palette** driven by complementary axis accents. It explicitly refuses the collection's dominant warm / gradient / muted tendencies. There is no large gradient anywhere -- gradients appear only inside the 2px-tall drag-scrubbers as a technical affordance. Contrast against the viewport BG is always at least 4.5:1 for type, deliberately high to feel like a real IDE rather than a dimmed "ambient" page. ## Imagery and Motifs **No photography.** The site is an engine editor; engine editors render geometry, not photographs. All imagery is one of four technical forms: 1. **Wireframe-first renders.** Section "hero visuals" are SVG-drawn 3D objects in the 30° dimetric projection -- a low-poly head, a gear assembly, a procedurally-lit terrain quad, a dolly-camera rig -- rendered first as pure wireframe in 1px Type-Dim (#8892A0) stroke, with hidden-line dashes for edges behind surfaces, and then *optionally* filled on hover with a flat Axis-Blue shaded material. The "progressive reveal" toggles between wireframe / solid / textured, keyed to scroll progress. This is the **Game Engine** theme manifested as actual geometry, not "techy-looking icons." 2. **Gizmo annotations everywhere.** Every major heading carries a **three-axis gizmo glyph** (16px SVG) to its left, with X/Y/Z handles in their respective axis colors and tiny perpendicular end-caps. Gizmos are **interactive**: hover an axis and the corresponding axis line extends across the screen as a thin construction line to give a world-scale sense of orientation. This motif replaces the bullet, the divider, and the section icon all at once. 3. **HUD data readouts (underused sci-fi-hud).** Thin outlined rectangles with 1px Axis-Blue or Axis-Green borders surround key prose passages, with corner crop-marks at all four corners -- like the reticles around a targeted object in a flight sim. Each reticle carries a tiny monospaced tag: `[OBJ-042 / CHLOE.CX / SECTION_02]`, and a distance readout `123.4m` that actually measures the reticle's vertical distance from the current scroll position in pixels-mapped-to-meters. Pure data-viz-as-decoration, totally distinct from card-grid chrome. 4. **The Grid Floor.** An infinite receding grid occupies the Viewport background as a CSS-mask-revealed SVG pattern with 40px major cells in Grid Line (#1E2230), 8px minor cells at 30% opacity, and a horizon fade at 60vh. The grid has **subtle parallax**: it slides 1px per 60px of scroll, creating the feeling of camera dolly-forward through a scene, without ever degrading into "zooming stars." The grid is present on every section; sections are **staged upon it**, not cut away from it. **Supporting motifs:** - **Crop-mark corners** on every panel (8px L-shaped marks in Type-Dim). - **Construction lines**: 1px dashed Axis-Blue lines connecting headings to their gizmos to the outliner entries, drawn as SVG `path` with `stroke-dasharray: 2 3`. - **Frustum cones** at camera-rigged sections, drawn as translucent Axis-Blue triangular SVG fills. - **Particle-debug scatter** (underused particle-effects motif): small 2px squares distributed around feature blocks, each labeled with a tiny coordinate. Not animated particles -- *inspected* particles, as if the user paused a particle system to examine it. ## Prompts for Implementation **Primary directive: this is a single immersive scene, not a series of cards.** Do not implement as discrete sections with independent animations. Implement as **one continuous world** through which a virtual camera dollies on scroll. **Camera-rig scroll.** The page uses a persistent invisible "camera" whose XYZ position is mapped to `window.scrollY`. Every element's subtle transform, parallax, and 3D-layered depth is computed from that camera's distance. Use a single top-level `requestAnimationFrame` loop (no per-element scroll listeners) that updates CSS variables: `--cam-z`, `--cam-pitch`, `--cursor-x`, `--cursor-y` on the root. Consumers read those variables. This is the underused **layered-depth** pattern applied rigorously. **The editor is alive.** Implementation must include: 1. **Live Inspector.** The right Inspector panel shows real sliders (Exposure, Grid Density, Wireframe Opacity, TAA Samples, Z-Near, Z-Far). Dragging each slider genuinely updates the Viewport in real time via CSS variables. Double-clicking a numeric label scrubs it (click-drag horizontally to change value). This is the **tilt-3d + micro-interactions** hybrid used as interface, not ornament. 2. **Live Outliner.** The left Outliner tree reflects all `
` elements under the current scroll position. Active section has a 2px inset Gizmo Yellow border and a tiny `▸` triangle. Clicking any entry smooth-scrolls to that section with an **Ease-in-out-cubic at 1200ms**, and **plays** a short "camera moving" console line in the Bottom Strip. 3. **Live Console.** The bottom console writes plausible engine log lines in real time -- `[12:04:17.442] [INFO] Scene 'chloe.cx' loaded in 247ms`, `[12:04:18.902] [OK] Compiled 'grid_floor.frag' (4 uniforms, 2 varyings)`, `[12:04:19.118] [WARN] Asset 'section_03_mesh.gltf' missing LOD2, falling back` -- keyed to scroll position. Log lines use `requestAnimationFrame` time-stamps for authenticity. INFO in Axis Blue, OK in Axis Green, WARN in Gizmo Yellow, ERR in Axis Red. The console is not decoration -- *it is the primary animated element of the page*. 4. **Viewport geometry.** Build at least three **interactive SVG wireframe objects** the user can rotate by click-drag: - A low-poly head (the "Chloe" avatar -- 30° dimetric, ~200 tris implied) at the top. - A gear train (three interlocking gears with animated rotation tied to scroll velocity). - A procedural landscape patch (hex-grid-lines terrain with height-shaded Axis-Blue fill). All three use CSS 3D transforms driven by `--cam-pitch` and a per-object `--obj-yaw` controlled by drag. 5. **Frame-rate counter.** A real FPS counter in the top-right corner that measures `requestAnimationFrame` deltas and updates every 500ms. Drops below 55 fps flip the digit to Gizmo Yellow; below 30 fps to Axis Red. This is a tiny piece of **truth**: the page is actually tracking its own performance. 6. **Cursor raycast.** The cursor emits a thin 1px dashed Axis-Blue line from the Viewport center to the cursor position, behaving like a "pick ray" in a 3D editor. On hover over an interactive element, the line turns solid Gizmo Yellow and a small hit-point marker `⊕` appears at the cursor. **Animation principles:** - Use `cubic-bezier(0.2, 0.8, 0.2, 1.0)` -- the signature *editor ease* (fast in, slow settle) -- for all panel transitions. - No bounce. No elastic. No spring over-shoot. Editors do not bounce; they **snap**. - Stagger timings use exact frame-aligned values (16.67ms multiples) to reinforce the engine-is-real fiction. - Hover states are **1-frame instant** for UI chrome (button backgrounds) and **200ms ease** for content reveals. This contrast -- instant chrome / eased content -- is a real tooling-UX distinction. **Bias toward full-screen narrative experience.** Every section occupies 100vh minimum, with the Viewport reframing its **camera** per section. Use `position: sticky` on section headers so they become part of the Top Menu Bar's breadcrumb as the user descends. No paginated "about / features / pricing" stacks. Strictly **AVOID**: call-to-action button fields, pricing tiers, statistic grids, testimonial carousels, social-proof logo walls. If a section feels like it wants a CTA, replace it with a **compile log line** in the console instead. **Console-driven disclosure.** When the visitor arrives at certain milestones, the console "reports" an action that has consequences elsewhere -- e.g., `[INFO] Material 'chloe_brand_magenta' enabled` causes the Hot Magenta brand mark to ignite in the top menu bar. This gives the site a **programmatic pacing** where effects appear to be *caused* rather than decorated. ## Uniqueness Notes **Differentiators from other designs in the collection (frequency-informed):** 1. **Persistent editor-chrome as the whole UI.** No other design uses a five-panel docked **hud-overlay** (6% usage) as its permanent frame. Most designs are single-column or card-grid documents; chloe.cx *is* an IDE. The Outliner, Inspector, Timeline, and Console are not introduced and dismissed -- they flank the content for the entire scroll. 2. **Live Inspector with real-time effect.** Underused **micro-interactions** (11%) and **scale-hover** (1%) patterns are elevated to **functional control surfaces**: the right-panel sliders genuinely affect the viewport's rendering (grid density, wireframe opacity, exposure). This is not skeuomorphic decoration; it is **real interactivity used as visual language**. No other site in the collection makes its UI chrome operable. 3. **Wireframe-first imagery replaces photography.** The collection uses photography in 95% of sites. chloe.cx uses 0% photography -- purely SVG-rendered wireframe geometry with axis gizmos. This is a radical departure and directly theme-justified: a game engine showcase would never render its own subject matter in photographs. 4. **Three-axis gizmo-as-bullet.** Gizmos with colored XYZ handles replace both section icons and bullet markers. The 16% **geometric-sans** / **condensed** typography crosses with the underused **isometric** (8%) aesthetic in a way no other design has attempted. Gizmos are *interactive*: hovering extends axis construction lines across the viewport. 5. **Console-as-primary-animated-element.** The bottom-strip console writes live engine log lines keyed to scroll and user action. Underused **typewriter-effect** (18%) is used not for hero text (the overdone pattern) but for logs -- mechanically honest, not dramatic. Error / warn / info / ok log levels each have their own color, forming a rolling data-viz (underused at 10%) that doubles as the page's narrator. 6. **Cool-gray dark-neon palette.** Refuses the collection's 96% warm palette and 98% gradient dominance. Base is #0E1014 with complementary axis accents (#E5484D, #4CC38A, #3B82F6) plus Gizmo Yellow (#F5D90A) and a single Hot Magenta (#E6427A) reserved for the brand mark. Dark-neon sits at just 1% in the collection -- chloe.cx lives there without apology. 7. **Futuristic-cutting-edge tone, not mysterious-moody.** 48% of designs lean into mysterious-moody fog. chloe.cx is the opposite: honest, bright-highlighted, proudly technical. It does not hide its geometry behind atmosphere; it **labels every vertex with coordinates** and expects the visitor to enjoy that. 8. **Frame-aligned animation timings.** All motion uses 16.67ms multiples (one frame at 60 Hz). This is a tiny, almost-imperceptible detail that reinforces the engine-is-real fiction -- and is not done in any other design in the collection. **Chosen seed (from assignment):** **Game Engine** theme realized as **"cyberpunk data-viz dashboard" × "sci-fi hud overlay stats" × "isometric technical docs"** -- three underused seeds (6%, underused, 8%) fused into a cohesive editor-interface metaphor. Explicitly avoids the overused **corporate gradient saas** (the dominant collection archetype at 91% corporate + 98% gradient) and the overused **mysterious-moody** tonal default. Typography leans into the underused **tech-mono + geometric-sans** axis rather than the overused mono-only approach. **Avoided patterns (per frequency.sh):** corporate (91%), warm palette (96%), gradient (98%), photography (95%), card-grid (95%), centered (88%), scroll-triggered bouncy motion (93%), parallax-as-atmosphere (53%), mysterious-moody (48%). Replaced respectively with: engineered-technical, cool-gray dark-neon, solid fills with 1px axis accents, SVG wireframe geometry, docked panel grid, hud-overlay five-zone layout, frame-aligned scroll-camera rig, layered-depth camera-dolly, futuristic-cutting-edge-bold-confident.