Reducto 以克制的暖中性色为底，搭配富有表现力的衬线标题和醒目的紫色行动按钮。长页面依次呈现产品能力、客户证明与技术特性，并用一段高对比深色区块突出企业级保障。
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.
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.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
Deep Orchid
#690f6b
Dark purple border on the primary Try for free button.
Plum Night
#330634
Footer background and its contrasting links, headings, and brand graphic.
强调色
Signal Violet
#9d17a0
Primary CTA fill and selective headline or navigation emphasis.
Lilac Signal
#dcbffb
Announcement and navigation accents, especially on dark backgrounds.
Muted Lilac
#c7b7d9
Small footer color detail, secondary to the deep plum field.
表层色
Warm Paper
#f8f8f6
Primary page canvas across the hero and most light sections.
Clean White
#ffffff
Product and process section backgrounds, cards, and inverse button text.
Charcoal Stage
#292524
Enterprise security band and dark section headings or controls.
中性色
Soft Taupe
#79716b
Most muted copy, navigation labels, and subdued supporting text.
Stone Hairline
#e7e5e4
Fine separators and subtle borders between sections, cards, and media.
Warm Ink
#57534d
Primary body and link copy on light surfaces.
Deep Taupe
#44403b
Secondary text and button copy where stronger than muted labels.
Dust Gray
#a6a09b
Low-emphasis text and links.
Pale Stone
#d6d3d1
Dashed product-card outlines and subdued control or card borders.
Sage Stone
#d1d3c5
Minor measured border detail, not a prominent page-level color.
功能色
Olive Detail
#718613
Small text or link accent; not a defining page-wide brand color.
Lemon Chartreuse
#f2f39b
A small measured media or illustration detail, not a core UI surface.
文字 背景 对比度 WCAG #57534d Warm Ink#f8f8f6 Warm Paper7.18:1 AAA #57534d Warm Ink#ffffff Clean White7.64:1 AAA #57534d Warm Ink#292524 Charcoal Stage1.99:1 不达标 #57534d Warm Ink#330634 Plum Night2.26:1 不达标 #79716b Soft Taupe#f8f8f6 Warm Paper4.5:1 AA #79716b Soft Taupe#ffffff Clean White4.79:1 AA
字体 字号阶梯：Golden Ratio（比例约 1.604，正文 16px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Inter 网络字体 · 字重 400 / 500 · 占比 90%
免费替代：Inter
Body copy, navigation, links, buttons, and captions.
Aa 设计
reductoSerif 网络字体 · 字重 470 / 400 / 650 · 占比 6%
免费替代：Instrument Serif
Display headlines and selected product or card titles.
Aa 设计
reductosans 网络字体 · 字重 400 / 500 · 占比 4%
免费替代：Inter
Navigation and compact announcement or interface text.
角色 示例 字号 字重 行高 字距 特大标题 Oversized editorial display headings, especially headline moments.
Reducto
66px 470 1.15 0 一级标题 Primary hero and major section titles.
Reducto
54px 470 1.24 0 二级标题 Secondary titles within product and content blocks.
The quick brown fox 敏捷的狐狸
24px 470 1.33 0 正文 Main explanatory copy and product descriptions.
The quick brown fox 敏捷的狐狸
16px 400 1.5 0 辅助文字 Supporting labels and short explanatory details.
The quick brown fox 敏捷的狐狸
15px 400 1.6 0 按钮 Primary and secondary action labels.
The quick brown fox 敏捷的狐狸
18px 500 1.56 0 导航 Top navigation and navigation links.
The quick brown fox 敏捷的狐狸
15px 400 1.6 0 链接 Inline actions and contextual text links.
The quick brown fox 敏捷的狐狸
16px 500 1.5 0
间距与布局 基准单位 4px · 密度：适中
64px 版块间距
10px 元素间距
— 卡片内边距
1152px 内容最大宽度
2px
4px
5px
6px
7px
8px
10px
12px
14px
16px
20px
24px
32px
40px
48px
56px
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.
圆角与层次 inset · button
inset · button
sm · other, button
hairline · button
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.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
页面版块 共 17 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 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. ✕ 不该做 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. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 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.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
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 (## Colors
| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Paper | ` | `--color-warm-paper` | surface | Primary page canvas across the hero and most light sections. |
| Deep Orchid | ` | `--color-deep-orchid` | brand | Dark purple border on the primary Try for free button. |
| Soft Taupe | ` | `--color-soft-taupe` | neutral | Most muted copy, navigation labels, and subdued supporting text. |
| Signal Violet | ` | `--color-signal-violet` | accent | Primary CTA fill and selective headline or navigation emphasis. |
| Clean White | ` | `--color-clean-white` | surface | Product and process section backgrounds, cards, and inverse button text. |
| Plum Night | ` | `--color-plum-night` | brand | Footer background and its contrasting links, headings, and brand graphic. |
| Stone Hairline | ` | `--color-stone-hairline` | neutral | Fine separators and subtle borders between sections, cards, and media. |
| Charcoal Stage | ` | `--color-charcoal-stage` | surface | Enterprise security band and dark section headings or controls. |
| Lilac Signal | ` | `--color-lilac-signal` | accent | Announcement and navigation accents, especially on dark backgrounds. |
| Warm Ink | ` | `--color-warm-ink` | neutral | Primary body and link copy on light surfaces. |
| Deep Taupe | ` | `--color-deep-taupe` | neutral | Secondary text and button copy where stronger than muted labels. |
| Olive Detail | ` | `--color-olive-detail` | semantic | Small text or link accent; not a defining page-wide brand color. |
| Dust Gray | ` | `--color-dust-gray` | neutral | Low-emphasis text and links. |
| Pale Stone | ` | `--color-pale-stone` | neutral | Dashed product-card outlines and subdued control or card borders. |
| Sage Stone | ` | `--color-sage-stone` | neutral | Minor measured border detail, not a prominent page-level color. |
| Muted Lilac | ` | `--color-muted-lilac` | accent | Small footer color detail, secondary to the deep plum field. |
| Lemon Chartreuse | ` | `--color-lemon-chartreuse` | semantic | A small measured media or illustration detail, not a core UI surface. |
### Semantic aliases
`--color-canvas` → ` (Warm Paper) · `--color-surface` → ` (Clean White) · `--color-surface-2` → ` (Charcoal Stage) · `--color-surface-3` → ` (Plum Night) · `--color-surface-4` → ` (Lemon Chartreuse) · `--color-text` → ` (Warm Ink) · `--color-text-muted` → ` (Soft Taupe) · `--color-text-subtle` → ` (Deep Taupe) · `--color-border` → ` (Stone Hairline) · `--color-accent` → ` (Signal Violet) · `--color-accent-2` → ` (Lilac Signal) · `--color-accent-3` → ` (Olive Detail) · `--color-on-accent` → ` (Clean White)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 7.18:1 | AAA |
| ` | ` | 7.64:1 | AAA |
| ` | ` | 1.99:1 | fail |
| ` | ` | 2.26:1 | fail |
| ` | ` | 4.5:1 | AA |
| ` | ` | 4.79:1 | AA |
| ` | ` | 3.17:1 | AA-large |
| ` | ` | 3.61:1 | AA-large |
| ` | ` | 9.67:1 | AAA |
| ` | ` | 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 ## 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 (## 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: 
