Clarity

Clarity is an open-source, minimalist website template built on plain HTML, SCSS, and JavaScript for presenting AI research and project-based websites. The template ships with sample files clarity.html and minimal.html, and its modular structure lets you quickly assemble a clean research page with a project cover, title, and content blocks.

What is Clarity?

Clarity is a static website template designed specifically for AI research project pages. It takes a plain HTML file and SCSS stylesheets as input and produces a responsive, styled website that can be hosted on any static server. The template is maintained by lorenmt on GitHub and is distributed under the Creative Commons Attribution-ShareAlike 4.0 International License, which permits modification and redistribution as long as you link back to the Clarity blog post.

Key Features

• Predefined themes — Clarity includes Light, Dark, and Gradient themes, each of which can be toggled by changing CSS classes such as blog-title and no-cover in the HTML body.
• Project cover options — The title section can display a project cover or use the no-cover layout for a cleaner start, demonstrated in the design showcase.
• Hoverable table of contents — A navbar feature added in January 2025, activated by including or commenting out <script src="assets/scripts/navbar.js"></script>.
• Automated slideshow — Added in October 2024, the slideshow feature is documented inside clarity.html and can cycle through images automatically.
• Comparison display — A component added in August 2024 (commit 46ec3eee) that lets you show side-by-side comparisons, useful for before/after research results.
• Copy button in code blocks — All code blocks include a copy button, added in March 2026.
• Free and licensed font options — Defaults to free fonts Charter and Poppins; you can switch to Tiempos Text and Athletics by placing licensed font files in assets/fonts and updating _master.scss and the CSS path.
• FontAwesome icons — Uses FontAwesome Free by default, with instructions to switch to FontAwesome Pro for a larger icon set.

Who is it for?

• AI researchers — Present paper results, model diagrams, and project pages in a clean, academic-friendly layout.
• PhD students and academics — Build a personal project page for a conference submission or lab demo without learning a full CMS.
• Open-source maintainers — Provide a polished landing page for a research code repository, linking back to the Clarity blog post for attribution.

What can you do with Clarity?

• Publicize a research paper — Create a project page with a title cover, abstract area, and code comparison sections to accompany a preprint.
• Showcase a portfolio — Reuse the minimal design to present multiple projects by duplicating the content blocks.
• Make a lab or course website — Use the modular HTML and SCSS to build a simple static site that can be hosted on GitHub Pages or any static host.

How does Clarity work?

Clarity works as a static HTML template. You edit clarity.html (or copy structure from minimal.html) to change text and images, update the SCSS variables in assets/stylesheets/_master.scss for fonts and colors, and then host the folder on any static web server. The provided JavaScript files, like navbar.js, add interactive elements such as the hoverable table of contents.

FAQ

Is Clarity free to use?

Yes, Clarity is completely open-source and distributed under the Creative Commons Attribution-ShareAlike 4.0 International License. You can freely modify and distribute it, but you must link back to the Clarity blog post in the footer.

Does Clarity require a specific framework?

No. Clarity is built with plain HTML, SCSS, and JavaScript. It does not depend on React, Vue, or any other JavaScript framework, so it can be hosted anywhere static files are served.

Can I change the fonts?

Yes. The template defaults to free fonts Charter and Poppins. To use the licensed Tiempos Text and Athletics fonts, download a trial or full license, put the files in assets/fonts, update _master.scss, and switch the CSS path to main.css.

How do I enable the table of contents navbar?

The hoverable table of contents is controlled by assets/scripts/navbar.js. Comment out the script tag to disable it, or leave it in your HTML to activate the feature.

What is the difference between the light, dark, and gradient themes?

These themes alter the background and title styling. Each theme is applied by setting the background-color or background style in the first content container and adding classes like white and no-cover to the title div, as shown in the design showcase examples.