Saltar al contenido principal

Colors and fonts

Primary color

Used for accents — links, buttons, the active sidebar item, the search highlight.

Set it in project settings → Branding → Primary color, or just ask the agent:

"Make the primary color a slightly cooler blue." / "Set it to #5B6CFF."

The change applies live in the preview. Docsio computes hover and active variants from your base color automatically.

Dark mode

Every Docsio site supports dark mode. Visitors get a toggle in the navbar; their preference is remembered.

You can pick the default mode in branding settings:

  • Light (default for new projects)
  • Dark — sites that target a developer audience often prefer this
  • System — matches the visitor's OS preference

You don't need to design two themes. Docsio derives a sensible dark variant from your light theme automatically. If you want to override specifics, use Custom CSS.

Body and heading fonts

By default, Docsio uses DM Sans for body text and headings, JetBrains Mono for code. Both are loaded from Google Fonts.

To change, set them in branding settings:

  • Body font — any Google Font, or system-ui for the visitor's native font
  • Heading font — same options
  • Code font — JetBrains Mono, Fira Code, IBM Plex Mono, system-ui

Or ask the agent:

"Use Inter for body and Space Grotesk for headings."

Custom fonts

If your brand uses a font that isn't on Google Fonts:

  1. Host the font file somewhere your docs site can fetch it (your CDN, your main domain).
  2. Add an @font-face rule via Custom CSS pointing at the file.
  3. Reference the family name in branding settings.

Or upload the font into your project files and reference locally:

@font-face {
  font-family: 'AcmeSans';
  src: url('/fonts/acme-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

Custom CSS

For anything beyond colors and fonts, project settings → Branding → Custom CSS lets you add arbitrary CSS that loads after the theme. Useful for:

  • Adjusting heading sizes
  • Changing the navbar height
  • Custom admonition styles
  • Per-page overrides via class selectors
/* Tighter line-height on body text */
.theme-doc-markdown {
  line-height: 1.65;
}

/* Larger top spacing on H2s */
.theme-doc-markdown h2 {
  margin-top: 3rem;
}

CSS variables exposed by the theme are listed in Reference → Theme tokens (advanced).

Color scheme tips

  • High contrast wins on docs sites. Most readers scan headers and code. A primary color too close to your text color makes everything blur together.
  • Match your main site but don't exactly match it — docs benefit from being slightly more readable (higher contrast, larger text) than marketing pages.
  • Test in both modes. Switch to dark mode in the preview before publishing.