DocuGardener — UX Calibration Preview

Every pair shows current (left) vs proposed (right). Toggle mode to audit both.

What's changing

Calibration pass — no component renames, no token removals. Values tightened for density and contrast.

Bucket A — Cards & elevation
• --radius-card: 2rem → 0.75rem (unified)
• --background: Zinc-50 → Zinc-100
• --border: Zinc-200 → Zinc-300
• Shadow opacity 5% → 8%
• border-l-8 left rail → header status chip
Bucket B — Header density
• PageHeader py-8 → py-5
• Title text-3xl → text-2xl
• Margin mb-8 → mb-6
• Card header py-6 px-8 → py-4 px-5
• Chrome: ~96px → ~72px
Bucket C — Dense tables
• Row padding py-4 → py-2.5
• Header font 0.72rem → 0.68rem
• Row height ~56px → ~40px
• Hover background via --muted
• No surrounding card wrapper
Consistency rule: after this calibration, each primitive (Card, PageHeader, Button, Table, Chip, Tab) has exactly one canonical version. No in-the-wild variants. The classes below are the only way to build these elements.

1 — Color tokens

Biggest change: light-mode --background deepened, --border sharpened. Dark mode untouched.

Current
background
card
border
muted
primary
Proposed
background
card
border
muted
primary
Δ Light-mode background #fafafa → #f4f4f5 (Zinc-50 → Zinc-100), border #e4e4e7 → #d4d4d8 (Zinc-200 → Zinc-300). Cards now read as visually distinct surfaces without relying on shadow alone.

2 — Typography specimen

Scale unchanged except the page title (smaller for density). All utilities below are canonical — use these class names, don't reinvent.

H1 display
Documentation Drift
type-h1 · 30px · 700
H2 / Page title
Inbox
type-page-title · 22px · 700
Card title
Deployment Profile
type-card-title · 15px · 600
Section header
AGENT GOVERNANCE
type-section-header · 11px · 800
Table header
STATUS · TIER · REPO
type-table-header · 11px · 700
Body
Connected repos will be analysed on every pull request. You can disable monitoring per-repo at any time.
type-body · 14px · 500
Metadata
CREATED · 2 MIN AGO
type-metadata · 11px · 700
Monospace chip
a3f7e891 · 78%
type-mono · 12px · JetBrains

3 — Page header (concern #2)

Chrome compression: ~96px → ~72px (25% drop). Title shrunk from 30px to 22px. Same hierarchy, tighter signal.

Current · py-8 + text-3xl
Dashboard · Inbox

Documentation Drift Inbox

12 unresolved items across 4 repositories.

Proposed · py-5 + text-2xl
Dashboard · Inbox

Documentation Drift Inbox

12 unresolved items across 4 repositories.

Δ padding: 2rem 2.5rem → 1rem 1.25rem, margin-bottom: 2rem → 1rem, title 1.875rem → 1.375rem. Result: scannable on a 13" MacBook without scroll-to-read.

4 — Cards (concerns #1 and #3)

Left-border rail removed → replaced by a header status chip. Radius unified to 12px. Padding dropped from 24–32px → 16–20px.

Current · border-l-8 + rounded-card (2rem)

Deployment Profile

Active — TEAM plan · cloud mode

Plan
TEAM
Fingerprint
dg-a3f7e891
Last synced 2 minutes ago
Proposed · status chip in header + rounded 0.75rem
ACTIVE

Deployment Profile

TEAM plan · cloud mode

Plan
TEAM
Fingerprint
dg-a3f7e891
Last synced 2 minutes ago

Other status variants (chip replaces border-l-8 entirely):

DRIFTED

Execution Mode

Advisory · 3 pending policy updates

BROKEN

LLM Configuration

Anthropic key invalid or expired

BETA

Cross-Repo Drift

Early access · opt in via Settings

5 — Status chips (canonical catalog)

Five variants. Use in card headers, table cells, inline labels. No other colored-label patterns permitted.

ACTIVE IN SYNC RESOLVED DRIFTED NEEDS REVIEW BROKEN FAILED BETA PRO DRAFT ARCHIVED
Rule: one color = one meaning. Teal = synced / healthy. Amber = drifted / needs attention. Rose = failed / broken. Indigo = branded / premium. Zinc = neutral / informational.

6 — Buttons (canonical catalog)

Four variants × two sizes. Radius var(--radius-interactive) = 12px — matches new unified card radius.

7 — Forms (canonical catalog)

Input height aligned with .btn height. Focus ring uses --primary. Radius 12px.

8 — Tables (Bucket C — dense table primitive)

Row height ~56px → ~40px. No surrounding card — table is its own primitive. Hover uses --muted.

Current · inside card + py-4 rows
RepoStatusDriftLast run
acme/backendSYNCED02 min ago
acme/frontendDRIFTED314 min ago
acme/api-gatewayFAILED–1 h ago
Proposed · bare table, py-2.5 rows
RepoStatusDriftLast run
acme/backendSYNCED02 min ago
acme/frontendDRIFTED314 min ago
acme/api-gatewayFAILED–1 h ago
acme/docs-portalSYNCED06 h ago
acme/mobileDRAFT––
Δ Proposed table shows ~5 rows in the space current shows 3. Tabular density is the point of this tool — tables are no longer nested inside cards.

9 — Tabs (concern #1 — frame vs underline)

Current style uses frame + colored left-border (visually heavy, duplicates chip semantics). Proposed: standard underline tab strip, subtle + consistent.

Current · framed + left-border rail
General
Intelligence
Integrations
Agent Governance
Team
Proposed · underline strip
General
Intelligence
Integrations
Agent Governance
Team
Tab content lives here. No frame duplication — the underline carries the selection.

10 — Empty state (canonical)

One pattern across the app: dashed border card + muted icon + title + description + single primary CTA.

📥

Your inbox is empty

No documentation drift detected across your watched repos. Open a pull request to trigger your first analysis.

Next steps: approve or push back on specific elements above. When locked, I'll write the calibration FEAT spec with (a) the exact globals.css variable diff, (b) the Card / PageHeader component changes, (c) a mechanical sweep plan for the 15 files that use border-l-8.