Retro Compiler Design System

A nostalgic design system recreating the look and feel of vintage terminals and early compilers - complete with greyish-green phosphor colors, monospace typography, ASCII borders, and authentic CRT screen effects.

A Tessl Usage Spec for AI-Guided Development

🖥️ Features

Terminal Aesthetic: Monochrome green phosphor display with CRT effects
Programming-First: Monospace fonts everywhere (IBM Plex Mono, JetBrains Mono)
ASCII Art: Box-drawing characters instead of smooth borders: ┌─┐│└─┘
Compiler Animations: Progress bars with block characters [▓▓▓▓░░░░]
Keyboard-Driven: Every action shows keyboard shortcuts [CTRL+S]
CRT Effects: Scanlines, phosphor glow, screen curvature, glitch animations
Retro Computing: Authentic old-school compiler and terminal vibes

📦 Installation

Option 1: Install Directly from GitHub (Recommended)

tessl registry add git+https://github.com/tesslio/retro-compiler-design-specs.git

This automatically fetches and registers the usage spec.

Option 2: Clone and Install Locally

If you want to customize or explore the specs:

# Clone the repository
git clone https://github.com/tesslio/retro-compiler-design-specs.git

# Navigate to the directory
cd retro-compiler-design-specs

# Register with Tessl using relative path
tessl registry add file://$PWD

# Or use absolute path
tessl registry add file://$(realpath .)

Option 3: Install from NPM (Future)

Once published to npm:

npm install @tesslio/retro-compiler-design-system
tessl registry add npm:@tesslio/retro-compiler-design-system

🚀 Quick Start

Step 1: Install the Usage Spec

# Install directly from GitHub
tessl registry add git+https://github.com/tesslio/retro-compiler-design-specs.git

# Verify it was added
tessl registry list

Step 2: Install in Your Project

Navigate to your project and install the spec:

cd your-project
tessl registry install tesslio/[email protected]

This creates .tessl/usage-specs/retro-compiler-design-system/ in your project.

Step 3: Reference in Your KNOWLEDGE.md

Add to your project's KNOWLEDGE.md:

# Project Knowledge

## Design System

We use the Retro Compiler Design System for all UI components.

[@use](.tessl/usage-specs/retro-compiler-design-system/design-system.spec.md)

## Guidelines

- Follow terminal aesthetic patterns
- Use phosphor green color palette
- Apply monospace typography throughout
- Implement ASCII borders on components

Step 4: Use in Your Feature Specs

Create feature specs that reference the design system:

Example: features/calculator.md

# Scientific Calculator

Build a scientific calculator using the Retro Compiler Design System.

[@use](.tessl/usage-specs/retro-compiler-design-system/design-system.spec.md)

## Calculator Display
- Terminal-style display with phosphor green text
- Monospace font for numbers
- ASCII border around display area
- CRT glow effect

## Buttons
- Use terminal button component from design system
- Arrange in standard calculator grid
- Apply keyboard shortcuts for each operation

[@generate](./src/components/Calculator.tsx)

Step 5: Let Claude Code Build It

# Claude Code will now follow the design system automatically
tessl build features/calculator.md

🎨 Color Palette

Phosphor Green (Primary)

phosphor900: #0F380F - Deep background
phosphor500: #43A047 - Base color, active states
phosphor400: #66BB6A - Bright text
phosphor200: #A5D6A7 - Muted elements

Terminal Monochrome (Neutral)

terminal900: #0A0A0A - Pure black background
terminal600: #404040 - Borders
terminal400: #999999 - Secondary text
terminal50: #FAFAFA - Pure white text

🧩 Components Included

Component	Description	Spec File
Button	Terminal-style buttons with ASCII borders	`components/button.spec.md`
Form	Input fields with terminal prompts	`components/form.spec.md`
Modal	Dialogs with CRT styling	`components/modal.spec.md`
Card	Container with ASCII borders	`components/card.spec.md`
Navigation	Terminal-style nav components	`components/navigation.spec.md`
CRT Effects	Scanlines, glow, curvature	`effects/crt-effects.spec.md`
Terminal Interactions	Prompts, progress bars, typewriter	`effects/terminal-interactions.spec.md`

💡 Usage Example

Terminal Button Component

<TerminalButton
  variant="primary"
  prefix=">"
  keyboardShortcut="CTRL+S"
>
  SAVE
</TerminalButton>

// Renders visually as:
// ┌─ [CTRL+S] > SAVE _ ─┐

Compiler Progress Bar

<ProgressBar progress={65} status="COMPILING..." />

// Renders visually as:
// [▓▓▓▓▓▓░░░░] 65% COMPILING...

Terminal Display

<TerminalDisplay
  value="42"
  error={null}
  prefix=">"
/>

// Renders visually as:
// ┌─────────────────────┐
// │ > 42_               │
// └─────────────────────┘

📚 Documentation

Specification Files

All specifications are in .tessl/specs/:

.tessl/specs/
├── design-system.spec.md      # Main entry point
├── components/
│   ├── button.spec.md         # Button specifications
│   ├── form.spec.md           # Form inputs and controls
│   ├── modal.spec.md          # Modal dialogs
│   ├── card.spec.md           # Card containers
│   └── navigation.spec.md     # Navigation components
├── theme/
│   └── theme.spec.md          # Colors, fonts, spacing
├── effects/
│   ├── crt-effects.spec.md    # CRT screen effects
│   └── terminal-interactions.spec.md  # Terminal behaviors
└── accessibility/
    └── guidelines.spec.md      # A11y standards

Exploring the Specs

After cloning the repository:

cd retro-compiler-design-specs

# List all spec files
find .tessl/specs -name "*.md"

# View the main design system spec
cat .tessl/specs/design-system.spec.md

# View button component spec
cat .tessl/specs/components/button.spec.md

# View theme specifications
cat .tessl/specs/theme/theme.spec.md

🛠️ Dependencies

When using this design system, your project should include:

Required

React ^18.0.0 - UI component library
styled-components ^6.0.0 - CSS-in-JS for CRT effects and styling

Recommended Fonts

@fontsource/ibm-plex-mono ^5.0.0 - Primary monospace font
@fontsource/jetbrains-mono ^5.0.0 - Alternative monospace font with ligatures

Installation

npm install react styled-components
npm install @fontsource/ibm-plex-mono @fontsource/jetbrains-mono

🎯 Use Cases

This design system is perfect for:

Developer Tools: CLIs, terminals, code editors
Retro Gaming: Nostalgic game interfaces
Technical Dashboards: System monitoring, logs
Code Playgrounds: Interactive coding environments
Documentation Sites: Technical documentation with terminal aesthetic
Portfolio Sites: Developer portfolios with retro theme

♿ Accessibility

Despite the retro aesthetic, accessibility is a priority:

✅ WCAG 2.1 AA compliant - Meets modern accessibility standards
✅ Keyboard navigation - Full keyboard support with visual indicators
✅ Screen reader compatible - Proper ARIA labels and semantic HTML
✅ Respects prefers-reduced-motion - Disables animations for users who prefer reduced motion
✅ Color contrast - Phosphor green palette maintains 4.5:1 minimum contrast ratio

🤝 Contributing

Contributions are welcome! To contribute:

Fork the repository
Create a feature branch: git checkout -b feature/my-component
Add or modify spec files in .tessl/specs/
Test with Claude Code to ensure specs work as intended
Submit a pull request

Guidelines

Follow the existing spec structure and format
Include usage examples in spec files
Test with actual implementations
Maintain accessibility standards
Keep the retro terminal aesthetic consistent

📄 License

MIT License - See LICENSE file for details.

🔗 Links

GitHub Repository: https://github.com/tesslio/retro-compiler-design-specs
Tessl Documentation: https://docs.tessl.io
Usage Specs Guide: https://docs.tessl.io/common-workflows/better-code-with-usage-specs
Issues & Support: https://github.com/tesslio/retro-compiler-design-specs/issues

📝 Version History

1.0.0 (Current)

Initial release
Complete component library (button, form, modal, card, navigation)
Theme system with phosphor green palette
CRT effects and terminal interactions
Accessibility guidelines
Full documentation

Made with ❤️ and nostalgia for the golden age of computing

┌─────────────────────────────────────────┐
│ > RETRO COMPILER DESIGN SYSTEM          │
│                                         │
│ [▓▓▓▓▓▓▓▓▓▓] Ready to use ✓             │
│                                         │
│ tessl registry add git+https://github  │
│   .com/tesslio/retro-compiler-design-  │
│   specs.git                             │
└─────────────────────────────────────────┘

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
.idea		.idea
.tessl/specs		.tessl/specs
README.md		README.md
index.md		index.md
package.json		package.json
tile.json		tile.json

tesslio/retro-compiler-design-specs

Folders and files

Latest commit

History

Repository files navigation