[vpetersson-bot]

What

Brings the marketing site in line with the product's design system in sbomify/sbomify (sbomify/assets/css/tailwind.src.css, the component library, and the agent guide's copy rules).

Why

The two codebases describe the same brand but had drifted:

• Code samples on the site had no copy control, while the app's code block has one.
• Two shared colours used different values.
• Eyebrows were darker than both the app and the brand guide show them.
• Buttons had no minimum touch target and could wrap.
• The pricing FAQ capitalised "Sbomify", which both the app guide and the brand guide forbid.

How

• Code blocks: render-codeblock.html adds a header band with the language and a Copy button. The button ships hidden, and main.js reveals it only when navigator.clipboard exists, so there is no dead control without JavaScript. The <figure class="code-block"> wrapper is unchanged, so the Cloudflare email_off regexp in content.html still matches.
• Shared tokens: Navy 55 #6E7180 (the app's text-muted, 4.9:1 on white) becomes ink-subtle. Mist Soft #EEF0F4 replaces the derived Mist 50 as surface.
• Eyebrows: eyebrows use ink-subtle. On Mist Soft that measures 4.2:1, so eyebrows inside bg-surface, the chip variant and the TOC step up to Navy 80.
• Buttons:
  • 44px minimum height (40px for btn-md above sm).
  • white-space: nowrap and shrink-0 so labels never wrap or get squeezed in a flex row.
  • A 0.98 press state, as in the app's button shell.
• Layout: scrollbar-gutter: stable on html, as in the app, so the header doesn't jump sideways between short and long pages.
• Copy: "sbomify" is lowercase on the pricing FAQ, and the auth links read "Sign up / Sign in" and "Sign in" (the app glossary's verbs). PostHog event labels are unchanged.
• Docs: CLAUDE.md documents the shared tokens, the eyebrow rule and the code block hook.

Verification

• bun run build:css, hugo --minify --environment production and bun run lint:markdown all pass.
• axe-core colour-contrast reports 0 violations on 48 pages (key pages plus a sitemap sample).
• Playwright on /guides/python/: all 6 code blocks show a Copy button, and clicking it puts exactly the block's text on the clipboard.

🤖 Generated with Claude Code