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

# Equals · Design System

> Warm editorial calm meets precise AI analytics.

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

Equals pairs a warm, paper-like canvas with oversized editorial headlines and restrained orchid accents. Product interfaces and customer proof carry the story, with generous whitespace keeping a complex analytics product approachable.

## North star

Keep the canvas warm and quiet so editorial headlines, real product interfaces, and small orchid CTAs do the talking.

## Overview

The page is anchored by a warm off-white canvas (#faf9f5), with subtle gray surface bands and white product cards that keep the overall experience light rather than stark. Black is reserved for high-contrast headlines, navigation, and primary text; muted grays establish hierarchy without competing with the content. Orchid purple (#b074ce) appears sparingly on demo buttons, while brighter colors mostly belong to product UI and decorative edge fragments, not the core brand system. Oversized condensed serif headlines create an editorial contrast with Unica77’s clean, compact sans-serif body and navigation text. The layout alternates centered hero messaging with left-aligned feature narratives and broad product demonstrations. Customer logos and testimonials add evidence between product sections. Softly rounded cards, fine borders, and restrained shadows distinguish interface examples from the open canvas. Whitespace and a comfortable vertical rhythm make the long page feel considered, not crowded.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Paper Canvas | `#faf9f5` | `--color-paper-canvas` | brand | Dominant page canvas across the hero, feature sections, testimonials, and footer transition. |
| Soft Divider | `#edece9` | `--color-soft-divider` | surface | Pale surface and border tone for quiet section separation and interface framing. |
| True Ink | `#000000` | `--color-true-ink` | brand | Primary headings, navigation, logos, and high-contrast body text. |
| Graphite Text | `#262626` | `--color-graphite-text` | neutral | Secondary interface and supporting text where pure black would feel too strong. |
| Card White | `#ffffff` | `--color-card-white` | surface | Product cards, form surfaces, and white panels against the warm canvas. |
| Orchid Action | `#b074ce` | `--color-orchid-action` | accent | Primary demo CTA fill, paired with white button text. |
| Muted Graphite | `#646462` | `--color-muted-graphite` | neutral | Muted navigation, footer, and supporting copy. |
| UI Gray | `#737373` | `--color-ui-gray` | neutral | Small labels and badge text; a minor interface tone rather than a defining brand color. |
| Stone Panel | `#e1e0dd` | `--color-stone-panel` | surface | Gray section band and subdued product or media backgrounds. |
| Card Hairline | `#e5e5e5` | `--color-card-hairline` | neutral | Thin outlines on compact data cards and interface details. |
| Violet Artifact | `#6d28d9` | `--color-violet-artifact` | semantic | Minor badge-level product UI color; not a defining page brand accent. |
| Warm Border | `#d7d5d0` | `--color-warm-border` | neutral | Subtle card and component outlines within pale interface areas. |
| Label Gray | `#8d8d8d` | `--color-label-gray` | neutral | Low-emphasis integration labels and supporting interface copy. |
| Alert Red | `#d93025` | `--color-alert-red` | semantic | Small status or data emphasis inside text and product UI, not a general CTA color. |

### Semantic aliases

`--color-canvas` → `#faf9f5` (Paper Canvas) · `--color-surface` → `#edece9` (Soft Divider) · `--color-surface-2` → `#ffffff` (Card White) · `--color-surface-3` → `#e1e0dd` (Stone Panel) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#262626` (Graphite Text) · `--color-text-subtle` → `#646462` (Muted Graphite) · `--color-border` → `#edece9` (Soft Divider) · `--color-accent` → `#b074ce` (Orchid Action) · `--color-accent-2` → `#d93025` (Alert Red) · `--color-on-accent` → `#ffffff` (Card White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#faf9f5` | 19.93:1 | AAA |
| `#000000` | `#edece9` | 17.78:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e1e0dd` | 15.91:1 | AAA |
| `#262626` | `#faf9f5` | 14.37:1 | AAA |
| `#262626` | `#edece9` | 12.81:1 | AAA |
| `#262626` | `#ffffff` | 15.13:1 | AAA |
| `#262626` | `#e1e0dd` | 11.46:1 | AAA |
| `#646462` | `#faf9f5` | 5.63:1 | AA |
| `#646462` | `#edece9` | 5.02:1 | AA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.04) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Unica77 | `--font-body` | webfont | 400, 500 | Primary sans for body copy, navigation, buttons, and interface text. | Inter |
| Serrif Condensed | `--font-display` | webfont | 400 | Display serif for the hero and large section headlines. | Bodoni Moda |
| Inter | `--font-inter` | webfont | 500, 400, 600 | Minor supporting interface and fallback text. | Inter |
| Anthropic Sans | `--font-anthropic-sans` | webfont | 400 | Product mockup and analytics card text. | Inter |
| Anthropic Serif | `--font-anthropic-serif` | webfont | 400 | Occasional minor serif text in embedded or supporting content. | Source Serif 4 |
| Lato | `--font-lato` | webfont | 400, 700, 500, 600 | Tiny application badge and compact labels. | Lato |

- **Unica77:** Mostly regular weight; compact tracking and sentence case keep utility text unobtrusive.
- **Serrif Condensed:** Regular weight, large scale, tight leading, and slight negative tracking create editorial emphasis.
- **Inter:** Measured at low share; use regular to semibold only for compact utility text.
- **Anthropic Sans:** Appears mainly within embedded product UI; keep it legible and neutral.
- **Anthropic Serif:** Low-share usage; do not let it replace the primary condensed display face.
- **Lato:** Small, crisp utility use; measured badge uses a semibold weight.

### Type scale — Golden Ratio (ratio ≈ 1.633, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1.04 | -0.01em | — | Serrif Condensed | Oversized centered hero headline and major conversion headline. |
| h2 | 24px | 400 | 1.33 | -0.004em | — | Unica77 | Feature section headings paired with subdued follow-up lines. |
| body | 18px | 400 | 1.33 | -0.005em | — | Unica77 | Hero support copy, feature descriptions, and testimonial text. |
| caption | 12px | 400 | 1.33 | -0.007em | — | Unica77 | Small section numbers, labels, and interface annotations. |
| nav | 14px | 400 | 1.43 | -0.006em | — | Unica77 | Header links and compact product navigation. |

OpenType features in use: `"lnum", "pnum"`, `"lnum", "salt", "tnum"`, `"lnum", "tnum"`, `"salt"`.

## Spacing & layout

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

A broad centered page frame uses a measured maximum width of 1266px, with comfortable density and generous vertical gaps. The hero is centered, with its headline and email CTA above a multi-row customer logo cloud. Subsequent sections shift to left-aligned editorial headings and large product demonstrations; some feature content uses multiple columns, while testimonials use repeated horizontal rows. A pale gray band marks a video section. Preserve the long, measured section rhythm and let content breathe rather than compressing the page.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `3px` · badge `6px` · nav `6px` · xs `2px` · sm `3px` · md `4px` · lg `5px` · xl `6px` · 2xl `8px` · pill `9999px`
- Shadow `hairline` (card): `rgba(38, 38, 38, 0.12) 0px 0px 0px 0.5px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.05) 0px 2px 8px -2px, rgba(0, 0, 0, 0.14) 0px 2px 10px -4px`
- Shadow `sm` (card): `rgba(38, 38, 38, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 2px 8px -4px`
- Shadow `hairline-2` (nav): `rgba(0, 0, 0, 0.18) 0px 0px 0px 0.5px`
- Shadow `xl` (card): `rgba(38, 38, 38, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.16) 0px 8px 24px -6px, rgba(0, 0, 0, 0.14) 0px 18px 48px -12px`
- Shadow `sm-2` (other): `rgba(0, 0, 0, 0.2) 0px 2px 8px -4px`
- Motion: standard transition `0.1s ease-out` on interactive elements.

The page is mostly flat, relying on whitespace and subtle surface contrast instead of strong shadows. Product cards use fine neutral outlines and soft, restrained shadows to lift them from the warm canvas. Rounded white panels layer interface elements, while pale section bands and thin separators provide structure without heavy borders.

## Imagery

Product UI screenshots and workbook-style mockups are the main visual assets, shown large enough to read as real software rather than decorative thumbnails. Customer logos and small portrait photos support trust sections. A layered warehouse illustration explains the platform foundations, while a full-bleed video section adds variety. Edge graphics around the hero and closing CTA use soft, translucent color rather than competing with content.

## Components

### Top navigation

Minimal header with Equals mark, centered primary links, sign-in text, email field, and a compact orchid demo button.

### Email demo form

Pill-shaped white input group with muted placeholder text and an orchid CTA with white label.

### Customer logo cloud

Several rows of monochrome customer logos, centered beneath the hero form with ample separation.

### Product showcase card

Large white analytics or workbook interface with fine gray outlines, restrained shadow, and rounded corners.

### Feature narrative

Small numbered eyebrow, editorial serif heading, secondary gray line, and a broad product image or interface.

### Testimonial row

Customer quote on the left, compact portrait and role details to the right, with delicate horizontal separators.

### Footer

Three compact link columns above an oversized Equals wordmark on a softly tinted closing area.

### Measured component styles

- **Primary button** (“Get a demo”): background #b074ce · text #ffffff · radius 60px · padding 12px 18px · 400 16px Unica77
- **Input**: transparent background · text #000000 · radius 0px · padding 18px 150px 18px 28px · 400 16px Unica77
- **Card** (“Net New ARR analysis What was our net ne”): background #ffffff · text #000000 · radius 12px · padding 0px · 400 18px Anthropic Sans · shadow rgba(38, 38, 38, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 2px 8px -4px
- **Badge** (“A”): background #fcfcfc · text #737373 · radius 0px · padding 0px · 400 10px Unica77
- **Navigation item** (“Use cases Revenue and Retention ARR Dail”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Unica77

## Do

- Use the warm canvas as the dominant background.
- Set major headlines in the measured condensed serif style.
- Keep demo CTAs orchid with white text.
- Show product interfaces as substantial, carefully framed panels.
- Use muted gray for secondary copy and labels.
- Preserve generous gaps between major page sections.

## Don't

- Do not turn the page into a dark interface.
- Do not use saturated accents as broad section fills.
- Do not replace the editorial display type with generic bold sans.
- Do not crowd the hero with product details.
- Do not add heavy shadows to every surface.
- Do not treat colors inside product mockups as brand palette colors.

## Agent prompt

Build a new Equals-style SaaS page on a warm Paper Canvas (#faf9f5), using True Ink (#000000) for navigation and key text, Graphite Text (#262626) and Muted Graphite (#646462) for secondary hierarchy, and Card White (#ffffff) for product panels. Use a large condensed editorial serif for the main headline and a restrained sans such as Unica77 or Inter for body copy and controls. Keep Orchid Action (#b074ce) limited to primary pill-shaped CTAs. Center the opening message and email form, then organize content into spacious, left-aligned feature narratives with large, realistic analytics UI panels. Use customer proof, thin rules, subtle borders, and only gentle shadows. Maintain broad margins, comfortable section spacing, and a calm visual hierarchy; do not borrow product-mockup colors as page accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy above an email demo form; customer logos fill the lower portion. | email capture, demo conversion, customer proof | oversized serif headline, pill CTA, logo cloud, soft edge graphics |
| 2 | product-showcase | Left-aligned section heading followed by a large workbook interface demonstration. | trust narrative, product demonstration | numbered eyebrow, serif heading, layered workbook UI |
| 3 | feature-grid | Three use-case prompts sit above a broad analytics interface demonstration. | use-case discovery, workflow examples | three-column prompts, analytics mockup, subtle card framing |
| 4 | video | Full-bleed video section set on a pale gray band. | watch product demo | full-width media, muted surface band |
| 5 | product-showcase | Multiple product examples arranged in a broad multi-column grid. | workflow exploration, product proof | repeated UI cards, dashboard previews, light borders |
| 6 | feature-split | Editorial heading above a two-column explanation with layered illustration and supporting labels. | platform explanation, concept clarification | layered warehouse illustration, three-part labels |
| 7 | testimonials | A horizontal customer quote row with quote copy and a compact attribution area. | social proof, customer attribution | testimonial row, portrait, thin separator |
| 8 | testimonials | Repeated horizontal quote-and-attribution row. | social proof, customer attribution | testimonial row, portrait, thin separator |
| 9 | testimonials | Repeated horizontal quote-and-attribution row. | social proof, outcome proof | testimonial row, portrait, customer logo |
| 10 | testimonials | Final horizontal quote-and-attribution row in the testimonial sequence. | social proof, customer attribution | testimonial row, portrait, customer logo |
| 11 | cta | Centered closing headline and email form over a softly tinted full-bleed background. | email capture, demo conversion | centered serif headline, pill input group, soft gradient |
| 12 | footer | Three link columns above a large brand wordmark and compact legal links. | site navigation, legal information | link columns, oversized wordmark, soft tinted ground |

## Source CSS custom properties (selected)

```css
--font-sans-serif: "Aeonik Pro",sans-serif;
--font-serif-condensed: "Serrif Condensed",serif;
--font-unica: "Unica77",sans-serif;
--font-fono: "Aeonik Fono",sans-serif;
--font-lato: "Lato",sans-serif;
--font-hubspot: "HubSpot Sans",sans-serif;
--font-inter: "Inter",sans-serif;
--font-anthropic-sans: "Anthropic Sans",sans-serif;
--font-anthropic-serif: "Anthropic Serif",Georgia,serif;
--brand-black: #000000;
--brand-white: #ffffff;
--brand-grey-1: #FAF9F5;
--brand-grey-2: rgba(0, 0, 0, 0.05);
--brand-grey-3: rgba(0, 0, 0, 0.08);
--brand-grey-4: rgba(0, 0, 0, 0.15);
--brand-grey-5: rgba(0, 0, 0, 0.6);
--brand-orchid: #B074CE;
--brand-green: #20A277;
--brand-glacier: #2DCBDC;
--brand-purple: #611848;
--brand-blue: #00B;
--brand-amber: #FF3716;
--brand-peach: #FFCC91;
--brand-yellow: #FFCC00;
--brand-aquamarine: #85FAC1;
--brand-sky: #C4F2F7;
```

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