# Design Language for ipjosim.com ## Aesthetics and Tone **ipjosim.com** reads as "ip-jo-sim" — a Korean imperative that loosely translates to "keep it in mind" or "commit it to memory." The site is built around that moment of recognition: the instant something snaps into place, the mind lights up, and a concept you were fumbling with suddenly resolves into an orderly diagram. The entire visual metaphor is a **living isometric city of thought** — each idea a building, each relationship a transit line, each new understanding a Lottie-animated pop of neon scaffolding rising out of the ground on a retro-futuristic grid. The aesthetic is **maximalist but organized maximalism** — not clutter, but abundance with structure. Think: a 1984 Tron sequence redesigned by a Tokyo subway map cartographer who discovered hot coral and electric mint. Every surface has something happening on it, but every element belongs to a coherent isometric coordinate system. Nothing is decorative noise; every motif — the hairline grid, the glowing iso-block, the scrolling data ticker — is part of one continuous system. **Tone: friendly.** The maximalism is warm, not aggressive. The site talks to you like a clever friend who is genuinely excited to show you something, not a brand trying to impress you. Body copy uses short, direct sentences. Labels are lowercase. Microcopy has dry humor. The Lottie animations feel alive and eager, not performative. **Inspiration:** Naoki Urasawa technical diagrams, NHK World map graphics, 1980s NEC product brochures, the inside of a watch movement photographed from above, Shinkansen departure boards, and retro-futuristic EPCOT pavilion graphics. ## Layout Motifs and Structure The layout is an **aggressively broken isometric grid** — a deliberate departure from the 90% centered / 76% full-bleed default of this registry. There is no uniform column system. Instead the page is constructed as a **false isometric plane** tilted at 26.57° (the "true" isometric foreshortening angle used in pixel art), with each section block positioned as if it were a building rising from that plane. **Layout system:** - **Hero (Panel 0):** Full-viewport isometric city wireframe rendered as a layered SVG plane. The domain name "ipjosim.com" is the tallest building, set in 130px+ display type, rotated and slid along the iso-axis. A Lottie animation pulses the city grid into view over 2.4 seconds on page load. No centering — the wordmark anchors to the left iso-vanishing point. - **Content Panels (Panels 1–6):** Each panel is positioned as a face of a building: the top face (flat color), the left face (darker shade), the right face (darker shade still). Content lives on top faces. Gutters are 0 — faces abut each other with hairline iso-grid lines as the only separator. - **Drift offset:** Every other panel is offset by exactly `clamp(24px, 4vw, 64px)` in the X axis, creating an intentional staggered "step" pattern that reads as isometric depth rather than standard column breaks. - **Floating ticker bar:** A 48px-tall horizontal bar of scrolling ``-style ISO-encoded data (city labels, coordinates, timestamps) cuts horizontally across the entire viewport between Panels 3 and 4. It breaks any sense of top-to-bottom section flow. - **Sticky iso-axis rule:** A single 1px diagonal line at exactly 26.57° runs from the top-left corner to the bottom-right of the viewport at all times, rendered in the grid-line color (#2AFFB2 at 10% opacity). It is `position: fixed` and `pointer-events: none`. - **No hamburger menu, no sticky header, no footer nav.** Navigation is an isometric key block in the top-right corner: 4 building "faces" each labeled with a section name, clickable. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Hero wordmark:** [`Space Grotesk`](https://fonts.google.com/specimen/Space+Grotesk) variable, `wght 300→700`. Used at `clamp(56px, 12vw, 148px)` for the hero title. Tracking: `letter-spacing: -0.03em` at heavy weight, `+0.08em` at light weight. Space Grotesk has exactly the right retro-futurist geometry — the large ink traps and slightly humanist curves make it feel like a 1980s Japanese electronics brand identity. - **Section headers:** [`DM Sans`](https://fonts.google.com/specimen/DM+Sans) variable, `wght 500→700`, `16–28px`, uppercase with `letter-spacing: 0.12em`. DM Sans is clean, grotesk, and has a slightly mechanical quality that complements iso-grid aesthetics without being as aggressive as Bebas. - **Body / UI labels:** [`DM Sans`](https://fonts.google.com/specimen/DM+Sans) regular `400`, `14–16px`, `line-height: 1.6`. Lower-cased UI text (`font-variant: none; text-transform: lowercase` on labels only). - **Data ticker / monospaced details:** [`Space Mono`](https://fonts.google.com/specimen/Space+Mono) `400`, used only for the scrolling ticker bar and inline data fields. The period at the end of "ipjosim.com" in the ticker uses a glowing dot animation. **Palette — retro-futuristic:** | Role | Name | Hex | |------|------|-----| | Background void | Deep Tron Navy | `#0A0E1A` | | Primary surface (iso top face) | Electric Slate | `#111828` | | Left iso face | Iso Shadow Left | `#0D1420` | | Right iso face | Iso Shadow Right | `#080C14` | | Grid lines / structural hairlines | Phosphor Mint | `#2AFFB2` | | Accent 1 — Lottie highlight | Hot Coral | `#FF4D5E` | | Accent 2 — interaction / hover | Electric Yellow | `#F5E642` | | Accent 3 — secondary data | Neon Lilac | `#B084FF` | | Body text | Off-White Paper | `#E8EAF0` | | Muted text / ticker metadata | Slate Gray | `#5A6380` | | Ticker bar background | Dark Phosphor | `#0F1629` | All colors come from a retro-futuristic CRT-monitor palette: deep navy void, hairline phosphor-green grid lines, hot coral/yellow accents that recall 1980s Japanese arcade UI, and a single lilac to prevent the palette from reading as pure Tron homage. ## Imagery and Motifs **No photography. No stock illustration.** The visual world is built from three families of constructed form: 1. **Isometric SVG block-city (primary imagery).** Every content section is housed inside an isometric rectangular prism drawn in SVG. Faces have a flat color fill plus a 2px Phosphor Mint (`#2AFFB2`) hairline border on the iso-grid. The top face optionally carries a subtle dot-matrix pattern (5px spacing, 1px dots, 8% opacity) to read as a "grid plan surface." Buildings vary in height from 40px to 240px and are layered with `z-index` to create genuine depth perception. On hover, the hovered building's top face brightens by 12% and its Lottie-animated "antenna" plays. 2. **Lottie animations (motion layer).** Each isometric building has a small Lottie JSON animation mounted on its top face as an antenna or rooftop fixture: a rotating radar dish, a blinking broadcast tower, a glowing data orb, a spinning wind turbine. These are all 48×48–96×96px and play on loop at low speed (0.6× rate) until hovered, when they accelerate to 1.8×. The hero section has one large (360×360px) Lottie animation: an isometric cityscape assembling itself block by block, triggered on page load. Source: LottieFiles community library (isometric/3d-city category) or Airbnb Lottie open-source assets. 3. **Grid-line motif (structural decoration).** The hairline iso-grid is the site's dominant decorative motif. It appears as: (a) the fixed full-viewport diagonal rule at 26.57°, (b) a subtle SVG pattern background (`` at 40×23px repeating) on section backgrounds, (c) rule separators between building faces. The grid never dominates — it is always at ≤15% opacity on dark backgrounds and ≤6% on lighter surfaces — but it is everywhere, creating the impression of looking down at an infinite city plan. **Icon system:** All inline icons are **isometric pixel-art icons** (24×24 base, 2× for retina), drawn on a 12×12 isometric grid with three visible faces per icon (top, left, right), each face using the three-tier Tron Navy palette. There are no flat line icons on this site — every icon has iso depth. **Decorative micro-motifs:** - Diagonal rule breaks (`/////` in `#2AFFB2` at 20% opacity) used as section dividers instead of horizontal rules - Glowing dot clusters (3–7 dots, 4px, various accent colors, `box-shadow: 0 0 8px `) placed at iso-grid intersection points - Scanline overlay: a full-viewport `::after` pseudo-element with `repeating-linear-gradient(transparent 0px, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px)` to add a subtle CRT scanline texture without degrading readability ## Prompts for Implementation Build ipjosim.com as **one continuous isometric city you scroll through from above**, descending deeper into the city as you scroll down. The narrative arc is: you arrive at the city edge (hero), walk in along the main avenue (intro), enter the district buildings (content panels), pass through the night market corridor (ticker bar), reach the central plaza (climax section), and exit through the transit gate (final section). Every section has a name that plays into this metaphor — none of the section labels use SaaS vocabulary ("Features," "Pricing," "Team") — they use urban/cartography vocabulary ("District," "Avenue," "Coordinates," "The Plaza," "Transit Gate"). **Section-by-section build:** 1. **Hero — "City Edge":** Full-viewport, `height: 100vh`. Background is `#0A0E1A`. Centered (but only here — this is the one exception to the no-centering rule, because an isometric city *does* have a vanishing-point center). A 360×360 Lottie animation of an assembling isometric city plays top-center, triggered by `IntersectionObserver` on page load. Wordmark "ipjosim.com" in Space Grotesk at `clamp(56px, 12vw, 148px)` `wght 700`, color `#E8EAF0`. Tagline in DM Sans `wght 500` 18px below: "commit it to memory." No button. No CTA. 2. **Panel 1 — "The Avenue":** Three iso-buildings side by side (SVG), heights 120/200/80px. Each building top face holds a DM Sans heading (`wght 700`, 20px) + 2–3 lines of body. The three buildings are staggered by the drift offset rule. Scroll-triggered entrance: buildings slide up from 40px below their final position over 0.5s, staggered 0.15s each. 3. **Panel 2 — "First District":** Full-width iso-panel, the widest building in the design, stretching 110% of viewport width (overflowing intentionally — `overflow-x: visible` on section, `overflow-x: hidden` on `body`). A Lottie radar dish (96×96) spins on the rooftop. 4. **Panel 3 — "The Grid Room":** Background switches to `#111828`. Displays a pure 12-column iso-grid with content overlaid. This is the most grid-lines-heavy section: the SVG background pattern is at full 15% opacity here, and all five motif layers are active simultaneously. A Lottie data-orb (48×48) pulses in the top-right corner of the room. 5. **Ticker Bar — "Night Market":** `height: 48px`, `background: #0F1629`, `overflow: hidden`. `animation: ticker-scroll linear infinite` at `30s` duration. Content: 20+ items in format `[COORD: 35.6762°N 139.6503°E] · [STATUS: LIVE] · [SIGNAL: STRONG] · [ipjosim.com] ·` repeating. Font: Space Mono 12px, color `#2AFFB2`. Items separated by `·` in Hot Coral. 6. **Panel 4 — "The Plaza":** The most complex and immersive panel. Five iso-buildings of varying heights arranged in a radial fan pattern (CSS `transform-origin` trick). Each building has a different Lottie rooftop animation. The Plaza is 140vh tall — the only panel that requires internal scrolling to see all buildings. 7. **Panel 5 — "Coordinates":** Data-dense panel. Two columns (iso-building left face and top face side by side). Left face: a scrollable `` block in Space Mono, showing fake coordinate data, ISO timestamps, signal frequencies — all plausible-but-fictional. Top face: DM Sans body copy. The code block has a `caret-color: #2AFFB2` blinking cursor even though it is `contenteditable="false"` — cursor is faked with a `::after` animation. 8. **Panel 6 — "Transit Gate":** Final section. `background: #080C14`. A single Lottie animation of an isometric train departing a station (96×96) plays in the center-left. Beneath it: a single line of DM Sans body text. No social links, no email capture, no footer nav. The fixed diagonal grid rule fades out over this section. **Animation philosophy:** Lottie animations are the heartbeat of the site. They should never be disabled. They should all be looping. The city is alive. Do not add `prefers-reduced-motion` overrides — this site is built for the experience of motion. Use `lottie-player` web component from `unpkg.com/lottie-player@latest`. **CSS architecture:** Use CSS custom properties for all palette values. Use `clamp()` for all font sizes and panel dimensions. No media queries — the iso layout reflows naturally via clamp + viewport units. One stylesheet, no framework. **Do not build:** any CTA buttons ("Get Started," "Sign Up," "Learn More"), pricing tables, testimonial blocks, stat grids, social proof logos, hamburger menus, cookie banners, modal overlays, or sticky navigation headers. ## Uniqueness Notes 1. **First isometric-city layout in the registry.** Frequency analysis shows `isometric-icons` imagery at 0% and broken-grid layout at only 5%. No other design in the registry combines an isometric coordinate system with a retro-futuristic CRT palette. The standard broken-grid treatment in the registry is brutalist or editorial; this site is the first to use broken-grid *as a consequence of isometric projection geometry* rather than as a stylistic rebellion against grids. 2. **Lottie-as-structural-element, not decoration.** The registry shows `lottie-animation` at 3% — rare — and in those cases Lottie is used as a hero splash or loading screen. ipjosim.com uses Lottie as a *per-building rooftop fixture*, making each content block a living organism. The city cannot be understood without the animations; they are architectural, not cosmetic. 3. **Retro-futuristic CRT palette with phosphor-mint grid lines at 0% in registry.** The deep Tron Navy + phosphor-green combination is absent from the registry. The closest analogues (dark-neon at 5%, neon-electric at 2%) use blue-purple-pink neon palettes. The CRT phosphor-green + hot-coral + electric-yellow combination is specific to 1980s Japanese electronics / arcade aesthetics and does not appear elsewhere. 4. **Grid-lines as a fixed viewport structural element.** Grid-lines motif appears at 2% in the registry. On ipjosim.com, the grid is not merely decorative — it is a `position: fixed` viewport layer at all times, turning the browser window itself into graph paper. No other design uses the grid at the viewport level rather than the content level. 5. **Planned seed:** aesthetic: maximalist, layout: broken-grid, typography: sans-grotesk, palette: retro-futuristic, patterns: lottie-animation, imagery: isometric-icons, motifs: grid-lines, tone: friendly. Avoided overused patterns: centered layout (90%), full-bleed (76%), mono typography (83%), centered single-column. Preferred underused patterns: broken-grid (5%), lottie-animation (3%), grid-lines (2%), isometric-icons (0%).