What is OpenTofu's primary brand color?

OpenTofu's brand voltage is lemon-yellow #ffda18, wired into 16 CSS custom properties including `--ifm-link-color`, `--ifm-menu-color-active`, `--ifm-tabs-color-active`, `--ifm-tabs-color-active-border`, `--docusaurus-progress-bar-color`, `--docsearch-primary-color`, `--docsearch-highlight-color`, and `--docsearch-searchbox-shadow`. On the captured page it appears 4 times rendered — 2 as background fill and 2 as border — but the CSS wiring is extensive enough that any interactive active state (hovered nav link, active tab, selected breadcrumb, search focus ring) will use this yellow. It is the single chromatic brand signal on an otherwise monochromatic dark-blue canvas.

Is OpenTofu's design system custom or framework-based?

OpenTofu's marketing site runs Docusaurus with its Infima design framework in dark mode. This means the base token system — `--ifm-color-*`, `--ifm-font-*`, `--ifm-spacing-*`, `--ifm-global-radius` — comes from Docusaurus's defaults. OpenTofu overrides two things: the primary color family (lemon-yellow #ffda18 replaces Docusaurus's default blue) and the heading/display font (DM Sans replaces the system default via `--ifm-heading-font-family`). Everything else — the 0.4rem (6.4px) global radius, the dark background, the code block styling — inherits from IFM. The design system is a thin brand layer over a well-established documentation framework.

What typeface does OpenTofu use and what makes the hero h1 unusual?

OpenTofu uses DM Sans for all editorial surfaces, wired into Docusaurus via `--ifm-heading-font-family: 'DM Sans', system-ui`. The hero h1 renders at 60px / weight 700 / 75px line height / 3px letter-spacing. The 3px positive letter-spacing on a 60px heading is atypically loose for the infrastructure category: most dev-tools brands tighten display tracking (Linear at -1px, Cloudflare at -1.4px). OpenTofu's open, loose tracking at display size reads as approachable and community-oriented rather than corporate-tight. The body typeface is the same DM Sans at 16-18px / 400.

What typeface handles code on OpenTofu's site?

OpenTofu uses the system monospace stack: `SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` — the Docusaurus default. This is not a branded typeface like Cloudflare's Apercu Mono Pro or Temporal's Noto Sans Mono; it is the browser's native monospace fallback chain. The 173 captured code-surface samples all use this stack at 14px / 400 / 20px line height. There is no reason to introduce a custom mono family if replicating this system — the system stack is both intentional and correct.

How does the design reflect OpenTofu's open-source positioning?

OpenTofu's visual positioning against HashiCorp's Terraform is embedded in several design choices: the Linux Foundation / Cloud Native Computing Foundation badge appears above the hero fold as the primary trust signal (not a customer logo wall); the design system is built on an open-source framework (Docusaurus) rather than a custom marketing platform; the lemon-yellow CTA ('Download') leads with the direct download action rather than a 'Start free trial' enterprise capture; and the documentation-site architecture signals that OpenTofu's primary relationship with users is technical collaboration, not commercial conversion. The dark-mode-first approach also mirrors the preference of the infrastructure-engineering audience.

OpenTofu Design System

OpenTofu's design system as DESIGN.md.

About OpenTofu DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source opentofu.org

Backend, Database & DevOps
Developer Tools & IDEs

OpenTofu's marketing site is, by design, a documentation site first. The brand runs Docusaurus in dark mode, which means every design decision — the navy canvas, the gray-blue hairline, the card surface, the heading weight — starts from the Infima design framework's opinionated dark defaults. Into that framework OpenTofu inserts one and only one chromatic brand signal: lemon-yellow #ffda18, wired into 16 CSS custom properties including `--ifm-link-color`, `--ifm-menu-color-active`, `--ifm-tabs-color-active-border`, `--docusaurus-progress-bar-color`, and `--docsearch-primary-color`. Every interactive affordance on the page — active nav links, active tabs, breadcrumb highlights, search accents — glows in this single yellow. The rest of the palette is cool, dark, and structural: midnight navy, slate-gray text, blue hairlines, near-black code surfaces.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 15 color tokens anchored on the #0c192b background with the lemon-yellow primary; 11 typography tokens running DM Sans at 60px / 700 for the hero h1 (with an unusual 3px letter-spacing) through 14px body; and the system monospace stack across all 173 captured code-surface samples. The radius ladder runs 6.4px (the IFM 0.4rem global default) for most surfaces, 12px for content cards, and 9999px for the pill CTA. 15 component definitions cover the hero, the yellow CTA, the dark code panel, the Docusaurus feature card, the sidebar-nav link, and the footer.

Feed this file to Claude or Cursor and it reproduces OpenTofu's positioning: a dark documentation aesthetic with a single warm accent that marks every "active" state. The system is worth studying for the discipline of the single-color activation pattern: when every interactive state — link, tab, breadcrumb, progress bar, search highlight — uses one hue, the page teaches its own interaction model without needing icons or labels.

What makes it distinct

Single lemon-yellow voltage#ffda18 wires into 16 CSS custom properties as the primary link, active-tab, breadcrumb, and search accent; the only warm color on an otherwise cool-dark canvas
Documentation-site architecturethe design system is Docusaurus dark mode, not a custom marketing surface; card radius at 6.4px and heading weight at 700 follow the IFM framework's defaults
DM Sans with wide letter-spacing at displaythe 60px hero h1 renders at 3px letter-spacing, an atypically loose display treatment for the infrastructure category
System mono for all codeno branded mono typeface; the default SFMono-Regular / Menlo / Monaco / Consolas stack carries all 173 extracted code-surface samples
Cloud Native Computing Foundation badge prominencethe Linux Foundation affiliation appears above the fold as a trust signal, a positioning move against commercial competitors

Live at opentofu.org

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

opentofu.org

Explore OpenTofu

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

OpenTofu design system FAQ

Common questions about OpenTofu's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

OpenTofu — official site

OpenTofu's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.