Retro Computing 8-Bit

# Retro Computing 8-Bit

## Philosophy

A retro-computing interface language derived from 8-bit home computers, DOS utilities, ANSI BBS screens, and CGA-era display constraints. It treats the screen as a phosphor grid: every module is snapped to a strict pixel rhythm, surfaces are built from hard-edged tiles, and feedback appears as inverse-video labels, segmented meters, and blinking machine states.

### Values

- Respect limited-palette discipline and let color coding carry system meaning.
- Build hierarchy through framed windows, title bars, and dense monospace labeling.
- Preserve pixel alignment so borders, icons, and dithering read crisply at every size.
- Use machine-like feedback patterns such as segmented progress bars and status lamps.
- Pair nostalgia with utility: the interface should feel usable, not costume-like.

### Anti-Values

- Soft neumorphic depth, blur, and frosted glass effects.
- Rounded organic cards or fluid asymmetrical blobs.
- Palette sprawl beyond an intentional 8-bit inspired set.
- Airy luxury spacing that erases the compact workstation feel.
- Illustrative decoration that overwhelms functional screen structure.

### Visual Character

- Every panel uses stacked 1px pixel borders with a bright highlight edge and a dark shadow edge, recreating the embossed window frames of DOS and early desktop utilities.
- Backgrounds rely on repeating scanlines and checker-dither fills so flat colors feel like they are rendered through a low-resolution CRT instead of a modern smooth canvas.
- Typography mixes a bitmap-style display face for headers with dense monospace data text, using uppercase labels, inverse video chips, and tight tracking to simulate machine UI signage.
- Interactive controls are rectangular, low-radius keys with stepped shadows and discrete on/off indicator lamps, never soft pills or floating modern buttons.
- Information is arranged as tiled software windows, utility bars, and instrument bays on an 8px grid, producing the compact rectangular rhythm of file managers and BBS dashboards.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#55FF55` |
| secondary | `#5555FF` |
| accent | `#FF55FF` |
| background | `#0A0A0A` |
| surface | `#1B1B1B` |
| text | `#F5F5F5` |
| muted | `#AAAAAA` |
| border | `#E6E6E6` |
| error | `#FF5555` |
| success | `#55FF55` |
| warning | `#FFFF55` |
| info | `#55FFFF` |

### Typography

- **Heading Font**: Press Start 2P, monospace
- **Body Font**: VT323, monospace
- **Mono Font**: IBM Plex Mono, monospace
- **Base Size**: 16px
- **Scale Ratio**: 1.125
- **Line Height**: 1.45
- **Letter Spacing**: 0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=Press+Start+2P&family=VT323&display=swap

### Spacing

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

### Radii

- **None**: 0px
- **Sm**: 2px
- **Md**: 4px
- **Lg**: 4px
- **Full**: 9999px

### Shadows

- **Sm**: 1px 1px 0 #000000
- **Md**: 2px 2px 0 #000000
- **Lg**: 4px 4px 0 #000000

### Surfaces

- **Treatment**: noise
- **Card Style**: Dark phosphor panels with checker-dither overlays, inset title bars, and crisp framed modules.
- **Bg Pattern**: lines

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: High-contrast pixel borders with bright top-left highlights and dark bottom-right shadow edges.

### Motion

- **Duration**: 120ms
- **Easing**: steps(2, end)
- **Philosophy**: snappy

## Rules

### Composition

Compose screens as nested utility windows: a command/status bar at the top, a primary work surface in the center, and supporting instrument panels flanking it. Modules should align to an 8px grid and feel like rearrangeable software panes rather than marketing cards.

### Hierarchy

Use title bars, inverse labels, color-state chips, and boxed readouts to define hierarchy. Large type is reserved for screen titles and critical counters; most hierarchy comes from framing, fill contrast, and status color changes.

### Density

Compact and information-rich. Controls sit close together, lists are multi-row, and readouts expose many simultaneous states without collapsing into modern minimalism.

### Signature Patterns

- Apply repeating-linear-gradient scanlines plus a checker-dither pseudo-element on major surfaces so panels visibly emulate CRT phosphor texture and limited-color shading.
- Render every window and button with dual-edge pixel framing: a bright top-left border and a dark bottom-right border to create the stepped bevel common in DOS and 8-bit GUI shells.
- Use inverse-video title bars and status chips with uppercase bitmap typography, where labels sit inside framed rectangles instead of floating above content.
- Build meters and charts from discrete rectangular blocks or cell grids rather than smooth bars, making progress, memory, and signal states feel quantized and machine-like.
- Decorate key modules with tiny corner pixels, hard 90-degree geometry, and sprite-like icons so the interface never reads as a generic modern dashboard with a retro palette pasted on top.

## Layout

### Grid

Use a rigid 12-column desktop grid driven by an 8px base unit, with panels snapping to whole-column spans and all internal spacing resolved in multiples of 4px or 8px.

### Breakpoints

At tablet widths, collapse the three-zone workstation into two stacked rows while preserving full-width title bars and framed modules; at mobile widths, convert the interface into a single-column stack with touch-friendly controls and horizontally scrollable data tables only where necessary.

### Whitespace

Whitespace is economical and structural. Gaps separate windows and control groups, but empty space should never overpower the dense workstation character.

## Guidance

### Do

- Use the 16-color inspired palette intentionally, letting green, cyan, magenta, yellow, and red carry operational meaning.
- Snap icons, borders, and layout edges to pixel-friendly values so the interface remains crisp.
- Prefer framed windows, title bars, meter blocks, and ledger-like data lists over floating cards.
- Use bitmap or terminal-informed typography pairings that clearly distinguish headings from data text.
- Add scanline, dither, or phosphor texture subtly across large surfaces to keep the scene materially retro.

### Don't

- Do not introduce blur, translucent glass, or soft radial lighting.
- Do not use oversized rounded corners, pills, or amorphous panels.
- Do not rely on smooth modern charts or gradients when segmented blocks can express the same state.
- Do not let whitespace become sparse luxury minimalism.
- Do not mix photographic hero imagery or glossy 3D illustration into the workstation scene.