Design: App styling following blue Enterprise site tones#1074
Design: App styling following blue Enterprise site tones#1074liviolanda wants to merge 8 commits into
Conversation
- Apply DM Sans Variable typography with -3% and -5% kerning to body and headings - Update color scheme to warm light theme (#faf7f2 bg, #2a2520 foreground) and neutral dark theme from PR #1065 - Add blog page background gradient to light theme (radial gradients with light blue, linear gradient #edeff4→#e3e6ed) - Replace logo with professional Thunderbolt gradient icon across web and app - Remove sidebar visual dividers for cleaner interface - Update button styling with #142952 primary color and 4px border radius - Redesign marketing footer with 4-column grid layout and IBM Plex Mono labels - Apply consistent typography and spacing across all pages and components Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Remove background gradient from app light theme for cleaner look - Update "AI you control" headline: lowercase "you", #4669D3 color, tight underline at baseline - Apply matching blue styling to "too important to outsource" quote text and underline - Increase Thunderbolt logo size to 64px/80px for better prominence - Round button corners to 8px for more polished appearance - Thin quote underline from h-2 to h-1 for subtle emphasis - Remove white background from Thunderbolt logo SVG (transparent background) - Apply monospace font to announcement banner for technical aesthetic Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Semgrep Security ScanNo security issues found. |
PR Metrics
Updated Mon, 13 Jul 2026 15:00:19 GMT · run #2271 |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🔭 thunder-deep-review (advisory)
Complements the other bots — surfaces only what they did not flag. Never approves, never requests changes, never gates merge.
head: e52965fd182b · mode: deep · deferred 0 item(s) already reported by other bots (best-effort dedup)
| @import "@fontsource-variable/mona-sans"; | ||
| @import "@fontsource/space-mono/700.css"; | ||
| @import "@fontsource/mozilla-text"; | ||
| @import "@fontsource/ibm-plex-mono"; |
There was a problem hiding this comment.
🚫 Blocking — Importing @fontsource/ibm-plex-mono, but it isn't a declared dependency
Heads up — this line pulls in @fontsource/ibm-plex-mono, and the footer and enterprise page now lean on it heavily via font-['IBM_Plex_Mono']. But I couldn't find @fontsource/ibm-plex-mono anywhere in web/package.json or web/bun.lock, and it isn't in node_modules either. A Vite CSS @import of an unresolvable package will fail the build (and at best, if the import were tolerated, every IBM Plex Mono label would silently fall back to a default font). Could we add @fontsource/ibm-plex-mono to web/package.json (and run install so the lockfile picks it up) the same way dm-sans and space-grotesk were added?
|
|
||
| h1 { | ||
| font-family: 'DM Sans Variable', system-ui, -apple-system, sans-serif; | ||
| font-size: 4rem !important; |
There was a problem hiding this comment.
🚫 Blocking — Global h1 font-size !important defeats the Hero's responsive sizing
I think this !important will bite us. The Hero heading is styled text-[40px] ... md:text-[64px], but a base-layer h1 { font-size: 4rem !important } beats any non-important utility regardless of layer or specificity — so the heading will render at 4rem (64px) on every breakpoint, including mobile where it was meant to be 40px. The same block also forces font-weight: 800 !important and letter-spacing: -0.05em !important, which will override the Hero's font-black and tracking-[-1.2px] too (and h2 { font-weight: 700 !important } overrides the font-medium on the section headings). Could we drop the !importants and let the utility classes drive sizing, or move these to a scoped default so Tailwind can still override per-element?
| --color-destructive: oklch(0.577 0.245 27.325); | ||
| --color-destructive-foreground: oklch(0.577 0.245 27.325); | ||
| --font-sans: 'DM Sans Variable', system-ui, -apple-system, sans-serif; | ||
| --font-mono: 'DM Sans Variable', system-ui, -apple-system, sans-serif; |
There was a problem hiding this comment.
📐 Convention — --font-mono now points at a proportional font in the main app
Small thing that might have knock-on effects: --font-mono is now 'DM Sans Variable', the same proportional face as --font-sans. A few places in the app rely on font-mono specifically because they want monospacing — e.g. the chat text snippet (font-mono text-[9px]) and inline <code> in the sign-in step. Those will lose their fixed-width alignment. If the intent was to unify the display font, could we keep an actual monospace stack for --font-mono (or at least for code/snippet surfaces) so code still lines up?
| 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; | ||
| --tb-font-text: 'Mozilla Text', 'Mona Sans Variable', 'Inter Variable', Georgia, serif; | ||
| --tb-font-sans: 'DM Sans Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; | ||
| --tb-font-mono: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
There was a problem hiding this comment.
📐 Convention — Space Grotesk referenced by the wrong family name won't actually load
I suspect this font won't resolve. The @fontsource-variable/* packages register their family with a " Variable" suffix — the codebase itself uses 'Inter Variable', 'Mona Sans Variable', and the new 'DM Sans Variable'. But here the token asks for bare 'Space Grotesk', so it'll skip the newly-imported variable font and fall straight through to ui-monospace. Should this be 'Space Grotesk Variable' to match the imported package?
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#" className="font-['IBM_Plex_Mono'] text-xs text-[#667085] uppercase tracking-wide hover:text-[#344054]"> |
There was a problem hiding this comment.
🔧 Nit — Footer "Enterprise" link is a placeholder href="#"
The Enterprise link in the footer points at #, so clicking it just jumps to the top of the page — a bit of a dead end, especially since this footer renders on the enterprise page itself. Did we mean to point it at the actual enterprise route (or drop the link until there's a destination)?
| {/* Copyright */} | ||
| <div className="mt-12 border-t border-[#eaecf0] pt-8 text-center"> | ||
| <p className="font-['IBM_Plex_Mono'] text-xs text-[#667085] uppercase tracking-wide"> | ||
| © 2026 MZLA TECHNOLOGIES CORPORATION |
There was a problem hiding this comment.
📐 Convention — Footer rewrite drops the Creative Commons attribution and contributor copyright
Worth a second look: the old footer carried the "©1998–2026 by individual contributors" line plus a link to the Mozilla Creative Commons content license, and this redesign replaces all of that with just "© 2026 MZLA TECHNOLOGIES CORPORATION." For Mozilla-family content that attribution/license link is sometimes a requirement rather than decoration — is dropping it intentional, or should we carry the CC license link over into the new layout?
- Update light theme: replace warm brown palette with professional neutral grays (#f9fafb bg, #101828 text) and enterprise blue (#142952) accents - Update dark theme: replace generic grays with deep dark blue-black (#0f1117 bg, #e8e8e8 text) and bright professional blue (#58a6ff) accents - Both themes now align with enterprise site design system for consistent branding across web, app, and landing pages - Improves visual hierarchy, readability, and professional appearance in both light and dark modes Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
liviolanda
changed the title
There was a problem hiding this comment.
🔭 thunder-deep-review (advisory)
Complements the other bots — surfaces only what they did not flag. Never approves, never requests changes, never gates merge.
head: 2076b473da95 · mode: deep · deferred 0 item(s) already reported by other bots (best-effort dedup)
| @import "@fontsource-variable/mona-sans"; | ||
| @import "@fontsource/space-mono/700.css"; | ||
| @import "@fontsource/mozilla-text"; | ||
| @import "@fontsource/ibm-plex-mono"; |
There was a problem hiding this comment.
🚫 Blocking — IBM Plex Mono is imported but never added as a dependency
Heads up — this line pulls in @fontsource/ibm-plex-mono, but I don't see that package added to web/package.json (only dm-sans and space-grotesk were added, and space-mono was removed). It's also missing from web/bun.lock. On a clean install the Vite/Astro build will fail to resolve this import, and even if a stale node_modules masks it locally, CI with a frozen lockfile will break. Given how many font-['IBM_Plex_Mono'] classes the footer and enterprise page now rely on, could we add @fontsource/ibm-plex-mono to the dependencies so it actually ships?
| } | ||
|
|
||
| h1 { | ||
| font-family: 'DM Sans Variable', system-ui, -apple-system, sans-serif; |
There was a problem hiding this comment.
🚫 Blocking — Global h1 !important overrides the responsive heading sizes
This base-layer h1 { font-size: 4rem !important } (plus the font-weight/letter-spacing !important siblings) will win over every Tailwind utility on marketing headings. The hero explicitly asks for text-[40px] ... md:text-[64px], so with this rule mobile jumps straight to 64px, and the contact page's text-[32px] "Thank you!" heading also gets forced to 64px. I think we lose the intended mobile sizing here. Could we scope this to a class or drop the !important so the component utilities stay in control?
| @@ -10,45 +11,50 @@ | |||
| @variant dark (&:where(.dark, .dark *)); | |||
|
|
|||
| @theme { | |||
There was a problem hiding this comment.
📐 Convention — --font-mono now points to a proportional font
I noticed --font-mono is being set to DM Sans, which is a proportional typeface. A fair number of spots in the app lean on font-mono precisely because they want monospacing — code snippets like /name and localhost, MCP server config textareas, URLs, and the text-snippet block. Those will lose alignment and their code-y look. If the goal was just to unify the UI font, could we keep a real monospace stack for --font-mono (e.g. ui-monospace, SFMono-Regular, Menlo, monospace)?
| 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; | ||
| --tb-font-text: 'Mozilla Text', 'Mona Sans Variable', 'Inter Variable', Georgia, serif; | ||
| --tb-font-sans: 'DM Sans Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; | ||
| --tb-font-mono: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
There was a problem hiding this comment.
📐 Convention — Space Grotesk reference likely won't match the fontsource family name
The @fontsource-variable/space-grotesk package exposes its family as 'Space Grotesk Variable', but this token asks for 'Space Grotesk'. That name won't match, so var(--tb-font-mono) (used in the blog and starlight docs) silently falls back to ui-monospace and the font we just added never actually renders. Worth confirming the exact family name — I'd expect it needs the Variable suffix like the DM Sans token above it. Separately, Space Grotesk isn't a monospaced face, so assigning it to a --tb-font-mono token is a bit surprising if these spots wanted true monospacing.
| --color-primary: #191919; | ||
| --font-sans: 'DM Sans Variable', system-ui, -apple-system, sans-serif; | ||
| --font-mono: 'DM Sans Variable', system-ui, -apple-system, sans-serif; | ||
| /* Enterprise Light Theme */ |
There was a problem hiding this comment.
📐 Convention — Overriding --color-black remaps Tailwind's black utility app-wide
Defining --color-black inside @theme doesn't just add a semantic token — in Tailwind v4 it overrides the built-in black, so every bg-black / text-black / border-black in the app resolves to this navy #101828 instead of true black. There are ~11 uses across the app, including modal/backdrop overlays (bg-black/60 in dialog, sheet, alert-dialog, mobile backdrop), so those tints shift subtly. If you want a semantic near-black, a differently named token (e.g. --color-ink) would avoid clobbering the primitive. Was the global remap intended?
- Update CardTitle component to use almost white (#f5f5f5) in dark mode - Update PageHeader component to use almost white in dark mode - Add --color-heading CSS variable to dark theme - Improves contrast and visual hierarchy in dark theme while keeping bright blue accents Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
🔭 thunder-deep-review (advisory)
Complements the other bots — surfaces only what they did not flag. Never approves, never requests changes, never gates merge.
head: 68f767313bab · mode: deep · deferred 0 item(s) already reported by other bots (best-effort dedup)
| @import "@fontsource-variable/mona-sans"; | ||
| @import "@fontsource/space-mono/700.css"; | ||
| @import "@fontsource/mozilla-text"; | ||
| @import "@fontsource/ibm-plex-mono"; |
There was a problem hiding this comment.
🚫 Blocking — IBM Plex Mono is imported but never added as a dependency
Heads up — this line pulls in @fontsource/ibm-plex-mono, but I couldn't find that package in web/package.json or web/bun.lock (only dm-sans and space-grotesk were added there, and space-mono was removed). Vite/Astro will fail to resolve this import at build time, which would break the whole marketing build. Since the footer and enterprise page now lean heavily on font-['IBM_Plex_Mono'], could we add @fontsource/ibm-plex-mono to the web package deps and lockfile?
|
|
||
| h1 { | ||
| font-family: 'DM Sans Variable', system-ui, -apple-system, sans-serif; | ||
| font-size: 4rem !important; |
There was a problem hiding this comment.
🚫 Blocking — Global h1 font-size: 4rem !important overrides every Tailwind heading size
I think this !important on the base h1 will quietly defeat all the per-page Tailwind sizing. An !important declaration in the base layer beats non-important utility classes regardless of cascade layer, so the Hero's text-[40px] md:text-[64px] and the contact page's text-[32px] ("Thank you!") all collapse to a fixed 4rem — the mobile Hero jumps from 40px to 64px, and the contact heading nearly doubles. The font-weight: 800 !important similarly overrides font-black (900). Would scoping these to a class or dropping !important keep the responsive intent intact?
| 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; | ||
| --tb-font-text: 'Mozilla Text', 'Mona Sans Variable', 'Inter Variable', Georgia, serif; | ||
| --tb-font-sans: 'DM Sans Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; | ||
| --tb-font-mono: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
There was a problem hiding this comment.
📐 Convention — Mono font token references 'Space Grotesk' but the variable font ships as 'Space Grotesk Variable'
The import is @fontsource-variable/space-grotesk, which registers its @font-face under the family name 'Space Grotesk Variable' — the same way the sibling line correctly uses 'DM Sans Variable'. Because this token asks for plain 'Space Grotesk', the browser won't match the loaded face and will silently fall through to ui-monospace. Could we make it 'Space Grotesk Variable' to match the imported font?
| --color-popover-foreground: oklch(0.145 0 0); | ||
| --color-primary: #191919; | ||
| --font-sans: 'DM Sans Variable', system-ui, -apple-system, sans-serif; | ||
| --font-mono: 'DM Sans Variable', system-ui, -apple-system, sans-serif; |
There was a problem hiding this comment.
📐 Convention — --font-mono is set to a proportional sans font
Both --font-sans and --font-mono now point at 'DM Sans Variable', a proportional font. Anywhere the app uses the font-mono utility — most notably rendered code blocks in chat — will lose true monospacing and column alignment. If the intent was to unify the display font, we might still want a real monospace stack for code so snippets stay legible. Was mapping mono → sans deliberate here?
| --color-popover-foreground: #e8e8e8; | ||
| --color-primary: #58a6ff; | ||
| --color-primary-foreground: #0f1117; | ||
| --color-heading: #f5f5f5; |
There was a problem hiding this comment.
📐 Convention — New --color-heading token is dark-only and unused; components hardcode the same hex
This adds --color-heading: #f5f5f5 in the .dark block only (there's no light-mode counterpart), and I couldn't find any text-heading/--color-heading consumer. Meanwhile card.tsx and page-header.tsx hardcode the same value via dark:text-[#f5f5f5] instead of the token. Could we either wire the components to a real semantic token (defined for both themes) or drop the unused variable, so the heading color lives in one place?
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#" className="font-['IBM_Plex_Mono'] text-xs text-[#667085] uppercase tracking-wide hover:text-[#344054]"> |
There was a problem hiding this comment.
🔧 Nit — Footer "Enterprise" link points to a placeholder href="#"
The new Enterprise footer link uses href="#", which just jumps to the top of the page. Looks like a placeholder — did we mean to point it at the enterprise route (or omit it until it exists)? Same footer also adds https://docs.thunderbolt.io and /blog links; might be worth confirming those destinations actually resolve.
| {/* Copyright */} | ||
| <div className="mt-12 border-t border-[#eaecf0] pt-8 text-center"> | ||
| <p className="font-['IBM_Plex_Mono'] text-xs text-[#667085] uppercase tracking-wide"> | ||
| © 2026 MZLA TECHNOLOGIES CORPORATION |
There was a problem hiding this comment.
📐 Convention — Footer redesign drops the Creative Commons attribution and contributor copyright
The rewrite replaces the old legal block — which linked to MZLA Technologies Corporation, noted "Portions of this content are ©1998–2026 by individual contributors," and linked the Creative Commons license — with a single "© 2026 MZLA TECHNOLOGIES CORPORATION" line. For a Mozilla property the CC license/attribution text is often required, so I wanted to flag the removal in case it was collateral from the redesign rather than intentional. Worth a check with whoever owns the site's licensing text.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
- Announcement banner: THUNDERBOLT IS HERE! — READ THE ANNOUNCEMENT - Buttons: STAR ON GITHUB, GET IN TOUCH - Section labels: OPEN SOURCE • SELF-HOSTED • ENTERPRISE-READY - Testimonials: TRUSTED BY ORGANIZATIONS THAT WON'T COMPROMISE - Attribution: RYAN SIPES, CEO, MZLA TECHNOLOGIES Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Change dark mode prompt input background from custom oklch(0.182 0 0) to bg-secondary which uses the existing color scheme (--color-secondary: oklch(0.269 0 0)) for better contrast and visibility. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Allow frontend dev server to find an available port when the configured port is already in use, enabling multiple parallel dev sessions. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
1 participant
Summary
Comprehensive styling refinement for the Thunderbolt enterprise marketing website and main application. This PR builds on the initial unified styling system with polished visual details and improved typography.
Changes
Enterprise Page Refinements
App Styling
Colors & Gradients