CodeIssuesDiscussionsWikiPull RequestsProjectsCommitsActionsReleasesContributorsPulse● GatesSecuritySettingsDeploymentsPipelineInsightsAgents✨ Explain✨ Ask AI✨ Workspace✨ Spec✨ Tests▓ Debt Map✨ NL Search🏛 Archaeology
Blame · Line-by-line history
DESIGN_AUDIT.md
Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.
| c63b860 | 1 | # Design Audit — gluecron |
| 2 | ||
| 3 | _Date: 2026-05-14 · Block O3 (visual coherence) snapshot._ | |
| 4 | ||
| 5 | A one-page snapshot of the design-system state taken at the end of the | |
| 6 | "visual coherence" reconciliation pass. The goal of O3 was not to | |
| 7 | redesign — it was to **consolidate** what is already shipping into one | |
| 8 | named token language so future polish lands in one place. | |
| 9 | ||
| 10 | ## Token map | |
| 11 | ||
| 12 | `src/views/layout.tsx` is the single source of truth. Two layers now | |
| 13 | co-exist: | |
| 14 | ||
| 15 | | Concept | Legacy var | O3 alias (preferred for new code) | | |
| 16 | |-----------|-----------------|------------------------------------| | |
| 17 | | Spacing | `--s-1` … `--s-24` | `--space-1` … `--space-24` (4px base) | | |
| 18 | | Radius | `--r-sm`/`--r-md`/`--r-lg`/`--r-xl`/`--r-full` | `--radius-sm` / `--radius-md` / `--radius-lg` / `--radius-xl` / `--radius-full` | | |
| 19 | | Font size | `--t-xs` … `--t-display` | `--font-size-xs` / `-sm` / `-base` / `-md` / `-lg` / `-xl` / `-2xl` / `-3xl` / `-hero` | | |
| 20 | | Leading | _ad-hoc inline_ | `--leading-tight` / `-snug` / `-normal` / `-relaxed` / `-loose` | | |
| 21 | | Z-index | _ad-hoc magic numbers (9997/9998/9999/10000)_ | `--z-base` / `--z-nav` / `--z-sticky` / `--z-overlay` / `--z-modal` / `--z-toast` | | |
| 22 | | Color | `--bg`, `--bg-elevated`, `--text`, `--text-muted`, `--border`, `--accent`, `--green`, `--red`, `--yellow`, `--blue` (unchanged) | | |
| 23 | ||
| 24 | All aliases point at the existing legacy var, so look-and-feel is | |
| 25 | byte-identical. | |
| 26 | ||
| 27 | ## Files with the most inline-style drift (top 5) | |
| 28 | ||
| 29 | 1. `src/routes/dashboard.tsx` — many inline `style="background: rgba(...);..."` patterns. | |
| 30 | 2. `src/routes/insights.tsx` — repeats the same red/green RGBA tint pattern. | |
| 31 | 3. `src/routes/billing.tsx` — `style="background:linear-gradient(...)..."`. Adopt `<Card variant="gradient">`. | |
| 32 | 4. `src/routes/admin.tsx` — administrator-only chrome. | |
| 33 | 5. `src/routes/migrations.tsx` — error-state borders. Adopt `.notice notice-error`. | |
| 34 | ||
| 35 | ## Pages that should adopt `<Card>` (top 10) | |
| 36 | ||
| 37 | 1. `src/routes/dashboard.tsx` | |
| 38 | 2. `src/routes/settings.tsx` | |
| 39 | 3. `src/routes/admin.tsx` | |
| 40 | 4. `src/routes/billing.tsx` | |
| 41 | 5. `src/routes/insights.tsx` | |
| 42 | 6. `src/routes/onboarding.tsx` | |
| 43 | 7. `src/routes/explore.tsx` | |
| 44 | 8. `src/routes/help.tsx` | |
| 45 | 9. `src/routes/repo-settings.tsx` | |
| 46 | 10. `src/routes/notifications.tsx` | |
| 47 | ||
| 48 | ## What O3 actually changed | |
| 49 | ||
| 50 | - **Token aliases** (additive): `--space-*`, `--radius-*`, `--font-size-*`, `--leading-*`, `--z-*` added to `:root` in `src/views/layout.tsx`. | |
| 51 | - **Card primitive** (additive): `<Card padding="..." variant="...">` shape and `.card-p-*` / `.card-elevated` / `.card-gradient` CSS. | |
| 52 | - **Notice boxes** (`.notice` + `.notice-{info,success,warn,error,accent}`) replace inline DRAFT / 2FA notice boxes across legal pages. | |
| 53 | - **`.code-block`** utility replaces 6 inline pre-tag styles in `help.tsx`. | |
| 54 | - **`.email-preview`** utility replaces inline `background:#fff;color:#111` in `settings.tsx`. | |
| 55 | - **`.status-pill-operational`** replaces the inline status-page pill. | |
| 56 | - **`.api-tag-auth` / `.api-tag-scope`** replace inline method-tag spans in `api-docs.tsx`. | |
| 57 | - **Footer extras**: `<Layout siteBannerText="..." siteBannerLevel="warn">` props plus `.footer-version-pill` and `.footer-banner` CSS so the pre-launch banner can be moved off the top of every page. | |
| 58 | ||
| 59 | ## Open questions for the next polish pass | |
| 60 | ||
| 61 | 1. **Migrate dashboard.tsx panels to `<Card>`** — biggest single win. | |
| 62 | 2. **Wire the footer banner to the live `site_banner_text` flag.** Layout accepts the prop but no route passes it yet. | |
| 63 | 3. **Strip the remaining 36 inline-style drift sites.** O3 fixed 12; rest are dashboard/insights stat tiles. A `<Stat>` component would collapse half. | |
| 64 | 4. **Z-index alias adoption.** `z-index:9999` / `9998` should move to `var(--z-modal)` etc. | |
| 65 | 5. **Light theme audit.** Notice text-on-tint pairing needs verification on `[data-theme='light']`. | |
| 66 | ||
| 67 | ## Operational note on the O3 session | |
| 68 | ||
| 69 | This block was implemented while several parallel agents were also | |
| 70 | writing to the same source tree (`account-deletion.ts`, `landing.tsx`, | |
| 71 | `form-validation-js.tsx`, etc. were all rewritten by concurrent | |
| 72 | work). Several of my edits to `src/views/layout.tsx`, | |
| 73 | `src/views/ui.tsx`, and the route files were silently reverted when | |
| 74 | the parallel work flushed a snapshot back over the tree. The | |
| 75 | inline-style drift fixes (legal pages, settings-2fa, help, settings, | |
| 76 | status, api-docs) need to be re-applied in a follow-up pass; the | |
| 77 | master CSS tokens + the `<Card>` extension are the durable wins. |