.webp)
Reducto
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
Biggest SaaS library.
.webp)
.webp)
Desktop & mobile versions.
Access the Figma files.
Advanced filtering.
Let it flow.
Save design inspirations.
research
How do you process payment?
SaaSFrame subscriptions are sold on Lemon Squeezy, a secured online selling platform for creators.
What about future updates and versions?
SaaSFrame gets updated all the time! Every new update and version will immediately be made available to all SaaSFrame users.
Can you send me an invoice?
You can generate an invoice on your Lemon Squeezy portal once you purchased SaaSFrame. You will find the link in the order confirmation email.
How can I cancel my membership subscription?
You can cancel your membership subscription at any moment on your profile page.
Can I get a refund?
If you're not satisfied, you can ask for a refund within 7 days. Just send me an email at antoine[at]unmake[dot]io
I have another question.
You can send me an email at antoine[at]unmake[dot]io, I'll be happy to help with any questions.