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

# Flatfile · Design System

> Quietly confident, product-led data software

**Theme:** light · **Industry:** saas · **Source:** https://flatfile.com/ · **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._

Flatfile’s homepage pairs restrained typography and generous white space with soft neutral product visuals. Alternating feature layouts, interface previews, and a dark footer make the complex data platform feel approachable and structured.

## North star

Keep the product story calm and legible: use neutral surfaces, editorial headings, generous separation, and real interface imagery rather than decorative effects.

## Overview

The page uses white as its primary canvas, punctuated by very light gray feature surfaces and a near-black footer. A pale green-tinted announcement panel and product artwork add gentle color, but the measured core palette remains neutral; illustration colors should not be mistaken for brand-wide accents. FlatfileDiatype carries most interface and body copy, while Source Serif 4 adds a more editorial voice to the main heading. Headlines are compact and tightly tracked, with centered alignment in the introductory areas and left alignment in many feature sections. A narrow, centered content column expands into two- and three-column card groups where product details benefit from comparison. Large vertical gaps separate sections, while small internal gaps keep cards and text clusters readable. Interface screenshots and file-like graphics provide concrete product evidence. Borders are thin and pale, cards are mostly flat, and pill-shaped actions provide the most distinctive component shape.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, navigation background, cards, and light button text. |
| Quiet Gray | `#808080` | `--color-quiet-gray` | semantic | Muted navigation labels, secondary links, and supporting copy on light backgrounds. |
| Mist Surface | `#f8f8f8` | `--color-mist-surface` | surface | Soft alternate section band and pale feature-card backgrounds. |
| Hairline Gray | `#e5e5e5` | `--color-hairline-gray` | semantic | Subtle borders around cards, buttons, and other restrained interface details. |
| Midnight Ink | `#090b2b` | `--color-midnight-ink` | brand | Measured dark heading and card-copy color; use for prominent text on light surfaces. |
| Footer Charcoal | `#151515` | `--color-footer-charcoal` | surface | Large dark footer background. |
| Carbon Panel | `#262626` | `--color-carbon-panel` | surface | Secondary dark section and subtle footer borders. |
| Footer Gray | `#8c8c8c` | `--color-footer-gray` | semantic | Muted supporting text and footer copy. |
| Button Charcoal | `#1b1b1e` | `--color-button-charcoal` | neutral | Primary dark demo CTA, button text, and occasional body text. |
| Button Edge | `#d7d7d7` | `--color-button-edge` | semantic | Fine outline on secondary pill buttons and small UI details. |
| Olive Ink | `#0e1301` | `--color-olive-ink` | neutral | Text on the pale green announcement CTA; appears in this specific promo treatment. |
| Soft Silver | `#aaaaaa` | `--color-soft-silver` | semantic | Low-emphasis text in supporting content. |
| Graphite Copy | `#2c2c2c` | `--color-graphite-copy` | neutral | Secondary dark text in supporting copy and interface details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f8f8` (Mist Surface) · `--color-surface-2` → `#151515` (Footer Charcoal) · `--color-surface-3` → `#262626` (Carbon Panel) · `--color-text` → `#090b2b` (Midnight Ink) · `--color-text-muted` → `#808080` (Quiet Gray) · `--color-text-subtle` → `#8c8c8c` (Footer Gray) · `--color-border` → `#e5e5e5` (Hairline Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#090b2b` | `#ffffff` | 19.19:1 | AAA |
| `#090b2b` | `#f8f8f8` | 18.07:1 | AAA |
| `#090b2b` | `#151515` | 1.05:1 | fail |
| `#090b2b` | `#262626` | 1.27:1 | fail |
| `#808080` | `#ffffff` | 3.95:1 | AA-large |
| `#808080` | `#f8f8f8` | 3.72:1 | AA-large |
| `#808080` | `#151515` | 4.62:1 | AA |
| `#808080` | `#262626` | 3.83:1 | AA-large |
| `#8c8c8c` | `#ffffff` | 3.36:1 | AA-large |
| `#8c8c8c` | `#f8f8f8` | 3.17:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| FlatfileDiatype | `--font-body` | webfont | 400 | Display headings, feature titles, body copy, and common text. | Inter |
| FlatfileDiatypeVariable | `--font-flatfilediatypevariable` | webfont | 400, 500 | Navigation, feature-card text, and medium-weight button labels. | Inter |
| SourceSerif4 | `--font-display` | webfont | 400 | Large editorial H1 treatment. | Source Serif 4 |
| Booton | `--font-booton` | webfont | 469 | Minor branded or decorative type use. | DM Sans |

- **FlatfileDiatype:** Regular-weight sans; tightly tracked headlines and compact, readable sentence-case copy.
- **FlatfileDiatypeVariable:** Variable regular-to-medium use; keep UI labels sentence case and unembellished.
- **SourceSerif4:** Regular serif contrast for the main display statement; retain tight tracking and simple casing.
- **Booton:** Rare measured use; reserve for small distinctive brand details rather than core copy.

### Type scale — Augmented Fourth (ratio ≈ 1.392, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1 | -0.03em | — | FlatfileDiatype | Oversized introductory display headline. |
| h1 | 38px | 400 | 1 | -0.032em | — | SourceSerif4 | Editorial serif hero or major statement heading. |
| h2 | 26px | 500 | 1.42 | -0.01em | — | Sharp Grotesk | Section headings and prominent feature titles. |
| h3 | 22px | 400 | 1.18 | -0.023em | — | FlatfileDiatype | Feature-card and supporting subsection titles. |
| body | 16px | 400 | 1.5 | -0.016em | — | FlatfileDiatype | Primary explanatory paragraphs and product descriptions. |
| caption | 14px | 400 | 1.43 | 0 | — | FlatfileDiatype | Small labels, fine print, and supporting annotations. |
| button | 16px | 500 | 1.5 | 0 | — | FlatfileDiatypeVariable | CTA labels, often centered in pill-shaped controls. |
| nav | 16px | 400 | 1.5 | 0 | — | FlatfileDiatypeVariable | Header navigation and menu labels. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 40, 88, 120 px.
- Section rhythm 120px · element gap 16px · card padding 32px · max content width 1088px.

Use a centered content area with a measured maximum width of 1088px, then let selected color bands and the footer span the viewport. The page alternates centered introductions with left-aligned feature sections, two-column product explanations, and three-column card groups. Maintain a spacious vertical rhythm: section separation is prominent, while text and card interiors remain compact. Keep the navigation visually quiet and separate from the oversized whitespace around the hero. Feature imagery sits alongside copy or within pale cards rather than filling the page.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- Shadow `inset` (section): `rgba(0, 0, 0, 0.1) 0px 8px 12px -8px inset, rgba(0, 0, 0, 0.08) 0px -8px 12px -4px inset`
- Shadow `xl` (other): `rgba(0, 0, 0, 0.11) 0px 19.889px 33.636px 0px, rgba(0, 0, 0, 0.09) 0px 12.718px 20.849px 0px, rgba(0, 0, 0, 0.08) 0px 8.111px 12.941px 0px, rgba(0, 0, 0, 0.07) 0px 4.908px 7.645px 0px, rgba(0, 0, 0, 0`
- Motion: standard transition `0.25s ease` on interactive elements.

The design is predominantly flat, with pale hairline borders defining controls and card edges. Use inset or layered shadows only where a product panel needs separation; avoid heavy elevation across the page. Rounded pill buttons contrast with mostly square-cornered cards. Artwork and overlapping file previews provide occasional depth without changing the calm surface system.

## Imagery

Use product-interface screenshots, simplified file-type visuals, and small brand marks rather than lifestyle photography. Images are framed in clean, pale panels and often sit beside explanatory copy or in a card grid. Some large product visuals may carry soft, muted colors; keep these as contained artwork instead of extending their hues into the global palette. The announcement area’s layered file previews add a light sense of depth.

## Components

### Primary demo button

Compact dark pill with white label; use the measured #1b1b1e background and #ffffff text.

### Outlined text button

Light, understated pill with a fine #d7d7d7 border and dark label.

### Announcement CTA

Pale green promo button with dark olive-toned text; preserve as a one-off announcement treatment.

### Feature card

Flat card with generous measured padding, either white or #f8f8f8, and dark blue-black copy.

### Feature split

Pair concise copy and a product UI preview in a two-column composition; alternate image placement where appropriate.

### Footer link columns

Dense multi-column navigation on #151515 with restrained muted text and small brand marks.

### Measured component styles

- **Primary button** (“Check out Obvious”): background #e5ebd3 · text #0e1301 · radius 12px · padding 9px 14px · 500 16px FlatfileDiatypeVariable
- **Secondary button** (“Learn more about mapping”): transparent background · text #1b1b1e · border 1px solid #d7d7d7 · radius 99px · padding 12px 24px · 400 16px FlatfileDiatype
- **Link** (“Learn more”): transparent background · text #808080 · radius 0px · padding 0px · 400 16px FlatfileDiatypeVariable
- **Card** (“Validation Rules Flatfile enforces your ”): background #f8f8f8 · text #090b2b · radius 0px · padding 32px · 400 16px FlatfileDiatypeVariable
- **Navigation item** (“Pricing”): transparent background · text #808080 · radius 0px · padding 0px · 400 16px FlatfileDiatypeVariable

## Do

- Use white as the default page canvas.
- Reserve #f8f8f8 for gentle section and card contrast.
- Keep headings concise and tightly tracked.
- Pair feature explanations with relevant product UI.
- Use dark pill CTAs sparingly for conversion moments.
- Maintain substantial vertical separation between major sections.

## Don't

- Do not turn illustration colors into global brand accents.
- Do not add gradients to otherwise flat sections.
- Do not round every card; reserve pills for actions.
- Do not crowd the centered hero with extra controls.
- Do not use heavy shadows on ordinary feature cards.
- Do not make secondary navigation compete with the content.

## Agent prompt

Build a new SaaS page in Flatfile’s quiet, product-led visual style. Use Gallery White (#ffffff) as the main canvas, Mist Surface (#f8f8f8) for occasional section bands, Midnight Ink (#090b2b) for strong headings, and Quiet Gray (#808080) for secondary links. Use FlatfileDiatype-like sans typography for UI and body copy, with a restrained editorial serif headline where useful. Center content within the measured 1088px maximum width, alternate centered introductions with left-aligned feature copy, and preserve generous vertical section spacing. Show the product through interface screenshots and file visuals in clean flat panels. Use thin Hairline Gray (#e5e5e5) borders and dark pill CTAs in Button Charcoal (#1b1b1e). Keep cards mostly square-cornered, avoid decorative gradients, and finish with a Footer Charcoal (#151515) navigation area.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Centered announcement copy and CTA over a pale tinted panel, with layered file previews near its lower edge. | Company update, Single promo CTA | Centered heading, Pale panel, Overlapping file cards |
| 2 | hero | Centered headline, supporting statement, and demo CTA with substantial whitespace. | Primary value proposition, Book-a-demo action | Centered typography, Pill CTA, Whitespace |
| 3 | integrations | Wide visual band followed by a centered customer statement and grouped logo rows. | Social proof, Customer segmentation | Logo rows, Pale logo tiles, Wide color field |
| 4 | feature-grid | Pale gray section with centered introduction and two side-by-side product cards. | Capability overview, Feature comparison | Two-column cards, Product screenshots, Soft surface |
| 5 | feature-split | Two-column copy-and-interface composition on a white background. | Feature explanation, Product proof | Split layout, Interface preview |
| 6 | feature-grid | Centered section heading followed by three feature cards with interface visuals. | Feature discovery, Learn-more link | Three-column cards, Pale card surfaces, Inline link |
| 7 | testimonials | Centered testimonial heading and a broad quote panel with customer identity and outcome metrics. | Customer quote, Outcome proof, Carousel navigation | Quote panel, Large serif quote, Metric labels |
| 8 | feature-split | Introductory copy above a two-column configuration and assistant-interface panel. | Implementation choice, Configuration discovery | Two-column panel, Assistant UI, Inline link |
| 9 | cta | Centered title above three capability cards, then a contrasting full-width closing CTA. | Capability reassurance, Demo conversion | Three-column feature cards, Dark CTA band, Light button |
| 10 | footer | Full-width charcoal footer with multiple link columns and a compact legal row. | Grouped site navigation, Legal links | Dark surface, Multi-column links, Small brand mark |

## Source CSS custom properties (selected)

```css
--color-black: #000;
--color-electric100: #eceeff;
--color-electric200: #dce0ff;
--color-electric300: #c4c9ff;
--color-electric400: #a1a8ff;
--color-electric500: #808aff;
--color-electric600: #6673ff;
--color-electric700: #4c48ef;
--color-electric800: #3b2fc9;
--color-electric900: #0c009d;
--color-jade100: #daffef;
--color-jade200: #c1fee3;
--color-jade300: #adf5d6;
--color-jade400: #95e9c4;
--color-jade500: #80ddb4;
--color-jade600: #6fd0a6;
--color-jade700: #4dca94;
--color-jade800: #3db983;
--color-jade900: #32a673;
--color-midnight100: #c2c3e9;
--color-midnight200: #9698d0;
--color-midnight300: #6668a1;
--color-midnight400: #54568f;
--color-midnight500: #3d3f7a;
--color-midnight600: #2e3168;
--color-midnight700: #1d1f4a;
--color-midnight800: #111338;
--color-midnight900: #090b2b;
--color-nectar100: #fff9f5;
--color-nectar200: #fff5ed;
--color-nectar300: #fff0e3;
--color-nectar400: #ffe4cc;
--color-nectar500: #ffdcbd;
--color-nectar600: #ffd9b7;
--color-nectar700: #fbcca2;
--color-nectar800: #f9c493;
--color-nectar900: #f6ba83;
--color-pigeon100: #f6f8fc;
--color-pigeon200: #e8edf4;
--color-pigeon300: #d7dee8;
```

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