# Design Language for aiice.dev ## Aesthetics and Tone aiice.dev channels the visual intensity of a neural-network operations center running at 3 AM -- banks of holographic displays casting electric light across matte-black surfaces, data streams cascading through translucent overlays, status indicators pulsing in magenta and electric cyan. The aesthetic is **cyberpunk HUD** -- not the cliched rain-soaked neon alleyway, but the interior of a machine intelligence's own self-monitoring dashboard. Imagine the visual cortex of an AI rendered as a navigable interface: layered semi-transparent panels floating at different z-depths, wire-thin circuit traces connecting information nodes, and organic blob-shaped data visualizations that pulse and breathe like living organisms. The tone is **raw and authentic** -- no corporate polish, no friendly hand-holding. Text is direct, declarative, and slightly confrontational. Copy reads like system logs and diagnostic outputs rather than marketing prose. There is an intentional tension between the cold precision of the HUD framework and the warm, organic shapes that inhabit it -- as if biological intelligence is leaking through the seams of a rigid machine architecture. The mood oscillates between clinical detachment and visceral immediacy, like reading your own brain scan in real time. Inspiration sources: Blade Runner 2049's holographic interfaces, Ghost in the Shell's data-dive sequences, the UI of Deus Ex: Human Revolution, medical imaging software with false-color overlays, oscilloscope traces, and the bioluminescent glow of deep-sea organisms rendered in neon. ## Layout Motifs and Structure The layout follows a **HUD-overlay** composition -- content is organized not as traditional web sections but as floating interface panels positioned within a full-viewport operational display. The entire page functions as a single-screen heads-up display with depth layers, where panels can be scrolled into view but always maintain the feeling of existing simultaneously in a shared spatial field. **Structural Architecture:** - **Primary Frame:** A persistent border-frame surrounds the viewport -- thin 1px lines in electric cyan (#00f0ff) with corner tick-marks (small perpendicular line segments at each corner, like crosshairs or registration marks). This frame remains fixed during scroll and establishes the HUD metaphor immediately. - **Data Panels:** Content blocks are styled as semi-transparent panels (background: rgba(10, 10, 30, 0.75)) with thin border strokes (#00f0ff at 40% opacity). Each panel has a small header bar with a label in mono text (e.g., "SYS.IDENT // ABOUT", "NET.LOG // PROJECTS", "DIAG.OUT // CONTACT"). Panels are positioned using CSS Grid with explicit grid-template-areas to create an asymmetric, dashboard-like composition: a wide primary panel (65% width) flanked by a narrower sidebar column (30%) with a gap column between them. - **Depth Layering:** Three distinct z-layers create parallax depth: (1) the background circuit-trace layer (fixed position, z-index: 0), (2) the mid-ground organic blob animations (z-index: 1, slow drift), and (3) the foreground HUD panels (z-index: 2, scroll-responsive). This layering creates a sense of peering through stacked transparent screens. - **Grid Specifications:** Base grid is 12 columns with 16px gutters. Panel placement uses named grid areas. On viewports below 768px, the layout collapses to a single-column stack but retains the HUD frame and corner tick-marks. Panel headers remain visible as fixed mini-bars during scroll on mobile. - **Scroll Behavior:** Panels slide into view with subtle horizontal translation (translateX: 30px to 0) combined with opacity fade (0 to 1) triggered at 15% viewport intersection. The effect mimics interface elements activating as the user's attention reaches them. No vertical parallax -- scroll is clean and direct, with the depth illusion maintained purely through the fixed background layers. ## Typography and Palette **Typography:** - **Headlines / Panel Headers:** "Orbitron" (Google Fonts) -- a geometric, square-proportioned sans-serif designed for sci-fi and futuristic interfaces. Used at 2.5rem-4rem for primary headings, 1rem-1.25rem for panel header labels. Weight: 700 for headings, 400 for panel labels. Letter-spacing: +0.15em for panel labels (wide tracking creates a technical, HUD-readout feel), +0.04em for headings. Text-transform: uppercase for panel labels. Line-height: 1.1. - **Body / Narrative:** "Recursive" (Google Fonts) -- a variable font spanning from sans to mono across its MONO axis, with a CASL (casual) axis that allows smooth interpolation between rigid and expressive letterforms. Body text uses MONO 0 (proportional), CASL 0.3 (slightly casual), weight 400, at 1.05rem-1.15rem. Line-height: 1.7. This variable font enables thematic shifts within body copy: diagnostic/code passages shift to MONO 1, CASL 0 for a true monospace feel, while descriptive passages use MONO 0, CASL 0.5 for warmth. The single font file handles both roles, reducing load while maximizing typographic range. - **Accent / Data Labels:** "Recursive" at MONO 1, CASL 0, weight 300 -- pure monospace at light weight for timestamps, coordinates, status readouts, and small annotations scattered across the HUD. Used at 0.7rem-0.85rem. Letter-spacing: +0.08em. Color: #00f0ff at 70% opacity. - **Expressive Variable Usage:** The CASL axis of Recursive is animated on hover for interactive elements -- text smoothly morphs from CASL 0 to CASL 1 over 300ms, giving letterforms a hand-drawn, organic quality that breaks the cold machine aesthetic momentarily. This is the "biological leak" through the digital framework. **Palette:** The palette is **dopamine-neon** -- high-saturation accent colors burning against deep, near-black backgrounds. The contrast ratio is extreme: backgrounds hover around 3-5% lightness while accents push past 85% saturation. | Role | Color | Hex | |------|-------|-----| | Background Deep | Void Black | #0a0a1a | | Background Panel | Midnight Indigo | #0d0d2b | | Primary Accent | Electric Cyan | #00f0ff | | Secondary Accent | Hot Magenta | #ff2d7b | | Tertiary Accent | Acid Lime | #b8ff00 | | Warning/Alert | Solar Amber | #ffaa00 | | Text Primary | Ghost White | #e0e0f0 | | Text Muted | Slate Fog | #6a6a8a | | Organic Glow | Bioluminescent Teal | #00ffa8 | Color application rules: - Electric Cyan (#00f0ff) is the dominant UI color -- borders, panel headers, active states, primary links - Hot Magenta (#ff2d7b) is reserved for emphasis, hover states, and the organic blob elements - Acid Lime (#b8ff00) appears only in data labels and status indicators -- sparingly used for maximum punch - Solar Amber (#ffaa00) marks interactive affordances and notification states - Bioluminescent Teal (#00ffa8) is exclusive to the organic blob layer, creating color separation between HUD elements and biological forms - Background uses a subtle radial gradient: center at #0d0d2b fading to #0a0a1a at edges, creating a vignette effect - All accent colors include a CSS `text-shadow` or `box-shadow` glow: `0 0 12px currentColor` at 40% opacity, reinforcing the neon emission aesthetic ## Imagery and Motifs **Organic Blob System:** The primary visual texture is **bioluminescent organic blobs** -- amorphous, slowly morphing shapes that float across the background layer like deep-sea jellyfish drifting through dark water. These are constructed using SVG `` elements with smooth bezier curves, animated via CSS `@keyframes` that interpolate between 4-6 different blob shapes over 20-30 second cycles. Each blob has a radial gradient fill transitioning from Bioluminescent Teal (#00ffa8) at center to transparent at edges, with a `filter: blur(40px)` applied to create a soft, gaseous glow. Three to five blobs of varying sizes (150px to 400px diameter) drift independently across the viewport using CSS `translate` animations with different durations (15s, 22s, 28s) to avoid synchronization. The blobs represent the "organic" counterpoint to the rigid HUD grid -- biological intelligence seeping through digital infrastructure. Their color (teal-green) is deliberately distinct from the cyan-magenta HUD palette, establishing them as belonging to a different ontological layer. **Circuit Trace Pattern:** The fixed background layer features a sparse circuit-board trace pattern rendered as thin SVG lines (#00f0ff at 8% opacity). The pattern consists of orthogonal line segments with 90-degree turns and occasional circular node points (4px diameter circles at intersection points). The traces do not form a dense motherboard pattern -- instead, they are widely spaced (minimum 80px between traces) and asymmetrically distributed, with denser clusters near content panel edges and sparser regions in open space. The traces are drawn using SVG `` and `` elements with `stroke-dasharray` animation -- on page load, traces appear to draw themselves from node to node over 2-3 seconds, using `stroke-dashoffset` animation from full length to 0. **HUD Decorative Elements:** - **Corner Tick-Marks:** Each viewport corner has a crosshair-style marker -- two perpendicular lines (20px each) meeting at the corner with a 5px gap from the viewport edge. Color: #00f0ff at 60% opacity. These are pure CSS (using `::before` and `::after` pseudo-elements on the body). - **Scan Lines:** A barely perceptible horizontal scan-line overlay across the entire viewport -- achieved with a repeating-linear-gradient (transparent 0px, rgba(0,0,0,0.03) 1px, transparent 2px) at a 2px repeat. This adds CRT-monitor texture without impeding readability. - **Data Tickers:** Small monospace text snippets positioned at panel borders that display slowly cycling text (CSS animation rotating through `content` values via `@keyframes` and `counter` or a small JS interval): timestamps, hexadecimal strings, coordinate pairs. These are purely decorative and reinforce the operational dashboard feel. - **Glitch Micro-Moments:** Every 8-12 seconds, a random panel border briefly flickers -- a 150ms CSS animation that shifts the border color from cyan to magenta and back, with a 1px `transform: translateX` jitter. This is subtle enough to register subconsciously without distracting from content. **Iconography:** No traditional icons. Instead, functional indicators use minimal geometric marks: small triangles for navigation arrows, hollow circles for status indicators (filled = active), thin plus-signs for expandable content. All rendered in Electric Cyan with the standard glow shadow. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens as a dormant HUD powering on. Initial state: the viewport is pure Void Black (#0a0a1a) with only the four corner tick-marks visible at 20% opacity. After a 0.5-second pause, the circuit traces begin their stroke-dashoffset draw animation, spreading outward from the center of the screen like a neural network forming connections (duration: 2.5 seconds). As the traces complete, the corner tick-marks brighten to 60% opacity, the HUD border frame fades in (opacity 0 to 1 over 800ms), and the first organic blob materializes in the upper-right quadrant (scale 0 to 1 with a soft elastic ease over 1.5 seconds). The primary content panel then slides in from the left (translateX: -60px to 0, opacity 0 to 1, duration 600ms, ease: cubic-bezier(0.16, 1, 0.3, 1)). The panel header label types itself out character-by-character using a CSS `steps()` animation over 1.2 seconds, with a blinking cursor that disappears after completion. This opening sequence takes approximately 5 seconds total and establishes the full HUD environment before any scrolling begins. **Scroll Narrative:** As the user scrolls, additional panels activate in sequence. Each panel entrance is triggered by Intersection Observer at 15% viewport threshold. The entrance animation varies by panel position: - Left-column panels: slide from left (translateX: -40px to 0) - Right-column panels: slide from right (translateX: 40px to 0) - Full-width panels: scale from center (scale: 0.95 to 1, opacity 0 to 1) All entrances use the same easing (cubic-bezier(0.16, 1, 0.3, 1)) and duration (500ms) for consistency. Panels that have already entered remain visible -- they do not exit or fade. The organic blobs continue their independent drift animation throughout, unaffected by scroll position, reinforcing their existence on a separate spatial layer. **Hover-Lift Interactions:** Interactive elements (links, cards, buttons) use a **hover-lift** pattern: on hover, the element translates upward by 4px (translateY: -4px) with a simultaneous increase in box-shadow spread (from `0 0 0 transparent` to `0 8px 24px rgba(0, 240, 255, 0.15)`) and border brightness (border-color transitions from 40% to 80% opacity). The lift animation uses a spring-like easing (cubic-bezier(0.34, 1.56, 0.64, 1)) with 200ms duration. On hover-out, the element settles back with a slightly longer duration (300ms) and standard ease-out, creating an asymmetric timing that feels physical and satisfying. For text links specifically, hover triggers the Recursive font CASL axis animation (0 to 1 over 300ms), making the letterforms briefly go casual/organic before returning to rigid on mouse-leave. This micro-interaction embodies the site's core tension between digital precision and organic expression. **Animation and Storytelling Priorities:** - The page should feel like a living system, not a static document - Blob animations never stop -- they provide ambient life to every state - Circuit traces and scan lines create environmental texture at all times - Glitch micro-moments are randomized (CSS or minimal JS) to prevent predictability - Total page JavaScript should be minimal: Intersection Observer for scroll triggers, a small interval for data-ticker cycling, and optional CASL axis animation. No heavy frameworks. - AVOID: CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, cookie banners, newsletter popups - BIAS: Full-viewport immersion, environmental storytelling, ambient animation, typography as interface element **CSS Custom Properties for Theming:** ```css :root { --void: #0a0a1a; --panel-bg: rgba(13, 13, 43, 0.75); --cyan: #00f0ff; --magenta: #ff2d7b; --lime: #b8ff00; --amber: #ffaa00; --teal: #00ffa8; --text: #e0e0f0; --muted: #6a6a8a; --glow: 0 0 12px; --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); } ``` ## Uniqueness Notes **Differentiators from other designs:** 1. **HUD-Overlay Spatial Composition:** While 96% of existing designs use centered layouts, this design uses a heads-up display overlay model where content panels float within a persistent viewport frame with corner tick-marks and border lines. Content is organized as dashboard widgets rather than traditional web sections. No other design in the portfolio uses this spatial metaphor. 2. **Variable Font Axis Animation as Interaction:** The Recursive variable font's CASL axis is animated on hover, causing letterforms to morph between mechanical and organic shapes in real-time. This typographic interaction -- text literally changing personality on hover -- is unique among all designs and directly embodies the site's thematic tension between AI and organic intelligence. 3. **Bioluminescent Blob Layer as Ontological Counterpoint:** The organic blobs exist on a deliberately separate visual layer (different color family, different z-depth, different animation rhythm) from the rigid HUD framework. This is not decorative -- it is narrative: biological intelligence persisting within machine architecture. No other design uses blob imagery as a storytelling device rather than pure decoration. 4. **Boot-Sequence Page Load:** The page does not simply appear -- it powers on through a choreographed sequence (tick-marks, circuit traces, frame, blobs, then content panels) that takes 5 seconds and establishes the operational HUD metaphor before any content is readable. This commitment to environmental storytelling over instant content delivery is unique in the portfolio. 5. **Scan-Line CRT Texture:** The barely-visible repeating-linear-gradient scan lines add a cathode-ray tube texture to the entire viewport, grounding the cyberpunk aesthetic in analog display technology. Combined with the glitch micro-moments (random 150ms border flickers), this creates a sense of imperfect, slightly degraded technology that contrasts with the clean HUD geometry. **Documented Seed/Style:** - aesthetic: cyberpunk - layout: hud-overlay - typography: expressive-variable - palette: dopamine-neon - patterns: hover-lift - imagery: organic-blobs - motifs: circuit - tone: raw-authentic **Avoided Patterns (from frequency analysis):** - centered layout (96% usage -- replaced with HUD-overlay asymmetric panels) - playful aesthetic (96% usage -- replaced with cyberpunk raw tone) - friendly tone (96% usage -- replaced with raw-authentic) - scroll-triggered as primary pattern (96% usage -- used minimally for panel entrance, but primary interaction is hover-lift) - mono typography as default (96% usage -- replaced with expressive-variable Recursive font) - warm palette (100% usage -- replaced with dopamine-neon cold-spectrum colors) - minimal imagery (96% usage -- replaced with active organic-blob animation system) - parallax (75% usage -- deliberately avoided; depth is achieved through fixed z-layers, not scroll-based parallax)