chyinan/terminal-ui-design-system
Overview
This skill provides a complete terminal-inspired UI design system with macOS-style window decorations, monospace typography, and a warm, developer-friendly color palette. It delivers tokenized colors, typography scales, spacing, components, and CSS implementation guidance for building consistent command-line aesthetics. Use it to quickly apply a polished terminal look across developer tools, docs, or marketplaces.
How this skill works
The design system exposes a set of CSS variables for colors, typography, spacing, radii, and shadows, plus component patterns and example markup. It documents window headers with macOS dots, navigation commands styled as terminal buttons, skill/category cards, code blocks, inputs, and animations like a blinking cursor. Implementation guidance includes usage rules for primary colors, syntax highlighting, spacing multiples, and accessible focus/hover states.
When to use it
- Building developer tools, CLIs, or IDE-like web interfaces
- Designing technical documentation or tutorials with code-first visuals
- Creating marketplaces or galleries for code-focused skills and components
- Styling dashboards that benefit from a command-line aesthetic
- Prototyping mock terminals, command palettes, or onboarding flows
Best practices
- Use the monospace font stack for all UI text to maintain the terminal look
- Apply the primary terracotta color for accents, focus rings, and active states only
- Reserve fluorescent green strictly for command prefixes ($) to keep authenticity
- Keep spacing on a 4px base unit and reuse scale variables for consistency
- Prefer high-contrast foreground/background pairs for readability in code blocks
Example use cases
- A documentation site with interactive terminal examples and syntax-highlighted command snippets
- An IDE-style skill gallery where each card shows command usage and line numbers
- A developer dashboard with sticky terminal-style navbar and command buttons
- A marketplace listing that displays install commands and live previews in a terminal window
- A tutorials hub that uses the blinking cursor and window controls to teach CLI flows
FAQ
Yes. Swap the primary token and adjust the linked hover/dark/light tokens. Keep syntax and fluorescent green usage rules to preserve the terminal feel.
Is the typography strictly monospace everywhere?
Monospace is the recommended primary stack for UI and code. A sans-serif fallback is allowed for rare display needs, but monospace maintains the aesthetic and rhythm.
