Retro Futurism CRT

# Retro Futurism CRT

## Philosophy

Retro Futurism CRT imagines a control interface from an optimistic late-20th-century future: phosphor-glow telemetry, chamfered instrument housings, and vector-grid depth cues rendered with disciplined information hierarchy. It should feel like a mission console that is technical, cinematic, and legible under pressure.

### Values

- instrument-panel clarity over decorative clutter
- luminous status communication with immediate scanability
- machine-age optimism expressed through vector geometry
- tactile chrome framing around digital phosphor surfaces
- dense telemetry balanced by strict sectional rhythm

### Anti-Values

- soft consumer-app minimalism
- borderless glassy ambiguity
- pastel friendliness
- organic blob shapes
- casual editorial whitespace that weakens control-room focus

### Visual Character

- every major panel uses chamfered corners with a 2px chrome outer frame and 1px inner phosphor inset
- dark backgrounds carry horizontal scanline overlays and faint radial CRT vignetting
- section headers sit inside narrow status rails with uppercase micro-labels and right-aligned signal codes
- data zones use neon grid underlays or vector horizon lines behind content blocks
- interactive emphasis relies on dual glows: soft outer bloom plus sharp inset highlight in green or amber

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#7CFF72` |
| secondary | `#6BE7FF` |
| accent | `#FFB347` |
| background | `#07110E` |
| surface | `#0C1B17` |
| text | `#D8FFD7` |
| muted | `#82A89B` |
| border | `#35584F` |
| error | `#FF6E6E` |
| success | `#7CFF72` |
| warning | `#FFB347` |
| info | `#6BE7FF` |

### Typography

- **Heading Font**: Orbitron
- **Body Font**: Chakra Petch
- **Mono Font**: Share Tech Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.2
- **Line Height**: 1.45
- **Letter Spacing**: 0.04em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Chakra+Petch:wght@400;500;600;700&family=Share+Tech+Mono&display=swap

### Spacing

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

### Radii

- **None**: 0px
- **Sm**: 6px
- **Md**: 12px
- **Lg**: 18px
- **Full**: 999px

### Shadows

- **Sm**: 0 0 0 1px rgba(124,255,114,0.12), 0 0 14px rgba(124,255,114,0.10)
- **Md**: 0 0 0 2px rgba(107,231,255,0.14), 0 0 22px rgba(124,255,114,0.16), inset 0 1px 0 rgba(216,255,215,0.08)
- **Lg**: 0 0 0 2px rgba(255,179,71,0.16), 0 0 36px rgba(124,255,114,0.20), inset 0 0 22px rgba(107,231,255,0.06)

### Surfaces

- **Treatment**: gradient
- **Card Style**: raised instrument module with chrome shell, dark phosphor face, and inner glow
- **Bg Pattern**: grid

### Borders

- **Default Width**: 2px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: technical and structural; frames behave like equipment housings with crisp outer metal and luminous inner seams

### Motion

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

### Responsive

- **Breakpoints**: [1200,1024,768,480]
- **Column Progression**: 12 -> 8 -> 4 -> 1

## Rules

### Composition

Compose screens as an operations console: a top signal bar, a dominant hero instrument cluster, then segmented telemetry bays. Use framed modules with visible seams and reserved display zones rather than free-floating cards.

### Hierarchy

Headlines are compact and coded; numerical readouts and statuses carry the highest contrast. Labels live in micro-uppercase rails, body copy stays secondary, and alerts interrupt with amber or red glow blocks.

### Density

Moderately high density. Fit substantial information into each frame, but separate modules with obvious housing gaps and contrasting underlays so density feels engineered rather than crowded.

### Signature Patterns

- all primary containers use polygonal chamfered corners via clip-path paired with double-frame borders
- display surfaces include repeating scanline overlays using layered linear-gradients
- section headers are rendered as status rails with left title, centered rule, and right signal code
- charts, hero areas, and key cards sit on perspective grid or vector horizon backgrounds
- interactive controls use phosphor bloom on hover/focus plus inset highlight bars rather than flat fills

## Layout

### Grid

Desktop uses a 12-column command-deck grid with a 3-column sidebar, 6-column main instrument area, and 3-column telemetry stack. Tablet collapses to 8 columns and nests telemetry under the hero. Phone becomes a single column with rail headers stacked above content.

### Breakpoints

1200px+ full command deck; <=1024px 8-column split console; <=768px stacked modules with horizontal scroll for dense data; <=480px single-column, full-width actions, and compressed rail metadata.

### Whitespace

Whitespace is reserved as machinery spacing: tight within data clusters, larger between framed modules, and generous around hero telemetry to preserve the sensation of a protected display cavity.

## Guidance

### Do

- Use luminous green as the default data state and reserve amber for warnings or emphasized actions.
- Frame every important region as if it were mounted hardware, with visible shell and inset screen layers.
- Prefer coded labels, tabular numerics, and crisp monospace metadata for system credibility.
- Apply scanlines and vector grids selectively to display zones, not indiscriminately to all surfaces.
- Let hover and focus states brighten the phosphor bloom rather than radically changing component shape.

### Don't

- Do not introduce rounded consumer-app pills or soft blurred glass cards.
- Do not rely on large illustrations or playful iconography to carry identity.
- Do not flatten hierarchy by making all text equally bright.
- Do not remove framing borders; the housing effect is core to the language.
- Do not use slow easing or bouncy motion that breaks instrument precision.