The DocNova Brand System
Logo, colors, typography, and voice — everything needed to represent DocNova consistently across every surface.
The DocNova Logo
The DocNova logo exists in two versions: the full combination mark (icon + wordmark + tagline) and the short icon-only mark. Use the full version whenever space allows.
Always maintain a minimum clear zone equal to the height of the icon on all four sides. Nothing — text, graphics, or UI elements — should enter this space.
- Rotate, skew, or warp the logo
- Apply drop shadows or outer glows to the wordmark
- Recreate or redraw the icon in a different style
- Place the bright icon on a lime or green background
- Stretch or compress the mark or wordmark
- Use a low-resolution rasterized version on large surfaces
- Add outlines or borders around the logo container
- Use the provided SVG or high-res PNG assets
- Maintain the correct logo version for the background
- Preserve the clear zone on all sides
- Use the icon-only version in favicon and avatar contexts
- Keep the icon's gradient direction and proportions unchanged
- Pair the logo with ample white space
- Use the lime CTA button style (not the logo) for emphasis
Brand Colors
DocNova uses a dark-first palette. Lime (#c6f135) is the single primary action color. Teal and blue are supporting accent colors. Never use lime as a background for body text.
Type System
Three typefaces, each with a clear role. Bricolage Grotesque for headlines, DM Sans for body, DM Mono for code and labels. All loaded from Google Fonts.
Documentation that ships with the product.
DocNova combines source-aware setup, structured authoring, AI-assisted writing, publishing, SEO, analytics, and operational controls in one documentation workflow for technical teams.
DOCS WORKFLOW PLATFORM · API DOCUMENTATION · write().review().publish() · v2.4.0
| Role | Size | Weight | Font |
|---|---|---|---|
| Hero H1 | clamp(2.8rem, 6vw, 5rem) | 800 | Bricolage Grotesque |
| Section H2 | clamp(1.8rem, 3.5vw, 2.75rem) | 700 | Bricolage Grotesque |
| Card H3 | 1.1rem – 1.25rem | 700 | Bricolage Grotesque |
| Lede / Intro | 1.05rem – 1.2rem | 400 | DM Sans |
| Body | 0.95rem – 1rem | 400 | DM Sans |
| Eyebrow / Label | 0.65rem – 0.7rem | 400 | DM Mono |
| Code / Pill | 0.76rem – 0.85rem | 400 | DM Mono |
Radius & Spacing System
DocNova uses a consistent border-radius system. The "pill" radius (999px) is reserved for tags, badges, and CTAs. Never use sharp corners - every element has at least 6px radius.
6px
Small inputs, inline tags, table cells
10px
Inner card elements, code blocks
12px
Small cards, feature highlights
16px
Feature cards, logo containers
20px
Main content cards, modal panels
999px - var(--pill)
CTAs, pills, badges, nav links
How DocNova Communicates
DocNova speaks with technical confidence and zero fluff. Write for engineers and technical writers who value precision. Never over-promise, never trivialise the work.
Direct
Lead with the outcome. Cut setup sentences. Engineers read the first line to decide if they'll continue.
✕ "We're excited to share that with DocNova you can now..."
Precise
Use specific language. Avoid "powerful," "seamless," "best-in-class." Describe what actually happens.
✕ "Our AI gives you powerful documentation insights."
Respectful
Treat the reader as an expert. Don't explain what an API is. Don't celebrate basic functionality.
✕ "Even beginners can use our easy drag-and-drop!"
Concrete
Use real nouns: endpoints, changelogs, workspaces, review workflows. Avoid abstract product-speak.
✕ "Our solution streamlines your documentation journey."
Overall Brand Rules
Consistency is the brand. These rules apply across every surface: website, product UI, social, presentations, and partner materials.
- Use the dark background (#0a0c12) as the default canvas
- Use lime (#c6f135) exclusively for the primary action
- Pair headings with short, punchy subheadlines in dim text
- Use the pill radius (999px) for all button and badge shapes
- Maintain a minimum 48px touch target for all interactive elements
- Use DM Mono for all code, labels, version numbers, and tags
- Test all text against WCAG AA contrast on dark backgrounds
- Show the mascot Nova in brand colors only
- Use gradient text ("grad-text") only for the single most important heading on a page
- Use lime as a body text color on a lime background
- Add additional accent colors not in the palette
- Use more than one gradient text heading per section
- Place body text below 0.85rem on any screen size
- Use red or orange in UI without an explicit error context
- Apply box shadows on dark surfaces (use border + glow instead)
- Recreate Nova in a different style, color, or proportion
- Use all-caps for headlines - reserve it for label/eyebrow text only
- Combine teal and blue gradients (use only lime + one accent at a time)
Need a brand asset or have a usage question?
Contact the DocNova team for high-resolution logo files, mascot assets, partner usage approvals, or co-marketing materials.