proofeditor.ai — Design System

1. Visual Theme & Atmosphere

Proofeditor.ai presents a document-first design philosophy rooted in quiet legibility. The overall atmosphere is warm parchment — a deliberate departure from the clinical whites of most SaaS tools. By grounding the UI in an off-white cream (#F5F3EC) that echoes aged paper, the product feels like a natural extension of the writing and editing process rather than software imposing on it. Dark tones are almost-black with a warm undertone (#26251E), reinforcing this analog warmth rather than reaching for pure black. The result is a calm, focused environment where the document content — not the UI chrome — commands attention.

The interface signals credibility through restraint. Decorative color is used only where it carries semantic weight: green for collaborative presence and tracked insertions, red/yellow/green macOS-style window dots as a product metaphor, and a soft violet-blue for threaded comments. Everything else recedes.

2. Color Palette & Roles

Surfaces

• #F5F3EC — Page background (warm cream, primary canvas)
• #F7F7F4 — Near-white surface for overlaid panels and button foregrounds
• rgba(38, 37, 30, 0.04) — Subtle tinted background on link hovers

Text & Borders

• #26251E — Primary text and borders (warm near-black)
• rgba(38, 37, 30, 0.1) — Hairline borders on interactive elements

Brand / Semantic

• #26684 — Forest green; h3 accents, tracked-insert highlights, presence indicators
• rgba(38, 104, 84, 0.18) — Green wash for inserted text suggestions
• rgba(190, 72, 72, 0.12) / rgba(130, 70, 70, 0.9) — Muted red for deleted text suggestions
• rgba(101, 117, 224, 0.88) — Violet-blue for comment thread badges

Status dots (macOS metaphor)

• #FF5F57 — Red (close)
• #FEBC2E — Yellow (minimize)
• #28C840 — Green (expand)

3. Typography Rules

The sole typeface is Switzer (with Switzer Variable as the primary loading strategy), falling back to system sans-serif. Switzer is a geometric grotesque with humanist touches — professional without being sterile, and at home in both editorial and product contexts.

• h1: 58px / weight 400 — large and confident, normal weight keeps it literary not bold
• h2: 40px / weight 400 — section titles, maintains the unhurried rhythm
• h3: 24px / weight 500 — subheadings, slightly heavier to anchor content groups
• body / p: 18px / weight 400 — generous body size reflects writing-tool priorities
• code / pre: 12px monospace fallback stack — small, utilitarian

Letter spacing and line height are not aggressively manipulated. The type scale is evolutionary rather than dramatic — no extreme size jumps. Text transforms and feature settings are left at defaults, reinforcing the document-native aesthetic.

4. Component Stylings

Buttons: Pill-shaped (border-radius 9999px). Background transparent by default with white text — they appear to float over darker surfaces. No heavy drop shadows.

Suggestion spans: Track changes are rendered with inline color washes — green for insertions, red-tinted for deletions — directly in the document flow, mimicking traditional redlining.

Thread badges: Small pill with rgba(101, 117, 224, 0.88) violet-blue — they stand apart from editorial colors to signal a different mode (conversation vs. document).

Presence indicators: #61BA85 / #82C29A green dots — collaborative “who’s here” signals use the same green family as tracked insertions, unifying the collaboration metaphor.

Lock spans: Semi-transparent white text on sage green — a locked/editing-in-progress state.

No card shadows or heavy surface borders detected. The editor chrome is deliberately lightweight.

5. Layout Principles

Proofeditor.ai uses a centered document layout with the editor occupying the focal column. Breakpoints at 600, 700, 768, 900, 1000, 1280, and 1300px suggest a carefully tiered responsive scale — not just mobile/desktop binary thinking.

Spacing is generous: body padding is removed to allow sections to self-manage their breathing room. The navigation is transparent (rgba(0,0,0,0)) overlaid on the canvas, keeping the document surface uninterrupted above the fold.

There is no sidebar-heavy layout detected — the design favors linear, top-to-bottom document reading. The UI wraps the document rather than competing with it.

6. Depth & Elevation

Shadows are absent from the extracted data — Proofeditor.ai achieves depth through color rather than shadow. The warm cream background and subtle tinted overlays (rgba(38, 37, 30, 0.04)) create soft layering without drop shadows. The editor showcase element uses a slightly different surface treatment from the surrounding page, suggesting tonal elevation rather than physical lift.

The macOS window-dot chrome adds a skeuomorphic layer of implied depth — the editor is presented as “a window into a real application.”

7. Do’s and Don’ts

Do

• Use #F5F3EC as the base canvas; never pure white
• Keep body text at 18px minimum to honor the writing-tool context
• Reserve green tones exclusively for collaborative and editorial-state signals
• Use violet-blue only for comment/thread UI — keep it distinct from content
• Pair Switzer at regular (400) weight for editorial headings; avoid heavy weights

Don’t

• Add card shadows or heavy borders — they break the document-native feel
• Use pure black (#000000) — always use the warm near-black #26251E
• Mix the semantic suggestion colors (red/green) with decorative purposes
• Apply transforms or uppercase to text — the tone is literary, not promotional

8. Responsive Behavior

The breakpoint ladder (600 → 700 → 768 → 900 → 1000 → 1280 → 1300px) suggests fine-grained layout control. At smaller breakpoints the document likely goes full-width with minimal padding. The header remains transparent at all sizes, relying on the canvas color for visual grounding. No horizontal scroll detected — the layout is fluid within each tier.

The Next.js + Tailwind stack makes column-based responsive adjustments predictable. Component widths likely use max-w-* containers centered on the page.

9. Agent Prompt Guide

“Design in the style of proofeditor.ai: warm cream background (#F5F3EC), near-black warm text (#26251E), single Switzer typeface at normal weight. Use forest green (#26684) only for collaborative state signals. No card shadows — achieve depth through tonal surface variation. Pill-shaped interactive elements. Editorial calm over SaaS urgency. The document is the hero.”

Generated by Sparkbites — extracted from live CSS analysis