Design breakdown
An AI reading of this template's design: colors, type, spacing, sections and signature details. Ottermind starts from it when you use the template.
- Overall
documentation site, clean and professional, low density, light
- Palette
background #f5f5f5; surfaces #ffffff, #f9f9f9; text #1a1a1a; muted text #666666; primary #0066cc; accents #0099ff, #333333
- Type
headings Inter, 700, uppercase; body Inter, 16px; scale h1 48px, h2 36px, h3 24px
- Shape & spacing
button radius 6px, card radius 8px, borders 1px solid #e0e0e0, shadows 0 2px 4px rgba(0,0,0,0.1), section spacing 80px, content width 1200px
- Sections (top to bottom)
- Hero — full-width layout, single column, large headline centered, two CTA buttons below, background gradient from #f5f5f5 to #e0e0e0
- Features — three-column grid, each with icon, heading, and short paragraph, white cards on light gray background
- Documentation — two-column layout, left sidebar with navigation list, right main content area with nested headings and code blocks
- Testimonials — horizontal scrollable row of quote cards with avatar images, alternating alignment
- Footer — single column, logo row, links grouped in columns, copyright line
- Signature details
- Hexagonal lettering in header logo
- Consistent use of rounded corners across all UI elements
- Subtle drop shadows on cards and buttons
- Monospaced code blocks with syntax highlighting
- Hover effects on interactive elements (buttons, nav items)
- Clean, minimal typography hierarchy with consistent spacing
- Other pages
- /docs: structured documentation with sidebar navigation and collapsible sections
- /blog: article list with featured image, title, excerpt, and read-more link
- /about: team section with profile cards and mission statement
Template details
- Category
- Website
- Built with
- Hugo
- Listed on
- Hugo Themes
- Price
- Free
Original design by Hugo Themes, listed on Hugo Themes. Ottermind does not copy the template's code; it builds a new site from the brief.
The brief Ottermind starts from
It opens in Studio as a draft — add your brand, audience and pages before you send.
Build a website website inspired by the "Docsy" template. Reference brief: Theme Use original copy and imagery for my brand rather than the reference's placeholder content.
How to use this template
- 1
Click “Use this template” to open it in Ottermind Studio with its brief filled in.
- 2
Add your brand, audience, pages and content to the brief.
- 3
Ottermind builds a new site inspired by this design — keep editing it in the chat.
