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

# Era · Design System

> Calm, spacious finance for the agent era

**Theme:** light · **Industry:** fintech · **Source:** https://era.app/ · **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._

Era pairs a warm, paper-like canvas and oversized typography with detailed financial product screens. Quiet navigation and measured accent colors keep the interface approachable while the imagery makes the software tangible.

## North star

Make finance feel calm and tangible: let oversized editorial type introduce each idea, then show the real interface on a warm, spacious canvas.

## Overview

The page is built around a warm off-white canvas (#f7f5f2), with soft gray-beige section bands (#eeebe8) and restrained white product surfaces. Dark plum ink (#241e2b) gives headings and primary actions a strong but gentle contrast; muted gray-purple supports secondary copy. Lavender and mint appear as compact highlights, section labels and details inside product screens, with coral and lime used sparingly for labeled accents rather than as broad backgrounds. Saans VF provides a clean, contemporary sans-serif voice, pairing very large, tightly tracked display headlines with lighter, readable body text. The layout alternates editorial text-and-product compositions with broad, quiet section bands. Screenshots are large and crisp, often framed like application windows, while a cinematic lifestyle video anchors the opening. Generous vertical breathing room keeps the long page from feeling like a dense financial dashboard.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Plum Ink | `#241e2b` | `--color-plum-ink` | brand | Primary heading, body text, links and dark primary CTA. |
| Warm Paper | `#f7f5f2` | `--color-warm-paper` | surface | Main page canvas and light-filled content sections. |
| Soft Putty | `#eeebe8` | `--color-soft-putty` | surface | Alternate section bands and pale product-summary cards. |
| Quiet Lilac Gray | `#cec8d0` | `--color-quiet-lilac-gray` | semantic | Fine borders and separators around content and interface surfaces. |
| Muted Heather | `#625a69` | `--color-muted-heather` | neutral | Secondary navigation and subdued supporting copy. |
| Soft Lavender | `#bbaaf9` | `--color-soft-lavender` | accent | Small badges and highlights, also visible within product-screen mockups. |
| Mint Signal | `#77dac1` | `--color-mint-signal` | accent | Savings and status emphasis in badges and illustrative product UI. |
| Peach Note | `#ffb28d` | `--color-peach-note` | accent | Occasional labeled highlight and decorative emphasis. |
| Lime Note | `#d9eb68` | `--color-lime-note` | accent | Occasional highlight badge; use sparingly rather than as a page surface. |
| Porcelain | `#fffdfb` | `--color-porcelain` | surface | Bright cards and the pale surfaces of product interface mockups. |
| Deep Aubergine | `#302036` | `--color-deep-aubergine` | neutral | Text on colored badges and accent fills. |
| Near-Black | `#111014` | `--color-near-black` | semantic | Dark opening media band and inverse navigation or section surfaces. |

### Semantic aliases

`--color-canvas` → `#f7f5f2` (Warm Paper) · `--color-surface` → `#eeebe8` (Soft Putty) · `--color-surface-2` → `#fffdfb` (Porcelain) · `--color-surface-3` → `#111014` (Near-Black) · `--color-text` → `#241e2b` (Plum Ink) · `--color-text-muted` → `#625a69` (Muted Heather) · `--color-border` → `#cec8d0` (Quiet Lilac Gray) · `--color-accent` → `#bbaaf9` (Soft Lavender) · `--color-accent-2` → `#77dac1` (Mint Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#241e2b` | `#f7f5f2` | 14.89:1 | AAA |
| `#241e2b` | `#eeebe8` | 13.65:1 | AAA |
| `#241e2b` | `#fffdfb` | 15.97:1 | AAA |
| `#241e2b` | `#111014` | 1.17:1 | fail |
| `#625a69` | `#f7f5f2` | 6.06:1 | AA |
| `#625a69` | `#eeebe8` | 5.55:1 | AA |
| `#625a69` | `#fffdfb` | 6.5:1 | AA |
| `#625a69` | `#111014` | 2.88:1 | fail |
| `#bbaaf9` | `#f7f5f2` | 1.89:1 | fail |
| `#bbaaf9` | `#eeebe8` | 1.73:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Saans VF | `--font-body` | webfont | 380, 400, 500, 550, 300 | All page typography, from display headlines and navigation to body copy, labels and buttons. | Inter |

- **Saans VF:** Use a restrained modern sans; display headlines are medium weight with tight negative tracking, while body copy stays light and sentence case.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 500 | 1.06 | -0.025em | — | Saans VF | Oversized section and hero headlines. |
| h1 | 24px | 400 | 1.35 | -0.015em | — | Saans VF | Supporting primary heading or lead statement. |
| body | 16px | 380 | 1.55 | 0 | — | Saans VF | Introductory and explanatory paragraphs. |
| caption | 12px | 400 | 1.55 | 0 | — | Saans VF | Compact labels, notes and helper copy. |
| button | 13px | 500 | 1.55 | 0 | — | Saans VF | Primary and secondary CTA labels. |
| nav | 13px | 500 | 1.4 | 0 | — | Saans VF | Navigation links and compact menu labels. |
| link | 14px | 380 | 1.2 | 0 | — | Saans VF | Inline text links and supporting actions. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 20, 24 px.
- Section rhythm 64px · element gap 12px · card padding — · max content width 1320px.

Use a centered content area with a measured maximum width of 1320px and comfortable density. The opening pairs a large lifestyle-media banner with compact navigation rows, followed by an editorial hero with left-aligned copy and a large product interface to the right. Subsequent feature sections repeat text-and-screenshot compositions, sometimes over a softly contrasting band. Keep the section rhythm generous, with a measured 64px section gap and smaller 12px element gaps. Align headings consistently to the content column and let product screenshots occupy substantial visual area.

## Shape & elevation

- Radius: button `6px` · card `10px` · media `2px` · link `5px` · xs `2px` · sm `3px` · md `5px` · lg `6px` · xl `10px`
- Shadow `xl` (card): `rgba(40, 18, 55, 0.19) 0px 28px 65px -18px`
- Shadow `hairline` (other): `rgb(247, 245, 242) 0px 0px 0px 2px`
- Shadow `lg` (card): `rgba(36, 30, 43, 0.03) 0px 2px 4px 0px, rgba(36, 30, 43, 0.05) 0px 18px 38px 0px`
- Shadow `hairline-2` (text, badge): `rgb(119, 218, 193) 0px 3.84375px 0px 0px, rgb(119, 218, 193) 0px -3.84375px 0px 0px`
- Shadow `hairline-3` (badge): `rgb(187, 170, 249) 0px 2.79688px 0px 0px, rgb(187, 170, 249) 0px -2.79688px 0px 0px`
- Shadow `hairline-4` (text, badge): `rgb(255, 178, 141) 0px 2.79688px 0px 0px, rgb(255, 178, 141) 0px -2.79688px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.16, 1, 0.3, 1)` on interactive elements.

The overall system is quiet and mostly flat, using fine measured borders to define section edges and product surfaces. Large application mockups gain separation through soft, broad shadows rather than heavy outlines. Cards use gently rounded corners, while small media and controls keep their edges comparatively restrained.

## Imagery

A cinematic, full-bleed lifestyle video opens the page, showing a relaxed person in a home setting. The rest of the page relies on crisp, large product screenshots presented as browser-like financial dashboards. Keep these mockups bright and legible, with gentle shadows and subtle borders; use accent color mainly within the interface rather than adding decorative illustration or 3D imagery.

## Components

### Opening media banner

Full-bleed lifestyle video on a near-black band, overlaid with the Era wordmark and compact sign-in and primary-action buttons.

### Two-row navigation

A pale horizontal navigation row sits below the media banner, followed by a second row of in-page product links; use muted text and fine separators.

### Editorial hero

Place a large dark headline and supporting copy beside a prominent financial dashboard screenshot, with a dark primary CTA and understated text link.

### Feature section label

Use a compact lavender, mint, coral or lime label to identify a feature; keep the color local and pair it with dark text.

### Product window

Show detailed white dashboard mockups with a fine border and soft shadow, giving the financial UI enough scale to read as the evidence for the feature.

### Primary CTA

Use a #241e2b fill with #f7f5f2 text, a 6px radius and medium Saans VF lettering; keep secondary links visually quieter.

### Measured component styles

- **Primary button** (“Get started free”): background #241e2b · text #f7f5f2 · border 1px solid · radius 6px · padding 0px 20px · 550 14px Saans VF
- **Secondary button** (“Get started free”): background #ffffff · text #191a17 · border 1px solid · radius 6px · padding 0px 12px · 500 13px Saans VF
- **Link** (“Add to Claude”): transparent background · text #241e2b · radius 0px · padding 0px 4px · 380 14px Saans VF
- **Card** (“My finances Home Vault Payments Investin”): background #fffdfb · text #241e2b · radius 0px · padding 0px · 380 13px Saans VF · shadow rgba(40, 18, 55, 0.19) 0px 28px 65px -18px
- **Badge** (“Your document library”): background #bbaaf9 · text #302036 · radius 0px · padding 0px 4px 0px 0px · 500 14px Saans VF · shadow rgb(187, 170, 249) 0px 2.79688px 0px 0px, rgb(187, 170, 249) 0px -2.79688px 0px 
- **Navigation item** (“Solutions”): transparent background · text #625a69 · radius 0px · padding 8px · 380 16px Saans VF

## Do

- Use Warm Paper (#f7f5f2) as the dominant canvas.
- Set headlines in large, tightly tracked dark Plum Ink (#241e2b).
- Pair feature copy with a substantial product screenshot.
- Use Soft Putty (#eeebe8) to distinguish selected section bands.
- Reserve lavender, mint, coral and lime for small accents.
- Keep generous vertical breathing room between feature blocks.

## Don't

- Do not turn accent colors into large dominant backgrounds.
- Do not crowd the page with dense dashboard-like content.
- Do not use heavy borders around product screenshots.
- Do not make secondary navigation compete with the headline.
- Do not replace the warm neutral palette with stark pure white.
- Do not add decorative gradients or unsupported color effects.

## Agent prompt

Build a new page in Era’s calm, editorial fintech style. Use Warm Paper (#f7f5f2) for the primary canvas, Soft Putty (#eeebe8) for selected section bands, and Plum Ink (#241e2b) for headings, body text and the primary CTA. Use Saans VF or a close sans-serif substitute, with oversized tightly tracked headlines and lighter readable paragraph copy. Keep navigation compact and muted. Structure the page as spacious editorial sections that pair concise text with large, crisp financial product screenshots. Give screenshots subtle borders and soft shadows rather than heavy framing. Use Soft Lavender (#bbaaf9), Mint Signal (#77dac1), Peach Note (#ffb28d) and Lime Note (#d9eb68) only for compact labels or interface details. Maintain generous vertical breathing room and a calm, legible hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark media band with wordmark and actions overlaid near the bottom. | Cinematic brand introduction, Sign-in and start-free actions | Lifestyle video background, Light wordmark, Compact outlined and filled buttons |
| 2 | navigation | Stacked compact navigation rows lead into the first content section. | Primary site navigation, In-page product links | Pale navigation bars, Fine dividers, Muted link labels |
| 3 | hero | Left-aligned headline and copy beside a large product interface, within a spacious light canvas. | Clear value proposition, Start-free CTA, Supporting product links | Oversized dark headline, Compact availability note, Large dashboard mockup |

## Source CSS custom properties (selected)

```css
--font-family-system: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
--font-family-saans: "Saans VF", "Saans Fallback", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
```

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