--- version: alpha name: "OpenTofu" website: "https://opentofu.org" description: >- A Linux Foundation open-source infrastructure-as-code brand whose marketing site runs a deep navy-to-midnight canvas with a single chromatic brand signal: vivid lemon-yellow #ffda18 used as the primary link, active-tab, and CTA fill — every navigation highlight, breadcrumb active state, and doc search accent wires through this single yellow. The system runs DM Sans for all editorial surfaces and the system monospace stack for all code panels, with a 6px-to-12px radius ladder for cards and a 9999px pill for the CTA. The open-source positioning against HashiCorp's Terraform is built into the visual language as a deliberate dark-mode-first documentation aesthetic. seo: title: "OpenTofu Design System for React — navy canvas, DM Sans, lemon-yellow #ffda18, 15 components" metaDescription: "OpenTofu's design system as DESIGN.md. Deep navy #0c192b canvas, DM Sans at 60px bold, single lemon-yellow brand accent, system monospace for code panels, 15 color tokens, 15 components. For React, Next.js, and AI coding tools." highlights: - "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 architecture — the 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 display — the 60px hero h1 renders at 3px letter-spacing, an atypically loose display treatment for the infrastructure category" - "System mono for all code — no branded mono typeface; the default SFMono-Regular / Menlo / Monaco / Consolas stack carries all 173 extracted code-surface samples" - "Cloud Native Computing Foundation badge prominence — the Linux Foundation affiliation appears above the fold as a trust signal, a positioning move against commercial competitors" tags: - "Backend, Database & DevOps" - "Developer Tools & IDEs" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://opentofu.org" title: "OpenTofu — official site" description: "OpenTofu's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is OpenTofu's primary brand color?" answer: "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." - id: "docusaurus-foundation" title: "Is OpenTofu's design system custom or framework-based?" answer: "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." - id: "typography" title: "What typeface does OpenTofu use and what makes the hero h1 unusual?" answer: "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." - id: "code-surface" title: "What typeface handles code on OpenTofu's site?" answer: "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." - id: "open-source-positioning" title: "How does the design reflect OpenTofu's open-source positioning?" answer: "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." mockups: - "marketing-hero" - "code-editor-ide" colors: primary: "#ffda18" primary-light: "#60a5fa" primary-lighter: "#93c5fd" canvas: "#0c192b" canvas-surface: "#1b1d20" surface-1: "#14253d" surface-2: "#353a41" surface-card: "#242526" ink: "#f9f9f9" ink-muted: "#e7e9ec" ink-secondary: "#9da6b5" ink-tertiary: "#b6bcc7" hairline: "#ced3da" syntax-text: "#abb2bf" syntax-keyword: "#c678dd" typography: display-xl: fontFamily: "\"DM Sans\", system-ui" fontSize: 60px fontWeight: 700 lineHeight: 75px letterSpacing: "3px" display-lg: fontFamily: "\"DM Sans\", system-ui" fontSize: 48px fontWeight: 700 lineHeight: 48px letterSpacing: 0 heading-lg: fontFamily: "\"DM Sans\", system-ui" fontSize: 36px fontWeight: 700 lineHeight: 40px letterSpacing: 0 heading-md: fontFamily: "\"DM Sans\", system-ui" fontSize: 24px fontWeight: 700 lineHeight: 32px letterSpacing: 0 heading-sm: fontFamily: "\"DM Sans\", system-ui" fontSize: 20px fontWeight: 700 lineHeight: 28px letterSpacing: 0 body-lg: fontFamily: "\"DM Sans\", system-ui" fontSize: 18px fontWeight: 400 lineHeight: 28px letterSpacing: 0 body-md: fontFamily: "\"DM Sans\", system-ui" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "\"DM Sans\", system-ui" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 label-md: fontFamily: "\"DM Sans\", system-ui" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: 0 button-md: fontFamily: "\"DM Sans\", system-ui" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: 0 code-sm: fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 rounded: none: "0px" xs: "4px" sm: "6.4px" md: "8px" lg: "12px" xl: "16px" full: "9999px" spacing: xs: "6px" sm: "8px" base: "12px" md: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" 4xl: "80px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "8px 16px" height: "40px" border: "0" button-primary-hover: backgroundColor: "{colors.primary-light}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "8px 16px" height: "40px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "8px 16px" height: "40px" borderColor: "{colors.hairline}" top-nav: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "12px 24px" height: "64px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "4px 12px" nav-link-active: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "4px 12px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-lg}" card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "24px" code-block: backgroundColor: "{colors.canvas-surface}" textColor: "{colors.syntax-text}" typography: "{typography.code-sm}" rounded: "{rounded.sm}" padding: "16px 24px" feature-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "24px" borderColor: "{colors.surface-2}" text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "8px 16px" height: "48px" borderColor: "{colors.hairline}" faq-item: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.heading-sm}" rounded: "{rounded.lg}" padding: "24px" footer: backgroundColor: "{colors.canvas-surface}" textColor: "{colors.ink-secondary}" typography: "{typography.body-sm}" padding: "48px 24px" --- ## Overview OpenTofu's marketing site is honest about what it is: a documentation platform that has been given a brand identity. **Single-accent activation**: the Docusaurus dark-mode framework provides every structural token — the navy canvas, the gray hairlines, the card surfaces, the heading hierarchy — while OpenTofu overrides exactly two things. First, the heading typeface (DM Sans replaces the system default via `--ifm-heading-font-family`). Second, the primary color family (lemon-yellow #ffda18 replaces Docusaurus's default blue, wiring into 16 custom properties including every active nav state, every tab highlight, every search accent, and the progress bar). The result is a design system where one color does every interactive job on the page. **Community trust over conversion infrastructure**: the above-fold hero leads with the Cloud Native Computing Foundation badge, not a customer logo wall. The primary CTA says "Download" — not "Start free trial" or "Get started for free." The hero body copy names HashiCorp's BSL license change explicitly as the reason OpenTofu exists. This is not a marketing site trying to hide its origins; it is a community brand making its open-source lineage the first-above-fold argument. Where commercial infra brands like HashiCorp and Pulumi lead with enterprise use cases, OpenTofu leads with the license. Typography adds one distinctive move: the 60px DM Sans hero h1 renders at **3px positive letter-spacing** — the widest display tracking in the extracted dev-tools directory. Where Cloudflare tightens at -1.4px and Linear at -1px, OpenTofu opens up at +3px, making the headline read as open and community-oriented rather than precision-engineered. **Key Characteristics:** - Lemon-yellow `{colors.primary}` (#ffda18) wired into 16 CSS custom properties — the single chromatic signal in an otherwise cool-dark palette. Every active interactive state uses this color. - Deep navy canvas `{colors.canvas}` (#0c192b) from Docusaurus dark mode; near-black code surfaces at `{colors.canvas-surface}` (#1b1d20). - DM Sans at 60px / 700 / +3px letter-spacing for the hero — the widest display tracking in this category. - System monospace stack for all code surfaces — no custom mono typeface. - IFM 0.4rem (6.4px) global radius for most surfaces; 12px for content cards; 9999px pill for the primary CTA. - CNCF / Linux Foundation trust badge above the hero fold — open-source affiliation as the primary credential. ## Colors ### Brand - **Primary Yellow** (`{colors.primary}` — #ffda18): frequency 4. Used as background (2) and border (2). Wired into 16 CSS custom properties as the universal active-state signal. The page's single warm color; absent from all structural surfaces. - **Primary Light** (`{colors.primary-light}` — #60a5fa): frequency 4, all as background. Wired as `--ifm-color-primary-lighter`. A sky-blue hover/lighter variant in the primary color family. - **Primary Lighter** (`{colors.primary-lighter}` — #93c5fd): frequency 4, all as text. Wired as `--ifm-color-primary-lightest`. A pale-blue for the lightest primary-color applications. ### Surface - **Canvas** (`{colors.canvas}` — #0c192b): frequency 2. The deep navy page floor, wired as `--ifm-background-color`. Hero background and gradient base. - **Canvas Surface** (`{colors.canvas-surface}` — #1b1d20): frequency 9. Near-black code block background, footer surface, and the darkest card tier. Wired as `--ifm-pre-background`, `--ifm-footer-background-color`, `--ifm-color-gray-900`. - **Surface-1** (`{colors.surface-1}` — #14253d): frequency 11, all as background fills. The primary content-card surface — slightly lighter than the canvas. Wired as `--ifm-color-primary-contrast-background`, `--docsearch-footer-background`. - **Surface-2** (`{colors.surface-2}` — #353a41): frequency 15. Mid-dark surface for dividers, inactive card tones. Wired as a structural tone. - **Surface Card** (`{colors.surface-card}` — #242526): frequency 1. The Docusaurus card/dropdown background, wired as `--ifm-background-surface-color`, `--ifm-card-background-color`, `--ifm-dropdown-background-color`. ### Text - **Ink** (`{colors.ink}` — #f9f9f9): frequency 246 — the dominant page text. Near-white at near-full opacity; wired as `--ifm-font-color-base`, `--ifm-navbar-link-color`. Carries headlines, body copy, nav labels, and button labels. - **Ink Muted** (`{colors.ink-muted}` — #e7e9ec): frequency 19. Secondary text, blockquotes, hero body copy. Wired as `--ifm-color-secondary`, `--ifm-hero-text-color`. - **Ink Secondary** (`{colors.ink-secondary}` — #9da6b5): frequency 28. Tertiary text, muted metadata, footer link labels. - **Ink Tertiary** (`{colors.ink-tertiary}` — #b6bcc7): frequency 10. The dimmest text tier — caption labels, footnote metadata. ### Hairlines - **Hairline** (`{colors.hairline}` — #ced3da): frequency 914 — the dominant border token. 913 border occurrences. Every table row, card edge, divider, and feature grid line uses this single cool-gray. Wired as `--ifm-color-gray-400`, `--ifm-color-secondary-darker`. ### Syntax - **Syntax Text** (`{colors.syntax-text}` — #abb2bf): frequency 479, all as text. The default code-surface text color — the One Dark Pro gray that renders all non-highlighted code tokens. Carries the page's 173 extracted code samples. - **Syntax Keyword** (`{colors.syntax-keyword}` — #c678dd): frequency 22, all as text. The One Dark Pro purple for language keywords, type identifiers, and special tokens in the embedded HCL/Go code examples. ## Typography ### Font Families The system runs **DM Sans** for all editorial surfaces — headings, body, nav, buttons, labels — and the **system monospace stack** (SFMono-Regular → Menlo → Monaco → Consolas → Liberation Mono → Courier New) for all code surfaces. There is no branded mono typeface; the system stack is both intentional and consistent with the open-source documentation aesthetic. DM Sans is wired into Docusaurus via `--ifm-heading-font-family: 'DM Sans', system-ui`. Body text inherits the Docusaurus system-UI stack unless overridden per element — the extracted samples confirm DM Sans is applied across the rendered body paragraphs. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 60px | 700 | 75px | 3px | Hero h1 ("Open-Source Infrastructure as Code") | | `{typography.display-lg}` | 48px | 700 | 48px | 0 | Section h2 ("Features Unique to OpenTofu") | | `{typography.heading-lg}` | 36px | 700 | 40px | 0 | Sub-section h2 | | `{typography.heading-md}` | 24px | 700 | 32px | 0 | Feature card h3 | | `{typography.heading-sm}` | 20px | 700 | 28px | 0 | FAQ titles, small section heads | | `{typography.body-lg}` | 18px | 400 | 28px | 0 | Hero sub-paragraph, lead body | | `{typography.body-md}` | 16px | 400 | 24px | 0 | Default running text | | `{typography.body-sm}` | 14px | 400 | 20px | 0 | Captions, metadata | | `{typography.label-md}` | 16px | 700 | 24px | 0 | Active nav labels, CTA labels | | `{typography.button-md}` | 16px | 700 | 24px | 0 | Button labels | | `{typography.code-sm}` | 14px | 400 | 20px | 0 | All code surfaces | ### Principles Display weight is 700, body is 400. There is no 300, 500, or 600 weight in the system — DM Sans is binary in its weight usage. The distinguishing typographic move is the +3px letter-spacing on the 60px hero h1; every other tier tracks at 0. The loose display tracking is the brand's community-openness signal, the inverse of the tight -1px to -2px tracking that enterprise dev-tools use. ### Note on Font Substitutes DM Sans is open-source and freely available from Google Fonts. **Plus Jakarta Sans** is a close cousin with similar geometric-humanist proportions. For the monospace tier, the system stack is already what Docusaurus ships; no substitution is necessary. ## Layout ### Spacing System - **Base unit:** 8px. - **Tokens:** `{spacing.xs}` 6px · `{spacing.sm}` 8px · `{spacing.base}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px · `{spacing.4xl}` 80px. - **Section padding (vertical):** 64–80px between major sections. - **Card internal padding:** `{spacing.lg}` (24px) on all feature and FAQ cards. - **Container max-width:** 1140px (`--ifm-container-width`) standard, 1320px (`--ifm-container-width-xl`) wider. ### Grid & Container - **Hero:** left-aligned text column (~60%) with a right-aligned code-panel mockup (~40%). The CNCF / Linux Foundation badge floats above the headline. - **Feature grid:** 2-column layout of code-panel mockups + description text, alternating left/right. - **Community section:** 2-column grid of "Join Our Community" / "Get Involved" CTAs. - **FAQ section:** single-column accordion of collapsible question-answer pairs. ### Rhythm The page alternates between **hero + code-panel** sections and **text-only** sections. Code panels appear prominently above the fold and in each feature section; text-only sections (FAQ, community) sit below. The code-panel sections use the dark `{colors.canvas-surface}` code surface against the `{colors.canvas}` page floor; the contrast is the page's primary visual rhythm. ## Elevation The system uses **tonal surface contrast** for all elevation, with no drawn shadows. Dark cards (`{colors.surface-card}` #242526) and code blocks (`{colors.canvas-surface}` #1b1d20) lift off the canvas (`{colors.canvas}` #0c192b) through lightness steps alone. The 42 shadow occurrences in the extraction are all pure black used for the IFM global shadow declaration on dropdowns and modals, not card elevation. The hairline border `{colors.hairline}` (#ced3da) defines card edges where tonal contrast alone is insufficient. ## Shapes The radius scale runs on the IFM global-radius of 0.4rem (6.4px): - `{rounded.none}` 0px — section dividers and full-bleed bands only. - `{rounded.xs}` 4px — the smallest chip surfaces. - `{rounded.sm}` 6.4px — the IFM default radius applied to inputs, dropdowns, nav links, badges, and code blocks. - `{rounded.md}` 8px — medium card surfaces. - `{rounded.lg}` 12px — content cards and FAQ panels. - `{rounded.xl}` 16px — the largest feature card surfaces. - `{rounded.full}` 9999px — the primary "Download" CTA pill. The ladder centers on 6.4px, the Docusaurus/IFM default, with cards at 12px providing the main visual softness. ## Components **`button-primary`** — Lemon-yellow `{colors.primary}` fill, dark text `{colors.canvas}`, DM Sans `{typography.button-md}`, full pill `{rounded.full}`, 8×16px padding, 40px height. "Download" is the canonical instance — the single yellow element above the fold. **`button-primary-hover`** — Background shifts to sky-blue `{colors.primary-light}` for the hover state. This hover color (a blue) against the yellow resting state is atypical — the IFM framework's hover variant is a lighter step in the primary color family. **`button-secondary`** — Transparent fill, near-white text, 1px `{colors.hairline}` border, `{rounded.sm}` 6.4px, same dimensions. Used for "More details" and "Learn more" secondary CTAs. **`top-nav`** — Transparent over the hero (the navbar shadow is disabled via `--ifm-navbar-shadow: none`), 64px height, 12×24px padding. Houses the OpenTofu wordmark, product links (Docs, Showcase, Resources, Blog, Search), and the yellow "Download" pill CTA. **`nav-link`** — Transparent, near-white text, `{typography.body-md}`, no radius, 4×12px padding. **`nav-link-active`** — Near-white becomes yellow `{colors.primary}`, weight shifts to `{typography.label-md}`. The active state is the color's only visible job — switching one token turns the nav item from structural to branded. **`hero-heading`** — Near-white text at `{typography.display-xl}` (60px / 700 / +3px tracking). "Open-Source Infrastructure as Code." **`section-heading`** — `{typography.display-lg}` (48px / 700). Feature section heads like "Features Unique to OpenTofu." **`body-paragraph`** — `{colors.ink-muted}` text at `{typography.body-lg}` (18px / 400). The hero sub-paragraph and feature descriptions. **`card`** — `{colors.surface-card}` fill, near-white text, `{rounded.lg}` 12px, 24px padding. General content card. **`code-block`** — Near-black `{colors.canvas-surface}` fill, `{colors.syntax-text}` default token color, `{rounded.sm}` 6.4px, 16×24px padding. The HCL and Go code panels with One Dark Pro syntax highlighting (purple keywords `{colors.syntax-keyword}`, coral strings, mint constants). **`feature-card`** — Same dimensions as `{component.card}` but with a `{colors.surface-2}` border for additional structure. Used in the features grid. **`text-input`** — `{colors.surface-card}` fill, near-white text, `{rounded.sm}` 6.4px, 8×16px padding, 48px height, 1px `{colors.hairline}` border. The search input and newsletter field. **`faq-item`** — `{colors.surface-card}` fill, near-white heading at `{typography.heading-sm}`, `{rounded.lg}` 12px, 24px padding. The collapsible FAQ accordion items in the "Frequently Asked Questions" section. **`footer`** — `{colors.canvas-surface}` fill, `{colors.ink-secondary}` text, `{typography.body-sm}`, 48×24px padding. Continues the near-black surface below the page. ## Do's and Don'ts **Do** use `{colors.primary}` (#ffda18) only for interactive active states — active nav links, active tabs, the primary CTA background, search accents. This single-color activation pattern teaches the interaction model by repetition; diluting it to section fills or decorative accents breaks the system. **Do** hold DM Sans display weight at 700. The heading weight in this system is a binary choice — 400 for body, 700 for heading — inherited from Docusaurus's `--ifm-heading-font-weight: 700`. Introducing 500 or 600 would require overriding IFM defaults and creates inconsistency with the underlying framework. **Do** let `{colors.hairline}` (#ced3da) carry all border work. At 913 of 914 border occurrences, this is the most dominant structural hairline in the extracted directory; there is no second hairline tone. Using any other color for borders breaks the grid's visual unity. **Do** preserve the +3px letter-spacing on the 60px display h1. The loose tracking is the single typographic move that distinguishes this brand from the tight-display conventions of commercial infra brands; removing it makes the hero read like Terraform's. **Don't** use `{colors.primary-light}` (#60a5fa) or `{colors.primary-lighter}` (#93c5fd) for the primary CTA or active-state fills. These are the IFM primary-color hover/lightest variants — they appear as background fills (4 occurrences each) in framework hover states and should not be promoted to prominent interactive surfaces that compete with the yellow primary. **Don't** introduce a custom mono typeface. The system monospace stack is intentional — it uses the developer's own IDE monospace, which removes brand distance. Adding JetBrains Mono or Fira Code would add a brand voice the system explicitly does not have. **Don't** use `{colors.syntax-keyword}` (#c678dd) or `{colors.syntax-text}` (#abb2bf) outside code blocks. These are One Dark Pro syntax-highlighting palette values, not brand accents; applying them to card fills or headings would make the page look like a syntax-highlighting error. **Don't** add a second accent color alongside the yellow. The entire system's interaction model is built on one color doing every active-state job. A second accent color (e.g. blue for "Pro" features) would require re-teaching the user which color means "active" — the yellow's meaning depends on its uniqueness. ## Known Gaps - **Docusaurus framework coupling:** the token system is built on the IFM framework — changing `--ifm-global-radius` or `--ifm-color-primary` propagates across all 16+ custom properties simultaneously. This DESIGN.md captures the rendered values, not the IFM variable hierarchy. - **Light mode:** OpenTofu's site renders in dark mode only; the `--ifm-color-scheme: dark` flag is set globally. A light-mode variant is not exposed and would require significant IFM overrides. - **Mobile breakpoint:** the feature grid and hero layout collapse on narrow viewports; the captured tokens reflect the 1440px desktop layout only. - **Hover and focus states:** the full IFM interaction matrix (focus rings, disabled states, pressed states) is not captured. The yellow primary wires into hover states through the IFM cascade rather than explicit component overrides. - **Sidebar navigation:** the Docusaurus sidebar (collapsible doc tree, active-link yellow highlighting) is a distinct surface from the marketing page; its spacing, typography, and depth hierarchy are not represented in this spec. - **Announcement bar:** OpenTofu sometimes shows a Docusaurus announcement bar at the top of the page. Its height is declared via `--docusaurus-announcement-bar-height: 30px` but its content and styling are not captured in the current extraction.