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

# Overflow · Design System

> A calm canvas for vivid design stories

**Theme:** light · **Industry:** design · **Source:** https://overflow.io/ · **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._

Overflow pairs a near-white canvas and crisp black typography with vivid blue-violet gradients to frame its user-flow product. A long, spacious landing page alternates interface previews, feature explanations, testimonials, and a restrained footer.

## North star

Keep the canvas quiet and spacious; reserve vivid blue-violet gradients for product storytelling and let black typography lead.

## Overview

The page is built on a near-white #fafafc canvas, with black text providing strong contrast and pale gray #f2f2f4 reserved for occasional full-width section bands. Blue and violet gradients create the defining visual signature: the hero uses a broad, atmospheric wash behind its headline and product preview, while other gradients frame selected interface imagery. Keep these hues as highlights rather than turning every section into a saturated panel. Inter is used throughout, with heavy, tightly tracked display headings, readable regular-weight body copy, and compact navigation. The layout is spacious and centered around a measured 1224px maximum width, alternating centered showcases with left-aligned feature stories and multi-column content. Product screenshots and diagrams carry most of the visual detail; keep surrounding UI quiet. Black rounded CTAs, subtle card shadows, and generous section separation establish a clear hierarchy without decorative clutter.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#fafafc` | `--color-gallery-mist` | surface | Dominant page canvas and the pale ground behind most feature and testimonial sections. |
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Headlines, navigation, body text, and the primary download buttons. |
| Quiet Graphite | `#666666` | `--color-quiet-graphite` | neutral | Secondary copy and footer links where hierarchy should recede. |
| Violet Signal | `#7272fb` | `--color-violet-signal` | accent | Blue-violet gradient endpoint in the hero atmosphere and selected product-preview framing. |
| Cloud Blue | `#b8e1ff` | `--color-cloud-blue` | accent | Pale blue endpoint paired with violet in gradient treatments around product media. |
| Link Blue | `#0085e4` | `--color-link-blue` | semantic | Occasional link accent; keep usage sparse against the neutral page. |
| Soft Divider | `#f2f2f4` | `--color-soft-divider` | surface | Subtle section band and quiet surface or border treatment. |
| Flow Blue | `#007bff` | `--color-flow-blue` | accent | Blue gradient endpoint visible in selected product-card artwork, not a dominant page fill. |
| Sky Tint | `#62aeff` | `--color-sky-tint` | accent | Lighter endpoint paired with Flow Blue in gradient artwork and media framing. |
| Slate Note | `#616162` | `--color-slate-note` | neutral | Minor muted copy detail; subordinate to the primary gray text. |

### Semantic aliases

`--color-canvas` → `#fafafc` (Gallery Mist) · `--color-surface` → `#f2f2f4` (Soft Divider) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#666666` (Quiet Graphite) · `--color-text-subtle` → `#fafafc` (Gallery Mist) · `--color-border` → `#f2f2f4` (Soft Divider) · `--color-accent` → `#7272fb` (Violet Signal) · `--color-accent-2` → `#0085e4` (Link Blue) · `--color-accent-3` → `#007bff` (Flow Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fafafc` | 20.14:1 | AAA |
| `#000000` | `#f2f2f4` | 18.78:1 | AAA |
| `#666666` | `#fafafc` | 5.51:1 | AA |
| `#666666` | `#f2f2f4` | 5.14:1 | AA |
| `#fafafc` | `#f2f2f4` | 1.07:1 | fail |
| `#7272fb` | `#fafafc` | 3.65:1 | AA-large |
| `#7272fb` | `#f2f2f4` | 3.41:1 | AA-large |

### Gradients

- `linear-gradient(127deg, rgb(114, 114, 251) 0px, rgb(184, 225, 255) 99%)`
- `linear-gradient(90deg, rgb(0, 123, 255) 0px, rgb(98, 174, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 700, 500, 800, 550, 600 | Site-wide typeface for display headings, body copy, navigation, buttons, and links. | Inter |

- **Inter:** Use bold to extra-bold headings with slightly negative tracking; body copy stays regular, and controls use medium weight.

### Type scale — Major Third (ratio ≈ 1.285, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 800 | 1.14 | -0.021em | — | Inter | Large hero display headline. |
| h1 | 48px | 800 | 1.16 | -0.017em | — | Inter | Primary page and major section headings. |
| h2 | 32px | 700 | 1.25 | -0.012em | — | Inter | Feature and testimonial section headings. |
| h3 | 24px | 500 | 1.58 | -0.017em | — | Inter | Feature-card and supporting content headings. |
| h4 | 20px | 500 | 1.75 | -0.012em | — | Inter | Smaller feature labels and nested headings. |
| body | 16px | 400 | 1.75 | 0 | — | Inter | Paragraphs explaining features and product benefits. |
| caption | 14px | 400 | 1.75 | 0 | — | Inter | Image notes, testimonial attribution, and small supporting labels. |
| button | 16px | 550 | 1 | 0.013em | — | Inter | Primary download and secondary action labels. |
| nav | 15px | 400 | 1.75 | 0 | — | Inter | Header navigation links and footer navigation. |
| link | 20px | 700 | 1.2 | -0.005em | — | Inter | Prominent text links and testimonial names. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 3, 8, 10, 12, 13, 15, 16, 19, 20, 24, 32, 40, 48, 60, 64, 156 px.
- Section rhythm 156px · element gap 26px · card padding — · max content width 1224px.

Use a centered content area with a measured maximum width of 1224px, surrounded by broad page margins. The hero centers its headline and copy over a large product preview; later sections alternate centered showcases, left-aligned feature stories, and multi-column grids. Section spacing is deliberately generous, with measured section rhythm of 156px. Keep the overall density spacious and let media create visual weight instead of filling empty areas with extra UI.

## Shape & elevation

- Radius: button `8px` · input `8px` · card `24px` · media `12px` · link `22px` · xs `8px` · sm `12px` · md `16px` · lg `22px` · xl `24px` · 2xl `28px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.08) 0px 4px 16px -8px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0.08) 0px 8px 20px -7px`
- Shadow `md-3` (button): `rgba(0, 0, 0, 0.24) 0px 2px 8px 0px, rgba(0, 0, 0, 0.09) 0px 14px 14px 0px`
- Shadow `hairline` (input): `rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.35s ease` on interactive elements.

Most sections sit flat on the canvas, with no pervasive borders. White media cards use a 24px radius and soft measured shadows; selected product previews gain separation through gradient framing. Buttons are black, rounded, and visually solid, while input treatment remains minimal. Avoid stacking many elevated surfaces.

## Imagery

Use product interface screenshots, user-flow diagrams, and feature illustrations as the primary imagery. Frame selected previews with soft blue-to-violet gradients or rounded white cards, leaving the surrounding canvas uncluttered. Testimonials include small portrait images, while the case-study area uses a restrained monochrome workspace photograph. Treat embedded artwork as product content, not as a source for new brand colors.

## Components

### Top navigation

A compact black-text header with product links, sign-in, and a black download CTA; maintain clear separation from the light canvas.

### Hero and product preview

Centered display headline, supporting copy, and black trial CTA sit over a broad blue-violet atmospheric gradient; a large rounded product screenshot anchors the lower hero.

### Showcase card

White product-media card with a 24px radius and subtle shadow; selected examples receive a blue-violet gradient frame.

### Primary button

Black fill, white label, 8px radius, and measured 16px medium-weight Inter text; use for download actions.

### Feature story

Pair an interface screenshot or illustration with a concise heading and explanatory copy; alternate media and text placement across rows.

### Testimonial

Combine a short bold quote with a portrait and understated name and role attribution; keep the surrounding section spacious.

### Footer

White footer with grouped text links, muted supporting copy, and the Overflow mark; keep the navigation compact and orderly.

### Measured component styles

- **Primary button** (“Download - free trial”): background #000000 · text #ffffff · border 1px solid #000000 · radius 8px · padding 19px 24px · 550 16px Inter
- **Secondary button** (“Read case study”): background #f0f0f2 · text #000000 · border 1px solid #f0f0f2 · radius 8px · padding 19px 24px · 550 16px Inter
- **Link** (“Chris Messina”): transparent background · text #000000 · radius 0px · padding 0px · 700 20px Inter
- **Input**: transparent background · text #000000 · radius 8px · padding 16px · 400 14px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px
- **Card** (“Present without even being there Present”): background #ffffff · text #000000 · radius 24px · padding 0px · 400 16px Inter · shadow rgba(0, 0, 0, 0.08) 0px 4px 16px -8px
- **Navigation item** (“Product OVERFLOW How it Works Get starte”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter

## Do

- Keep #fafafc as the dominant page canvas.
- Use black typography for strong, crisp hierarchy.
- Reserve blue-violet gradients for hero and product media.
- Give major content groups generous separation.
- Let real product screenshots explain the interface.
- Use rounded white cards with restrained shadows.
- Keep primary actions black with white labels.

## Don't

- Do not turn every section into a saturated gradient panel.
- Do not introduce colors outside the measured palette.
- Do not crowd the layout with extra decorative elements.
- Do not use heavy borders around every card.
- Do not let product mockup colors redefine the brand palette.
- Do not center every feature section; retain alignment variation.

## Agent prompt

Build a new Overflow-style page on a #fafafc canvas with Inter typography and generous section spacing. Use Studio Ink (#000000) for strong headings, navigation, and primary buttons; use Quiet Graphite (#666666) for secondary copy. Set a broad, calm hero with a vivid but localized gradient from Violet Signal (#7272fb) to Cloud Blue (#b8e1ff), then anchor it with a large, rounded product-interface preview. Use Soft Divider (#f2f2f4) only for subtle section bands. Alternate centered showcases with left-aligned feature splits and multi-column grids. Keep product screenshots and diagrams prominent, while surrounding UI stays sparse. Use white cards with restrained shadows and rounded corners, black CTAs, concise supporting copy, and a compact footer. Treat colors inside mockups as illustration detail, not site chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero content over a broad gradient atmosphere, followed by a large product preview. | download CTA, product demo link | centered headline, blue-violet gradient, large interface preview |
| 2 | logo-cloud | Six customer logos in a horizontal row with a centered trust statement. | social proof | logo row, small muted caption |
| 3 | product-showcase | Centered heading and view selector above a large showcase, with explanatory copy below. | switch showcase view, open example | tab-like links, gradient-framed media, centered text |
| 4 | other | Single centered heading and concise explanatory paragraph. | benefit framing | centered title, compact copy |
| 5 | feature-split | Stacked feature rows pair product imagery with left-aligned headings and copy. | feature explanation, product-led storytelling | alternating media and text, large vertical gaps |
| 6 | feature-split | Full-width pale-gray band with copy on the left and oversized illustrative media on the right. | discover feature CTA | #f2f2f4 section band, split composition, angled product artwork |
| 7 | feature-grid | Left-aligned section heading above a three-column grid of compact feature cards. | scan feature benefits | three-column grid, small illustrations, light card surfaces |
| 8 | testimonials | Spacious testimonial carousel with a section title, portrait, quote, and attribution. | testimonial carousel, previous and next controls | portrait imagery, bold quote, subtle controls |
| 9 | feature-grid | Section heading above six features arranged in a three-column grid. | browse capabilities, explore all features | illustrated feature tiles, compact descriptions, black CTA |
| 10 | feature-split | Two-column case-study panel with copy and attribution on the left and a large photo on the right. | read case study | brand marks, monochrome photo, rounded media frame |
| 11 | footer | White footer with four compact navigation columns, newsletter field, and brand mark. | footer navigation, newsletter signup | grouped text links, light background, compact branding |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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