Figma file available
.webp)
Reducto
Document intelligence platform
No items found.
No items found.
Visual identity
Reducto Design System
Source & Stack \- Framework: Next.js (App Router, \_next/static asset paths, meta-next-size-adjust meta tag) \- CDN: cdn.reducto.ai for all images, SVGs, illustrations, and videos \- Asset format: SVG logos, WebP/WebM illustrations, MP4-less video via
Typography \- Primary font: Clean sans-serif — visually consistent with Inter or a geometric sans (no Google Fonts link visible, likely self-hosted or system stack) \- Scale: Large display headings (hero h1 ~56–72px), section h2 ~40–48px, h3 ~24px, body ~16px \- Weight: 400 regular for body, 600–700 semibold/bold for headings \- Line height: Generous leading (~1.4–1.6) for body text \- Case: Sentence case throughout; no all-caps UI labels
Color Philosophy \- Primary accent: Orange (#FF5C00 or close variant) — used in footer logo, CTAs, and brand highlights \- Background: Off-white/near-white (#FAFAF8 or #FFFFFF) for light sections \- Dark sections: Deep navy/charcoal for enterprise and CTA blocks \- Text: Near-black (#111 / #1A1A1A) for headings, medium gray (#555–#666) for body and captions \- Muted UI: Light gray borders and dividers (#E5E5E5) \- No dark mode detected on marketing site
Spacing \- Section vertical padding: 80–120px \- Card/component internal padding: 24–40px \- Grid gutters: 24–32px \- Container max-width: ~1200–1280px, centered
Component Defaults \- Buttons: Rounded pill shape (border-radius ~999px), solid orange primary, ghost/outline secondary \- Cards: Subtle border or shadow, rounded corners (~12–16px), white background \- Nav: Minimal top bar, logo left, links + CTA right, announcement banner above \- Illustrations: Custom WebP/WebM animated illustrations with white/light backgrounds \- Logo ticker: Infinite horizontal scroll for customer logos
Layout \- Single-column hero, two/three-column feature grids below fold \- Alternating text-left / illustration-right sections \- Full-width dark CTA bands at page bottom \- Mobile-first responsive; separate mobile SVG illustrations provided \- Footer: 5-column link grid on desktop
/ Reducto Design System — CSS Custom Properties / / Derived from visual analysis of reducto.ai (Next.js site, July 2026) /
:root { / === Brand Colors === / --color-brand-orange: #FF5C00; --color-brand-orange-hover: #E54F00; --color-brand-orange-light: #FFF0E8;
/ === Neutrals === / --color-bg-primary: #FFFFFF; --color-bg-secondary: #FAFAF8; --color-bg-muted: #F5F5F2; --color-bg-dark: #0F0F0E; --color-bg-dark-secondary: #1A1A18;
/ === Text === / --color-text-primary: #111111; --color-text-secondary: #555555; --color-text-muted: #888888; --color-text-inverse: #FFFFFF; --color-text-on-orange: #FFFFFF;
/ === Borders === / --color-border-default: #E5E5E0; --color-border-muted: #EFEFEC; --color-border-dark: #2A2A28;
/ === Typography === / --font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: 'JetBrains Mono', ui-monospace, 'Fira Code', monospace;
--font-size-xs: 0.75rem; / 12px / --font-size-sm: 0.875rem; / 14px / --font-size-base: 1rem; / 16px / --font-size-lg: 1.125rem; / 18px / --font-size-xl: 1.25rem; / 20px / --font-size-2xl: 1.5rem; / 24px / --font-size-3xl: 1.875rem; / 30px / --font-size-4xl: 2.25rem; / 36px / --font-size-5xl: 3rem; / 48px / --font-size-6xl: 3.75rem; / 60px / --font-size-7xl: 4.5rem; / 72px /
--font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
--line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-normal: 1.5; --line-height-relaxed: 1.625;
/ === Spacing === / --spacing-1: 0.25rem; / 4px / --spacing-2: 0.5rem; / 8px / --spacing-3: 0.75rem; / 12px / --spacing-4: 1rem; / 16px / --spacing-5: 1.25rem; / 20px / --spacing-6: 1.5rem; / 24px / --spacing-8: 2rem; / 32px / --spacing-10: 2.5rem; / 40px / --spacing-12: 3rem; / 48px / --spacing-16: 4rem; / 64px / --spacing-20: 5rem; / 80px / --spacing-24: 6rem; / 96px / --spacing-32: 8rem; / 128px /
/ === Border Radius === / --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px;
/ === Shadows === / --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
/ === Layout === / --container-max-width: 1280px; --container-padding-x: 1.5rem; --section-padding-y: 5rem; --nav-height: 64px;
/ === Transitions === / --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; }
Reducto Design Tokens Reference
Color Tokens
| Token | Value | Usage |
|---|---|---|
| --color-brand-orange | #FF5C00 | Primary CTA buttons, accent highlights, footer logo |
| --color-brand-orange-hover | #E54F00 | Button hover state |
| --color-brand-orange-light | #FFF0E8 | Tinted backgrounds, badges |
| --color-bg-primary | #FFFFFF | Default page background |
| --color-bg-secondary | #FAFAF8 | Alternating section backgrounds |
| --color-bg-muted | #F5F5F2 | Card fills, subtle containers |
| --color-bg-dark | #0F0F0E | Dark CTA sections, footer |
| --color-bg-dark-secondary | #1A1A18 | Dark card backgrounds |
| --color-text-primary | #111111 | Headings, primary body text |
| --color-text-secondary | #555555 | Subtext, descriptions |
| --color-text-muted | #888888 | Captions, metadata, placeholders |
| --color-text-inverse | #FFFFFF | Text on dark/orange backgrounds |
| --color-border-default | #E5E5E0 | Card borders, dividers |
| --color-border-muted | #EFEFEC | Subtle separators |
| --color-border-dark | #2A2A28 | Borders on dark backgrounds |
Spacing Scale
| Token | rem | px | Usage |
|---|---|---|---|
| --spacing-1 | 0.25rem | 4px | Icon gaps, micro spacing |
| --spacing-2 | 0.5rem | 8px | Tight padding |
| --spacing-3 | 0.75rem | 12px | Input padding (vertical) |
| --spacing-4 | 1rem | 16px | Base unit, text spacing |
| --spacing-6 | 1.5rem | 24px | Card padding, grid gap |
| --spacing-8 | 2rem | 32px | Section sub-spacing |
| --spacing-10 | 2.5rem | 40px | Component padding |
| --spacing-16 | 4rem | 64px | Section spacing (small) |
| --spacing-20 | 5rem | 80px | Section padding (standard) |
| --spacing-24 | 6rem | 96px | Section padding (large) |
Typography
| Token | Value | Usage |
|---|---|---|
| --font-size-sm | 14px | Labels, captions, nav links |
| --font-size-base | 16px | Body text |
| --font-size-lg | 18px | Lead paragraphs |
| --font-size-xl | 20px | Card titles, feature headings |
| --font-size-2xl | 24px | H3 headings |
| --font-size-3xl | 30px | Sub-section headings |
| --font-size-4xl | 36px | H2 on mobile |
| --font-size-5xl | 48px | H2 on desktop |
| --font-size-6xl | 60px | H1 on desktop |
| --font-size-7xl | 72px | Hero display text |
| --font-weight-regular | 400 | Body |
| --font-weight-semibold | 600 | Nav, labels |
| --font-weight-bold | 700 | Headings, CTAs |
| --line-height-tight | 1.2 | Display/hero headings |
| --line-height-normal | 1.5 | Body text |
Border Radius
| Token | Value | Usage |
|---|---|---|
| --radius-sm | 4px | Tags, badges, small chips |
| --radius-md | 8px | Inputs, small cards |
| --radius-lg | 12px | Feature cards |
| --radius-xl | 16px | Illustration containers |
| --radius-2xl | 24px | Large modal/section cards |
| --radius-full | 9999px | Pill buttons (primary CTAs) |
Shadows
| Token | Value | Usage |
|---|---|---|
| --shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | Subtle lifts |
| --shadow-md | 0 4px 6px rgba(0,0,0,0.08) | Cards, dropdowns |
| --shadow-lg | 0 10px 15px rgba(0,0,0,0.08) | Modals, popovers |
| --shadow-xl | 0 20px 25px rgba(0,0,0,0.08) | Feature hero containers |
Reducto Design Notes
Framework \- Next.js (App Router) — confirmed via meta-next-size-adjust meta tag, \_next/static/ asset structure, and opengraph-image naming convention \- Deployment: Vercel (inferred from Next.js + CDN pattern) \- CDN: Dedicated cdn.reducto.ai subdomain for all marketing assets (SVGs, WebP images, WebM videos, backgrounds)
Theme Support \- Light mode only on the public marketing site — no prefers-color-scheme dark mode detected \- Dark-styled sections (CTA blocks, enterprise section, footer) are hardcoded dark backgrounds, not a theme toggle \- Studio/app (studio.reducto.ai) may have independent theming not analyzed here
Data Source Confidence \- High confidence: Orange brand color, Next.js framework, CDN structure, pill-shaped CTA buttons, section layout patterns, logo ticker \- Medium confidence: Exact hex values for off-whites and grays (derived from visual inspection + common Next.js conventions), font family (Inter-like sans-serif, not confirmed from CSS source) \- Low confidence: Exact pixel values for spacing/radius (inferred from visual density, not parsed from CSS file — site renders client-side JS which blocked CSS extraction)
Notable Patterns \- Animated illustrations: Every major section uses custom WebM video loops (not Lottie) served from CDN — lightweight, format-forward approach \- Logo ticker: CSS marquee/scroll animation for customer logos with duplicate sets for seamless loop \- Orange as sole accent: The entire site uses one accent color (orange) with no secondary accent — very disciplined palette \- Illustration style: Flat, geometric, pastel-tinted with structured grid/document motifs — consistent with document/data processing brand identity \- Mobile illustrations: Separate SVG assets for mobile viewports (e.g., document-grid-illustration-mobile.svg vs desktop WebP) — intentional art direction breakpoints \- Typography hierarchy: Very large display numbers used as visual anchors (e.g., "3,000,000,000 pages processed") — data-forward storytelling \- Footer logo variant: Orange-tinted logo (reducto-logo-orange.svg) used on white footer, standard logo on dark backgrounds — adaptive branding \- Announcement bar: Persistent top banner above nav for latest news/blog posts