Retro ASCII — Interface Design Skill

Purpose

Build authentic CRT phosphor terminal-style interfaces . The design language simulates an old-school terminal with tar-black canvas, P1 phosphor green primary color, amber + red alarm LEDs, JetBrains Mono typography, and distinctive bracket-corner panel surfaces.

When to Use

• Designing dashboards, landing pages, web apps, or any UI with a retro/terminal/CRT aesthetic
• User requests "retro", "ASCII", "terminal", "hacker", "green screen", or "phosphor" style
• Building dark-themed interfaces with monospace typography and glow effects

Design System Reference

Consult references/design-tokens.md for the complete color palette, typography scale, spacing grid, and component specifications.

Core Principles

1. Tar-black canvas — Background is near-black with subtle green tint: rgba(5, 9, 10, 1) (#05090A)
2. P1 phosphor green primary — #00FF6A as the dominant accent
3. Amber + Red as alarm-only LEDs — #FFB000 for warnings, #FF3B3B for errors. Never decorative.
4. JetBrains Mono everywhere — Single typeface family, all weights
5. Zero border-radius — All corners are sharp. No rounding ever.
6. No shadows — Surfaces separate via background step + 1px border + bracket corners
7. 4px spacing grid — All spacing multiples of 4

Workflow

1. Call fetch_editor_state — Get current page context
2. Call locate_available_space — Find empty area for new frames
3. Create design tokens as variables (if not already present) — See references/design-tokens.md
4. Build components first — Create reusable panel, chip, meter, dot, cursor, line components
5. Assemble screen — Compose screens using components and auto-layout
6. Verify — capture_screenshot after each logical section

Panel Construction (.ra-panel)

Every content surface uses this pattern:

panel=I(parent, {type: "frame", name: "panel-name", layout: "vertical", width: 536, height: "hug_contents", 
  fills: [{type: "SOLID", color: {r: 0.02, g: 0.039, b: 0.027}, opacity: 0.6, visible: true, blendMode: "NORMAL"}],
  strokes: [{type: "SOLID", color: {r: 0.059, g: 0.122, b: 0.078}, opacity: 1, visible: true, blendMode: "NORMAL"}],
  strokeWeight: 1, strokeAlign: "INSIDE", padding: [24, 28], gap: 14})

Bracket Corners (Visual Signature)

Every panel has 7×7 right-angle bracket vectors at top-left and bottom-right corners. These are the defining visual element — never omit them.

// Top bracket row
bracketFrame=I(panel, {type: "frame", name: "brackets-top", layout: "none", width: "fill_container", height: 12})
// TL bracket: 7×7 vector with green stroke, positioned at (0,0)
// BR bracket: 7×7 vector with green stroke, positioned at (width-7, 0)

Typography Scale

All text uses fontName: {family: "JetBrains Mono", style: "..."}.

CRITICAL: Always set fill on text nodes — text is invisible by default.

Color Palette

Component Library

.ra-chip — Status Badge

Small rectangular badge with 1px colored border:

• Fill: #0F1F14 (dark surface)
• Stroke: matches text color (green/amber/red)
• Padding: [6, 10]
• Text: 9px Bold, matching state color
• States: OK (green), WARN (amber), FATAL (red)

.ra-dot — LED Indicator

• 8×8 square frame, solid fill matching state color
• DROP_SHADOW effect with spread: 3, radius: 0, same color @ 0.7 opacity (creates glow)
• Paired with 9px Bold label

.ra-cursor — Blinking Cursor

• 8×14 (or 16×28 for larger) solid green rectangle
• Represents terminal cursor insertion point
• Animation note: 1200ms blink via steps(1, end) — NEVER transition numbers

.ra-meter — Level Bar

• Row of 8×10 rectangles with 2px gap
• Filled segments: green (low), amber (mid-high)
• Empty segments: #0F1F14
• Label above: 9px Bold amber text (e.g. [ INPUT // PEAK ])
• Value: 26px Medium amber (e.g. -12 dB)

.ra-line — Horizontal Divider

• Frame: fill_container width, 1px height
• Fill: #0F1F14

.ra-topbar — Navigation Bar

• Horizontal layout, SPACE_BETWEEN alignment
• Left: brand name (26px Bold green) + tagline
• Right: chip indicators + status values
• Background: panel fill + 1px bottom border

Boot Log Lines

• Each line: 11px Regular
• Format: [timestamp] message
• Colors: green-dim (loading), green-text (success/OK), amber (warning), red (error)
• [ OK ] suffix right-aligned for completed steps

Layout Rules

1. Screen container: Vertical layout, #05090A fill, padding: 32, gap: 20
2. Multi-column: Horizontal layout with 20px gap. Common: 3-col (left 536 / mid 948 / right 536)
3. Section header: Horizontal layout, SPACE_BETWEEN, contains title (11px Bold green) + "open ↗" link (10px Bold dim)
4. Below header: 1px divider line, then subsection label (10px Bold dim), then panel content
5. Panel padding: 24px top/bottom, 28px left/right (adjustable per density)
6. Item spacing within panels: 12-18px for vertical lists, 14px for horizontal items

Extending the System

When a needed component doesn't exist in the reference system, derive it by:

1. Using the same color palette — no new colors
2. Using JetBrains Mono at existing scale sizes
3. Maintaining 0 border-radius
4. Using panel + bracket pattern for any new surface
5. Using 1px borders (never shadows) for depth
6. Keeping dot/glow pattern for status indicators
7. Using the established chip pattern for any tag/badge/label
8. Prefixing custom component names with .ra- convention

Common Extensions

Text Content Style

• ALL CAPS for headers, labels, status text
• // as separator in descriptive text
• :: for key-value pairs in technical labels
• [ ] brackets around section numbers and status codes
• · (middle dot) as delimiter in navigation items
• Monospace alignment: use consistent character widths for tabular data
• Terminal prompt format: user@host:~/path$ for footer/input areas

Do NOT

• Use rounded corners (cornerRadius must be 0)
• Use drop shadows for elevation (only for LED glow effects on .ra-dot)
• Use colors outside the defined palette
• Use any font other than JetBrains Mono
• Use gradients (except for rare decorative ASCII art backgrounds)
• Add images or photos (use ASCII art patterns instead)
• Use CSS transitions on numeric displays (step-function only)