# 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*