# reducto.ai

Source: https://reducto.ai/
Captured: 2026-09-13
Tags: saas, landing, light, both, editorial, minimal, swiss, serious, technical, elegant, confident, trustworthy
Colors: #f7f7f6, #d6ccd4, #93908f, #9f1ea2, #b2abb2, #726f6e, #b757b9, #ca86ca
Type (h1): reductoSerif · 84px/92px · 470 · tracking -0.8px — "Turn documents into data."
Type (h2): reductoSerif · 64px/80px · 470 · tracking -0.4px — "Introducing: r-1 Model"
Type (h3): Inter · 16px/24px · 400 — "Do you offer trials? How can I get access to an API key?"
Type (body): Inter · 18px/30px · 400 — "The agentic document platform for leading AI teams who demand enterprise perform"
Type (button): Inter · 14px/20px · 500 — "Sign up"
Button (primary): "Sign up" — fill #ffffff, text #44403b, radius 0px, border 1px, padding 0px 14px, height 38px, type 14px/500
Button (secondary): "Finance" — text #292524, radius 0px, border 1px, padding 0px 0px, height 48px, type 16px/400
Button (tertiary): "Product" — text #79716b, radius 0px, border 0px, padding 5px 0px, height 30px, type 14px/500
Radii: 9999px (4), 16px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/reducto-ai/hero.webp?v=0acee418
- Page crop (mid-1): https://media.lvly.design/library/reducto-ai/mid-1.webp?v=f8cc3d53
- Page crop (mid-2): https://media.lvly.design/library/reducto-ai/mid-2.webp?v=700d3c6b
- Hero (mobile): https://media.lvly.design/library/reducto-ai/mobile-hero.webp?v=29d7cdb9
- Full page (desktop): https://media.lvly.design/library/reducto-ai/full.jpg?v=0129eab3
- Full page (mobile): https://media.lvly.design/library/reducto-ai/mobile-full.jpg?v=a6e55824
- Clip preview (mp4): https://media.lvly.design/library/reducto-ai/video-k0nehx.preview.mp4?v=afe4a15c

Reducto's landing page is an AI-infrastructure pitch dressed as a broadsheet: a warm off-white paper ground (#f8f8f6), a very large high-contrast serif display face (custom "reductoSerif", 136px at weight 650 with a tight 100px line-height) set centered over quiet Inter body copy, and a single saturated magenta (#9f1ea2) doing every job an accent can do — the logo, the highlighted word "data." in the headline, the primary CTA, the pull-quote marks, the inline "Fortune 10" link and the announcement strip's lavender tint. The typographic twist is that the accent word is set in a monospace face, so the hero literally reads as prose turning into code. Chrome is deliberately un-rounded and tactile: square 38px buttons with 1px borders (white ghost for "Sign up", near-black solid for "Contact sales") carry a hard 3–4px offset shadow that gives them a pressed, letterpress feel against the flat page. Product is shown as a paper-like document card — yellow legal-pad edge, a spreadsheet with magenta cell outlines marking what the parser extracted, greeked text elsewhere — with a serif customer quote beside it. Hairline section rules and generous vertical space keep the whole thing calm; nothing glows, nothing blurs. Sections open with a small olive-green sparkle eyebrow ("How it works") that is the only second color on the page.

## Steal-worthy details

- One accent word in the headline swapped into monospace and coloured magenta — a content-driven type change that tells the product story ("documents → data") without an illustration.
- Square buttons with a 1px border and a hard, un-blurred offset shadow: letterpress tactility on an otherwise flat page, and the same shape in three fills (white ghost, magenta primary, black secondary).
- Serif display at ~136px/100px (line-height below 0.75em) on a near-white ground — huge but airy because everything around it is small and gray.
- Announcement strip as a pale tint of the accent (lavender on paper) rather than a solid bar, so it reads as a margin note instead of a banner.
- Product screenshot styled as a physical artifact: yellow ruled-pad edge, magenta outlined cells over greeked gray rows — the eye lands exactly where the extraction happened.
- Pull quote set in the display serif with oversized magenta quotation marks, attribution in Inter — a magazine device used inside a product card.
- A single secondary hue (olive/citrus green) reserved for section eyebrows, keeping magenta exclusive to actions and meaning.

## Style recipe

Set the page on warm paper: background #f8f8f6, cards #ffffff, hairlines #e6e4e1, body text #4a4846, headings #1a1918. Use a high-contrast transitional serif for all display type (Tiempos, Söhne Serif, or Instrument Serif as a free stand-in) at weight 600–650, sizes 56–136px, line-height 0.74–0.85, letter-spacing normal; everything else is Inter 400 at 16–18px / 1.65, in gray rather than black. Pick one saturated brand hue — magenta #9f1ea2 — and use it for the logo, the primary button, link text, quote marks and exactly one word per headline, which you set in a monospace face (JetBrains Mono / Berkeley Mono) at the same size as the serif around it. Derive a 10% tint of the accent (#efe5f0) for announcement strips and highlighted table cells. Buttons are square (radius 0), 38px tall, 14px side padding, 14px/500 Inter, 1px solid border, with a hard offset box-shadow (3px 3px 0 #1a1918 on light fills, 3px 3px 0 rgba(0,0,0,.35) on the accent) and no blur; offer white-ghost, accent-solid and black-solid variants. Add one restrained secondary color, olive green #7a8a1e, only for eyebrow labels with a small sparkle icon. Center hero copy in a ~660px measure; separate sections with full-width 1px rules and 96–140px of vertical space. Render product imagery as documents — paper cards, ruled edges, tables with accent-outlined cells and greeked text — never as glossy device frames. No gradients, no blur, no glow, no rounded pills except avatars; motion limited to fades on load.