# Design Language for heisei.boo ## Aesthetics and Tone heisei.boo channels the tactile softness of a physical control panel from a 1990s Japanese consumer electronics device -- the kind of matte-finish, rounded-corner interface you would find on a high-end Sony MiniDisc player or a Panasonic word processor from 1996. The aesthetic is **neomorphism** rendered not as a generic UI trend but as a specific homage to the Heisei era's obsession with friendly, approachable technology: devices with physical buttons that had just enough depth to feel real, screens with just enough glow to feel alive, and enclosures with just enough curvature to feel like they belonged in your palm. Every surface on this site feels extruded from a single slab of cool matte plastic -- not the cheap kind, but the premium polycarbonate of a VAIO laptop circa 1999, where every seam was invisible and every radius was deliberate. The tone is **professional** in the quietest possible way. Not the aggressive professionalism of a SaaS pitch deck with bold CTAs and conversion funnels, but the restrained confidence of a product that knows it is well-made and does not need to shout. Think of the instruction manual for a piece of high-end Japanese audio equipment: precise, clean, unhurried, respectful of the reader's intelligence. There is no urgency. No exclamation marks. No "Get Started Now" buttons. Just information presented with the care of an engineer who believes the product speaks for itself. The mood oscillates between the quiet satisfaction of pressing a perfectly-weighted button and the gentle melancholy of a technology era that has already passed -- Heisei ended in 2019, and this site treats that ending not as a loss but as a crystallization, a moment frozen in resin where everything about mid-to-late-1990s Japanese industrial design achieved its purest expression before the smartphone collapsed all those careful physical interfaces into a single glass rectangle. ## Layout Motifs and Structure The layout follows a **card-grid** system inspired by the physical arrangement of function buttons on a hardware control surface -- not the generic card grids of dashboards and e-commerce sites, but a deliberate spatial composition where each card is a discrete, tactile "button" or "module" on a larger device face. The grid uses a 12-column base with gutters of exactly 16px -- narrow enough to make the cards feel like they belong to the same device, wide enough to create the shadow-gap illusion of separate physical components set into a shared chassis. **Primary Grid:** A 3-column card grid occupies the main content area (spanning columns 2-11 on desktop, leaving column 1 and 12 as the "bezel" -- the empty edge of the device enclosure). Cards are not uniform: the grid mixes 1x1, 2x1, and 1x2 card sizes in a pattern that mimics the asymmetric button layouts of hardware interfaces (where the most important function gets the largest button). The largest card always anchors the top-left position, functioning as the "display panel" of the device. **Card Anatomy:** Each card is a neomorphic element with two states: "resting" (extruded from the surface, casting a soft outset shadow) and "pressed" (depressed into the surface, casting a soft inset shadow). The transition between states occurs on hover/focus via the **scale-hover** pattern -- cards scale down to 0.97 on hover (simulating a physical button press) while simultaneously switching from outset to inset box-shadow. This micro-interaction is the site's primary tactile feedback mechanism. **Section Rhythm:** The page is divided into 3-4 "panels" -- each panel is a full-width neomorphic slab (like a separate device face or a removable module in a rack-mount system). Panels are separated by 48px of vertical space, which reads as the physical gap between stacked hardware modules. Within each panel, the card grid resets and reconfigures, so each panel feels like a different functional section of the same device (control panel, display panel, status panel, settings panel). **Navigation:** A single horizontal row of pill-shaped neomorphic buttons along the top edge -- no hamburger menu, no sidebar, no dropdown. Each nav button has the same scale-hover depression effect as the content cards, creating a consistent "everything is a pressable surface" interaction model. The active nav item uses an inset shadow (permanently "pressed") to indicate current state. ## Typography and Palette **Typography:** - **Headlines / Labels:** "Outfit" (Google Fonts) -- a geometric sans-serif with perfectly circular bowls, even stroke widths, and a friendly but serious personality. Used at 1.25rem-2.5rem for card titles, section labels, and the domain logotype. Its geometric precision evokes the typefaces used in Japanese consumer electronics branding of the 1990s (the clean, rounded, unpretentious lettering you would find etched into the bezel of a Sony Trinitron monitor). Applied with `letter-spacing: 0.04em` and `font-weight: 600` for labels, `font-weight: 700` for the domain logotype. All headings use sentence case -- no ALL CAPS, which would break the quiet professionalism. - **Body / Description:** "DM Sans" (Google Fonts) -- a low-contrast geometric sans-serif that pairs naturally with Outfit but adds slightly more warmth through its subtly rounded terminals. Used at 0.9375rem-1rem for card descriptions, panel text, and secondary information. Applied with `line-height: 1.65` and `letter-spacing: 0.01em`. Its optical clarity at small sizes makes it ideal for the dense information displays that hardware-inspired layouts demand. - **Data / Metadata:** "Geist Mono" (Google Fonts) -- a monospaced font used exclusively for timestamps, version numbers, status codes, and small metadata labels within cards. Used at 0.75rem-0.8125rem with `letter-spacing: 0.06em`. Its purpose is functional: wherever a piece of information would appear on a hardware LCD or LED display, Geist Mono provides the visual code-switching that signals "this is a readout, not prose." **Palette:** The palette is **cool-grays** -- a carefully graduated gray scale with a blue undertone that evokes the color of brushed aluminum, matte polycarbonate, and LCD backlighting. No warm tones. No earth tones. The entire chromatic world is the inside of a climate-controlled electronics lab. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background (device chassis) | Mist Gray | `#E8ECF0` | Page background, the "enclosure" surface | | Card Surface (extruded) | Cloud Silver | `#F0F4F8` | Card faces, nav pills, all raised elements | | Card Inset (pressed) | Steel Dim | `#D0D5DC` | Inset shadows, pressed states, active nav | | Shadow Light | Pearl White | `#FFFFFF` | Light-source edge of neomorphic shadows | | Shadow Dark | Slate Shadow | `#B0B8C4` | Dark edge of neomorphic shadows | | Text Primary | Graphite | `#2C3240` | Headlines, labels, primary body text | | Text Secondary | Pewter | `#6B7280` | Descriptions, metadata, captions | | Accent (indicator LED) | Heisei Blue | `#4A90D9` | Active states, links, the single color accent | | Accent Glow | Soft Cerulean | `#7BB3E8` | Hover glow, focus rings, subtle highlights | The accent blue (`#4A90D9`) functions as the site's single "indicator LED" -- it appears only where something is active, selected, or interactive. Its usage is deliberately sparse: a thin 2px bottom border on the active nav pill, a subtle glow on focused cards, a dot indicator on status elements. This restraint makes the blue feel precious and meaningful, the way a single blue LED on a device face communicates "power on" without any other embellishment. Neomorphic shadow formula: - **Outset (resting):** `box-shadow: 6px 6px 12px #B0B8C4, -6px -6px 12px #FFFFFF;` - **Inset (pressed):** `box-shadow: inset 4px 4px 8px #B0B8C4, inset -4px -4px 8px #FFFFFF;` - **Transition:** `transition: box-shadow 0.2s ease, transform 0.2s ease;` ## Imagery and Motifs **Bubble-Playful Motifs as Device Status Indicators:** The primary motif vocabulary is **bubble-playful** -- but recontextualized away from whimsy and toward the functional. Bubbles appear as circular status indicators, progress dots, loading states, and decorative elements that evoke the circular buttons, rotary dials, and LED clusters of physical electronics. These are not cartoon bubbles floating across the screen; they are precisely positioned circles of varying sizes that form clusters reminiscent of the button arrays on a mixing console or the ventilation holes on a speaker grille. **Circle Clusters:** Groups of 5-8 circles in graduated sizes (8px, 12px, 16px, 24px) are positioned at the corners of card-grid panels, functioning as decorative "ventilation patterns" or "speaker grilles." They use the same neomorphic shadow treatment as cards (outset circles that appear to protrude from the surface). On hover, individual circles in a cluster scale up sequentially (staggered by 40ms each), creating a ripple-like "bubble" animation that feels like pressing a row of buttons in sequence. **Floating Status Bubbles:** Small circles (6px-10px) filled with Heisei Blue (`#4A90D9`) appear adjacent to card titles or metadata to indicate status -- present/active/new. These mimic the LED indicator dots on physical hardware. They pulse with a very subtle opacity animation (0.7 to 1.0 over 2 seconds, ease-in-out) to simulate a gently breathing LED. **The Heisei Orb:** A single large circle (120px-160px diameter) rendered with a radial gradient from Cloud Silver (`#F0F4F8`) at center to Mist Gray (`#E8ECF0`) at edge, with the neomorphic outset shadow, serves as the site's logo mark / hero element. It is positioned at the intersection of the first panel and the navigation bar, functioning as the "power button" of the entire device metaphor. On hover, it casts a faint Heisei Blue glow (via `box-shadow: 0 0 20px rgba(74, 144, 217, 0.3)`), suggesting the device is responsive and ready. **Imagery Approach (Minimal):** True to the **minimal** imagery seed, the site uses no photographs, no illustrations, no icons from external libraries. Every visual element is generated through CSS: neomorphic shapes, gradient circles, border-radius manipulations, and box-shadow compositions. The "imagery" is the surface itself -- the interplay of light and shadow across the gray field is the entire visual story. Where other sites use images to communicate content, heisei.boo uses the tactile quality of its surfaces. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens not with a splash screen or hero image but with a "device boot sequence" -- 1.5 seconds of the Mist Gray background appearing to gradually illuminate from 70% brightness to 100% (via a CSS animation on `background-color` from `#D0D5DC` to `#E8ECF0`), simulating the backlight warming up on an LCD panel. During this warm-up, the Heisei Orb fades in at the center of the viewport (opacity 0 to 1 over 0.6 seconds, starting at the 0.8 second mark), followed by the domain logotype "heisei.boo" appearing directly below it in Outfit 700 at 1.5rem (fade-in over 0.4 seconds, starting at 1.2 seconds). This entire sequence takes 2 seconds and establishes the core metaphor: you are powering on a device. **Scale-Hover as Primary Interaction:** Every interactive element uses the same scale-hover pattern: `transform: scale(0.97)` on hover, combined with the outset-to-inset box-shadow transition. This consistency is critical -- it creates the illusion that every element on the page is a physical button. The scale-down is deliberately subtle (3%) to avoid feeling cartoonish; it should feel like the 1-2mm of travel on a well-damped membrane button, not the exaggerated bounce of a game UI. The transition timing is 200ms ease -- fast enough to feel responsive, slow enough to feel weighted. **Card Content as Hardware Modules:** Each card in the grid should be implemented as a self-contained "module" with a consistent internal layout: a small metadata line at the top (Geist Mono, 0.75rem, Pewter color, displaying a category or date), a title (Outfit 600, 1.125rem, Graphite), a horizontal divider line (1px, Steel Dim), and 2-3 lines of description text (DM Sans, 0.9375rem, Pewter). The divider line mimics the physical seam between the label area and the display area of a hardware module face. Cards with active/highlighted status get a thin left border (2px, Heisei Blue) instead of the divider being Steel Dim. **Panel Transitions:** As the user scrolls between panels, each new panel enters the viewport with a gentle upward translation (translateY 20px to 0) and opacity fade (0 to 1) over 0.5 seconds. This is NOT parallax -- there is no differential scrolling speed. It is a simple, dignified entrance animation that mimics the feeling of sliding a new hardware module into a rack: it arrives, clicks into place, and stays put. No bouncing, no overshooting, no spring physics. **Focus and Active States:** Keyboard focus rings use `outline: 2px solid #4A90D9; outline-offset: 4px;` with a subtle `box-shadow: 0 0 0 6px rgba(74, 144, 217, 0.15)` to create a soft glow around focused elements. The 4px offset ensures the focus ring floats above the neomorphic surface rather than touching it, reinforcing the layered-depth illusion. **AVOID:** CTA-heavy layouts (no "Sign Up" or "Get Started" buttons anywhere), pricing blocks, stat-grids with counter animations, parallax scrolling, warm color accents, gradient backgrounds, hero images, hamburger menus, scroll-triggered text animations, any layout element that prioritizes conversion over contemplation. **Responsive Behavior:** On tablet (768px-1024px), the card grid collapses from 3 columns to 2 columns. On mobile (<768px), it becomes a single column of full-width cards with 12px gutters. The neomorphic shadow depth reduces on mobile (4px/8px instead of 6px/12px) to account for closer viewing distance and smaller surfaces. The Heisei Orb scales down to 80px diameter on mobile. Navigation pills stack vertically into a column along the left edge on mobile, creating a "side panel" effect. ## Uniqueness Notes **Differentiators from other designs:** 1. **Neomorphism as Hardware Metaphor, Not UI Trend:** Unlike generic neomorphic designs that apply soft shadows for visual novelty, heisei.boo uses neomorphism to construct a specific narrative: the entire site IS a physical device from the Heisei era. Every shadow, every radius, every scale-hover depression serves the metaphor of pressing buttons on a 1990s Japanese electronics interface. This transforms a surface-level aesthetic into a storytelling device. 2. **Zero External Imagery:** While 95% of designs in this portfolio use "minimal" imagery, heisei.boo takes minimalism to its logical conclusion: there are literally no images, icons, or illustrations anywhere. Every visual element is pure CSS geometry (circles, rounded rectangles, gradients, shadows). The site proves that a neomorphic surface language can be visually rich without any image assets. This is unique among all designs reviewed. 3. **Cool-Gray Monochromatic with Single-Color Accent:** The palette is almost entirely gray with a blue undertone, using exactly one accent color (Heisei Blue #4A90D9) deployed as sparingly as an LED indicator on hardware. No warm tones, no gradient backgrounds, no duotones. In a portfolio where 100% of designs use warm palettes and 90% use gradients, this deliberate chromatic austerity is a stark differentiator. 4. **Scale-Hover as Sole Interaction Pattern:** Where other designs layer multiple interaction patterns (parallax + stagger + spring + morph), heisei.boo commits to a single interaction: the 3% scale-down with shadow inversion. This consistency creates an interaction language as unified as a physical device's button feel -- every surface responds the same way, building unconscious trust and tactile familiarity. 5. **Device Boot Sequence as Entry:** No other design in the portfolio opens with a hardware power-on simulation. The 2-second "backlight warm-up" and logotype fade-in sequence establishes the device metaphor from the first frame, before any content appears. **Chosen Seed/Style:** `aesthetic: neomorphism, layout: card-grid, typography: geometric-sans, palette: cool-grays, patterns: scale-hover, imagery: minimal, motifs: bubble-playful, tone: professional` **Avoided Patterns from Frequency Analysis:** - AVOIDED playful aesthetic (97% saturation) -- used professional neomorphism instead - AVOIDED centered layout (99% saturation) -- used card-grid with asymmetric sizing - AVOIDED warm palette (100% saturation) -- used cool-grays exclusively - AVOIDED gradient palette (90% saturation) -- flat gray surfaces with shadow depth instead - AVOIDED scroll-triggered patterns (96% saturation) -- used scale-hover as primary pattern - AVOIDED parallax (81% saturation) -- used simple translateY entrance, no differential scroll - AVOIDED mono typography (99% saturation) -- used geometric-sans (Outfit/DM Sans) as primary, mono only for metadata - AVOIDED vintage motifs (80% saturation) -- used bubble-playful circles as hardware indicators - AVOIDED friendly tone (97% saturation) -- used professional, restrained, engineer's-manual tone