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

# Eraser · Design System

> Quiet canvas, precise diagrams, product-led storytelling

**Theme:** light · **Industry:** ai · **Source:** https://www.eraser.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._

Eraser presents AI diagramming through a restrained, warm-white canvas and crisp product demonstrations. Modular feature sections, fine borders, and dark calls to action keep the technical story clear and approachable.

## North star

Keep the page quiet and warm so precise product diagrams—not decorative colour—carry the story.

## Overview

The page is built on a warm near-white canvas (#fcfbf9), with almost no large colour fields; the product interface and diagrams carry the visual variety. Ink (#242424) anchors headings and key copy, while muted grays create hierarchy across navigation, supporting text, and labels. Blue appears sparingly in links and interface actions, and other saturated hues mostly belong to diagram mock-ups rather than the brand surface. Inter is the dominant typeface: a compact, confident headline contrasts with calm, readable body copy. A centered hero leads into carefully aligned product previews, logo proof, and feature modules arranged in two- and three-column grids. Generous section intervals let each demonstration breathe, while consistent hairline borders and restrained shadows separate white cards without heavy framing. The overall effect is technical and polished, but deliberately quiet: interface detail, not decoration, explains the product.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Ivory | `#fcfbf9` | `--color-gallery-ivory` | brand | Dominant warm canvas across the hero, feature bands, call to action, and footer. |
| Soft Graphite | `#666666` | `--color-soft-graphite` | neutral | Muted navigation, body copy, and footer links. |
| Border Mist | `#d0d0d0` | `--color-border-mist` | surface | Measured card and border tone; also used as a testimonial section band. |
| Diagram Amber | `#fcd34d` | `--color-diagram-amber` | semantic | Occasional diagram or badge detail inside product illustrations, not a defining brand surface. |
| Grid Fog | `#ededed` | `--color-grid-fog` | surface | Fine grid lines and pale interface or card details. |
| Editorial Ink | `#242424` | `--color-editorial-ink` | brand | Primary headings, body text, and outlined login control. |
| Sketch Paper | `#f6f6f6` | `--color-sketch-paper` | surface | Subtle diagonal hatching and light details within interface previews. |
| Carbon Text | `#2a2b2b` | `--color-carbon-text` | neutral | Secondary dark text and compact interface labels. |
| Muted Stone | `#878787` | `--color-muted-stone` | neutral | Secondary labels, badges, and subdued heading or footer text. |
| Status Blue | `#2563eb` | `--color-status-blue` | semantic | Small status or badge detail; not a dominant page accent. |
| Status Green | `#15803d` | `--color-status-green` | semantic | Small success-state badge detail within interface content. |
| Status Ochre | `#b45309` | `--color-status-ochre` | semantic | Small warning or status badge detail, not a page-level colour. |
| Silver Label | `#c0c0c0` | `--color-silver-label` | neutral | Low-emphasis interface text and fine diagram annotations. |
| Link Blue | `#457fe5` | `--color-link-blue` | accent | Readable blue links and selected interface actions. |
| Diagram Blue | `#2a6fdb` | `--color-diagram-blue` | accent | Sparse blue annotation or badge colour in product-related details. |
| Diagram Green | `#459566` | `--color-diagram-green` | semantic | Small green illustration or status detail in interface previews. |
| Action Blue | `#2866df` | `--color-action-blue` | accent | Measured primary blue token used for links or interface emphasis. |

### Semantic aliases

`--color-canvas` → `#fcfbf9` (Gallery Ivory) · `--color-surface` → `#d0d0d0` (Border Mist) · `--color-text` → `#242424` (Editorial Ink) · `--color-text-muted` → `#666666` (Soft Graphite) · `--color-text-subtle` → `#878787` (Muted Stone) · `--color-border` → `#d0d0d0` (Border Mist) · `--color-accent` → `#457fe5` (Link Blue) · `--color-accent-2` → `#2866df` (Action Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#242424` | `#fcfbf9` | 15.01:1 | AAA |
| `#242424` | `#d0d0d0` | 10.06:1 | AAA |
| `#666666` | `#fcfbf9` | 5.55:1 | AA |
| `#666666` | `#d0d0d0` | 3.72:1 | AA-large |
| `#878787` | `#fcfbf9` | 3.47:1 | AA-large |
| `#878787` | `#d0d0d0` | 2.33:1 | fail |
| `#457fe5` | `#fcfbf9` | 3.75:1 | AA-large |
| `#457fe5` | `#d0d0d0` | 2.51:1 | fail |

### Gradients

- `repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 7px, rgb(246, 246, 246) 7px, rgb(246, 246, 246) 8px), none`
- `linear-gradient(rgb(237, 237, 237) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgb(237, 237, 237) 1px, rgba(0, 0, 0, 0) 1px)`
- `repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 4px, rgb(230, 230, 230) 4px, rgb(230, 230, 230) 5px), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter var | `--font-body` | system | 400, 600, 500, 700 | Headlines, navigation, body copy, buttons, and most interface labels. | Inter |
| ui-monospace | `--font-mono` | system | 400, 500, 600 | Small uppercase eyebrow labels and technical or code-like annotations. | Roboto Mono |

- **Inter var:** Mainly regular and semibold; compact, slightly tight headline tracking, with sentence-case copy.
- **ui-monospace:** Used sparingly for tiny uppercase labels with visibly expanded tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.298, base 15.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 44px | 600 | 1.1 | -0.035em | — | Inter var | Centered hero headline and major page-level statement. |
| h2 | 22px | 400 | 1 | 0.32em | — | Inter var | Section-level headings and short editorial labels. |
| h3 | 21px | 600 | 0.95 | -0.02em | — | Inter var | Feature titles and card headings. |
| h4 | 20px | 400 | 1.5 | 0 | — | Inter var | Supporting subheads and larger explanatory text. |
| body | 15.5px | 400 | 1.55 | 0 | — | Inter var | Feature descriptions, testimonials, and explanatory copy. |
| caption | 14px | 400 | 1.43 | 0 | — | Inter var | Compact card descriptions and supporting annotations. |
| button | 15px | 600 | 1.33 | 0 | — | Inter var | Primary and secondary CTA labels. |
| nav | 14px | 400 | 1.43 | 0 | — | Inter var | Top navigation and footer navigation links. |
| eyebrow | 8.5px | 400 | 2.35 | 0.08em | uppercase | ui-monospace | Tiny uppercase labels above feature sections. |
| code | 8.5px | 400 | 2.35 | 0.08em | uppercase | ui-monospace | Technical identifiers and compact code-style interface labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 24 px.
- Section rhythm 88px · element gap 6px · card padding — · max content width 1200px.

Use a centered content frame capped at the measured 1200px maximum, with a comfortable density and generous section intervals. The hero is centered above a wide product preview; subsequent bands alternate between two-column demonstrations and three-column feature cards. Keep headings centered for most sections, with card copy aligned to its own content. A compact logo grid and testimonial panels provide proof between product modules. The footer switches to a multi-column link layout. Preserve whitespace around modules rather than compressing the page.

## Shape & elevation

- Radius: button `8px` · card `8px` · media `50%` · badge `3px` · xs `2px` · sm `3px` · md `4px` · lg `5px` · xl `6px` · 2xl `7px`
- Shadow `sm` (other, text): `rgba(0, 0, 0, 0.08) 0px 2px 6px 0px`
- Shadow `sm-2` (card, other): `rgba(236, 236, 236, 0.5) 0px 1px 0px 0px, rgba(23, 23, 23, 0.05) 0px 0px 6px 0px`
- Shadow `sm-3` (card, other): `rgba(0, 0, 0, 0.1) 0px 2px 6px 0px`
- Shadow `sm-4` (card): `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`
- Shadow `hairline` (text, badge): `rgba(236, 236, 236, 0.5) 0px 1px 0px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.08) 0px 6px 18px 0px`
- Motion: standard transition `0.15s ease` on interactive elements.

Keep most sections flat against the warm canvas. Separate product panels with fine pale borders and restrained soft shadows; the hero preview may feel slightly lifted. Use consistent rounded card and button corners, and avoid heavy dark outlines or dramatic depth.

## Imagery

Use product UI previews, technical diagrams, and interface illustrations rather than lifestyle photography. Frame previews as crisp, lightly elevated panels with fine borders; keep diagram content legible and let its internal colours provide restrained variety. Customer logos and security badges appear as supporting proof. The page relies on static visual demonstrations, not prominent video or decorative 3D imagery.

## Components

### Primary CTA

Near-black button with white semibold Inter text, an 8px radius, and measured 10px vertical by 18px horizontal padding.

### Secondary CTA

Light or transparent button with a dark outline, compact semibold label, and an 8px radius.

### Product preview

Wide, bordered interface capture with subtle shadow; diagram detail is the visual focus.

### Feature card

White-feeling panel with fine pale border, 8px radius, and restrained shadow; combines heading, copy, and illustration.

### Eyebrow badge

Tiny uppercase monospace label, muted gray text, pale background, and compact 3px-radius treatment.

### Text link

Blue Inter link, sometimes presented in a bordered light panel with generous internal padding.

### Logo and quote grid

Aligned proof panels using quiet borders, restrained typography, and ample separation.

### Measured component styles

- **Primary button** (“Try Eraser free”): background #171717 · text #ffffff · border 1px solid · radius 8px · padding 10px 18px · 600 15px Inter var
- **Secondary button** (“Log in”): transparent background · text #242424 · border 1px solid #171717 · radius 8px · padding 7px 14px · 600 14px Inter var
- **Link** (“Read the MCP docs →”): background #fdfdfd · text #457fe5 · border 1px solid #d0d0d0 · radius 0px · padding 13px 16px · 500 13px Inter var
- **Card** (“RULES Naming & notation rules”): transparent background · text #242424 · border 1px solid #ececec · radius 8px · padding 0px · 400 14px Inter var · shadow rgba(0, 0, 0, 0.08) 0px 6px 18px 0px
- **Badge** (“RULES”): background #fafafa · text #878787 · border 1px solid #f1f1f1 · radius 3px · padding 0px 5px · 400 8.5px ui-monospace · uppercase
- **Navigation item** (“Architecture Diagrams”): transparent background · text #666666 · radius 0px · padding 0px · 400 14px Inter var

## Do

- Use the warm ivory canvas as the dominant page colour.
- Reserve blue accents for links and meaningful interface emphasis.
- Let product diagrams demonstrate the tool in context.
- Use Inter for clear, compact headlines and readable body copy.
- Separate modules with thin borders and subtle shadows.
- Keep feature groups aligned and generously spaced.

## Don't

- Do not turn illustration colours into large brand-colour bands.
- Do not use heavy gradients or decorative colour washes.
- Do not crowd the hero or compress section spacing.
- Do not give every card a strong shadow.
- Do not replace product demonstrations with generic stock photography.
- Do not use oversized or highly decorative display typography.

## Agent prompt

Build a new page in Eraser’s quiet, technical visual style. Use Gallery Ivory (#fcfbf9) as the main canvas, Editorial Ink (#242424) for headings and important copy, and Soft Graphite (#666666) for navigation and supporting text. Use Link Blue (#457fe5) sparingly for links and functional emphasis; keep Diagram Amber (#fcd34d) and other saturated tones inside diagrams or small statuses. Set type in Inter, with compact semibold headlines and calm regular body copy; use a monospace face only for tiny uppercase labels. Organize content in a centered frame, with generous gaps, crisp product previews, modular two- or three-column feature groups, thin borders, and restrained shadows. Use near-black primary buttons and clear outlined secondary actions. Let authentic interface diagrams carry visual interest, keeping the surrounding page light and uncluttered.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy above paired CTAs, followed by a wide product preview. | Primary and secondary action, Product demonstration | Warm-white canvas, Bold centered headline, Near-black CTA buttons, Wide framed preview |
| 2 | logo-cloud | Centered trust label above a five-column logo and testimonial grid. | Customer proof, Social validation | Logo grid, Fine cell dividers, Compact quote panel |
| 3 | feature-split | Centered section heading above two side-by-side product demonstrations. | Feature explanation, Visual product proof | Two-column panels, UI screenshots, Thin panel borders |
| 4 | feature-grid | Centered heading followed by a three-column feature region with paired illustration cards. | Explain consistency, Show reusable patterns | Feature cards, Diagram examples, Small eyebrow label |
| 5 | integrations | Centered heading above a wide workflow diagram and a three-column capability layout. | Explain agent workflow, Browse capability details | System diagram, Technical labels, Bordered capability panels |
| 6 | feature-grid | Centered section heading followed by three side-by-side diagram feature cards. | Explore use cases, Progressive system detail | Three-column cards, Miniature technical diagrams, Compact descriptions |
| 7 | testimonials | Single-column section band with a two-column grid of customer quotes. | Customer endorsements, Build trust | Muted band background, Quote cards, Small customer attribution |
| 8 | feature-grid | Centered heading and brief introduction above three security feature cards. | Address enterprise concerns, Compare capabilities | Three-column cards, Security illustrations, Light bordered panels |
| 9 | cta | Centered closing heading with a single primary action. | Conversion prompt, Single next step | Open whitespace, Dark CTA button, Centered type |
| 10 | footer | Brand block beside six compact link columns, with legal links along the bottom. | Explore site links, Access legal information | Multi-column navigation, Small brand mark, Muted compact text |

## Source CSS custom properties (selected)

```css
--blue-primary: #2866df;
--red-primary: #c51023;
--prompt-box-shadow: rgba(0, 0, 0, .05);
--x-small-shadow: 0 1px 0 rgba(236, 236, 236, .5);
--small-shadow: 0 1px 0 rgba(236, 236, 236, .5), 0 0 6px rgba(23, 23, 23, .05);
--small-brighter-shadow: 0 1px 0 rgba(236, 236, 236, .5), 0 0 8px rgba(23, 23, 23, .15);
--medium-shadow: 0 1px 0 rgba(236, 236, 236, .5), 0 0 15px rgba(23, 23, 23, .08);
--x-large-shadow: 0 0 50px rgba(23, 23, 23, .2);
--super-large-shadow: 0 54px 134px rgba(0, 0, 0, .12);
--inner-shadow: inset 0 1px 4px rgba(23, 23, 23, .04);
--radius-x-small: 2px;
--radius-small: 4px;
--radius-medium: 6px;
--radius-large: 8px;
--site-sheet-shadow: none;
--site-hero-shadow: 0 12px 40px rgb(0 0 0 / 10%);
--base-font-size: 16px;
--base-font-weight: 400;
```

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