# Design Language for kaigenrei.com

## Aesthetics and Tone

kaigenrei.com embodies the visual tension of a dopamine surge arrested mid-bloom -- the precise instant when a neon tube ignites inside a marble gallery, flooding veined Carrara surfaces with hot magenta and electric cyan. The word "kaigenrei" (改元令) carries the weight of imperial decree, of calendrical rupture -- the moment a new era is proclaimed and everything before is reclassified as history. The aesthetic is **dopamine classicism**: the neurochemical rush of saturated color and kinetic energy channeled through the formal language of Greco-Roman architecture, museum curation, and stone-carved permanence.

The mood is not the chaotic overstimulation of typical dopamine design. Instead, it is the controlled intensity of a symphony's climax performed in a palazzo -- every element is deliberate, every color hit is earned, every animation serves a narrative purpose. Imagine the Parthenon's pediment reconstructed in polychrome as scholars now believe it originally appeared: not austere white marble but blazing pigment. That is the spirit of kaigenrei.com -- the revelation that what we thought was restrained was always secretly vivid.

The tone is **professional** but never corporate. It carries the authority of an institution that does not need to explain itself -- a sovereign entity issuing proclamations, not a startup pitching investors. The professionalism manifests through precision: exact spacing, deliberate color placement, considered typography. There is no casualness here, no "hey there!" copy. The site speaks with the measured confidence of an edict carved into stone, but the stone itself pulses with neon light.

Visual reference points: James Turrell's light installations flooding architectural volumes with saturated color; the polychrome reconstructions of ancient Greek temples by Vinzenz Brinkmann; the saturated jewel-box interiors of Pedro Almodóvar's films; the tension between classical symmetry and fluorescent disruption in the work of artist Urs Fischer.

## Layout Motifs and Structure

The layout follows a **z-pattern** reading path -- but not the shallow, marketing-funnel z-pattern of conversion-optimized landing pages. This is a z-pattern derived from the way the eye traverses a classical altarpiece: top-left to top-right across the pediment, diagonally down through the central figure, then left-to-right across the predella. Each z-sweep reveals a new layer of the narrative, pulling the viewer deeper into the site's world.

**Structural Architecture:**

- **The Entablature (Header Zone):** A horizontal band spanning the full viewport width at the top, 80px tall, functioning as the architrave of a classical temple front. The domain name sits flush-left, and a minimal navigation cluster sits flush-right. Between them: negative space as deliberate as the metope panels between triglyphs. No hamburger menu -- navigation items are always visible, spaced at 48px intervals, because this is a site that has nothing to hide.

- **The Tympanum (Hero):** Below the entablature, a triangular composition zone occupying 85vh. Content is arranged in a triangular hierarchy: the primary heading at apex-center, with two flanking elements (an image panel left, a text block right) forming the triangle's base. The z-pattern begins here -- the eye enters at the heading, sweeps right to the text, drops diagonally to the image, then scans right to a glowing call-to-action marker.

- **The Colonnade (Mid-Section):** Three vertical content columns, each occupying exactly one-third of the viewport width minus 32px gutters. Each column is an independent narrative pillar. The columns do not contain identical card components -- they hold distinct content types (a text essay, an image composition, a data visualization or interactive element) unified only by their vertical alignment and shared baseline grid of 8px increments.

- **The Crepidoma (Base Sections):** As the user scrolls past the colonnade, the layout transitions to full-bleed horizontal bands -- wide, ground-hugging sections that serve as the stepped platform (crepidoma) upon which the entire visual temple rests. Each band alternates between dark marble backgrounds with light text and light marble backgrounds with dark text, creating a rhythmic alternation that guides the eye downward.

- **Z-Pattern Micro-Sweeps:** Within each major section, content is arranged in smaller z-sweeps: heading top-left, supporting element top-right, diagonal visual connector (a marble vein line or neon streak), then resolution bottom-left to bottom-right. This fractal z-pattern at multiple scales creates a consistent reading rhythm without monotony.

**Grid Specifications:** 12-column grid with 32px gutters on a 1440px canvas. Columns collapse to 6 on tablet (768px) and stack to single-column on mobile (375px), but the z-pattern is maintained through staggered offsets -- left-aligned elements alternate with right-aligned elements to preserve the diagonal eye movement even in a single column.

## Typography and Palette

**Typography:**

- **Display / Headlines:** "Playfair Display" (Google Fonts) -- the quintessential elegant serif, chosen here not for wedding invitations or luxury branding but for its architectural quality. Playfair's high contrast between thick and thin strokes mirrors the veining of marble: bold structural strokes interrupted by hairline fractures. Used at 3.5rem-7rem for primary headings, `font-weight: 700`, `letter-spacing: -0.02em`, `line-height: 1.05`. Always in title case -- this is a site that respects the formality of proper nouns. The italic variant (Playfair Display Italic) is reserved exclusively for single words within body text that require emphasis, creating a calligraphic interruption like a hand-lettered annotation in the margin of a classical text.

- **Body / Running Text:** "DM Sans" (Google Fonts) -- a geometric sans-serif with humanist proportions, providing legibility and warmth without the overused neutrality of Inter or the sterile geometry of Futura. DM Sans at 400 weight, 1rem (16px), `line-height: 1.65`, `letter-spacing: 0.01em`. Its slightly wide proportions give body text a sense of spaciousness that complements the marble-and-neon aesthetic. For secondary text (captions, metadata): DM Sans at 300 weight, 0.875rem, `letter-spacing: 0.03em`.

- **Accent / Navigation & Labels:** "Space Mono" (Google Fonts) -- a monospaced font used sparingly for navigation labels, timestamps, and technical annotations. Its rigid geometry and fixed-width characters provide a mechanical counterpoint to Playfair's organic curves, like seeing a digital readout embedded in a marble surface. Used at 0.75rem-0.875rem, `font-weight: 400`, `letter-spacing: 0.08em`, always in uppercase.

**Palette:**

The palette is structured as a classical architectural color system with neon disruptions:

| Role | Color | Hex | Description |
|------|-------|-----|-------------|
| Marble White | Primary Background | `#F0EDE6` | Warm off-white with a faint yellow undertone, like the surface of aged Parian marble under museum lighting |
| Vein Gray | Secondary Background | `#2A2630` | Deep charcoal-purple, the dark veining visible inside a cross-section of Bardiglio marble |
| Neon Magenta | Primary Accent | `#FF2D78` | Saturated hot pink -- the dopamine hit, the imperial decree, the color that makes the marble come alive |
| Electric Cyan | Secondary Accent | `#00E5CC` | A bright teal-cyan that serves as the complementary voltage to the magenta |
| Gilded Amber | Tertiary Accent | `#FFB347` | Warm amber-gold, evoking the gilded details of classical architecture and the warmth of candlelit galleries |
| Obsidian | Text on Light | `#1A1625` | Near-black with a violet undertone, softer than pure black against marble white |
| Chalk | Text on Dark | `#E8E4DD` | Warm near-white that reads as natural rather than digital against dark surfaces |
| Blush Stone | Subtle Highlight | `#F5D6E0` | A faint pink-marble tone for hover states, selected rows, and subtle emphasis areas |

**Gradient System:**

- **The Imperial Gradient:** `linear-gradient(135deg, #FF2D78 0%, #FFB347 50%, #00E5CC 100%)` -- used sparingly for hero backgrounds and primary interactive elements. This three-stop gradient evokes a neon sunset hitting marble, transitioning from hot magenta through gilded amber to cool cyan.

- **The Marble Gradient:** `linear-gradient(180deg, #F0EDE6 0%, #E8E4DD 40%, #F5D6E0 100%)` -- a subtle warm-to-blush gradient that simulates the natural color variation across a marble slab. Used for large background surfaces.

- **The Vein Line:** `linear-gradient(90deg, transparent 0%, #FF2D78 15%, #00E5CC 85%, transparent 100%)` -- a horizontal neon streak used as a decorative separator between sections, evoking a vein of mineral running through stone.

## Imagery and Motifs

**Mixed-Media Collage as Archaeological Excavation:**

All imagery on kaigenrei.com follows a **mixed-media** approach that treats each composition as an archaeological cross-section -- layers of history exposed by a vertical cut through sediment. Each image composition combines at least two of the following media registers, never appearing as a single unprocessed photograph or illustration:

1. **Marble Texture Underlays:** Every major image zone begins with a base layer of marble texture -- not photorealistic marble, but a stylized interpretation with exaggerated veining in the neon accent colors. Veins of magenta (#FF2D78) and cyan (#00E5CC) run through warm stone (#F0EDE6), creating surfaces that read as geological and digital simultaneously. These are generated as CSS backgrounds using layered `radial-gradient` and `linear-gradient` functions with careful opacity control, not as image files.

2. **Typographic Fragments:** Large letterforms (individual glyphs from Playfair Display at 200px+) are scattered across compositions as decorative elements -- not readable text, but architectural ornament. A giant italic ampersand partially obscured by an overlapping panel. A numeral "7" at 40% opacity serving as a background texture. These typographic fragments reference the inscribed letters on Roman buildings, where text and architecture are inseparable.

3. **Geometric Overlays:** Hard-edged geometric shapes -- rectangles, triangles, circles -- in the accent colors at 15-30% opacity, overlapping other content. These geometries reference both classical architectural plans (the golden rectangle, the triangular pediment) and the hard-edged color fields of contemporary art.

4. **Photographic Fragments:** When photographs appear, they are never full-frame. They are cropped to irregular shapes, partially masked by marble textures or geometric overlays, and desaturated to a warm monochrome (a `sepia(30%) contrast(1.1)` CSS filter) so they exist in the same tonal world as the marble. Occasional elements within the photo are selectively colorized in the neon accents -- a single object highlighted in magenta while the rest of the composition remains in warm sepia.

**Marble-Classical Motifs:**

The **marble-classical** motif system provides the decorative vocabulary:

- **Cornice Lines:** Horizontal decorative bands between sections that reference classical architectural moldings. Implemented as layered CSS borders and box-shadows creating a stepped profile: a narrow neon-magenta line (1px), 4px gap, a thicker warm-gray band (3px), 4px gap, another narrow neon-cyan line (1px). This five-layer cornice appears between every major section.

- **Column Fluting:** Vertical decorative lines within sidebar areas or column gutters -- fine parallel lines (0.5px, 8px apart) in 8% opacity Obsidian, evoking the fluted columns of Ionic architecture. These are purely decorative CSS elements that add texture without carrying content.

- **Acanthus Corners:** At the corners of key content panels, small SVG decorative elements inspired by the acanthus leaf capital of Corinthian columns -- simplified to 3-4 curved strokes in the accent colors, not a realistic botanical illustration but a geometric abstraction of the classical motif. Each corner ornament is 32x32px and rotated to fit its corner position.

- **Pediment Caps:** Key section headings are topped with a triangular SVG element -- a simplified pediment shape, 120px wide and 24px tall, centered above the text. The pediment is outlined in the neon accent colors with a subtle animated gradient that shifts between magenta and cyan over 8 seconds, creating a slow-breathing glow above each heading.

## Prompts for Implementation

**Full-Screen Narrative Opening:**

The site opens with a full-viewport experience that functions as the unveiling of a monument. The initial state is Vein Gray (#2A2630) filling the entire viewport -- a dark void, the unexcavated earth before the dig begins. After 300ms, a single horizontal neon line (The Vein Line gradient) draws itself across the viewport at 45% from the top, extending from 10% to 90% width over 1.2 seconds with a CSS `clip-path: inset(0 90% 0 0)` animation transitioning to `clip-path: inset(0 0% 0 0)`. This is the first striation in the stone.

At 800ms, a vertical crack appears from the center of the horizontal line downward, drawn in 0.8 seconds -- another neon vein, this one in pure cyan. Where the two lines intersect, a circular bloom of light radiates outward (a `radial-gradient` from Neon Magenta to transparent, animating from `scale(0)` to `scale(1)` at 15% opacity). The intersection becomes the origin point.

At 1.8 seconds, the dark background begins to peel away from the intersection point using a `clip-path: circle()` expanding from center, revealing the Marble White background beneath. The domain name "kaigenrei" fades in at the intersection point in Playfair Display 5rem, each letter appearing with a 40ms stagger and a spring physics animation (`transform: translateY(20px) → translateY(0)` with overshoot). Below the domain name, a subtitle in Space Mono 0.875rem uppercase fades in at 2.5 seconds: the site's tagline.

The entire opening takes 3 seconds and is skippable (clicking anywhere immediately resolves all animations to their end state). The opening does not replay on return visits (controlled via `sessionStorage`).

**Scroll-Driven Marble Cracking:**

As the user scrolls through the site, the marble textures in each section develop progressive "cracks" -- thin neon lines (1px strokes) that grow in length and complexity in response to scroll position. These are SVG `<path>` elements with `stroke-dasharray` and `stroke-dashoffset` animated by `IntersectionObserver`. In the first section, a single crack. By the final section, the marble is a web of luminous fractures, as though the dopamine energy contained within the site has been gradually breaking through the classical facade. This creates a narrative arc: restraint at the top, liberation at the bottom.

**Z-Pattern Eye Guidance:**

Each section implements the z-pattern through deliberate asymmetry. The primary element (heading, key image) sits top-left. A secondary element sits top-right, slightly lower (offset by 24px vertically) to create the diagonal pull. A visual connector -- either a neon vein line or a marble texture that flows diagonally -- bridges from top-right to bottom-left. The resolution element (CTA, key text, or next-section teaser) sits bottom-right. Spring animations fire as each element enters the viewport: top-left appears first, top-right 150ms later, the diagonal connector draws over 400ms, then bottom-left and bottom-right appear simultaneously with a spring bounce. The timing creates a choreographed reading experience.

**Interactive Marble Panels:**

Content panels throughout the site are styled as marble slabs -- warm off-white surfaces with subtle CSS gradient veining, 2px borders in Blush Stone (#F5D6E0), and `box-shadow: 0 4px 24px rgba(26, 22, 37, 0.08)` for gentle depth. On hover, the slab undergoes a transformation over 400ms with spring easing: the border transitions to Neon Magenta, the box-shadow intensifies and shifts color to `rgba(255, 45, 120, 0.12)`, and a faint neon vein line draws itself diagonally across the panel (a pseudo-element with animated `clip-path`). On click/tap, the panel expands slightly (`scale(1.01)`) with a 200ms spring animation, and the neon veining becomes fully visible. This interaction language -- dormant marble that awakens with neon energy on engagement -- is the site's core micro-interaction.

**Navigation as Entablature:**

The navigation bar is rendered as a classical entablature: a fixed horizontal band with three visual layers (a thin neon-magenta line at the very top, the navigation content area at 80px, and a thin neon-cyan line at the bottom, forming a visual sandwich). Navigation items in Space Mono uppercase have a unique hover state: a small pediment SVG (the triangular ornament) scales up from 0 to 1 above the hovered item, centered, in 200ms with spring easing. The active/current page has its pediment permanently visible and gently pulsing in opacity (0.7 to 1.0 over 3 seconds). On scroll past 100vh, the entablature background transitions from transparent to Marble White with a `backdrop-filter: blur(12px)` for a frosted-marble effect.

**AVOID:** CTA-heavy layouts with multiple competing action buttons, pricing comparison grids, testimonial carousels, stat-counter blocks, generic hero-image-plus-headline patterns, stock photography, cookie-cutter SaaS landing page structures. This site is a narrative environment, not a conversion funnel.

**Spring Animation System:**

All entrance animations use spring physics rather than CSS easing functions. Implement using CSS `animation-timing-function` with custom bezier curves that approximate spring behavior: `cubic-bezier(0.34, 1.56, 0.64, 1)` for standard spring-in, `cubic-bezier(0.22, 1.8, 0.36, 1)` for exaggerated bounce-in on hero elements. Scroll-triggered elements use `IntersectionObserver` with `threshold: 0.15` and apply spring-in animations sequentially with staggered delays.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Dopamine-Classical Paradox:** No other design in the portfolio combines the dopamine aesthetic (4% frequency) with marble-classical motifs (3% frequency). This pairing is deliberately paradoxical -- dopamine design is associated with bright, youth-oriented digital interfaces (TikTok, Candy Crush), while marble-classical motifs evoke museums, monuments, and millennia of architectural tradition. The collision produces something genuinely novel: a site that feels simultaneously ancient and overstimulated, like discovering that the Parthenon was originally painted in neon colors.

2. **Architectural Z-Pattern Navigation:** While z-pattern layout exists at 3% frequency, no other design in the portfolio derives its z-pattern from classical architectural composition (tympanum, colonnade, crepidoma). This transforms a standard UX layout pattern into a spatial narrative -- the user doesn't just read in a z-pattern, they traverse a virtual temple.

3. **Marble-Crack Scroll Narrative:** The progressive neon cracking of marble textures as the user scrolls is a unique storytelling device not present in any other design. It creates a site-wide narrative arc (restraint to liberation) that is driven by user interaction rather than content sequence. The marble starts pristine and ends fractured with light -- a visual metaphor for revelation, for the new era that "kaigenrei" proclaims.

4. **Polychrome Reconstruction Concept:** The core design concept -- that classical forms were always meant to be vivid, not austere -- is drawn from real archaeological scholarship (the Brinkmann polychrome reconstructions) rather than from design trend aggregators. This gives the site an intellectual foundation that distinguishes it from purely aesthetic dopamine designs.

5. **Entablature Navigation:** The navigation styled as a classical architectural entablature with pediment-shaped hover indicators is a unique interaction pattern not found in the existing portfolio. It integrates the marble-classical motif into functional UI elements rather than keeping motifs purely decorative.

**Documented Seed/Style:**
`aesthetic: dopamine, layout: z-pattern, typography: playfair-elegant, palette: dopamine-neon, patterns: spring, imagery: mixed-media, motifs: marble-classical, tone: professional`

**Avoided Overused Patterns:**
- Avoided `playful` aesthetic (95% frequency) -- used `dopamine` (4%) instead
- Avoided `centered` layout (99% frequency) -- used `z-pattern` (3%) instead
- Avoided `mono` typography dominance (99% frequency) -- Space Mono appears only as tertiary accent, not primary
- Avoided `warm` palette as sole palette direction (100% frequency) -- used `dopamine-neon` (6%) with specific architectural color justification
- Avoided `friendly` tone (97% frequency) -- used `professional` (13%) with institutional authority
- Avoided `vintage` motifs (80% frequency) -- used `marble-classical` (3%) for underrepresented classical reference
- Avoided `minimal` imagery (94% frequency) -- used `mixed-media` (15%) with specific collage methodology
<!-- DESIGN STAMP
  timestamp: 2026-03-09T15:35:56
  domain: kaigenrei.com
  seed: unspecified
  aesthetic: kaigenrei.com embodies the visual tension of a dopamine surge arrested mid-bloom...
  content_hash: af6b35a4d1b6
-->