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

# Fingerprint · Design System

> Quiet precision, made visible through product evidence

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

Fingerprint pairs a warm near-white canvas and restrained orange accents with dark, data-rich product panels. Spacious editorial sections balance technical interface previews, proof points, customer stories, and developer-focused content.

## North star

Keep the page calm and spacious, using orange only to direct attention and product interfaces to prove technical credibility.

## Overview

The page uses a warm off-white canvas (#fafaf8) as its visual constant, with white surfaces separating selected proof and footer areas. Bright orange (#f35b22) marks the primary action and highlights selected words, while dark text and muted grays keep long-form product explanations quiet and legible. Inter is the main workhorse: centered, medium-weight hero typography gives way to compact navigation, small uppercase eyebrows, and comfortably spaced body copy. JetBrains Mono appears in code-like details and technical interface fragments. The composition begins with a centered hero and a prominent dark product demo, then shifts into left-aligned feature sections, split panels, customer proof, a dark developer showcase, and a white metrics-and-footer zone. Fine gray rules and faint grid lines give structure without visual heaviness. Product screenshots and data visualizations carry the technical story; orange is a signal, not a broad decorative wash.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#fafaf8` | `--color-warm-canvas` | surface | Main page background and the dominant field behind the hero and most feature sections. |
| Signal Orange | `#f35b22` | `--color-signal-orange` | brand | Primary CTA fill, selected navigation and footer accents, and emphasized words in headings. |
| Clean Surface | `#ffffff` | `--color-clean-surface` | surface | Cards, selected content bands, CTA text, footer and contrast surfaces. |
| Burnt Edge | `#be400f` | `--color-burnt-edge` | semantic | Subtle border edge on the orange primary button. |
| Stone Gray | `#484946` | `--color-stone-gray` | neutral | Muted body text, button copy, secondary labels, and form text. |
| Soft Rule | `#e4e5e1` | `--color-soft-rule` | neutral | Hairline borders around cards, inputs, media frames, and quiet dividers. |
| Navigation Gray | `#6e6f6c` | `--color-navigation-gray` | neutral | Secondary navigation links, footer links, and low-emphasis supporting copy. |
| Night Panel | `#1a1917` | `--color-night-panel` | surface | Inverse cards, dark product-demo surfaces, and developer showcase backgrounds. |
| Near-Black Ink | `#141415` | `--color-near-black-ink` | neutral | Primary headings, body copy, and high-priority text links. |
| Badge Ember | `#d14200` | `--color-badge-ember` | semantic | Small orange-toned data badge within product-style interface content. |
| Badge Violet | `#7361b9` | `--color-badge-violet` | semantic | Muted violet badge accent in an embedded data or product illustration. |
| Mist Gray | `#f0f0ed` | `--color-mist-gray` | surface | Occasional subdued card, footer, or button fill; secondary inset detail. |
| Graphite Detail | `#2e2e2c` | `--color-graphite-detail` | neutral | Dark illustration and interface detail; secondary dark card and link elements. |
| Quiet Gray | `#a0a09d` | `--color-quiet-gray` | neutral | Low-emphasis text detail, mostly within product or data visualizations. |
| Pale Graphite | `#b7b7b4` | `--color-pale-graphite` | neutral | Low-contrast heading and text detail in embedded interface visuals. |
| Muted Graphite | `#8c8c89` | `--color-muted-graphite` | neutral | Secondary text in illustrations and select footer or button details. |
| Bright Ember | `#ff5e24` | `--color-bright-ember` | accent | Occasional orange text accent; reinforces the primary signal color. |
| Rose Signal | `#e9588d` | `--color-rose-signal` | accent | Occasional pink highlight in interface or data visualization accents, not a main page color. |

### Semantic aliases

`--color-canvas` → `#fafaf8` (Warm Canvas) · `--color-surface` → `#ffffff` (Clean Surface) · `--color-surface-2` → `#1a1917` (Night Panel) · `--color-text` → `#141415` (Near-Black Ink) · `--color-text-muted` → `#484946` (Stone Gray) · `--color-text-subtle` → `#6e6f6c` (Navigation Gray) · `--color-border` → `#e4e5e1` (Soft Rule) · `--color-accent` → `#f35b22` (Signal Orange) · `--color-accent-2` → `#ff5e24` (Bright Ember) · `--color-accent-3` → `#e9588d` (Rose Signal) · `--color-on-accent` → `#ffffff` (Clean Surface)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#141415` | `#fafaf8` | 17.62:1 | AAA |
| `#141415` | `#ffffff` | 18.41:1 | AAA |
| `#141415` | `#1a1917` | 1.05:1 | fail |
| `#484946` | `#fafaf8` | 8.67:1 | AAA |
| `#484946` | `#ffffff` | 9.06:1 | AAA |
| `#484946` | `#1a1917` | 1.94:1 | fail |
| `#6e6f6c` | `#fafaf8` | 4.84:1 | AA |
| `#6e6f6c` | `#ffffff` | 5.06:1 | AA |
| `#6e6f6c` | `#1a1917` | 3.47:1 | AA-large |
| `#f35b22` | `#fafaf8` | 3.17:1 | AA-large |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 40%, rgb(250, 250, 248))`
- `radial-gradient(380px 210px at 50% 0px, rgb(63, 21, 24) 0px, rgb(26, 25, 23) 72%)`
- `linear-gradient(90deg, rgb(248, 248, 246) 1px, rgba(0, 0, 0, 0) 0px), linear-gradient(rgb(248, 248, 246) 1px, rgba(0, 0, 0, 0) 0px)`
- `linear-gradient(90deg, rgba(248, 247, 254, 0.2), rgba(255, 255, 255, 0.2))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600 | Headings, body copy, navigation, labels, links, buttons, and most interface text. | Inter |
| JetBrains Mono | `--font-mono` | webfont | 400, 500, 470, 300, 700 | Code-like details and technical or metric fragments within product-facing content. | Roboto Mono |

- **Inter:** Use measured weights 400, 500, and 600. Headings are restrained and slightly tight; eyebrow labels are uppercase with expanded tracking.
- **JetBrains Mono:** Use for compact technical labels and snippets; preserve a functional, unembellished monospaced feel.

### Type scale — Custom (ratio ≈ 2.25, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 500 | 1.22 | -0.02em | — | Inter | Centered hero headline and prominent section headlines. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Explanatory copy beneath headlines and within feature sections. |
| caption | 14px | 400 | 1.5 | 0 | — | Inter | Small supporting notes, customer labels, and interface annotations. |
| button | 12px | 500 | 1.33 | 0 | — | Inter | Compact CTA labels such as Get Started and Contact Sales. |
| nav | 14px | 400 | 1.5 | 0 | — | Inter | Primary navigation links and secondary product navigation. |
| link | 14px | 400 | 1.4 | 0 | — | Inter | Inline links, documentation links, and resource actions. |
| eyebrow | 9px | 500 | 1.6 | 0.08em | uppercase | Inter | Small uppercase section labels above feature and case-study content. |
| code | 12px | 500 | 1.5 | 0 | — | JetBrains Mono | Monospaced snippets, technical labels, and API-oriented interface details. |

OpenType features in use: `"liga" 0, "lnum", "pnum"`, `"lnum", "pnum"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 3, 4, 6, 7, 8, 10, 12, 14, 16, 24, 32, 96 px.
- Section rhythm 96px · element gap 6px · card padding — · max content width 1248px.

A measured page max width of 1248px supports a spacious, modular composition. The opening hero is centered, with a broad product demo beneath; subsequent feature areas alternate single-column introductions and two-column product or benefit layouts. The customer story and developer showcase use distinct full-width moments, followed by metrics and a multi-column footer. Sections have generous measured rhythm, with a 96px section gap and 4px spacing base. Fine grid lines and thin borders provide alignment cues without crowding content.

## Shape & elevation

- Radius: button `4px` · input `6px` · card `12px` · media `12px` · badge `4px` · nav `4px` · link `12px` · xs `2px` · sm `4px` · md `5px` · lg `6px` · xl `8px` · 2xl `12px` · pill `9999px`
- Shadow `hairline` (button): `oklch(0.211142 0.00597468 none / 0.08) 0px 0px 0px 1px`
- Shadow `inset` (button): `rgba(24, 25, 22, 0.02) 0px 2px 1px 0px, rgba(24, 25, 22, 0.1) 0px -1px 0px 0px inset`
- Shadow `hairline-2` (other): `rgba(24, 25, 22, 0.06) 0px 1px 2px 0px`
- Shadow `inset-2` (button, other): `rgb(240, 240, 237) 0px 0px 0px 1px inset`
- Shadow `inset-3` (media, card, link): `rgb(255, 255, 255) 0px 1px 0px 0px inset`
- Shadow `inset-4` (card): `rgba(228, 229, 225, 0.3) 0px 1px 0px 0px inset, rgba(110, 111, 109, 0.1) 0px -1px 0px 0px inset`
- Motion: standard transition `0.25s ease` on interactive elements.

The page is mostly flat, using #e4e5e1 hairlines and quiet inset edges to define cards and inputs. Buttons have restrained layered shadows rather than dramatic elevation. Rounded card and media frames separate embedded product content; dark panels contrast by color, not by heavy shadow.

## Imagery

Imagery is primarily product evidence rather than lifestyle photography: interface previews, visitor-risk panels, charts, maps, logos, and developer visuals. The hero demo is framed as a large rounded white card containing a high-contrast dark interface. Smaller illustrations remain contained within cards and feature columns, with restrained color and fine borders. Customer logos are presented as a quiet horizontal proof strip; no prominent full-bleed photography defines the page.

## Components

### Primary CTA

Orange #f35b22 fill, white label, subtle burnt border, compact Inter text, and a small rounded rectangular shape.

### Secondary CTA

Pale neutral fill with dark text, fine gray border, and a restrained inset or low shadow.

### Outline CTA

White or near-white surface with orange text and orange outline for actions such as Contact Sales.

### Product demo panel

Rounded light outer frame surrounding a dense, dark product interface with muted labels and selective alert colors.

### Feature card

Quiet card surface with a thin #e4e5e1 edge, restrained rounding, and room for copy or a compact product visual.

### Eyebrow label

Small uppercase Inter label with expanded tracking, muted color, and a short section-identifying phrase.

### Customer logo strip

Horizontal company marks centered within a calm band, used as understated trust evidence.

### Measured component styles

- **Primary button** (“Get Started”): background #f35b22 · text #ffffff · border 1px solid #be400f · radius 6px · padding 7.2px 14px · 500 12px Inter · shadow rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(24, 25, 22, 0.06) 0px 1px 2
- **Secondary button** (“See all Use Cases”): background #f8f8f6 · text #181916 · border 1px solid #d9d9d6 · radius 6px · padding 7.2px 14px · 500 12px Inter · shadow rgba(24, 25, 22, 0.02) 0px 2px 1px 0px, rgba(24, 25, 22, 0.1) 0px -1px 0px 0px i
- **Link** (“New We now detect Meta Muse Learn how”): transparent background · text #141415 · radius 0px · padding 0px · 400 16px Inter
- **Input** (“Prompt CLI Skills”): background #efefef · text #000000 · border 1px solid #767676 · radius 0px · padding 0px · 400 14px Inter
- **Card** (“Why Fingerprint _ The internet's most ac”): background #fafaf8 · text #141415 · border 1px solid #e4e5e1 · radius 12px · padding 0px · 400 16px Inter · shadow rgba(228, 229, 225, 0.3) 0px 1px 0px 0px inset, rgba(110, 111, 109, 0.1) 0px -1p
- **Badge** (“-0.0%”): background #fef4f0 · text #d14200 · border 1px solid #ffddc8 · radius 4px · padding 1px 4px · 500 10px Inter
- **Navigation item** (“Device Intelligence Platform”): transparent background · text #6e6f6c · radius 0px · padding 0px · 400 14px Inter

## Do

- Use #fafaf8 as the dominant page canvas.
- Reserve #f35b22 for primary actions and selective emphasis.
- Pair explanatory copy with visible product evidence.
- Keep section transitions airy and well organized.
- Use fine borders instead of heavy card shadows.
- Keep technical details compact and use monospaced type sparingly.

## Don't

- Do not turn the page into a saturated orange experience.
- Do not place every section inside a raised card.
- Do not use dense, continuous text blocks.
- Do not add decorative photography that competes with product UI.
- Do not use strong gradients as the primary brand treatment.
- Do not make secondary links as visually loud as the primary CTA.

## Agent prompt

Build a new Fingerprint-style SaaS page with a warm #fafaf8 canvas, crisp #141415 text, muted #484946 and #6e6f6c supporting copy, and thin #e4e5e1 rules. Use #f35b22 sparingly for the main CTA and short emphasis; use #ffffff for selected surfaces and #1a1917 for product-proof panels. Set the page in Inter, with JetBrains Mono reserved for technical fragments. Favor a spacious centered hero, followed by clearly aligned feature blocks, product-interface evidence, proof points, and a structured footer. Use compact, subtly rounded controls, quiet borders, and restrained shadows. Keep content readable and modular; let authentic-looking product UI, charts, and customer marks communicate credibility instead of decorative imagery or oversized color fields.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered announcement and headline above a large product demo, followed by a centered customer-logo strip. | Announcement link, Primary and secondary actions, Interactive-style product demo | Centered headline, Dark product panel, Logo cloud, Faint grid lines |
| 2 | feature-split | Left-aligned introduction and feature list, with product illustration occupying the opposite column. | Feature selection list, Learn-more path | Eyebrow label, Orange word emphasis, Product preview |
| 3 | feature-grid | Two-column arrangement of compact fraud-use-case content and supporting product-oriented visuals. | Use-case browsing, Expandable-style rows | Two-column grid, Small icon labels, Quiet separators |
| 4 | feature-split | Two-column feature area with explanatory content and chart beside supporting benefit cards. | Learn-more link, Evidence-led explanation | Line chart, Outlined panels, Muted data labels |
| 5 | product-showcase | Two side-by-side feature narratives, each with a product interface preview below. | Feature comparison, Learn-more actions, Interface demonstration | Split headlines, Embedded product panels, Selective orange accents |
| 6 | testimonials | Left-aligned case-study introduction followed by a proof-focused customer story. | Case-study navigation, Customer proof | Eyebrow label, Logo accents, Editorial heading |
| 7 | testimonials | A broad testimonial row combines customer identity, quote, and supporting visual proof. | Customer story, Case-study link | Quote-led content, Customer logos, Light card treatment |
| 8 | integrations | Wide dark developer panel with introduction, resource links, graph, and ecosystem proof. | Quick-start link, Tutorial access, API-key request | Dark inverse surface, Monospaced details, Chart line |
| 9 | stats | White section combining three proof metrics with a two-column product conversion panel. | Metric scanning, Get-started and sales actions | Large orange figures, Thin dividers, Product illustrations |
| 10 | footer | White footer with newsletter area, several link columns, and a slim legal and status row. | Newsletter signup, Grouped site navigation, Legal links | Multi-column links, Small brand mark, Quiet bottom bar |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--error-text: #90143a;
--error-background: #ffe4e4;
--button-background-gray: #fafaf8;
--font-gray: #c1c1be;
--font-gray-dark: #484946;
--brand-fire: #f04405;
```

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