Pure semantic HTML and pure CSS, with no JavaScript
HugoStarter
risotto — Hugo Starter Template
By joeroe
risotto is a minimalist, responsive Hugo theme with terminal color aesthetics, built with pure HTML and pure CSS, no JavaScript, and includes 20 base16-based color schemes.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-02View source
What stands out
A quick read of the recorded project description.
Responsive layout using CSS Grid, without relying on manual breakpoints
20 built-in base16-based color schemes, including 13 dark and 7 light
Supports extending colors via base16-styles CSS variable files or custom variables
Provides .baseXX and .bg-baseXX utility classes for directly referencing colors in content
Automatically detects favicon and site.webmanifest in the static/ directory
Template Details
risotto is a minimalist, responsive theme for Hugo, inspired by terminal ricing aesthetics. The theme uses semantic HTML and pure CSS, contains no JavaScript, and does not rely on CSS frameworks or preprocessors. Its stylesheet structure is simple and easy to modify directly. The layout uses CSS Grid for native responsive behavior without relying on manually defined breakpoints.
For colors, the theme defines colors through the base16 framework and includes 20 built-in palettes (13 dark, 7 light), including catppuccin, dracula, gruvbox, solarized, tokyo-night, windows-95, and others. It uses base16-dark by default. You can switch via the theme.palette parameter, or place CSS variable files from the base16-styles repository into the static/css/palettes directory to use other base16 styles. For full customization, define the corresponding CSS variables according to base16's 00–0F color slots; for light schemes, reverse the order of 00–07. In content, you can directly use the .baseXX and .bg-baseXX utility classes to reference these colors.
The theme automatically detects favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, and site.webmanifest in the static/ directory and writes them into the site head. The "cooked rice" emoji icon used by the example site comes from the Twemoji project and is licensed under CC-BY 4.0.
Installation is done by downloading a release and extracting it into the project's themes/ directory, or by cloning the repository into themes/risotto and checking out the latest version tag. If the site itself is a git repository, the clone method is not available; you can use git submodule instead, but the README notes that this is not recommended because tracking a specific version is difficult. To update, if installed via git clone, run git pull; otherwise, re-download the release and overwrite the old version. To enable the theme, add theme = 'risotto' in hugo.toml, or theme: risotto in hugo.yaml. For theme-specific parameters, refer to exampleSite/config.toml.
HugoLauncher
Is it right for your project?
Use Cases
- Providing a minimalist terminal-color-style appearance for a Hugo site
- Static sites that need no JavaScript and stylesheets that are easy to modify directly
- Quickly switching theme colors from built-in palettes such as catppuccin, dracula, gruvbox, and solarized
- Customizing colors with the base16 system and using utility classes to color body content
Suitable For
- Developers building personal blogs or documentation sites with Hugo
- Users who prefer terminal ricing aesthetics and low-dependency front-end styles
- Projects that need pure CSS responsive layout without introducing JavaScript
- Those who want to unify site colors with base16 palettes
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Download the latest release and extract it into the project's themes/ directory, or clone the repository into themes/risotto and check out the latest version tag
- 2
If the site itself is a git repository, the clone method is not available; you can use git submodule instead, but the README says this is not recommended
- 3
Add theme = 'risotto' in hugo.toml, or theme: risotto in hugo.yaml
- 4
For theme-specific parameters, refer to exampleSite/config.toml and select a built-in palette via theme.palette
- 5
Favicon files must be placed directly in the site's static/ directory, not in a subdirectory or the theme's static/ directory
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in the public repository under the MIT license; the free scope is the code of that version and does not mean external services or third-party assets are free.
Must comply with when using
- You may use, modify, commercialize, and distribute the code of this version for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- If the site itself is a git repository, you cannot install by cloning the theme repository and checking out a tag; you need to use git submodule instead.
- The README explicitly does not recommend installing via git submodule because tracking a specific version is difficult.
- Favicon files must be placed directly in the site's static/ directory, not in a subdirectory or the theme's own static/ directory.
- The cooked rice emoji icon used by the example site comes from Twemoji and is licensed under CC-BY 4.0, which differs from the theme code's MIT license; that license must be followed when using it.
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; you cannot judge solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Note that this will not work if your site is itself a git repository.
Original README
but this is not recommended due to the difficulty of tracking a specific release
Original README
They must be placed directly under your site's `static/` directory, i.e. not in in a subdirectory or `themes/risotto/static/`.
Original README
https://github.com/joeroe/risotto/blob/main/LICENSEhttps://github.com/joeroe/risotto/blob/main/README.mdThe 'cooked rice' emoji used as a favicon for the example site was created by the [Twemoji project](https://twemoji.twitter.com/) and is licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/).
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- Hugo Themes
- Documentation and maintenance reference score
- More documented · 91 / 100
- Technologies
- Hugo
- Website type
- Starter
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-08-12
- Screenshot last checked
- 2026-10-02
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Hugo as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: aa1633e36f5ddaa6a5a8e31154277b389e6957e04f8134377e13644248d68eab
2026-10-02T14:56:12.958Z
Source file / repository# 🍚 risotto risotto is a minimalist, responsive [hugo](https://gohugo.io) theme inspired by terminal ricing aesthetics. [](https://themes.gohugo.io/themes/risotto/) [](https://semver.org)  [](https://validator.nu/?doc=https%3A%2F%2Frisotto.joeroe.io)   ## Features * Plain, semantic HTML with no Javascript * Plain CSS – no frameworks, no preprocessors, just simple and easy-to-customise stylesheets * Uses [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) for native responsive behaviour without arbitrary breakpoints * Comes with [20 built-in colour schemes](#colour-schemes) based on popular terminal themes plus the ability to use custom themes using the [base16 system](https://github.com/monicfenga/base16-styles) ## Install The easiest way to install the theme is to [download the latest release](https://github.com/joeroe/risotto/releases) and extract it to your project's `themes/` directory. You can also clone this repository into your site's `themes` directory and checkout the latest release: ```shell git clone https://github.com/joeroe/risotto themes/risotto && cd themes/risotto git checkout $(git tag -l | grep '^v[0-9.]*$' | sort -V | tail -n 1) ``` Note that this will not work if your site is itself a git repository. In that case, you can add the theme as a [git submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules), but this is not recommended due to the difficulty of tracking a specific release. ## Update If you installed the theme using `git clone`, pull the repository to get the latest version: ```shell cd themes/risotto git pull ``` Otherwise, simply [download the latest release](https://github.com/joeroe/risotto/releases) and extract it to your project's `themes/` directory, replacing the old version. ## Configure To use the theme, add `theme = 'risotto'` to your site's `hugo.toml`, or `theme: risotto` to your `hugo.yaml`. See `exampleSite/config.toml` for the theme-specific parameters you need to add to your site's `hugo.toml` or `hugo.yaml` to configure the theme. ### Colour schemes risotto uses the [base16 framework](https://github.com/chriskempson/base16) to define colour schemes that can be used with the `theme.palette` parameter. A selection of 20 palettes (13 dark, 7 light) are bundled with the theme: `apprentice`, `base16-dark`, `base16-light`, `catppuccin-frappe`, `catppuccin-latte`, `catppuccin-macchiato`, `catppuccin-mocha`, `dracula`, `gruvbox-dark`, `gruvbox-light`, `material`, `papercolor-dark`, `papercolor-light`, `solarized-dark`, `solarized-light`, `tender`, `tokyo-night-dark`, `tokyo-night-light`, `windows-95` and `windows-95-light`. The default is `base16-dark`. | Palette | Preview | | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | apprentice | <img align="center" width="250" src="images/palette/apprentice.png" alt="risotto theme with apprentice palette"> | | base16-dark | <img align="center" width="250" src="images/palette/base16-dark.png" alt="risotto theme with base16-dark palette"> | | base16-light | <img align="center" width="250" src="images/palette/base16-light.png" alt="risotto theme with base16-light palette"> | | catppuccin-frappe | <img align="center" width="250" src="images/palette/catppuccin-frappe.png" alt="risotto theme with catppuccin-frappe palette"> | | catppuccin-latte | <img align="center" width="250" src="images/palette/catppuccin-latte.png" alt="risotto theme with catppuccin-latte palette"> | | catppuccin-macchiato | <img align="center" width="250" src="images/palette/catppuccin-macchiato.png" alt="risotto theme with catppuccin-macchiato palette"> | | catppuccin-mocha | <img align="center" width="250" src="images/palette/catppuccin-mocha.png" alt="risotto theme with catppuccin-mocha palette"> | | dracula | <img align="center" width="250" src="images/palette/dracula.png" alt="risotto theme with dracula palette"> | | gruvbox-dark | <img align="center" width="250" src="images/palette/gruvbox-dark.png" alt="risotto theme with gruvbox-dark palette"> | | gruvbox-light | <img align="center" width="250" src="images/palette/gruvbox-light.png" alt="risotto theme with gruvbox-light palette"> | | material | <img align="center" width="250" src="images/palette/material.png" alt="risotto theme with material palette"> | | papercolor-dark | <img align="center" width="250" src="images/palette/papercolor-dark.png" alt="risotto theme with papercolor-dark palette"> | | papercolor-light | <img align="center" width="250" src="images/palette/papercolor-light.png" alt="risotto theme with papercolor-light palette"> | | solarized-dark | <img align="center" width="250" src="images/palette/solarized-dark.png" alt="risotto theme with solarized-dark palette"> | | solarized-light | <img align="center" width="250" src="images/palette/solarized-light.png" alt="risotto theme with solarized-light palette"> | | tender | <img align="center" width="250" src="images/palette/tender.png" alt="risotto theme with tender palette"> | | tokyo-night-dark | <img align="center" width="250" src="images/palette/tokyo-night-dark.png" alt="risotto theme with tokyo-night-dark palette"> | | tokyo-night-light | <img align="center" width="250" src="images/palette/tokyo-night-light.png" alt="risotto theme with tokyo-night-light palette"> | | windows-95 | <img align="center" width="250" src="images/palette/windows-95.png" alt="risotto theme with windows-95 palette"> | | windows-95-light | <img align="center" width="250" src="images/palette/windows-95-light.png" alt="risotto theme with windows-95-light palette"> | The easiest way to use other base16 styles is to place .css file from https://github.com/monicfenga/base16-styles/tree/master/css-variables and place it in your `static/css/palettes` directory. Or to define a wholly custom theme, you will need to define the following CSS variables for the following base16 colours (see [base16-dark.css](blob/main/static/css/palettes/base16-dark.css) for an example): | Base | Default colour | Used for | Examples | | ---- | ------------------------------------------ | ------------------- | ------------------------------------ | | 00 | <span class="base00">Dark</span> | Background | Page background | | 01 | <span class="base01">│</span> | Alt. background | Content background | | 02 | <span class="base02">│</span> | In-text backgrounds | `<pre>`, `<code>`, `<kbd>`, `<samp>` | | 03 | <span class="base03">│</span> | Muted text | `:before` & `:marker` symbols | | 04 | <span class="base04">│</span> | Alt. foreground | Aside text | | 05 | <span class="base05">│</span> | Foreground | Content text | | 06 | <span class="base06">│</span> | | | | 07 | <span class="base07">Light</span> | | | | 08 | <span class="base08">Red</span> | | | | 09 | <span class="base09">Orange</span> | | | | 0A | <span class="base0A">Yellow</span> | Highlights | Selected text, `<mark>` | | 0B | <span class="base0B">Green</span> | Primary accent | Logo | | 0C | <span class="base0C">Cyan</span> | Active links | `a:active`, `a:hover` | | 0D | <span class="base0D">Blue</span> | Links | `a:link`, `a:visited` | | 0E | <span class="base0E">Magenta</span> | | | | 0F | <span class="base0F">Brown</span> | | | For light mode palettes, the sequence of 00–07 should be reversed (light to dark, not dark to light). Note that not all colours are currently used in the theme. You you use these colours directly in content using the convenience classes `.baseXX` and `.bg-baseXX`. For example: ```html <span class="base0A">Yellow text</span> <mark class="bg-base0D">Text highlighted in green</mark> ``` ## Favicon risotto will automatically use favicons placed in the `static/` directory. The following files will be detected and included in your site's `<head>` section: * `favicon.ico` * `favicon-16x16.png` * `favicon-32x32.png` * `apple-touch-icon.png` * `site.webmanifest` You can generate these from an image or emoji using [favicon.io](https://favicon.io/) or a similar service. They must be placed directly under your site's `static/` directory, i.e. not in in a subdirectory or `themes/risotto/static/`. ## Acknowledgements The 'cooked rice' emoji used as a favicon for the example site was created by the [Twemoji project](https://twemoji.twitter.com/) and is licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/).
Explore similar templates
Compare previews and descriptions within the same stack and category.
hugo-xmin
hugo-xmin is an extremely minimal Hugo theme written by Yihui Xie for template beginners. HTML and CSS total about 140 lines, with no external dependencies, and it uses the MIT license.
Hugo · Starter
hugo-theme-gallery
A Hugo Extended photo gallery theme that organizes images with Page Bundles, automatically generating album lists and gallery pages with a Justified layout and PhotoSwipe lightbox.
Hugo · Starter
reveal-hugo
reveal-hugo is a Hugo theme that converts Markdown content into Reveal.js-based HTML presentations. It supports slide separation with `---`, shortcodes for fragments, slides, sections, notes, Markdown, and MathJax, and organizes content as root or section presentations with order controlled by weight.
Hugo · Starter
anatole
Anatole is a minimalistic two-column Hugo theme ported from farbox-theme-Anatole, featuring dark mode, multilingual and RTL support, and optional portfolio, comments, analytics, KaTeX, and Mermaid integrations. It suits personal blogs, portfolios, or documentation sites built with Hugo.
Hugo · Starter
hugo-theme-diary
A Hugo diary-style theme ported from the Hexo theme Journal, with a grid homepage for essays and daily notes. It supports six languages, dark mode, table-of-contents scroll positioning, reading time, code highlighting, and configurable sidebar, fonts, and colors.
Hugo · Starter
hugo-theme-stack-starter
A Hugo blog quickstart template that loads hugo-theme-stack through Hugo Modules, with configuration centralized in the config directory and GitHub Actions preconfigured for automatic deployment to GitHub Pages.
Hugo · Blog