# Design Language for chloe.cx ## Aesthetics and Tone A dark-academia game engine showcase where code meets classical scholarship. Chloe.cx presents its game engine through the lens of an ancient library's reading room -- vellum-toned surfaces, ink-black typography, and the quiet authority of accumulated knowledge. The dark-academia aesthetic transforms technical documentation into something that feels like studying sacred texts: monochrome surfaces with selective warm accents, ornamental bookplate-style headers, and the hushed reverence of a university archive. The tone is optimistic-bright despite the dark palette -- there's an excitement about what this engine can create, conveyed through confident typography and purposeful negative space. ## Layout Motifs and Structure The layout is hero-dominant: a full-viewport hero section (100vh) showcases the engine's name and a single compelling visual, establishing presence before any scrolling occurs. Below the hero, content uses a centered single-column layout (max-width 740px) with 64px section spacing. Feature showcases break into a 2-column layout (60/40 split) with code examples on the left and visual previews on the right. The hero uses bold sans-grotesk typography pushed to the bottom-left corner with 80px padding, leaving the upper two-thirds as atmospheric negative space. Section headers use full-width ruled lines (1px #333333) with the header text overlapping the line via negative margin. Navigation is a minimal top-right cluster of text links. The page ends with a single centered call-to-explore, not a complex footer grid. ## Typography and Palette **Typography:** - **Headlines:** "Instrument Sans" (Google Fonts) -- a contemporary grotesk with sharp, authoritative cuts. Used at 2.5rem-5rem, weight 700, letter-spacing: -0.02em, line-height 1.05. - **Body:** "Lora" (Google Fonts) -- a well-balanced serif with roots in calligraphy, perfect for the dark-academia reading experience. Used at 1.05rem, weight 400, line-height 1.75. - **Code:** "Fira Code" (Google Fonts) -- for engine API examples and code snippets. Used at 0.85rem, weight 400, displayed in code blocks with #1a1a1a background and #c4b998 text. **Palette:** - Primary: #1a1a1a (true dark) -- backgrounds, headings - Text: #e8e0d4 (warm vellum) -- body text on dark backgrounds - Accent: #c4b998 (aged gold) -- links, code highlights, active states - Light Surface: #f5f0e8 (parchment) -- card backgrounds, alternate sections - Mid: #3d3d3d (charcoal) -- borders, secondary elements - Highlight: #6b5b3e (burnished bronze) -- hover states, emphasis ## Imagery and Motifs SVG path-draw animations reveal technical diagrams: engine architecture flowcharts draw themselves as the user scrolls, with nodes appearing as circles and connections as straight lines in #c4b998. Bokeh-background effects create atmospheric depth in the hero section: CSS radial gradients in #c4b99810 at various sizes create floating circular light spots. Organic blob shapes in #3d3d3d at 5% opacity drift slowly behind content sections, suggesting the generative potential of the engine. Bookplate-style ornamental headers: thin SVG line borders with corner flourishes frame section titles, referencing academic publication design. No photographs or 3D renders -- all imagery is typographic, diagrammatic, or abstract geometric. ## Prompts for Implementation The hero section loads with the engine name "CHLOE" in Instrument Sans at 5rem, positioned at bottom-left, with bokeh light spots gently drifting in the background (CSS animation, 20s cycle, transform: translate with slight randomization). As the user scrolls past the hero, technical diagrams begin their SVG path-draw animations, each completing over 2 seconds. Feature sections alternate between parchment (#f5f0e8) and dark (#1a1a1a) backgrounds, creating a reading rhythm. Code blocks enter with a subtle typewriter effect: the cursor blinks, then code appears line by line at 30ms per character. Hover states on navigation links trigger an underline-draw from left to right in #c4b998 over 300ms. The overall scroll experience should feel like paging through a beautifully typeset technical manual. Avoid CTA-heavy layouts, pricing blocks, and stat-grids. Let the engine speak through elegant documentation. ## Uniqueness Notes 1. **Dark-academia game engine:** No other design applies classical scholarly aesthetics to game engine presentation, creating a unique tension between ancient learning and modern game technology. 2. **SVG path-draw architecture diagrams:** Engine architecture revealing itself through animated line-drawing creates an unfolding technical narrative unique to this site. 3. **Bookplate ornamental section headers:** Using academic publication bookplate borders for section titles bridges the gap between technical documentation and classical typography. 4. **Alternating parchment/dark reading rhythm:** The deliberate alternation between light and dark section backgrounds creates a distinctive visual cadence. Document chosen seed/style: aesthetic: dark-academia, layout: hero-dominant, typography: sans-grotesk, palette: monochrome, patterns: path-draw-svg, imagery: bokeh-background, motifs: organic-blobs, tone: optimistic-bright Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)