Visual Theming
The DevDocs.dev color story, surface treatment, and emphasis rules.
The best-looking developer sites feel branded without fighting readability. DevDocs.dev should preserve calm documentation ergonomics while pushing the theme with stronger product signals.
Brand color anchors
| Token | Role | Example tone |
|---|---|---|
| Primary | Links, active states, progress thumb | #a855f7 |
| Warm accent | Gradient warmth and visual lift | #f9ab6d |
| Blue accent | Atmosphere and depth | #484dff |
| Cyan accent | Secondary highlight in gradients | #07eefd |
What changed in the shell
- a purple-forward theme preset replaced the neutral baseline
- page surfaces now sit on softer branded cards
- the sidebar and TOC use translucent surfaces instead of flat panels
- inline links are bolder and underline with primary color
Design goals
Purple is the anchor, but the backgrounds borrow a little warmth and blue from the logo so the page feels dimensional instead of monochrome.
The article card, sidebar, and TOC should feel layered and premium without turning into a full glassmorphism experiment.
We keep motion purposeful and restrained. The goal is cleaner emphasis, not excessive animation.
Emphasis rules
Keep the hierarchy simple
Use color most strongly for active navigation, inline links, and small moments of emphasis. Let spacing and structure do the rest of the work.
Where to look next
- Links And Emphasis for prose-level treatment
- Navigation Showcase for shell behavior
- DevDocs.dev for the combined effect on the landing page