dark-terminal-doclisted
Install: claude install-skill Tamircohen28/tamirs-superpowers
# Dark Terminal Document Design System
This skill produces single-file HTML technical documents with a consistent dark,
developer-aesthetic design system. The output of `cursor-vs-claude-code.html`
is the canonical reference for this style.
---
## Design DNA
**Aesthetic:** Dark IDE / terminal. Dense but readable. Monospace accents on
a sans-serif body. Brand colors used as semantic signals, not decoration.
Think: a beautiful internal tool, not a marketing page.
**NOT:** Light background, Inter/Roboto, purple gradients, rounded hero cards,
shadcn-style component libraries, glassmorphism excess.
---
## Exact Token Reference
Copy these CSS variables verbatim as the foundation of every document:
```css
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Syne:wght@400;600;700;800&display=swap');
:root {
/* Backgrounds — three levels of depth */
--bg: #0D0D10; /* page background */
--surface: #141418; /* card / thead */
--surface2: #1C1C22; /* section headers, elevated elements */
/* Borders */
--border: #2A2A32; /* all dividers and outlines */
/* Text */
--text: #E8E8EE; /* primary body text */
--muted: #6B6B7A; /* labels, secondary text, metadata */
/* Semantic status */
--yes: #4CAF7D; /* supported / green */
--no: #E05A5A; /* not supported / red */
--partial: #D4A843; /* partial / yellow */
/* Brand — override per document with the two subjects being compa