# Design Language for ggaji.com ## Aesthetics and Tone ggaji.com is the enigmatic interface of a deep-space reconnaissance agency that does not exist — a fictional HUD terminal where operators navigate encrypted signal intercepts, unknown stellar cartography, and classified planetary data. The aesthetic is **neomorphism in the dark**: soft-extruded panels carved from a near-black obsidian surface, lit by a ghost of deep indigo phosphorescence. Every element appears simultaneously embedded and suspended — forms rise a millimeter from the substrate, casting hairline shadows in two directions. The station feels alive but cold: ventilation hum, intermittent data-burst icons, coordinates that refresh on a two-second tick. Nothing announces itself loudly; everything is *discovered*. The tone is **mysterious and moody** without theatricality. There are no explosions or chaos glyphs — only the patient weight of classified information rendered with surgical precision. Moods draw from: derelict satellite interiors, the Mir station control panel lit only by instrument glow, redacted intelligence dossiers, the Kessler Syndrome simulation plots of ESA. The visitor feels they have accessed something they were not supposed to find. ## Layout Motifs and Structure The page is organized as a **modular-block mission-briefing terminal**: not a scroll, but a **paneled cockpit dashboard** whose modules tile into a responsive grid. Think 4–6 discrete modules visible at once, each with a raised neomorphic frame, inner shadow wells, and subtle corner-cut geometry (3px bevel clips). Modules are not equal — they follow a **golden asymmetry**: one dominant module (60% width, left) flanked by two stacked subsidiary modules (right), then below: a triple row of equal-width signal cards, then a wide lone footer beacon. Key layout rules: - **No straight-line symmetry.** Modules offset by 1–2 grid units in alternating rows. - **Gutters are thick** (24–32px) and part of the visual grammar — dark chasms between raised slabs. - **Module headers** always carry a three-character HEX designation (e.g., `[4F2]`) in mono, upper-left corner of each block — the only decoration permitted in the header zone. - **Scan-line overlay**: a 1px-repeating horizontal scan-line pattern at 3% opacity across the entire page — visible only when the panel surface is examined closely. - **Corner bracket accent**: each module's outermost corners carry a 12px L-bracket glyph in deep violet (#6A1BFF) to mark the selection zone, echoing HUD targeting reticles. ## Typography and Palette **Typefaces (Google Fonts only):** - **Primary Display & Titles:** `Orbitron` — angular, spaced, technical. Used for module headers, the site logotype, and coordinate labels. Weight 700, letter-spacing +0.18em, uppercase. Sizes: 10px (micro labels), 18px (module headers), 48–72px (hero ident). - **Body & Signal Data:** `Space Grotesk` — humanist grotesque with geometric roots and just enough quirk at display sizes. Weight 400 for body (16px/26px), weight 600 for callout data values, weight 300 for secondary meta. The workhorse across all reading zones. - **Monospace Readouts:** `JetBrains Mono` — for coordinate strings, hex values, countdown timers, and system-log excerpts. Used at 13px/20px, tracking +0.05em. The mono track running inside signal cards and console panels. - **Accent Subheadings:** `Exo 2` — used sparingly at section transitions as a mid-weight (500) bridge between Orbitron's rigidity and Space Grotesk's openness. Applied at 20–28px, light tracking. **Palette — complementary deep-space system:** - `#0A0C14` — Void Black (page substrate, shadow wells) - `#111827` — Station Hull (module surface, raised neomorphic base) - `#1E2A42` — Deep Slate (secondary module faces, inner wells) - `#6A1BFF` — Ultraviolet Signal (primary accent, bracket glyphs, CTA states, pulse rings) - `#B84FFF` — Violet Bloom (hover glow, gradient midpoint, icon halos) - `#FF6B1A` — Infrared Flare (complementary accent; alert states, live-data indicators, temperature maps — the precise opposite of violet on the wheel) - `#C2C8D4` — Ghost Titanium (primary text, module labels on dark surfaces) - `#3A4259` — Instrument Gray (secondary text, disabled states, decorative rules) The complementary tension between `#6A1BFF` (ultraviolet) and `#FF6B1A` (infrared) is the chromatic heartbeat. These two colors never appear side-by-side in equal weight — violet dominates at 80%, infrared appears as a precise interrupt (alerts, live counters, critical icon fills). ## Imagery and Motifs **Icon-heavy by system design:** Every module carries one or more SVG icons from a custom "signal fauna" library — all drawn on a 24×24 grid with 1.5px strokes, geometric construction, no fills except for alert-state solid variants. Icon vocabulary: - Orbital path arcs (rings with a moving dot node) - Targeting reticles (concentric circles with quadrant cuts) - Signal waveform glyphs (three stacked sine curves compressed to 24px) - Antenna mast (vertical with radial emission lines) - Planet silhouette (circle with horizon rings, Saturn-flat) - Lock/encrypted file (shield with radiating hex segments) - Stellar coordinate cross (precise orthogonal crosshair, no arrowheads) - Data-transfer arrows (sharp triangular chevrons, no curves) **HUD motifs embedded throughout:** - **Pulsing ring animations** around live icons — a 2.4s CSS keyframe that scales from 1.0 to 1.3 opacity fading to 0, in ultraviolet (#6A1BFF), looping. Three rings, each offset by 0.8s. - **Data-tick updates**: numeric readouts (counters, coordinates) refresh via a 2s CSS counter-animation — numbers count up 0→target over 800ms on page load, then tick by ±1 at random intervals on a 4–12s timer to simulate live telemetry. - **Corner bracket L-glyphs** (pure SVG inline, 2 paths each) placed absolutely at module corners. - **Scan-line texture**: `repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(255,255,255,0.015) 1px, rgba(255,255,255,0.015) 2px)` as a full-viewport pseudo-element. - **Frosted glass panels** for modal-style overlays — `backdrop-filter: blur(12px)` with a `rgba(17,24,39,0.6)` fill and a 1px border at `rgba(106,27,255,0.25)`. **Neomorphic surface technique**: Neomorphic panels use a *dual-shadow* approach specific to the dark palette: `box-shadow: -4px -4px 10px rgba(60,70,100,0.4), 4px 4px 12px rgba(0,0,0,0.7)` — the light source at top-left hits the slightly lighter Hull color, the dark bottom-right shadow plunges into Void Black. Inner-sunken wells (data inputs, console logs) invert: `box-shadow: inset 3px 3px 8px rgba(0,0,0,0.7), inset -2px -2px 6px rgba(60,70,100,0.3)`. ## Prompts for Implementation Build ggaji.com as a **static single-page terminal interface** — one viewport-height screen with an overflow-clipped module grid visible on load, and scroll-within-module for deeper data. No full-page scroll narrative. The experience is spatial, not temporal. **Viewport composition:** - Fixed `background: #0A0C14` on ``. Scan-line pseudo-element on `::before` of the page wrapper (z-index 9999, pointer-events none). - Top bar (48px): Orbitron logotype `GGAJI` at 24px, left-aligned. Right side: three ghost-button status indicators in JetBrains Mono (`SIG: LIVE`, `ENC: AES-256`, `NODE: 4F2A`) with a 1.5px UV (#6A1BFF) border and the infrared flare dot (#FF6B1A) blinking at 1.2s. - Main grid: CSS Grid, `grid-template-columns: 3fr 2fr`, `gap: 28px`, padding 28px, height `calc(100vh - 48px - 100px)`. - Left large module: the primary mission briefing panel (neomorphic raised, `#111827` surface). Contains a radar-style animated SVG (polar coordinate grid with a slowly rotating sweep arm at 8s per revolution, in violet) and 4–5 lines of intercepted-signal data in JetBrains Mono. - Right top module: encrypted coordinates panel with a targeting reticle SVG and a hex-grid micro-pattern background. - Right bottom module: signal-strength bar chart (pure CSS bars, no library) with infrared flare for the active bar, ghost-titanium for inactive. - Below the main grid: a row of three equal-width signal cards (`grid-template-columns: 1fr 1fr 1fr`), each 180px tall, each with one icon, one Orbitron label, one Space Grotesk micro-descriptor. - Footer beacon (100px): wide dark bar with a centered Orbitron glyph string `— GGAJI SIGNAL STATION — UPTIME: [live counter] —` and a slow pulsing ultraviolet underline. **Animation notes:** - Use `prefers-reduced-motion` media query — disable all loops when requested. - All pulsing rings, sweep arms, and data-ticks run via `CSS @keyframes` only — no JS animation libraries. - Entry animation: modules slide in from y+20px with `opacity: 0→1` over 600ms, staggered by 80ms per module, using `animation-fill-mode: both`. - Hover on modules: `box-shadow` transitions to add an outer UV glow ring — `0 0 0 1px rgba(106,27,255,0.5), 0 0 20px rgba(106,27,255,0.15)` — over 200ms ease-out. No scale transforms (neomorphic panels should not "float"). **Technology constraints:** - Pure HTML + CSS + vanilla JS only. No frameworks, no build step. - All icons as inline `` elements (not icon fonts, not image files). - JetBrains Mono and Orbitron loaded via Google Fonts `@import`. - The radar sweep arm is a CSS `transform: rotate()` on an SVG `` element driven by a CSS custom property updated via `requestAnimationFrame` — or a CSS `@keyframes rotate` if simpler. **AVOID:** - Any CTA button that says "Get Started", "Sign Up", or "Learn More" - Pricing tiers or feature comparison grids - Testimonial carousels or social-proof blocks - Bright white backgrounds or any background above #1E2A42 - Gradient hero banners with stock photography - Parallax scrolling (contradicts the terminal panel metaphor) ## Uniqueness Notes Seed: aesthetic: neomorphism, layout: modular-blocks, typography: eclectic-hybrid, palette: complementary, patterns: elastic, imagery: icon-heavy, motifs: sci-fi-hud, tone: mysterious-moody 1. **Neomorphism on true-dark substrate (not gray):** The existing corpus shows neomorphism attempted almost exclusively on mid-gray or off-white backgrounds (#e0e5ec zone). ggaji.com applies the dual-shadow technique to a near-black (#111827) surface with a cool-blue-tinted highlight shadow, making the panels look like extruded obsidian rather than plastic soap dishes. This is technically more demanding (shadow tint selection is narrower) and visually completely distinct. 2. **Complementary palette as a frequency interrupt, not a theme:** Most complementary-palette designs in the corpus place both hues in similar visual weight — warm + cool as coequals. ggaji.com applies an 80/20 split where ultraviolet violet dominates and infrared orange appears only as a live-data signal — a system interrupt color. This mimics real military/aerospace UI conventions and creates instant semantic hierarchy. 3. **Modular-blocks as spatial cockpit, not scrollable cards:** The corpus uses modular-block layouts predominantly as vertically-scrolled card columns (card grids, masonry, etc.). ggaji.com treats modules as cockpit instrument panels — fixed in viewport, each with internal scroll/update, arranged in golden asymmetry. The reading experience is spatial navigation, not linear descent. 4. **Icon-heavy as a functional signal system, not decoration:** While other icon-heavy designs use icons as visual candy, ggaji's 24×24 stroke icons operate as a vocabulary of status indicators — each icon has a defined semantic state (live, encrypted, degraded, offline) that maps to color and animation variation. Icons are not illustrative; they are operational. 5. **Eclectic-hybrid typography anchored in aerospace:** Orbitron (angular HUD lettering) + Space Grotesk (readable humanist grotesk) + JetBrains Mono (monospaced readouts) + Exo 2 (transitional subhead) is an unusual four-family stack. The hybrid works because each font owns exactly one register: display identity, narrative body, technical data, and structural bridging — with zero overlap.