# Design Language for diplomatic.quest ## Aesthetics and Tone diplomatic.quest is a **neon embassy** — a place where the protocols of statecraft collide with electric exuberance. Imagine a high-gloss diplomatic pouch re-imagined by a Tokyo concept designer: deep obsidian surfaces lacquered to mirror finish, then shattered by botanical illustrations rendered in dopamine-electric pigments — acid lime, shock violet, hot coral. The mood is **luxury-premium** meeting **conversational warmth**: the site never lectures or postures. It speaks with the ease of an attaché who happens to own the most beautiful passport in the room. Every panel is a discrete mission. The bento-box structure reads as a classified dossier where each cell has been custom-lacquered and filled with living color. Botanical motifs — oversized monstera leaves, orchid cross-sections, koi-lily hybrids — are drawn in a futuristic illustration style: clean vector paths at 1px stroke, luminescent fills, micro-gradient from magenta to cyan on every petal edge. The plants are not decoration; they are the diplomats. Tone is **conversational and irreverent** — short declarative sentences, first-person plural, the occasional em-dash detour. No corporate jargon. No mission statements. The writing feels like an encrypted telegram from a very stylish spy. ## Layout Motifs and Structure **Bento-box mosaic with variable-weight cells.** The viewport is divided into an asymmetric 12-column / 8-row CSS grid at desktop; the grid collapses to a single stacked column at mobile. Cells are not uniform — three cell sizes create rhythm: - **Hero cell** (spans 7 col × 4 row): the commanding top-left anchor. Contains the name, tagline, and a full-bleed animated botanical illustration. The illustration slowly breathes via CSS scale oscillation (2% amplitude, 8s cycle). - **Feature cells** (2–4 col × 2–3 row each): thematic modules — *The Mission*, *The Method*, *The Map*, *The Moment*. Each cell has a distinct lacquered background from the palette; cell borders are 1px with a 30% opacity neon color matching the cell's accent. - **Micro cells** (1–2 col × 1 row): accent punctuation — an isolated botanical glyph, a single line of text, a glowing status dot. **Gap between cells:** 8px — tight enough to feel curated, loose enough to let each panel breathe. Cells have `border-radius: 16px` on desktop, `12px` on mobile. **Depth system:** Hero cell sits at `z-index: 10` with a `box-shadow: 0 0 48px rgba(168,85,247,0.18)`. Feature cells sit at `z-index: 5`. Hover on any cell raises it: `transform: translateY(-4px)` + shadow intensification over 220ms ease-out. **Navigation:** None in the traditional sense. A floating pill at bottom-center contains 4 glowing dot-icons that scroll to each major section. The pill uses `backdrop-filter: blur(18px)` against the dark base. Position: `position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%)`. **Botanical illustration panel** occupies the right 5 columns × full height on desktop as a sticky side-panel. The illustration animates on scroll: individual petals and leaves shift parallax at different rates (root: 0.1 factor, canopy: 0.4 factor). ## Typography and Palette **Typography (Google Fonts only — display-bold, futuristic-geometric):** - **Primary display:** `Bebas Neue` — weight 400 (the only weight). All section headings, hero tagline. Set at `clamp(4rem, 9vw, 9rem)` for hero, `clamp(2rem, 4.5vw, 4.5rem)` for section heads. Letter-spacing: `0.04em`. All caps by nature. Used in acid-lime (#C8FF00) or deep-obsidian reversed text. - **Secondary sans (body + captions):** `DM Sans` — weights 300 and 500. Body paragraphs at `18px / 30px line-height`, weight 300. Pull-quotes and cell labels at 13px / 20px, weight 500, letter-spacing `0.08em`, uppercase. Color: near-white `#F0EEF6` on dark cells. - **Accent mono (coordinates, codes, small labels):** `JetBrains Mono` — weight 400, size 12px. Used exclusively for cryptic detail tags: mission codes, grid references, micro status lines. Color: `#7CF0C4` (electric mint). **Palette — dopamine-neon on obsidian:** | Role | Hex | Usage | |------|-----|-------| | Obsidian base | `#09090E` | Page background, hero cell bg | | Deep lacquer | `#12101F` | Feature cell backgrounds | | Acid lime | `#C8FF00` | Primary accent, hero type, CTA dots | | Shock violet | `#A855F7` | Botanical petal fills, feature cell borders | | Hot coral | `#FF4F5E` | Hover states, micro-cell accents | | Electric mint | `#7CF0C4` | Mono labels, data coordinates | | Orchid blush | `#F472B6` | Botanical highlight, gradient endpoint | | Near-white | `#F0EEF6` | Body text on dark cells | **Gradient system:** Shock violet → orchid blush diagonal (`135deg`) used on illustrated petals. Acid lime → electric mint at `90deg` used on pill navigation glow. No full-background gradients — gradients live inside discrete elements only. ## Imagery and Motifs **Botanical illustration — futuristic vector style.** Every illustration is an SVG, drawn from scratch in a unified system: 1px stroke outlines in deep-obsidian or electric mint, flat fills pulled exclusively from the palette, micro-gradients on petal edges (violet→blush, 30% opacity), and zero photographic texture. **Recurring illustration subjects:** - **The Diplomatic Orchid** — a mutant phalaenopsis with circuit-trace veining on petals. Shock violet body, acid-lime stigma, electric-mint roots extending toward the grid. - **Monstera Decrypt** — a monstera leaf where the holes in the leaf reveal encrypted text: `QU3ST`, `DPLMCY`, coordinate pairs. The leaf fill is deep-lacquer (`#12101F`) trimmed with orchid-blush outline. - **Koi-Lotus Hybrid** — a lotus bloom with koi-scale texture rendered as overlapping half-circles in hot coral and orchid blush. Inhabits the micro cells as punctuation. - **Root Signal Map** — a branching root system that doubles as a network diagram. Nodes are glowing dots in acid-lime. Used as the sticky side-panel illustration. **Motif language — futuristic:** - Hairline grid overlays (1px, 4% opacity) over every cell, giving a faint drafting-paper sense of coordinates. - Glowing dot pulse: `border-radius: 50%`, `box-shadow: 0 0 12px currentColor`, animated `opacity: 0.4 → 1.0` in a 2.4s ease-in-out loop. - Ripple rings: on hover of any interactive cell, a CSS ripple expands outward from cursor point — `border-radius: 50%`, `border: 1px solid rgba(168,85,247,0.5)`, scales from 0 to 200% in 600ms, opacity fades to 0. The ripple is the primary interaction language of the site. - Circuit trace lines: thin SVG paths (0.5px) connecting corners of adjacent cells, visible only at 8% opacity. ## Prompts for Implementation **Build diplomatic.quest as a glowing embassy of the future.** The experience opens on a full-viewport bento-grid that is already alive: the botanical illustration breathes, the glowing dots pulse, the hairline grid coordinates drift 2px on a 16s loop. **Page structure (single HTML file, no scroll until mobile):** 1. **Root grid container:** `display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); gap: 8px; height: 100vh; padding: 16px;` — the entire page lives inside this container on desktop. No scroll. Content fits within the viewport. 2. **Hero cell animation:** The Diplomatic Orchid SVG scales from `scale(1.0)` to `scale(1.02)` over 8 seconds using `@keyframes breathe`. The orchid's circuit-trace veins have a path-draw animation: `stroke-dashoffset` from 100% to 0 over 3s on page load. 3. **Ripple interaction:** Each bento cell has a `click` and `mouseenter` listener. On enter, inject a `` positioned at cursor coordinates relative to the cell. CSS handles scale and fade. On click, intensify ripple to full acid-lime color. 4. **Cell entrance animation:** On DOMContentLoaded, each cell staggers in from opacity 0, `transform: scale(0.96)`, to full state. Stagger delay: 80ms per cell, reading order (left-right, top-bottom). Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)` (slight overshoot for tactile feel). 5. **Sticky botanical side-panel:** Right-column spanning cells contain the Root Signal Map SVG. On `scroll` (mobile) or `mousemove` (desktop), individual `` groups within the SVG translate at different `translateY` factors: leaves at `factor 0.4 * scrollPct`, roots at `factor 0.1 * scrollPct`. This creates the impression that the plant grows downward as you scroll. 6. **Navigation pill:** Fixed bottom-center. `backdrop-filter: blur(18px); background: rgba(9,9,14,0.6); border: 1px solid rgba(168,85,247,0.3); border-radius: 32px; padding: 10px 20px;` containing 4 dots. Active dot glows acid-lime. IntersectionObserver updates active dot as sections scroll into view. 7. **Typography loading:** Use `@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;500&family=JetBrains+Mono:wght@400&display=swap')`. All Bebas Neue headings render via `font-feature-settings: "kern" 1`. 8. **Color mode:** Dark only. No light-mode toggle. The obsidian base is absolute: `background-color: #09090E` on `` and ``. 9. **AVOID:** Full-page hero image, hero video, hamburger navigation, testimonial sections, pricing tables, newsletter signups, stat counters, progress bars, skeleton loading states. 10. **Micro-interaction on botanical glyphs:** Each SVG botanical element in a micro-cell responds to `mouseenter` with a 300ms `transform: rotate(8deg) scale(1.12)` — as if the plant noticed you looking. ## Uniqueness Notes 1. **Bento-grid with no scroll on desktop** — the entire site is a single viewport mosaic, not a scrolling page. This is structurally rare in the dataset (bento-box at only 8% usage). 2. **Dopamine-neon on deep obsidian** — acid lime + shock violet + hot coral is an aggressive palette that departs from the dominant warm/gradient majority (95%/87%). The palette reads as a Harajuku take on the UN Security Council. 3. **Botanical-illustration as primary UI element** — plants are not background texture; they are cell content and interactive objects. Botanical-illustration sits at only 6% usage in the dataset. The futuristic vector treatment (circuit veining, grid overlay) is a novel combination with the luxury-premium aesthetic. 4. **Ripple as the design's sole interaction idiom** — rather than hover cards, tooltips, or drawers, every cell interaction expresses itself through concentric ripple rings. This creates a unified, restrained interaction language. 5. **Bebas Neue + DM Sans + JetBrains Mono triad** — display-bold typography (2% usage) paired with a precision mono accent for mission codes. The triad has not appeared in reference designs. 6. **Chosen seed:** aesthetic: luxury-premium, layout: bento-box, typography: display-bold, palette: dopamine-neon, patterns: ripple, imagery: botanical-illustration, motifs: futuristic, tone: conversational 7. **Avoided from frequency analysis:** hand-drawn aesthetic (76%), editorial (50%), photography imagery (93%), centered layout (93%), warm palette (95%), gradient palette (87%), mono typography (91%), vintage motifs (72%). None of these dominant patterns appear in this design.