[vpetersson-bot]

What

Reskins sbomify.com to the sbomify Brand Guidelines v2.0, built on a design token layer instead of hard-coded colours.

Why

The site still used the old purple-on-dark theme (purple #8A7DFF, pink/orange gradients, Inter), with colours hard-coded as hexes and one-off Tailwind names across templates, content and <style> blocks. The v2.0 guide calls for a white canvas with navy type, Mist surfaces, Signal Orange kept for emphasis, Figtree, and a system mono for code.

How

Tokens (_assets/css/tokens.css, imported via postcss-import)

• Primitives: the published navy, mist and orange scales, plus the semantic full/tint pairs. Values outside the guide are marked derived (e.g. Navy 5, the Orange 700 hover) and only extend a published scale.
• Roles: ink, ink-muted, canvas, surface, line, inverse, accent, accent-strong, focus, code-*, plus type (Figtree, the product's mono stack, weights, tracking, leading), radii and shadows.
• tailwind.config.js replaces the default palette with these tokens, so classes like indigo-500 no longer exist. Opacity modifiers still work.

Components in tailwind.css: btn-primary, btn-navy, btn-secondary, btn-inverse, link, eyebrow, eyebrow-chip, tag, card, hero. These carry the guide's rules:

• Type on orange is always white, on an Orange 700 fill (5.2:1).
• Orange text on white is Orange 700.
• Body copy is Navy 80 or darker.
• Orange gets one moment per layout: the primary CTA. Section CTAs are navy.
• Success, danger, warning and info are used for status only.

Templates and content

• Every legacy colour class and hex is migrated to the tokens. A grep for raw hexes in layouts/ and content/ now only finds third-party brand colours (the LinkedIn blue) and code samples.
• The animated aurora and gradient headlines are replaced by light heroes with a static orange haze, as on the guide's cover. This also removes three animated compositor layers.
• The header uses the navy-on-white lockup. The footer, the testimonial and the blog bands are white on navy.
• On the pricing page, the featured plan is the only navy card and holds the page's one orange CTA.

Assets

• Inter is replaced by self-hosted Figtree Variable, still font-display: swap and preloaded.
• New Chroma theme (native.css): Regular on navy, strings in Orange 300.
• _d2/theme.d2 moved to brand colours, and all diagrams were regenerated.
• Added navy variants of the logo, OSV and Dependency-Track marks for light surfaces.

CLAUDE.md documents the token system and the brand rules.

Follow-up work in this PR

Code review fixes (92c0c60)

• The base <button> hover fill had enough specificity to override a button's own bg-* utility. It now uses :where(button:hover), with zero specificity.
• The FAQ "Clear search" button is no longer navy text on orange.
• The Signal Orange focus ring now covers every navy surface.
• A bare border defaults to the line token and a bare ring to the focus token.
• The FAQ placeholder text now meets contrast.
• The hand-rolled buttons and links use .btn-primary and .link.
• The header backdrop blur is gone.

UI/UX pass (117e382, 54f30ad)

• The nav marks the current section with aria-current.
• Cards that aren't clickable no longer lift on hover.
• Section pages use the same centred hero and 4xl reading width as single pages.
• Blog, tag and taxonomy grids sit on the surface background.
• Hero CTAs are full width on mobile, and the homepage hero has two of them (Slack moves to the footer).
• Integration logos are monochrome, and footer social icons have 40px tap targets.
• The homepage is wider. Trust Center puts its copy beside the mock, and the CRA and Self-Host sections sit side by side.
• Pricing shows the featured plan first below 1200px, and Enterprise reads "Custom / quote".
• Long pages get an "On this page" table of contents: a sticky sidebar at xl and a <details> block below it, with no JS. It needs at least 5 entries and 1000 words, and pages can opt out with toc: false.
• Blog cards show their category.
• The footer is now three labelled columns.
• The hero haze is smaller on phones.

Trust center (0167aa3, 9cfef5b, fab8db9)

• The artifacts mock is now a single product panel: a header, divided document rows with mono file metadata, dot-plus-label statuses and a gated "Request access" row. It replaces the tray of floating cards.
• /features/trust-center/ uses the wide layout. Its markup was being squeezed into the 4xl prose card.

Verification

• bun run build:css, bun run build:d2 and hugo --minify --environment production all build cleanly. bun run lint:markdown passes.
• axe-core colour-contrast reports 0 violations on 16 key pages and on a 44-page sample of the sitemap. I re-ran it after each follow-up commit on the pages that commit touched.
• Checked visually at 1440px and 390px: home, pricing, integrations, trust center, about, blog, a post, FAQ, case studies, compliance, author and 404.

Not in this PR

• Raster social and OG images and blog cover art still use the old palette.
• assets/images/d2/tea-architecture.svg has no D2 source and isn't referenced anywhere, so I left it alone.
• package-lock.json is stale (CI and Docker use bun) and still lists Inter. I didn't touch it because npm is not the package manager here.

🤖 Generated with Claude Code