65 lines
2.9 KiB
Markdown
65 lines
2.9 KiB
Markdown
# Style Family: tech-cyberpunk
|
||
|
||
**Signature**: Dark-first, monospace, neon accents, high info density, terminal/IDE aesthetics.
|
||
**Reference products**: GitHub dark, Vercel docs dark, Cursor, Warp, Raycast, terminal apps, Cyberpunk 2077 menus.
|
||
**Best for**: developer infrastructure, security tools, AI tooling, observability dashboards, command-palette apps.
|
||
|
||
## Token defaults
|
||
|
||
### Color
|
||
- **Background**: dark by default — `#0a0a0b` to `#18181b` range. Pure black `#000` is acceptable.
|
||
- **Primary accent**: neon-leaning — electric blue `#3b82f6`, lime `#84cc16`, magenta `#d946ef`, cyan `#06b6d4`.
|
||
- **Text**: off-white with slight cool cast (`#e4e4e7`), not pure white.
|
||
- **Borders**: low-opacity white (`rgba(255,255,255,0.08–0.12)`) — barely visible structural lines.
|
||
- **Light mode**: optional and secondary. Many products in this family don't ship light mode; if they do, it's clearly not the headline experience.
|
||
|
||
### Typography
|
||
- **Heading**: geometric sans, mono, or hybrid — Inter, Geist, Space Grotesk, JetBrains Mono.
|
||
- **Body**: same as heading or paired sans.
|
||
- **Mono**: critical and prominent — JetBrains Mono, Geist Mono, Berkeley Mono, IBM Plex Mono. Used for code, IDs, command shortcuts, status text.
|
||
- **Mono in chrome**: keyboard hints `⌘K`, status badges, version numbers all live in mono.
|
||
|
||
### Radius
|
||
- **2 / 4 / 6 px**. Sharp but not aggressively so. 8px+ feels too soft for the family.
|
||
|
||
### Spacing
|
||
- 4px base, scale 4 / 8 / 12 / 16 / 24.
|
||
- Density: **compact**. The family thrives on info density. Spacious wastes the dark canvas.
|
||
|
||
### Shadow
|
||
- Often replaced by glow / inner shadow. Outer shadows on dark mode read as halos.
|
||
- Subtle inner shadow on inputs to imply depth.
|
||
|
||
### Motion
|
||
- Snappy (100–200ms). No bounce. State changes are crisp on/off.
|
||
- Selection / focus uses a glow ring or thin colored border.
|
||
|
||
## Anti-patterns *within this family*
|
||
|
||
- Light gray text on dark background (`#888` on `#000` fails contrast and looks generic). Use cool off-whites.
|
||
- Rounded pill buttons.
|
||
- Soft pastel illustrations.
|
||
- Stock-photo hero images.
|
||
- Whitespace as the design (this family is the opposite of `premium-luxury`).
|
||
- Avoiding monospace entirely. Mono is the family's voice.
|
||
- Toast notifications with bouncy entry.
|
||
|
||
## Typical surfaces
|
||
|
||
This family does well on:
|
||
- Developer dashboards (deployments, logs, traces)
|
||
- Command palettes
|
||
- Code editors and IDE-adjacent surfaces
|
||
- Observability and security tooling
|
||
- Terminal-inspired marketing pages
|
||
|
||
This family does poorly on:
|
||
- Marketing aimed at non-developer buyers (CFO, HR)
|
||
- Long-form reading
|
||
- Children / education
|
||
- Anything that needs to feel approachable to non-technical users
|
||
|
||
## Notes
|
||
|
||
The "AI tooling" wave (2024–) has made this family overused — every dev tool now ships with the same dark + neon accent + mono look. If the project is in this family, lean on a *specific* mono / accent combo that's not literal copies of GitHub or Vercel.
|