Terminal
Condenses dense, hairline-bordered dark UIs around one electric-green accent.
- Version
- v1.0.0 · Updated Jul 18, 2026
- Context
- ≈1,492 tokens
- Security
- ✓ scanned
- License
- Single seat
- Works with
- Claude Code, Cursor, Codex
Checkout opens soon · launches at $9
≈1,492 tokens · v1.0.0
Live demo — an original page built in the Terminal style. Open in new tab
About this skill
Terminal design is a cyber-slick dark interface with terminal-inspired layouts, monospaced typography, hairline borders, dense data surfaces, sharp corners, and a single electric-green accent. Its live demo renders a developer docs page — code blocks, parameters table, API reference, and changelog.
The skill file
Terminal is the interface of a power user: dark, dense, and precise, built to feel like a high-end command line rendered as a modern UI. It runs entirely on monospaced type, hairline borders, and sharp corners, with a single electric-green accent that glows just enough to feel alive. Information is packed tight but stays legible through disciplined alignment and rhythm. Reach for Terminal when you are building for developers, operators, and data-heavy products where every pixel should feel engineered and nothing is decorative for its own sake.
Design principles
- Monospace everywhere: the grid of fixed-width type is the foundation of the whole aesthetic.
- Depth from lines, not shadows: hairline borders and faint glows define structure on dark.
- Sharp and exact: near-square corners and pixel-aligned spacing read as precise and technical.
- One signal color: electric green marks what is active, live, or important, and nothing else.
- Density with discipline: pack data tightly but keep generous internal rhythm so it stays scannable.
- Quiet by default, bright on focus: the interface is calm until something demands attention.
Color
The ground is a near-black #0A0C0B with a faint green undertone, and panels sit one step up on #111613. Secondary surfaces and hover rows use #1A1F1C. Borders are hairline #222A26, doing the structural work that shadows would in a lighter style. Body text is a soft off-white #D6E0DA for comfortable reading on dark, with muted metadata in #9AA5A0. The single accent is electric green #3DF07A, used for active states, key figures, status indicators, the command caret, and focus glows; it always carries a faint outer glow on interactive elements. Use green sparingly so it keeps its signal value. This style is dark-first; an optional light variant inverts to a paper-white #F4F6F5 ground with ink #0A0C0B text and a deepened green #0E9E4E to preserve contrast, but the dark theme is the canonical look.
- Typography
- Layout & spacing
- Components
- Motion
- Accessibility
- Use it with your AI tool
Preview ends here
Typography, Layout & spacing, Components, Motion, Accessibility & Use it with your AI tool unlock when checkout opens. Get notified
What's inside
- SKILL.md5.9 KB
More in Design
View allEditorial Pack
Collects the editorial cluster — typography-led, content-first pages in one install.
Design Systems Pack
Bundles every aesthetic design system in one install — switch styles per project.
Fiction
Illustrates children's-book warmth with bold outlines and saturated color.
Arcade
Presses chunky pixel buttons and rainbow shadows into arcade-cabinet fun.
More from @staqd
View profileEditorial Pack
Collects the editorial cluster — typography-led, content-first pages in one install.
Design Systems Pack
Bundles every aesthetic design system in one install — switch styles per project.
Fiction
Illustrates children's-book warmth with bold outlines and saturated color.
Arcade
Presses chunky pixel buttons and rainbow shadows into arcade-cabinet fun.