Reducto AI — Design Language

1. Visual Theme & Atmosphere

Reducto takes document intelligence seriously, and its design language reflects that through a rare typographic investment: three custom typefaces. The warm off-white canvas (rgb(248, 248, 246)) with a deep purple-black primary text creates an atmosphere closer to academic publishing than typical SaaS. The extreme scale contrast — body at 16px against display at 136px — is cinematic and confident. This is a product that believes in the power of the document.

2. Color Palette & Roles

• Canvas — rgb(248, 248, 246) (warm off-white): gentle, paper-like background
• Primary text — rgb(49, 6, 50) (deep warm purple-black): the ink — reads as near-black but has chromatic identity
• Dark brand fill — rgb(51, 6, 52) (deepest purple): hero section backgrounds and bold panels
• Vivid brand purple — rgb(157, 23, 160) (saturated magenta-purple): CTA buttons and primary interactive
• Muted warm tone — oklch(0.553 0.013 58.071): secondary text and deemphasised UI
• Nav background — oklch(0.985 0.001 106.423) (near-white warm): sticky header surface

The palette operates as a warm monochromatic system with one vivid purple accent.

3. Typography Rules

• reductoSerif (custom, weight 470): editorial display headings — a branded serif voice
• reductosans (custom, weight 400–650): body and UI — controlled, humanist sans
• Inter (400–500): functional UI fallback and data contexts
• Display at 80–136px — extreme scale creates document-scale hierarchy
• Body at 14–16px with −0.8px letter-spacing on display sizes — typographic tightening signals precision
• Three-family system: each typeface has a distinct register (display, body, UI)

4. Component Stylings

• Fully rounded pills (3.35544e+07px ≈ infinite radius) for all buttons and tags
• Three-level shadow system for cards and modals
• Brand-purple filled CTAs with white text
• No decorative borders on content sections — negative space does the dividing

5. Layout Principles

• Wide content areas with large typographic anchors (136px display)
• Sections differentiated by background colour (off-white to deep purple)
• Fixed nav with warm near-white fill on scroll
• Document-like reading flow — single wide column for prose content

6. Depth & Elevation

• Three shadow variants for progressive elevation (cards, modals, tooltips)
• Section depth through strong background colour contrast (warm white vs. deep brand purple)
• Pill elements float visually above content through colour distinction rather than shadow

7. Do’s and Don’ts

Do: Honour the custom typeface trio — reductoSerif for impact, reductosans for body. Do: Use extreme type scale (up to 136px) for key data points and display moments. Do: Maintain the warm purple-black as the primary ink — it’s not quite black. Don’t: Use the vivid purple (rgb(157, 23, 160)) for more than one CTA per screen. Don’t: Add additional typefaces — the system is already at maximum with three. Don’t: Use cool whites — every surface should have warm undertone.

8. Responsive Behavior

• 136px display collapses to ~40–60px at mobile
• Deep purple hero sections maintain full-bleed colour on mobile
• Navigation likely hamburger at mobile with the warm near-white panel
• Three-column layouts collapse to single column

9. Agent Prompt Guide

Design like Reducto: warm off-white canvas (rgb(248,248,246)), deep warm purple-black text (rgb(49,6,50)), vivid magenta-purple CTA (rgb(157,23,160)). Custom serif for display (extreme scale up to 136px), custom sans for body, Inter for UI. Pill-shaped buttons. Document-meets-tech academic aesthetic.

Generated by Sparkbites — extracted from live CSS analysis