Colors that actually feel branded
Brand extraction picks one color: your primary. That's enough for a docs site to feel branded — the navbar accent, link color, and CTA buttons all key off it. But "feels truly polished" needs three or four colors, plus an opinion about dark mode.
The minimum viable palette
Docsio uses these colors site-wide. Set them in project settings → Branding → Colors.
- Primary — links, the main CTA, the navbar accent.
- Background — page background. White by default; a barely-warm cream is more inviting and is what we use on Docsio's own site (
#fafaf9). - Text — body color. Not pure black —
#1c1917(a warm near-black) reads softer. - Border — subtle dividers. Usually a very-light variant of your primary, or a neutral.
Four colors are plenty. Skip the impulse to add a "secondary" and "tertiary" until you actually have a use for them.
Picking the primary
If brand extraction got it wrong, the most common reasons:
- Your site uses different primaries on different pages and Docsio picked the homepage one.
- Your "real" brand color is a gradient, and Docsio sampled a midpoint.
- Your site has a black/white minimal aesthetic and there is no real primary, so Docsio guessed.
For the third case — a black-and-white aesthetic — set the primary to a single warm accent (#a0785a is what Docsio uses, and it's a good default for sites that don't have one). Keep it close to neutral; saturated brand colors on a docs site read as cluttered.
Dark mode
Docsio's dark mode auto-derives most colors from light mode. The exception is your primary — if it's a dark color in light mode (#1a3a5c deep navy, for example), it disappears in dark mode.
Project settings → Branding → Colors → "Different primary in dark mode". Pick a brighter variant. Easiest rule: bump lightness by 30–40% for dark mode.
Test before you ship
Every published page on free + Pro renders both modes. Toggle dark mode on a few pages — long-form content, code blocks, an image-heavy page — before you publish. Most palette issues only show up on the page you didn't think to check.
What we don't recommend
- Saturated primaries that fight your code blocks. If your primary clashes with the syntax-highlighting theme, change one of them.
- More than two accent colors. Documentation that uses every section as a chance to introduce a new color reads as anxious.
- Locking dark mode off "for brand consistency". Half your readers prefer dark mode. Respect that.