# Design Language for chika.dev

## Aesthetics and Tone

chika.dev (v2) is a **Luxury-Premium Retro-Futurist Vault** -- a bold-confident developer-portfolio reimagined as a high-end retro-futurist vault, where each project is a crystalline display-case in a chrome-and-neon archive. The luxury-premium aesthetic is read through retro-futurist lens: 1970s science-fiction film set design (think Logan's Run, Solaris, Saturn 3) elevated to a contemporary luxury showroom. Every surface is reflective, every edge is precision-mitered, every typography flourish reads as engraved on chrome.

The tone is **bold-confident** -- this developer announces. The art-deco-display typography is treated as carved chrome signage; the crystalline motifs catch and refract the retro-futurist palette of cobalt, magenta, citrine, and chrome. Stacked sections give each project its own vault-bay.

## Layout Motifs and Structure

The composition is **stacked-sections** -- a vertical sequence of full-viewport "vault bays," each a single project or sub-section. Each bay has a chrome-mitered border-frame, an art-deco-display headline, a crystalline display-element, and a brief project description. Sections do not blend; they snap into focus.

**Macro structure:**
- **Vault Entry (Section 0, 100vh):** A deep cobalt vault interior. At the center: an oversized art-deco "CHIKA.DEV" engraved-chrome title, with stepped pyramid frames. Below: subtitle "engineering things // archive of work // active 2018 to present." Two crystalline accent objects (faceted gems) drift in upper corners. A small "ENTER THE VAULT" prompt at the bottom (acting as scroll invitation, not CTA).
- **Section 1: Project Alpha (Section 1, 100vh):** A single full-viewport vault bay. Layout:
  - Left half: a large crystalline display-case rendered as an SVG faceted gem holding a project name engraved on its central facet
  - Right half: art-deco engraved headline, project meta (year, language, role), a brief description
  - Chrome-mitered border frames the entire bay
  - Card-flip pattern: hovering the crystalline gem causes the project's full description (longer prose) to flip into view, the gem rotating 180deg on its y-axis to reveal a back-face with extended details
- **Sections 2-6: Projects Beta through Zeta:** Five more vault-bays, each structured similarly, with variations:
  - Each project has its own crystalline shape (octahedron, dodecahedron, hexagonal prism, etc.)
  - Each project's accent color varies within the retro-futurist palette
  - One project (Section 4) inverts the layout (gem on right, text on left)
- **The Toolbelt (Section 7):** A different layout -- a horizontal row of small crystalline icons representing tools/languages, each in a chrome-mitered frame. Card-flip reveals project-counts using each tool.
- **About / Contact (Section 8):** A vault-bay with a crystalline portrait stand (a faceted gem with the developer's silhouette as a refraction inside it). Contact info engraved on the chrome frame.
- **Vault Exit (Section 9):** Final section. A small "VAULT SEALED // 2026" engraving with a brass-chrome lock motif.

The card-flip pattern is the dominant interaction motion: each crystalline gem flips on its y-axis to reveal back-face content. This is supported by neon-glow imagery: each gem has a subtle neon-glow halo that brightens during the flip transition.

## Typography and Palette

**Fonts (all Google Fonts):**
- **Display headlines / engraved-chrome titles:** "Cinzel" weight 600 -- a Google Fonts art-deco-display face with classical Roman proportions but engraved-feel stroke contrast. Used at clamp(48px, 7vw, 120px) for the vault entry title and at clamp(32px, 4.5vw, 64px) for project headlines. Tracking 0.08em uppercase.
- **Sub-labels / project meta:** "Cinzel" weight 500 at 12-14px, tracking 0.22em uppercase, used for "YEAR // LANGUAGE // ROLE" meta lines.
- **Body text:** "Inter" weight 400 at clamp(15px, 1.1vw, 17px), line-height 1.7. Italic Inter for pull-quotes and project descriptions.
- **Numerical engravings:** "Cinzel" weight 700 at clamp(24px, 3vw, 48px), used for project years and toolbelt counts -- the engraved numerical chrome reads as decorative typography.

**Palette (retro-futuristic mandate):**
- **#0E1A3A** Vault Cobalt (page ground, vault interior)
- **#1A2B5C** Indigo Depth (secondary deep, vault shadow)
- **#FF3D9A** Neon Magenta (primary accent, neon-glow halos)
- **#FFC93A** Citrine Glow (secondary accent, gem facet highlights)
- **#39E2FF** Electric Cobalt (tertiary accent, chrome reflections)
- **#C9C5BE** Chrome Polished (chrome frames, engraved metal)
- **#E8E5DA** Bone White (engraved type, readable text on cobalt)
- **#3F2055** Twilight Plum (gem shadow facets, deep refractions)

The retro-futuristic palette is anchored by deep cobalt and chrome; neon magenta and citrine glow are the gem accents; electric cobalt and twilight plum complete the gem facet vocabulary.

## Imagery and Motifs

**Core visual motifs:**

- **Neon-glow (imagery mandate):** Each crystalline display-gem has a subtle neon-glow halo behind it -- a 24px outer-shadow gradient in the gem's signature accent color (magenta, citrine, electric-cobalt, plum), pulsing at 15% to 35% intensity on a 4s loop. Section dividers between vault-bays have thin neon-glow accent lines. On hover, the neon-glow brightens to 60% intensity and the halo expands to 40px.
- **Crystalline (motif mandate):** Each project gem is a unique SVG faceted-crystal shape:
  - Octahedron (8 triangular facets)
  - Dodecahedron (12 pentagonal facets)
  - Hexagonal prism (8 facets)
  - Tetrahedron (4 facets)
  - Truncated octahedron (14 facets)
  - Cuboctahedron (14 facets)
  Each crystal has multi-stop gradients on each facet to simulate light refraction. Facets toggle between accent colors for a multi-color refraction effect. Each crystal has a faint engraved project-name on one central facet.
- **Chrome-mitered borders:** Each vault-bay has a thin chrome-feel border frame with mitered 45deg corners (engraved with small deco ornament-marks at the miter points). Borders use a multi-stop gradient (chrome-polished → bone-white → chrome-polished) to simulate metal reflection.
- **Stepped pyramid frames:** The vault entry title sits inside a stepped pyramid (3-level deco frame) drawn in chrome-polished gradient with engraved-feel inset shadows.
- **Engraved typography:** All chrome-frame headlines have a subtle inset-shadow + thin highlight-stroke to simulate the type being carved into the chrome -- a 1px dark inset shadow + 1px light highlight on opposite sides.
- **Gem-flicker accents:** Tiny single-facet "diamond" SVG accents (2-3px) scattered across vault-bays, occasionally flickering (a 100ms scale-pulse) to suggest reflected stars.

## Prompts for Implementation

**Opening:** Page loads on vault cobalt. The chrome-mitered border of the vault entry frame draws in via SVG stroke-dashoffset (1.4s, starting from the top-left miter and traveling clockwise). Once the frame is complete, the engraved title "CHIKA.DEV" reveals letter-by-letter with an engraving-feel transition: each letter has a brief 200ms inset-shadow expansion that settles to its resting depth. The stepped pyramid frame around the title draws via stroke-dashoffset. Two crystalline accent gems fade in at the upper corners with their neon-glow halos. The "ENTER THE VAULT" prompt fades in last.

**Scroll narrative:** As the user scrolls into each project vault-bay:
- The chrome-mitered border draws in around the entire viewport (1.2s)
- The crystalline gem fades in with a scale-from-0.85 (1.0s)
- The neon-glow halo activates and begins pulsing
- The engraved headline reveals letter-by-letter
- The project meta line types in
- The body description fades in line-by-line
- The gem-flicker accents begin their occasional sparkle

**Card-flip interaction:** Hovering any crystalline gem:
- The gem's neon-glow halo brightens (35% to 60% intensity) and expands (24px to 40px)
- The gem rotates 180deg on its y-axis over 800ms (cubic-bezier(0.65, 0, 0.35, 1) -- a smooth flip)
- During the flip, additional facets become visible (the gem reveals its previously-hidden back-face)
- On the back-face: a brief extended project description engraved on the central facet
- Click-tapping the gem locks it in flipped state until clicked again
- During the flip, surrounding chrome frame mitered corners briefly highlight

**Stacked-section snap:** Each vault-bay snap-scrolls into focus (scroll-snap-stop: always at each section boundary). The user experiences each project as a distinct vault chamber.

**Toolbelt hover:** Hovering any toolbelt crystalline icon:
- The icon scales 1.06 and brightens its neon-glow
- A small chrome-engraved count appears beside it (e.g., "Rust // 7 projects")
- The icon performs a quick card-flip to reveal a back-face with project names

**About section:** The crystalline portrait stand subtly rotates on its y-axis on a 12s loop (a slow continuous reveal of facets). Hovering pauses the rotation and flips the gem to reveal the portrait silhouette.

**Vault Exit:** The final section's lock motif performs a single "click" animation (a small scale-press) when the user reaches the bottom. The chrome-mitered border seals (the border re-draws as if closing).

**Avoid:** No CTA-heavy layouts. No pricing (this is a portfolio, not a service). No newsletter modal. No stat-grid (the toolbelt counts are deliberate inversions of stat-grids -- they read as inventory of mastery, not as metric brag).

## Uniqueness Notes

**Differentiators from other designs:**

1. **Luxury-premium aesthetic applied to developer portfolio:** Developer portfolios in the batch are typically corporate or terminal; this design treats the developer's work as a curated luxury archive with chrome and crystal. Luxury-premium is 2% in the batch.

2. **Stacked-sections as vault chambers with scroll-snap:** Each project gets its own vault bay with chrome-mitered border and crystalline display-gem; scroll-snap enforces the chamber-by-chamber pacing. Stacked-sections is 2% in the batch.

3. **Crystalline motif as 6 unique faceted-gem shapes:** Each project has its own polyhedron (octahedron, dodecahedron, etc.) rendered as SVG with multi-facet gradients. Crystalline motif is 5% in the batch.

4. **Card-flip as gem rotation revealing engraved back-faces:** Each gem rotates 180deg to reveal back-face content engraved on the central facet -- a specific material metaphor. Card-flip pattern is 4% in the batch.

5. **Engraved-chrome typography (Cinzel) with inset-shadow + highlight-stroke:** All headlines are treated with engraving CSS to simulate carved-metal type -- a distinctive material treatment of art-deco display typography. Art-deco-display is 3% in the batch.

Chosen seed: aesthetic: luxury-premium, layout: stacked-sections, typography: art-deco-display, palette: retro-futuristic, patterns: card-flip, imagery: neon-glow, motifs: crystalline, tone: bold-confident

**Avoided patterns from frequency analysis:** No parallax (96%), no centered/card-grid (96%/93%), no warm gradient (95%/78%), no mono (81%), no mysterious-moody (71%), no photography-fill (91% -- 100% SVG geometric/crystalline). Used: stacked-sections (2%), luxury-premium (2%), art-deco-display (3%), retro-futuristic (6%), card-flip (4%), neon-glow (3%), crystalline (5%), bold-confident (4%).