Website template

Hextra

Modern, responsive, batteries-included Hugo theme for creating beautiful static websites.

Blog · Documentation · Free

Hextra

Pages

Screenshots of the live demo, page by page. Scroll inside a page to see all of it.

/hextra/Hextra
Hextra website template, /hextra/ page, part 1
/hextra/aboutAbout – Hextra
Hextra website template, /hextra/about page, part 1
/hextra/blogBlog – Hextra
Hextra website template, /hextra/blog page, part 1
/hextra/docsIntroduction – Hextra
Hextra website template, /hextra/docs page, part 1

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 minimal, low density, light/dark mode

Palette

background #ffffff; surfaces [#171717, #006be6, #52a3ff]; text #000000; muted text #6a7282; primary #006be6; accents [#52a3ff]

Type

headings ui-sans-serif, 700, sentence-case; body ui-sans-serif, 20px; scale h1 48px / h2 32px / h3 24px

Shape & spacing

button radius 9999px, card radius 24px, no borders, subtle shadows, section spacing 64px, content width 1280px

Sections (top to bottom)
  • Header — fixed navigation bar with logo, menu items, search input, dark banner with announcement, white background
  • Hero — centered headline, subheading, CTA button, "Free, open source" badge, white background
  • Features grid — three-column layout of cards with gradient backgrounds, icons, and screenshots, white background
  • Secondary features — two-row grid of six cards with rounded corners, consistent spacing, white background
  • Footer — language toggle, system preference, powered by line, copyright, light gray background
Signature details
  • Gradient overlays on feature cards
  • Rounded corners on all cards and buttons
  • Minimalist typography with consistent spacing
  • Dark mode auto-switching based on system preference
  • Subtle hover effects on interactive elements
  • Clean, uncluttered layout with ample whitespace
Other pages
  • /about: full-width content block with paragraph text, credits list, light gray footer
  • /blog: article list with titles, tags, dates, read more links, RSS feed button, light gray footer

Template details

Category
Blog, Documentation, Starter Kit
Built with
Hugo
License
MIT
Author
Xin
Listed on
Hugo Themes
Price
Free
  • blog
  • dark
  • docs
  • light
  • minimal

Original design by Xin, 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 blog website inspired by the "Hextra" template. Reference brief: Modern, responsive, batteries-included Hugo theme for creating beautiful static websites. Style and features to reflect: blog, dark, docs, light, minimal. Use original copy and imagery for my brand rather than the reference's placeholder content.

How to use this template

  1. 1

    Click “Use this template” to open it in Ottermind Studio with its brief filled in.

  2. 2

    Add your brand, audience, pages and content to the brief.

  3. 3

    Ottermind builds a new site inspired by this design — keep editing it in the chat.