Customizing Design
Docsio gives you full control over the visual design of your documentation site. You can customize through Project Settings for structured options, or through the AI agent for advanced CSS edits.
Colors
Open Project Settings to edit your site colors using color pickers. Docsio supports six color fields:
| Color | Purpose |
|---|---|
| Primary | Links, buttons, active states, and accent elements |
| Secondary | Supporting UI elements and secondary text |
| Accent | Highlights, badges, and call-to-action elements |
| Background | Main page background |
| Text | Primary body text color |
| Text Secondary | Muted text, captions, and metadata |
Each color field includes a color picker and a hex input, so you can either pick visually or enter exact values.
If you created your project by generating docs from a URL, Docsio automatically extracts your brand colors during the initial setup. You can adjust them at any time in Settings.
Fonts
Set three font families in Project Settings:
- Body Font -- used for paragraph text and general content
- Heading Font -- used for page titles and section headings
- Code Font -- used for inline code and code blocks
Enter any Google Fonts family name (e.g., Inter, Roboto, JetBrains Mono). A preview of your body font is shown below the input fields.
Logo
Enter a Logo URL in the Logo & Imagery section of Project Settings. The logo appears in the site navbar. You can also upload an image through the agent and then reference its path as the logo URL.
Theme
Toggle between Light and Dark as the default color scheme for your site. This sets the initial theme visitors see. Users can still switch themes on the published site if theme toggling is enabled.
Border Radius
Customize the corner rounding for UI elements (buttons, cards, code blocks) by setting a Border Radius value in Project Settings. The default is 8px.
Advanced CSS Editing
For design changes beyond what Settings covers, ask the AI agent to edit CSS directly:
Make the sidebar font larger
Add more spacing between sections
Change the navbar background to a gradient
Make code blocks have a rounded border with a subtle shadow
The agent edits the site's custom.css file and the changes appear in the live preview immediately.
All design changes -- whether made through Settings or the AI agent -- are preserved across publishes. Your customizations are saved as part of the project configuration.
Design Change Workflow
- Quick adjustments: Use Project Settings for colors, fonts, logo, theme, and border radius. Click Save All Changes when done.
- Detailed styling: Use the AI agent for any CSS change that goes beyond the Settings fields.
- Preview: All changes are visible in the live preview panel before you publish.