Brand Extraction
When Docsio scans your website, it automatically extracts your brand identity and applies it to your generated documentation site. The result is a docs site that looks like it belongs to your product from the start.
What Gets Extracted
Docsio uses Firecrawl's branding extraction to detect the following elements from your primary URL:
Colors
| Color | Description |
|---|---|
| Primary | Your main brand color, used for links and accents |
| Secondary | Supporting color for secondary elements |
| Accent | Highlight color for callouts and interactive elements |
| Background | Page background color |
| Text Primary | Main body text color |
| Text Secondary | Muted text and secondary content color |
All detected colors are stored as hex values and applied to the Docusaurus CSS custom properties that control the site's appearance.
Logo
Docsio checks multiple sources for your logo:
- The branding data returned by Firecrawl (logo URL from site markup)
- Open Graph image metadata as a fallback
The detected logo is displayed in the navbar of your generated docs site.
Fonts
Three font categories are detected:
| Font Type | Usage |
|---|---|
| Primary | Body text throughout the documentation |
| Heading | Page titles and section headings |
| Code | Code blocks and inline code (monospace families) |
Docsio inspects both structured typography data and the font families loaded on your site. Code fonts are identified by matching font family names that contain "mono" or "code".
Color Scheme
Docsio detects whether your site uses a light or dark default theme. This preference is applied to the generated docs site's color mode setting, while still allowing visitors to toggle between light and dark modes.
Favicon
If a favicon is detected in the branding data, it is used for the docs site. If no favicon is found, Docsio generates a branded SVG favicon based on your product name and primary color.
How Branding Is Applied
Extracted branding data is stored in your project's configuration and applied during two stages:
- Template hydration -- when the docs site is first built, branding values are written into the Docusaurus configuration file and CSS custom properties
- Live preview -- the development server reflects your branding immediately
The branding flows into these parts of the docs site:
- Navbar -- your logo and product name
- CSS variables --
--ifm-color-primaryand its variants (dark, darker, darkest, light, lighter, lightest), plus dark mode overrides - Typography -- Google Fonts links for your detected font families
- Color mode -- default light or dark theme
- Favicon -- displayed in the browser tab
Overriding Extracted Values
You can change any extracted branding value in Project Settings:
- Open your project in the editor
- Navigate to Project Settings
- Edit any value under the Colors, Logo & Imagery, Typography, or Theme & Spacing sections
- Click Save All Changes
Changes take effect on your next publish. You can also ask the AI Agent to update colors or styles directly -- for example, "Change the primary color to dark blue."
The Project Settings page shows a visual palette of all detected colors, making it easy to see your current brand at a glance before making changes.
In Project Settings, fields populated by brand extraction display an "Auto-detected from your website" or "Detected from your website" label so you can tell which values came from your site versus manual edits.