Shibuya Sign-Density Pop

# Shibuya Sign-Density Pop

## Philosophy

Shibuya Sign-Density Pop translates Tokyo's layered commercial streetscape into an interface language that feels saturated, kinetic, and immediate. The design behaves like a dense pedestrian corridor of competing signals: oversized headlines, compressed side labels, glowing ad panels, transit arrows, warning strips, and fragments of posters all stacked into a navigable overload. Rather than smoothing complexity away, it choreographs simultaneous messages so the user feels energized instead of lost.

### Values

- Urban simultaneity over quiet minimalism
- Wayfinding through vivid cues and stacked emphasis
- Commercial spectacle as usable interface structure
- Collision between polished screens and pasted street ephemera
- Motion-ready composition that implies live feeds, ads, and ambient refresh

### Anti-Values

- Flat corporate neutrality
- Single-scale typography
- Large empty surfaces without signal layering
- Muted monochrome palettes that suppress urgency
- Symmetrical layouts that erase street-level friction

### Visual Character

- Tall vertical stacks of narrow modules and sign towers separated by hard gutters
- Abrupt type hierarchy jumps mixing giant condensed numerals, compact kana-style labels, and tiny metadata strips
- Glossy billboard gradients with LED-like glow, reflective color bands, and luminous edge highlights
- Poster-fragment overlays using stickers, arrows, transit tags, caution bars, and offset labels pinned across surfaces
- Screen-within-screen frames where cards contain smaller broadcast panels, tickers, and inset displays

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#ff2d9a` |
| secondary | `#1fe3ff` |
| accent | `#ffe14d` |
| background | `#090713` |
| surface | `#151127` |
| text | `#f8f5ff` |
| muted | `#a89fc3` |
| border | `#3f3562` |
| error | `#ff5b6e` |
| success | `#4dff9c` |
| warning | `#ffb72b` |
| info | `#69a7ff` |

### Typography

- **Heading Font**: Bebas Neue
- **Body Font**: Barlow Condensed
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.2
- **Line Height**: 1.45
- **Letter Spacing**: 0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500;600&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Radii

- **None**: 0
- **Sm**: 8px
- **Md**: 16px
- **Lg**: 26px
- **Full**: 9999px

### Shadows

- **Sm**: 0 0 0 1px rgba(255,255,255,0.03), 0 10px 24px rgba(0,0,0,0.22)
- **Md**: 0 0 0 1px rgba(255,255,255,0.04), 0 18px 40px rgba(0,0,0,0.34), 0 0 24px rgba(255,45,154,0.14)
- **Lg**: 0 0 0 1px rgba(255,255,255,0.05), 0 24px 60px rgba(0,0,0,0.45), 0 0 42px rgba(31,227,255,0.18)

### Surfaces

- **Treatment**: gradient
- **Card Style**: glossy billboard panels with translucent overlays, scanline sheen, and inset mini-screens
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: crisp luminous separators, colored edge rails, and transit-label outlines that carve dense modules apart

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: snappy

## Rules

### Composition

Compose as a compressed entertainment district: major content lives in stacked sign towers, while supporting details cling to the edges as stickers, route strips, and ticker fragments. Every major surface should feel like rentable visual real estate rather than a neutral container.

### Hierarchy

Use violent scale shifts: one oversized word, one numeric beacon, then dense supporting labels and metadata. Hierarchy should jump abruptly instead of stepping smoothly; users scan by color, number, and directional marker before reading paragraphs.

### Density

High density with disciplined lanes. Surfaces are crowded, but each crowding move must be bounded by rails, borders, and inset frames so the scene feels orchestrated rather than random.

### Signature Patterns

- Primary cards are built as vertical sign stacks with 3 to 5 compressed modules separated by thin luminous dividers
- Section titles pair giant condensed display text with rotated side labels or transit-chip metadata
- Each major surface includes at least one screen-within-screen inset framed like a billboard or live display
- Poster fragments and sticker tags overlap card corners using absolute positioning, dashed outlines, and arrow pills
- Backgrounds use layered neon gradients plus subtle grid or scanline textures to evoke electronic signage

## Layout

### Grid

Desktop uses a 14-column asymmetric grid with a dominant central boulevard, narrow left sign rail, and right-side status stack. Tablet collapses to 8 columns while preserving stacked towers. Mobile becomes a single dense feed of vertically clipped panels with preserved overlay tags.

### Breakpoints

Mobile base at 0px, tablet at 760px, desktop at 1180px. Each breakpoint must keep dense vertical stacking, inset screens, and side labels rather than flattening to generic cards.

### Whitespace

Whitespace is used as a hard gutter and separator, not as calm atmosphere. Breathing room exists between stacks and inside small labels, but the overall scene should feel packed with signals.

## Guidance

### Do

- Stack related information in narrow vertical modules with contrasting color bands
- Mix giant headlines with compressed utility labels and route markers
- Use inset display windows, tickers, and secondary frames inside main cards
- Let stickers, arrows, and labels overlap edges to create layered street energy
- Maintain strong rails and separators so high density stays legible

### Don't

- Center everything into balanced hero layouts
- Reduce the palette to one accent color
- Use generic rounded SaaS cards without overlays or signage logic
- Rely on long body copy blocks as the primary hierarchy device
- Remove motion cues, glows, or inset screens from key surfaces