---
title: "Reducto design system"
variant: extended
source: https://reducto.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/reducto-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Reducto · Design System

> Editorial calm for enterprise document AI.

**Theme:** light · **Industry:** ai · **Source:** https://reducto.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Reducto pairs a restrained, warm-neutral canvas with expressive serif headlines and vivid purple calls to action. The long homepage alternates product evidence, customer proof, and technical capabilities with a single high-contrast dark enterprise band.

## North star

Use generous warm-neutral space and editorial serif headings to frame concrete document-product evidence, with purple reserved for clear actions and emphasis.

## Overview

The page is grounded in a warm off-white canvas (#f8f8f6), with white panels used to separate selected product and process sections without making the page feel card-heavy. Dark charcoal and deep plum form two distinct contrast modes: charcoal anchors the enterprise trust section, while plum carries the footer and its oversized brand lettering. Bright purple (#9d17a0) is reserved for primary actions and selected headline emphasis; lavender announces the new model and appears in navigation accents. Large reductoSerif headlines create an editorial voice, balanced by compact, neutral Inter body copy. Centered hero and section introductions give way to left-right product splits, tabbed use cases, and structured feature panels. Screenshots, document previews, customer marks, and video provide concrete product proof; pale rules and subtle borders organize content while whitespace keeps the dense long page legible.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Paper | `#f8f8f6` | `--color-warm-paper` | surface | Primary page canvas across the hero and most light sections. |
| Deep Orchid | `#690f6b` | `--color-deep-orchid` | brand | Dark purple border on the primary Try for free button. |
| Soft Taupe | `#79716b` | `--color-soft-taupe` | neutral | Most muted copy, navigation labels, and subdued supporting text. |
| Signal Violet | `#9d17a0` | `--color-signal-violet` | accent | Primary CTA fill and selective headline or navigation emphasis. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Product and process section backgrounds, cards, and inverse button text. |
| Plum Night | `#330634` | `--color-plum-night` | brand | Footer background and its contrasting links, headings, and brand graphic. |
| Stone Hairline | `#e7e5e4` | `--color-stone-hairline` | neutral | Fine separators and subtle borders between sections, cards, and media. |
| Charcoal Stage | `#292524` | `--color-charcoal-stage` | surface | Enterprise security band and dark section headings or controls. |
| Lilac Signal | `#dcbffb` | `--color-lilac-signal` | accent | Announcement and navigation accents, especially on dark backgrounds. |
| Warm Ink | `#57534d` | `--color-warm-ink` | neutral | Primary body and link copy on light surfaces. |
| Deep Taupe | `#44403b` | `--color-deep-taupe` | neutral | Secondary text and button copy where stronger than muted labels. |
| Olive Detail | `#718613` | `--color-olive-detail` | semantic | Small text or link accent; not a defining page-wide brand color. |
| Dust Gray | `#a6a09b` | `--color-dust-gray` | neutral | Low-emphasis text and links. |
| Pale Stone | `#d6d3d1` | `--color-pale-stone` | neutral | Dashed product-card outlines and subdued control or card borders. |
| Sage Stone | `#d1d3c5` | `--color-sage-stone` | neutral | Minor measured border detail, not a prominent page-level color. |
| Muted Lilac | `#c7b7d9` | `--color-muted-lilac` | accent | Small footer color detail, secondary to the deep plum field. |
| Lemon Chartreuse | `#f2f39b` | `--color-lemon-chartreuse` | semantic | A small measured media or illustration detail, not a core UI surface. |

### Semantic aliases

`--color-canvas` → `#f8f8f6` (Warm Paper) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#292524` (Charcoal Stage) · `--color-surface-3` → `#330634` (Plum Night) · `--color-surface-4` → `#f2f39b` (Lemon Chartreuse) · `--color-text` → `#57534d` (Warm Ink) · `--color-text-muted` → `#79716b` (Soft Taupe) · `--color-text-subtle` → `#44403b` (Deep Taupe) · `--color-border` → `#e7e5e4` (Stone Hairline) · `--color-accent` → `#9d17a0` (Signal Violet) · `--color-accent-2` → `#dcbffb` (Lilac Signal) · `--color-accent-3` → `#718613` (Olive Detail) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#57534d` | `#f8f8f6` | 7.18:1 | AAA |
| `#57534d` | `#ffffff` | 7.64:1 | AAA |
| `#57534d` | `#292524` | 1.99:1 | fail |
| `#57534d` | `#330634` | 2.26:1 | fail |
| `#79716b` | `#f8f8f6` | 4.5:1 | AA |
| `#79716b` | `#ffffff` | 4.79:1 | AA |
| `#79716b` | `#292524` | 3.17:1 | AA-large |
| `#79716b` | `#330634` | 3.61:1 | AA-large |
| `#44403b` | `#f8f8f6` | 9.67:1 | AAA |
| `#44403b` | `#ffffff` | 10.28:1 | AAA |

### Gradients

- `linear-gradient(rgb(251, 251, 251) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top, rgb(251, 251, 251) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500 | Body copy, navigation, links, buttons, and captions. | Inter |
| reductoSerif | `--font-display` | webfont | 470, 400, 650 | Display headlines and selected product or card titles. | Instrument Serif |
| reductosans | `--font-reductosans` | webfont | 400, 500 | Navigation and compact announcement or interface text. | Inter |

- **Inter:** Mostly regular weight; medium weight for links and buttons. Sentence case with neutral tracking.
- **reductoSerif:** Large, high-contrast editorial headlines; measured weights span regular to medium. Keep tracking neutral.
- **reductosans:** Used sparingly at regular or medium weight; compact, clear sentence case.

### Type scale — Golden Ratio (ratio ≈ 1.604, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 66px | 470 | 1.15 | 0 | — | reductoSerif | Oversized editorial display headings, especially headline moments. |
| h1 | 54px | 470 | 1.24 | 0 | — | reductoSerif | Primary hero and major section titles. |
| h2 | 24px | 470 | 1.33 | 0 | — | reductoSerif | Secondary titles within product and content blocks. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Main explanatory copy and product descriptions. |
| caption | 15px | 400 | 1.6 | 0 | — | Inter | Supporting labels and short explanatory details. |
| button | 18px | 500 | 1.56 | 0 | — | Inter | Primary and secondary action labels. |
| nav | 15px | 400 | 1.6 | 0 | — | Inter | Top navigation and navigation links. |
| link | 16px | 500 | 1.5 | 0 | — | Inter | Inline actions and contextual text links. |

OpenType features in use: `"salt", "ss02"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 6, 7, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48, 56 px.
- Section rhythm 64px · element gap 10px · card padding — · max content width 1152px.

The page uses a centered content frame with a measured maximum width of 1152px and a comfortable density. The hero and section introductions are centered; product explanations and enterprise details shift into split or multi-column arrangements. A broad section rhythm separates the announcement, proof, product, use-case, feature, FAQ, and footer areas. Wide whitespace around headings balances denser interface previews and feature panels. Most bands retain the warm canvas, with selected white process panels and distinct charcoal and plum closing sections.

## Shape & elevation

- Radius: button `9999px` · card `16px` · pill `9999px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.25) 0px -2px 0px 0px inset, rgba(255, 255,`
- Shadow `inset-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.3) 0px -2px 0px 0px inset, rgba(255, 255, `
- Shadow `sm` (other, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual system is mostly flat, with thin pale borders and dividers doing more work than shadows. Product panels and embedded media sit cleanly within the canvas, while dark sections create contrast through background color rather than depth. Buttons may use subtle inset or light shadow treatment, but avoid prominent floating-card elevation.

## Imagery

Product proof is primarily interface-led: document previews, tables, parsing output, and small diagrams sit beside explanatory copy. A video appears in the r-1 announcement card, while the enterprise band uses a central security illustration and surrounding trust details. Customer logos form a restrained proof row. Keep imagery framed within the content grid and avoid treating mockup colors as global brand colors.

## Components

### Primary CTA

Purple Try for free button with white Inter label and a dark-purple border; repeat as the main conversion action.

### Announcement strip

A lavender-tinted announcement link sits directly below the navigation and announces the r-1 model.

### Customer proof row

A short centered statement introduces a horizontal set of customer logos on the warm canvas.

### Product feature split

Pair a concise explanation or tab list with a document or parsing preview; use whitespace rather than heavy framing.

### Use-case showcase

Tabbed industry choices sit above a split panel with explanatory copy, testimonial evidence, and a document view.

### Enterprise band

Charcoal full-width section combines a centered headline and contact action with security proof arranged around an illustration.

### FAQ accordion

Left-aligned title and CTA balance a question list with compact expand controls.

### Footer

Deep plum footer uses dense link columns, newsletter signup, and oversized low-contrast brand lettering.

### Measured component styles

- **Primary button** (“Try for free”): background #9d17a0 · text #ffffff · border 1px solid #690f6b · radius 0px · padding 12px 24px · 500 17px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Introducing r-1: Reducto’s new SOTA docu”): background #ede1f8 · text #330634 · radius 0px · padding 10px 16px · 500 14px reductosans
- **Input**: transparent background · text #ffffff · border 1px solid #5b3f7a · radius 0px · padding 0px 12px · 400 14px Inter
- **Card** (“Extract”): transparent background · text #310632 · border 1px dashed #d6d3d1 · radius 0px · padding 0px · 400 16px reductoSerif
- **Navigation item** (“Docs”): transparent background · text #dcbffb · radius 0px · padding 0px · 400 15px Inter

## Do

- Keep the main canvas warm and nearly white.
- Use serif display type for major editorial headlines.
- Reserve vivid purple for actions and deliberate emphasis.
- Show product interfaces alongside concise explanations.
- Use thin rules to separate content without heavy boxes.
- Make dark enterprise and footer bands distinct from light content.

## Don't

- Do not turn every section into a raised card.
- Do not use purple as a full-page background.
- Do not replace the restrained copy colors with pure black everywhere.
- Do not crowd centered headlines with interface details.
- Do not treat illustration colors as core brand colors.
- Do not add decorative gradients or strong shadows without evidence.

## Agent prompt

Build a new Reducto-style AI product page with an editorial, calm enterprise feel. Use Warm Paper (#f8f8f6) as the main canvas, Clean White (#ffffff) for selected content panels, and Warm Ink (#57534d) for readable body copy. Set major headings in an elegant serif similar to Instrument Serif, with Inter for navigation, descriptions, and controls. Use Signal Violet (#9d17a0) sparingly for primary actions and selected emphasis; pair it with white button text. Structure the page around centered introductions, split product demonstrations, and clear section breaks. Use document interfaces, tables, and restrained diagrams as evidence rather than decoration. Add a Charcoal Stage (#292524) trust section and a Plum Night (#330634) footer. Favor fine borders over prominent shadows and preserve generous whitespace.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, supporting copy, and primary CTA on the warm canvas. | Primary conversion action | Serif headline, Purple CTA |
| 2 | logo-cloud | Centered proof statement above a horizontal customer-logo row. | Trust signals | Logo row, Muted supporting text |
| 3 | video | White content card with copy on the left and embedded video on the right. | Product announcement, Try and demo actions | Serif card heading, Video preview, Action links |
| 4 | product-showcase | Centered product introduction with a compact tool or code row. | Product orientation | Centered serif title, Compact controls |
| 5 | feature-split | Two-column product section pairing a vertical capability list with document media. | Feature selection, Learn more | Tabbed or stacked feature list, Document preview |
| 6 | other | Centered heading and supporting statement above the use-case panel. | Industry context | Eyebrow label, Serif heading |
| 7 | product-showcase | Industry tabs above a large split example and document-view panel. | Tab selection, Get started action | Tabbed navigation, Testimonial block, Document preview |
| 8 | how-it-works | White section with centered heading and a multi-part process diagram below. | Process explanation | Serif heading, Diagram, Short feature captions |
| 9 | stats | Minimal white full-width band with one centered metric and label. | Scale proof | Large serif statistic, Small caption |
| 10 | other | Centered feature heading and supporting sentence on the warm canvas. | Capability overview | Small eyebrow, Centered serif heading |
| 11 | feature-grid | Large bordered panel with multiple capability items arranged in columns. | Capability scanning | Thin panel border, Small icons, Feature labels |
| 12 | other | Centered title, short statement, and contact action on charcoal. | Enterprise reassurance, Contact sales | Dark band, Centered CTA |
| 13 | feature-grid | Dark multi-column arrangement around a central security illustration, followed by logos. | Trust and compliance proof | Security diagram, Metric callouts, Customer logos |
| 14 | faq | Light section with title and CTA on the left and accordion questions on the right. | Expandable answers, Trial conversion | Plus controls, Two-column layout |
| 15 | cta | Centered conversion message and actions within a two-column section. | Free trial, Book a demo | Illustrative mark, Primary and secondary buttons |
| 16 | footer | Deep plum footer with brand summary, dense link columns, and newsletter form. | Newsletter signup, Site navigation | Multi-column links, Email input, Purple accents |
| 17 | footer | Continuation of the deep plum footer with a large decorative wordmark. | Brand sign-off | Oversized low-contrast lettering |

## Source CSS custom properties (selected)

```css
--cc-modal-border-radius: .5rem;
--cc-btn-border-radius: .4rem;
--cc-modal-transition-duration: .25s;
--cc-link-color: #30363c;
--cc-bg: #fff;
--cc-primary-color: #2c2f31;
--cc-secondary-color: #5e6266;
--cc-btn-primary-bg: #30363c;
--cc-btn-primary-color: #fff;
--cc-btn-primary-border-color: #30363c;
--cc-btn-primary-hover-bg: #000;
--cc-btn-primary-hover-color: #fff;
--cc-btn-primary-hover-border-color: #000;
--cc-btn-secondary-bg: #eaeff2;
--cc-btn-secondary-color: #2c2f31;
--cc-btn-secondary-border-color: #eaeff2;
--cc-btn-secondary-hover-bg: #d4dae0;
--cc-btn-secondary-hover-color: #000;
--cc-btn-secondary-hover-border-color: #d4dae0;
--cc-separator-border-color: #f0f4f7;
--cc-toggle-on-bg: #30363c;
--cc-toggle-off-bg: #667481;
--cc-toggle-on-knob-bg: #fff;
--cc-toggle-off-knob-bg: #fff;
--cc-toggle-enabled-icon-color: #fff;
--cc-toggle-disabled-icon-color: #fff;
--cc-toggle-readonly-bg: #d5dee2;
--cc-toggle-readonly-knob-bg: #fff;
--cc-toggle-readonly-knob-icon-color: #d5dee2;
--cc-section-category-border: #f0f4f7;
--cc-cookie-category-block-bg: #f0f4f7;
--cc-cookie-category-block-border: #f0f4f7;
--cc-cookie-category-block-hover-bg: #e9eff4;
--cc-cookie-category-block-hover-border: #e9eff4;
--cc-cookie-category-expanded-block-bg: transparent;
--cc-cookie-category-expanded-block-hover-bg: #dee4e9;
--cc-overlay-bg: rgba(0,0,0,.65);
--cc-webkit-scrollbar-bg: #f0f4f7;
--cc-webkit-scrollbar-hover-bg: #000;
--cc-footer-bg: #eaeff2;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/reducto-ai