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

# Dashlane · Design System

> Warm darkness, crisp type, and a flash of aquamarine.

**Theme:** dark · **Industry:** saas · **Source:** https://www.dashlane.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._

Dashlane pairs an espresso-dark canvas with airy typography and sharp aquamarine calls to action. Product interfaces, proof points, and customer stories are staged in restrained layouts with fine outlines and occasional indigo details.

## North star

Keep the espresso canvas dominant, let light typography breathe, and use aquamarine as a precise functional signal.

## Overview

The page is anchored by an espresso-brown canvas (#200f0a), giving the entire long-form homepage a warm, distinctive darkness rather than a neutral black. Cream-white text (#fcfaf9) carries headlines and body copy, while aquamarine (#a2f6f5) marks primary actions, selected words, and editorial links. Indigo accents appear in some buttons and product-interface details; they support the palette rather than replace its teal signature. Saans is used in light weights for large, calm headlines and readable copy, with SaansMono reserved for uppercase eyebrow labels and compact utility text. The opening hero uses a left-aligned message opposite a framed product dashboard. Across the page, the layout alternates broad text-led sections with bordered product panels, metric cards, testimonials, and a closing CTA. Thin warm borders and restrained corner rounding define components without heavy shadows. Generous gaps keep the dense enterprise content composed and scannable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Starlight Cream | `#fcfaf9` | `--color-starlight-cream` | neutral | Primary headline and body text on the dark canvas; also used for navigation and light-filled surfaces. |
| Aquamarine Signal | `#a2f6f5` | `--color-aquamarine-signal` | accent | Primary CTA fill, highlighted headline words, outlined secondary actions, and inline links. |
| Espresso Canvas | `#200f0a` | `--color-espresso-canvas` | brand | Dominant page background across the hero, section bands, and footer. |
| Indigo Flash | `#858df9` | `--color-indigo-flash` | accent | Secondary CTA accent and occasional navigation or product-interface detail. |
| Warm Hairline | `#e3ccc0` | `--color-warm-hairline` | semantic | Fine card and panel borders that separate content without adding heavy elevation. |
| Plum Panel | `#2b2538` | `--color-plum-panel` | surface | Dark testimonial-card surface and select contained content against the espresso canvas. |
| Ash Taupe | `#a69f9d` | `--color-ash-taupe` | neutral | Muted supporting text, most notably in the footer and secondary information. |
| Muted Indigo | `#6c74df` | `--color-muted-indigo` | accent | Minor indigo detail in product or decorative elements; not a defining page-wide color. |

### Semantic aliases

`--color-canvas` → `#200f0a` (Espresso Canvas) · `--color-surface` → `#fcfaf9` (Starlight Cream) · `--color-surface-2` → `#2b2538` (Plum Panel) · `--color-text` → `#fcfaf9` (Starlight Cream) · `--color-text-muted` → `#a69f9d` (Ash Taupe) · `--color-border` → `#e3ccc0` (Warm Hairline) · `--color-accent` → `#a2f6f5` (Aquamarine Signal) · `--color-accent-2` → `#858df9` (Indigo Flash) · `--color-on-accent` → `#1d0e09`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fcfaf9` | `#200f0a` | 17.79:1 | AAA |
| `#fcfaf9` | `#2b2538` | 14.17:1 | AAA |
| `#a69f9d` | `#200f0a` | 7.11:1 | AAA |
| `#a69f9d` | `#fcfaf9` | 2.5:1 | fail |
| `#a69f9d` | `#2b2538` | 5.66:1 | AA |
| `#a2f6f5` | `#200f0a` | 15.02:1 | AAA |
| `#a2f6f5` | `#fcfaf9` | 1.18:1 | fail |
| `#a2f6f5` | `#2b2538` | 11.96:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Saans | `--font-body` | system | 300, 500 | Display and interface sans for headlines, body copy, navigation, buttons, and links. | Inter |
| SaansMono | `--font-mono` | webfont | 300, 500, 400 | Monospaced eyebrow labels and compact uppercase utility or code-like text. | IBM Plex Mono |

- **Saans:** Use light weights for the spacious headline voice and regular-to-medium emphasis for actions; keep tracking subtle and case natural.
- **SaansMono:** Use uppercase with visibly expanded tracking for section labels; reserve heavier weight for compact utility labels.

### Type scale — Augmented Fourth (ratio ≈ 1.409, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 300 | 1.1 | 0.01em | — | Saans | Oversized hero or campaign display headlines. |
| h1 | 72px | 300 | 1.1 | 0.01em | — | Saans | Primary page and hero headline. |
| h2 | 56px | 300 | 1.1 | 0.01em | — | Saans | Major section headings and feature introductions. |
| h3 | 48px | 300 | 1.1 | 0.01em | — | Saans | Subsection and product-feature headings. |
| h4 | 28px | 300 | 1.2 | 0.01em | — | Saans | Compact card or supporting section headings. |
| body | 18px | 300 | 1.5 | 0.02em | — | Saans | Main explanatory copy and customer-story text. |
| caption | 14px | 300 | 1.5 | 0.01em | — | Saans | Small supporting labels and footnotes. |
| button | 14px | 300 | 1.5 | 0.01em | — | Saans | CTA labels, set plainly without uppercase styling. |
| nav | 14px | 300 | 1.5 | 0.01em | — | Saans | Header links and compact navigation actions. |
| link | 18px | 300 | 1.5 | 0.02em | — | Saans | Inline links and editorial calls to action. |
| eyebrow | 16px | 300 | 1.1 | 0.06em | uppercase | SaansMono | Uppercase monospaced section labels and category markers. |
| code | 12px | 500 | 1.1 | 0.01em | uppercase | SaansMono | Compact uppercase technical or utility labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 12, 16, 20, 32, 40, 64, 80 px.
- Section rhythm 80px · element gap 8px · card padding 59px · max content width 1280px.

The measured content uses a wide page frame capped at 1280px, with a comfortable density and a base spacing unit of 4px. The hero is a two-column split: copy and actions on the left, product media on the right. Subsequent sections vary among full-width headings, three-up metrics, tabbed product panels, feature rows, and split customer-story or compliance layouts. Major sections have generous vertical separation, while cards use more compact internal spacing. Align section copy consistently to a clear grid; alternate centered product introductions with left-aligned editorial blocks.

## Shape & elevation

- Radius: button `4px` · card `8px` · media `8px` · nav `50%` · link `4px` · xs `2px` · sm `4px` · md `8px` · lg `12px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface favors flat surfaces over shadow. Thin warm-beige borders outline testimonial cards, statistic cards, and product panels; small corner radii soften their edges. Product mockups gain depth through stacked frames and translucent UI layers, while dark plum panels distinguish selected testimonials from the espresso canvas.

## Imagery

The hero features a dark product dashboard visualization framed like a browser or application window, with charts, overlays, and interface layers. Further down, product UI mockups sit in outlined panels, while the customer story uses a rectangular airport photograph. Trust logos and certification marks appear as supporting evidence. Keep imagery dark-adapted and neatly framed; vivid warning colors or interface hues belong inside product mockups, not the global brand palette.

## Components

### Announcement strip

A narrow top message band with centered compact copy, an inline arrow, and a close control.

### Primary CTA

Aquamarine fill (#a2f6f5), dark text (#1d0e09), modest 4px radius, and compact horizontal padding.

### Secondary CTA

Transparent dark fill with an aquamarine outline and aquamarine label; paired with the filled action.

### Metric cards

Three outlined cards show large cream-white percentages, short explanatory copy, and a slim colored indicator.

### Product showcase panel

A large warm-hairline outlined frame combines mono tabs, explanatory copy, and layered product UI.

### Testimonial cards

Dark plum panels with a warm border, prominent quotation text, and compact customer attribution.

### Inline text link

Aquamarine link text with a subtle arrow or directional cue, used beneath explanatory copy.

### Measured component styles

- **Primary button** (“Contact Sales”): background #a2f6f5 · text #1d0e09 · radius 4px · padding 8px 16px · 500 16px Saans
- **Secondary button** (“Contact Sales”): background #858df9 · text #1d0e09 · radius 4px · padding 8px 16px · 500 16px Saans
- **Link** (“Explore the Secure Vault”): transparent background · text #a2f6f5 · radius 4px · padding 8px 16px 8px 0px · 500 16px Saans
- **Card** (““With Dashlane, we’ve been able to take ”): background #2b2538 · text #fcfaf9 · border 1px solid #e3ccc0 · radius 8px · padding 44px 64px 64px 64px · 300 16px Saans
- **Navigation item** (“Open language switcher menu English”): transparent background · text #fcfaf9 · radius 0px · padding 0px · 300 14px Saans

## Do

- Keep the espresso canvas visually dominant.
- Use aquamarine for clear actions and selective emphasis.
- Set large headings in light-weight sans serif.
- Reserve the mono face for uppercase eyebrows.
- Frame product UI with thin warm borders.
- Give major sections generous breathing room.

## Don't

- Do not turn the page into a pure-black interface.
- Do not use indigo as the primary CTA color throughout.
- Do not add heavy shadows to otherwise flat components.
- Do not set every heading in uppercase.
- Do not make product mockup colors the brand-wide palette.
- Do not crowd the long page with uniformly dense sections.

## Agent prompt

Build a new enterprise security page in Dashlane's visual style. Use Espresso Canvas (#200f0a) as the dominant background, Starlight Cream (#fcfaf9) for clear type, and Aquamarine Signal (#a2f6f5) for primary actions, selected words, and links. Keep Indigo Flash (#858df9) as a minor secondary accent. Use a light sans-serif similar to Saans for headlines and body, with a monospaced uppercase eyebrow style. Compose broad sections on a comfortable grid: split hero with product UI, concise proof points, framed feature panels, customer evidence, and a final CTA. Use thin Warm Hairline (#e3ccc0) borders, restrained rounding, and flat surfaces; reserve Plum Panel (#2b2538) for select cards. Make the interface feel spacious, legible, and product-led rather than decorative.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Announcement strip above a two-tier desktop navigation with utility links and primary actions. | announcement with dismiss, global navigation, login and trial access | compact top strip, logo and link row, filled and outlined CTAs |
| 2 | hero | Left-aligned copy and paired actions sit beside a framed dashboard mockup. | product value proposition, paired CTA choices, dashboard proof | large split headline, aquamarine emphasis, layered dark UI frame |
| 3 | logo-cloud | Centered eyebrow above a horizontal row of customer logos. | social proof | uppercase mono label, logo strip |
| 4 | stats | Section heading and link above three evenly aligned metric cards. | quantified benefits, customer story link | large percentage figures, bordered cards, thin indicator bars |
| 5 | product-showcase | Centered product introduction above a wide tabbed frame with copy and interface preview. | feature tabs, feature discovery, deep-dive link | mono category tabs, outlined showcase, layered product UI |
| 6 | feature-grid | Left-aligned section introduction above three horizontally arranged capability columns. | progressive feature scan, learn-more link | small line icons, uppercase labels, thin progress rule |
| 7 | feature-split | Customer-story copy and actions on the left; rectangular airport photograph on the right. | customer case study, read-more actions | mono eyebrow, text-and-image split, paired links |
| 8 | testimonials | Section heading above horizontally arranged testimonial cards with carousel controls. | testimonial carousel, customer attribution | plum card surfaces, warm outlines, round navigation controls |
| 9 | feature-split | Copy and trust-center action on the left, certification marks arranged on the right. | trust-center link, compliance reassurance | text and certification split, aquamarine highlighted word |
| 10 | cta | Full-bleed decorative backdrop surrounds a centered bordered CTA panel. | sales conversion, demo request | large two-line heading, paired buttons, subtle decorative media |
| 11 | footer | Dense multi-column link directory followed by download badges, social links, and legal text. | site-wide navigation, app downloads, legal and social links | uppercase category labels, compact link columns, small legal baseline |

## Source CSS custom properties (selected)

```css
--color-wk-starlight-100: #fdfdfd;
--color-wk-night-owl-100: #1d0e09;
--color-wk-espresso-10: #e9e7e6;
--color-wk-espresso-20: #d3cfce;
--color-wk-espresso-30: #bcb7b5;
--color-wk-espresso-40: #a69f9d;
--color-wk-espresso-50: #908784;
--color-wk-espresso-60: #796f6c;
--color-wk-espresso-70: #635753;
--color-wk-espresso-80: #4d3f3b;
--color-wk-espresso-90: #251007;
--color-wk-espresso-100: #200f0a;
--color-wk-aquamarine-10: #f7fefe;
--color-wk-aquamarine-20: #ecfefd;
--color-wk-aquamarine-30: #e3fcfc;
--color-wk-aquamarine-40: #dafbfc;
--color-wk-aquamarine-50: #d1fbfb;
--color-wk-aquamarine-60: #c7fbf9;
--color-wk-aquamarine-70: #bef9f8;
--color-wk-aquamarine-80: #b5f8f7;
--color-wk-aquamarine-90: #acf7f6;
--color-wk-aquamarine-100: #a2f6f5;
--color-wk-aquamarine-110: #88dcdb;
--color-wk-aquamarine-120: #6fc3c2;
--color-wk-aquamarine-130: #56a9a8;
--color-wk-aquamarine-140: #3c908f;
--color-wk-aquamarine-150: #237776;
--color-wk-indigo-10: #f3f4fe;
--color-wk-indigo-20: #e7e8fe;
--color-wk-indigo-30: #dbddfd;
--color-wk-indigo-40: #cdd1fd;
--color-wk-indigo-50: #c2c6fc;
--color-wk-indigo-60: #b6bbfb;
--color-wk-indigo-70: #aaaffb;
--color-wk-indigo-80: #9da4fa;
--color-wk-indigo-90: #9198fa;
--color-wk-indigo-100: #858df9;
--color-wk-indigo-110: #6c74df;
--color-wk-indigo-120: #525ac6;
--color-wk-indigo-130: #3941ac;
```

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