What every app actually looks like today, why "match Bloggy" isn't quite the right goal, and the cheapest path to one consistent brand across the suite.
boom-theme.cssWorth reading before committing to a direction — it changes the target.
Bloggy is not a design system. It's a well-styled page built on hardcoded hex values. Its landing page contains zero design tokens — grep -c "var(--" returns 0.
And the colors it renders are not the Graphite Violet palette. They're a legacy graphite ramp that's close, but different — and the correct tokens are sitting unused in Bloggy's own globals.css.
| Role | Graphite Violet (defined, unused) | What Bloggy renders |
|---|---|---|
| Background | #0B0B0F | #0a0a0f |
| Surface / card | #141419 | #12121a |
| Border | #262631 | #2a2a3d |
| Muted text | #8B8B99 | #8888a8 |
| Accent | #8b7bf0 | #8b7bf0 ✅ (via ramp remap) |
Hardcoded occurrences in Bloggy's source: 1,105 of #2a2a3d, 977 of #8888a8, 629 of #555570, 405 of #12121a. Roughly 4,000 hex literals total.
It remaps Tailwind's entire violet scale, so every violet-600 button in the app inherits the brand accent for free. This block is the most portable asset in the audit:
/* Bloggy/src/app/globals.css:8-18 */
@theme {
--color-violet-500: #8b7bf0; --color-purple-500: #8b7bf0;
--color-violet-600: #6d5ce0; --color-violet-400: #a99bf5;
/* …the full 50–950 ramp */
}globals.css:57 sets body { font-family: Arial, Helvetica, sans-serif }, overriding the Geist font loaded in layout.tsx:12-20. The same bug affects Signnee, Compliee, Replyee, Dashee, Rankee, and Addee. Only Assistee and Posttee wired Geist correctly. One line each to fix.
Each card renders that app's real palette and actual hero copy. Ratings are against Graphite Violet, not against Bloggy.
#8B8B99.var()-driven. Only the logo + CTAs + headline gradient leaked cyan. ~9 swaps.var(--di-accent)) — the July work was real. Landing hardcodes literals. No font loaded.bloggy.online in production.var()-driven. Needs a real page.globals.css. The problem is uniformly that landing pages ignore them.
Found during the design audit; none are theming issues. Two are user-facing failures.
forgot-password/page.tsx:22 — SSR fallback redirects to https://www.bloggy.online/reset-password. Users cannot reset their password.terms/page.tsx:6 — canonical: 'https://bloggy.online/terms'. Your SEO points at a different product.ChatWidget.tsx:21 — greets users as "I'm Bloggy's AI assistant"auth/actions.ts:21 — admin gate checks eric@bloggy.onlinepage.tsx:39 sets const MUTED = '#0B0B0F' — identical to the page background — then uses it as the card background at lines 150, 169, 179, 191, 206. Cards are invisible but for their borders. The border hex #262631 is also used as text color at six sites. Same bug in dashboard/page.tsx:17. A mechanical color swap went wrong.
next/font and then override it with body { font-family: Arial } in globals.css. One line each. Copy the correct pattern from Assistee/globals.css:38.
Also worth deleting: seven apps carry a tailwind.config.ts that is dead code. All 14 run Tailwind v4 and no globals.css contains an @config directive, so these files are never read — but they declare contradictory palettes that will mislead anyone who opens them (Addee red-on-white, Signnee cyan, Posttee blue, Localey emerald+gold, Rewardee #7c3aed).
Which apps descend from Bloggy, and why that turns out not to predict what you'd think.
| App | Relationship | Evidence |
|---|---|---|
| Addee | True fork | 247 bloggy string hits; 26 of 31 components name-identical; same UTF-8 BOM on dashboard/page.tsx — a byte-level copy tell |
| Rankee | True fork | 19 of 23 components identical; globals.css byte-identical to Bloggy lines 1–45. Cleanly de-branded (2 hits, both comments) |
| Signnee | True fork | AppNav.tsx match; copied the "Graphite Violet suite theme (2026-07-14)" comment — and inherited the Arial bug |
| Approvee, QRcodee | Copy/design fork | Same hero formula, independent code: "One Dashboard. / Every Client / Approved." · "…Every QR Code. / Done." |
| Posttee, Localey, Rewardee, Dashee, Compliee, Assistee, Replyee, Displayee | Independent | Clean greps, own metadata, own component vocabularies |
Addee is a 247-hit fork of Bloggy and is the furthest off-brand app in the suite (pink). Replyee shares no code with Bloggy and matches Graphite Violet exactly.
Forking predicts component reuse, not palette — the forks had their hues deliberately swapped away afterward. So don't estimate theming effort from lineage. Estimate it from where the colors live (§6).
boom-theme.cssUsing delivery rails that are already proven in this codebase.
No npm workspaces, no packages/, no @boom/* dependency in any package.json. Fourteen fully independent apps duplicating everything.
boom-responsive.css now sits in all 14 apps at src/styles/, imported by every globals.css, distributed by plain file copy — and it stuck. That's the delivery vehicle. Use it again.
No workspace exists, apps deploy independently across Vercel and Coolify, and a publish → bump → redeploy loop across 14 apps costs more than it saves. Revisit once the token vocabulary is stable.
--primary; Displayee uses --di-accent; Replyee --ry-primary; Assistee --as-primary; Approvee --accent; Localey/QRcodee use Tailwind-native --color-*. One must win before a shared file means anything.
--accent / --bg / --surface / --border) — it's the only vocabulary with a light-mode implementation and a 15-step alpha ramp, both of which you'll eventually want.
Bloggy's rendered legacy ramp, or the true Graphite Violet tokens. Recommend the tokens — Replyee is the best existing exemplar, QRcodee the best technique exemplar.
Addee's password-reset redirect + canonical, Rankee's invisible cards. Independent of theming, and one is a live user-facing failure.
boom-theme.cssCarrying the violet ramp remap, the :root tokens, and a small component layer (.boom-btn, .boom-card, .boom-badge). One-line import per app — identical to the rollout that just shipped.
Constants-only edits. Plausibly a single session.
One line each.
Driven by where colors live — not by inline-vs-Tailwind, and not by fork lineage.
boom-responsive.css exists.)
| App | Effort | Why |
|---|---|---|
| Replyee | TRIVIAL | Already matches. Font fix only. |
| QRcodee | TRIVIAL | ~9 hex swaps in 21 inline objects; already var()-driven. +Inter→Geist. |
| Dashee | TRIVIAL | 6 constants at page.tsx:18-24. |
| Assistee | TRIVIAL | 8 constants + 4 hardcoded rgba(). |
| Rankee | TRIVIAL | Palette already correct — just fix the contrast bugs. 2 files. |
| Compliee | TRIVIAL | Swap lavender body copy → neutral grey. |
| Posttee | TRIVIAL | 72 lines, var()-driven, one blue pill leak. But needs a real page authored. |
| Displayee | MODERATE | Dashboard already tokenized; landing hardcodes literals. 120 inline objects. Add next/font. |
| Approvee | MODERATE | Nearly right — remove green leftovers at :13 and :78. |
| Localey | MODERATE | Tokens perfect; no landing page exists. Cost is authoring. |
| Signnee | HEAVY | 25 files of navy/cyan. Migration started and abandoned. Landing underbuilt (166 lines). |
| Rewardee | HEAVY | ~300 arbitrary-hex class strings across 837 lines. Mechanical but large. |
| Addee | HEAVY | ~150 scattered inline objects + 247 Bloggy leaks + orphaned amber/lime/blue classes. Highest total. |
| Bloggy | HEAVY* | ~4,000 hex literals if tokenizing. TRIVIAL if you accept its legacy ramp as the standard instead. |
If you keep Bloggy's rendered ramp as the standard, Bloggy is free and the other 13 shift slightly off the documented Graphite Violet spec.
If you standardize on the Graphite Violet tokens, 13 apps get the palette you actually chose and Bloggy becomes the single heavy lift — but it's mechanical find-and-replace, and it's the version that leaves you with a real design system rather than a page everyone copies.
Recommendation: the tokens. The difference between #0a0a0f and #0B0B0F is invisible to the eye but decisive for maintainability — one is a system, the other is 4,000 literals.