City-Pop Retro-Future

# City-Pop Retro-Future

## Philosophy

City-Pop Retro-Future is a design language built from the emotional contradiction at the heart of late-Shōwa optimism: the city is illuminated, mobile, prosperous, and technologically confident, yet every glowing surface already feels like a memory. It draws on 1970s–1980s Japanese city-pop album art, luxury consumer electronics, expressway night driving, commuter infrastructure, cocktail-lounge modernity, and the glossy promises of an urban future that never fully arrived. The interface should feel like a window into a humid neon evening where transit maps, cassette decks, skyline reflections, and chrome dashboard lights all participate in the same atmosphere. This is not nostalgia as kitsch. It is nostalgia as ambient infrastructure: polished, melodic, efficient, and faintly wistful. The system should make digital products feel like premium objects from a future imagined in 1983 and rediscovered at midnight. The emotional goal is controlled longing — the user feels invited into motion, romance, and possibility, while also sensing distance, memory, and time passing. The aesthetic must therefore balance exuberance and restraint: gradients glow, but layouts stay orderly; chrome shines, but typography remains disciplined; playful cultural cues appear, but they are framed by strong grid logic and metropolitan calm.

### Values

- Luminous optimism: interfaces should project confidence, mobility, and urban possibility through light, reflection, and horizon-like color transitions.
- Consumer-object sensuality: controls should feel like premium stereo hardware, car dashboards, ticket machines, or personal electronics rather than abstract flat software widgets.
- Transit modernity: information architecture should imply routes, schedules, destinations, and movement through the city instead of static browsing.
- Melancholic afterglow: every bright surface should carry a subtle undertone of memory, solitude, or emotional distance so the system never becomes childish retro pastiche.
- Polished illustration culture: use airbrushed gloss, skyline silhouettes, reflective bands, and album-cover framing cues to create a designed mood, not merely a UI skin.
- Nightlife precision: color and contrast should support evening use, with glowing accents and dark surfaces tuned for legibility under low-light conditions.
- Order beneath exuberance: despite the atmospheric styling, spacing, alignment, and hierarchy must remain crisp and metropolitan, like rail signage meeting lounge advertising.

### Anti-Values

- Grunge decay, distressed punk textures, or lo-fi clutter that make the world feel broken instead of polished.
- Pure minimal monochrome austerity that removes emotion, romance, and the consumer-electronic warmth central to the direction.
- Cartoon vaporwave randomness with no structural discipline, no transport cues, and no sense of believable city infrastructure.
- Brutalist harshness or raw developer-tool styling that eliminates gloss, reflection, softness, and wistful atmosphere.

### Visual Character

- Wide sunset-to-midnight gradients moving from apricot and coral into magenta, violet, and aqua, often running horizontally like a skyline dusk band.
- Glassy dark panels with chrome hairlines and reflective top edges, as if every module were a stereo component or tinted train window.
- Silhouetted skyline, elevated roadway, and route-line motifs that turn the page into an urban night journey rather than a generic dashboard.
- Circular dial, cassette-window, and transport-signage geometry mixed with slim uppercase labels and luminous numeric readouts.
- Soft bloom around accents and buttons paired with glossy highlight streaks so the interface feels airbrushed, premium, and slightly melancholic.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#ff4f8b` |
| secondary | `#5de4ff` |
| accent | `#ffd166` |
| background | `#09111f` |
| surface | `#132038` |
| text | `#eef6ff` |
| muted | `#99acc8` |
| border | `#79b8d6` |
| error | `#ff6b7a` |
| success | `#72f1b8` |
| warning | `#ffcb6b` |
| info | `#7ad7ff` |
| sunset_apricot | `#ffb27a` |
| sunset_coral | `#ff7d7f` |
| magenta_glow | `#ff4fd8` |
| violet_night | `#725cff` |
| aqua_glow | `#5de4ff` |
| chrome_white | `#f8fbff` |
| road_ink | `#060b14` |
| glass_navy | `rgba(14,26,48,0.72)` |

### Typography

- **Heading Font**: 'Yusei Magic', 'Orbitron', sans-serif
- **Body Font**: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif
- **Mono Font**: 'IBM Plex Mono', monospace
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.6
- **Letter Spacing**: 0.02em
- **Weights**: {"regular":400,"medium":500,"bold":700}
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Yusei+Magic&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,20,24,32,40,56,72]

### Radii

- **None**: 0
- **Sm**: 8px
- **Md**: 16px
- **Lg**: 24px
- **Xl**: 36px
- **Full**: 9999px

### Shadows

- **Sm**: 0 10px 30px rgba(0,0,0,0.22)
- **Md**: 0 20px 60px rgba(7,11,24,0.45), 0 0 30px rgba(93,228,255,0.10)
- **Lg**: 0 40px 120px rgba(3,7,16,0.70), 0 0 60px rgba(255,79,139,0.18)

### Surfaces

- **Treatment**: glass
- **Card Style**: Tinted midnight glass with chrome edge, gradient reflection strip, and occasional cassette-window inset.
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Borders should read like chrome trim on a luxury stereo deck: bright, precise, cool-toned, and reflective rather than heavy.

### Motion

- **Duration**: 240ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Philosophy**: deliberate

## Rules

### Composition

Compose every screen like an album-cover-meets-transit-console scene, with a strong horizon band, clear primary destination, and supporting modules arranged as instruments in a night-city set. Use panoramic regions more often than isolated cards. Anchor the top of the interface with atmospheric context such as skyline, route name, or destination status. Pair each dense informational cluster with one calmer reflective zone so the page breathes like a quiet train window between signs. Prefer long horizontal groupings, track lines, and stacked control decks that imply movement from left to right. Let key content blocks overlap softly through glow and reflection rather than aggressive z-index theatrics. Important modules should feel docked into a larger vehicle, lounge, or control cabin, not floating independently.

### Hierarchy

Primary hierarchy is created by luminance bands, scale of type, and destination-oriented naming rather than by blunt contrast alone. Headings should be rounded, melodic, and prominent, with compact uppercase utility labels beneath or beside them. Numeric readouts, times, frequencies, and route identifiers deserve high emphasis because they evoke transport and electronics. Supporting text should be cool and muted, never gray and dead. Calls to action should appear as illuminated controls framed by chrome trim. Secondary panels may use inset cassette-window subcontainers to differentiate metadata from narrative content.

### Density

Moderately dense. The language likes many signals on screen, but they must be organized into clearly tuned clusters with generous internal padding and consistent rails. It should feel like premium urban information design, not cramped software.

### Signature Patterns

- Every major panel includes a glossy horizontal highlight band near its top edge using a translucent gradient overlay.
- Section dividers and navigation tracks use glowing transit lines with circular stop markers instead of plain rules.
- Important data groups sit inside cassette-window insets: rounded rectangles with inner chrome border and dark smoked fill.
- Buttons and chips use dual-tone sunset gradients with soft outer bloom and a crisp chrome outline.
- Background scenes layer skyline silhouettes and elevated-road arcs behind the content shell to imply metropolitan motion.

## Layout

### Grid

Use a 12-column panoramic grid on desktop, collapsing to 8 columns on tablet and 4 on mobile. Favor wide hero bands, split dashboards, and horizontal control trays before vertical card stacks. Major modules should align to a shared outer shell with consistent left and right gutters, like signage mounted along a station concourse.

### Breakpoints

Desktop base at 1280px and above, tablet at 960px, compact tablet/large mobile at 720px, and phone at 520px and below. At each breakpoint, preserve skyline atmosphere, route-line motifs, and glass-panel rhythm rather than simplifying into generic stacked cards.

### Whitespace

Whitespace should feel like night air between lit objects: noticeable, cool, and rhythmic. Use large outer margins, medium inter-panel gaps, and compact internal spacing around labels and readouts so the interface feels composed and musical.

## Guidance

### Do

- Use sunset gradients, aqua accents, and chrome lines together so warmth and coolness coexist.
- Frame information as destinations, routes, tracks, windows, decks, frequencies, or night-city moments.
- Style form controls to resemble premium transport or stereo hardware with inset glazing and lit edges.
- Keep a wistful undertone by combining lively highlights with dark spacious backgrounds and reflective imagery.
- Use skyline silhouettes, road arcs, and luminous route markers as structural composition tools, not decorative stickers.

### Don't

- Do not flatten the language into generic SaaS cards with neon colors pasted on top.
- Do not use distressed retro textures, comic iconography, or ironic vaporwave chaos.
- Do not remove transit or consumer-electronics cues; without them the language loses its cultural specificity.
- Do not overfill every region with glow. Melancholy requires darkness, distance, and restraint.
- Do not leave native browser inputs unstyled or typography generic.