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

# RevenueCat · Design System

> Quiet, spacious product storytelling in indigo and ink

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

RevenueCat’s homepage combines a restrained indigo-and-ink palette with spacious SaaS storytelling and layered product-interface previews. Alternating white and pale-gray sections organize feature explanations, proof points, case studies, and conversion prompts.

## North star

Keep the page calm and spacious, using dark ink for structure and indigo only to direct attention.

## Overview

The page uses a cool, nearly white canvas as a quiet backdrop for dark indigo typography and selective blue calls to action. A pale-gray hero establishes the tone, then long white product sections alternate with a broad light-gray paywall and testimonial band. Object Sans gives headlines a distinctive, tightly tracked shape; Helvetica Neue keeps body copy and much of the navigation understated. The desktop layout favors a centered content frame, broad whitespace, and repeated two- or three-column feature arrangements rather than dense text. Product UI illustrations carry the visual detail: they sit in soft, lightly bordered cards and layered interface compositions, while customer logos and statistics act as compact proof points. Hairline borders define inputs and cards; restrained shadows separate floating interface previews without making the site feel heavy. Blue is reserved for primary actions, links, metrics, and small highlights, with occasional warm red confined to brand marks or illustrative details.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Indigo | `#576ddb` | `--color-signal-indigo` | accent | Primary free-start buttons, inline links, headline metrics, and small interface highlights. |
| Midnight Ink | `#1f1f47` | `--color-midnight-ink` | brand | Main headings, navigation, body emphasis, button text in interface examples, and footer headings. |
| Cloud Gray | `#f9f9fb` | `--color-cloud-gray` | surface | Hero, paywall product-story band, testimonials, navigation treatment, footer, and pale cards. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, product cards, input field, case-study areas, and white section backgrounds. |
| Slate Text | `#3d3d5c` | `--color-slate-text` | neutral | Supporting copy, secondary navigation text, outlined sales action, and less-prominent interface labels. |
| Mist Border | `#eaedf6` | `--color-mist-border` | neutral | Card and input hairlines, subtle component outlines, and pale layered gradient edges. |
| Footer Slate | `#565674` | `--color-footer-slate` | neutral | Muted text used mainly in the footer. |
| Periwinkle Haze | `#d6dbf5` | `--color-periwinkle-haze` | accent | Soft gradient tint and occasional product-card background detail; not a core page surface. |
| Lavender Blue | `#c1c9f6` | `--color-lavender-blue` | accent | Occasional pale accent surface and illustrative background detail rather than a dominant brand color. |
| Muted Steel | `#6c7693` | `--color-muted-steel` | neutral | Minor subdued footer text detail. |
| Cool Divider | `#e3e6e8` | `--color-cool-divider` | neutral | Infrequent fine borders and footer details. |
| Blush Tint | `#f7d4d4` | `--color-blush-tint` | semantic | Warm radial gradient and product-card illustration detail, not a general page background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f9fb` (Cloud Gray) · `--color-surface-2` → `#c1c9f6` (Lavender Blue) · `--color-text` → `#1f1f47` (Midnight Ink) · `--color-text-muted` → `#3d3d5c` (Slate Text) · `--color-text-subtle` → `#565674` (Footer Slate) · `--color-border` → `#eaedf6` (Mist Border) · `--color-accent` → `#576ddb` (Signal Indigo) · `--color-accent-2` → `#c1c9f6` (Lavender Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1f1f47` | `#ffffff` | 15.61:1 | AAA |
| `#1f1f47` | `#f9f9fb` | 14.85:1 | AAA |
| `#1f1f47` | `#c1c9f6` | 9.63:1 | AAA |
| `#3d3d5c` | `#ffffff` | 10.39:1 | AAA |
| `#3d3d5c` | `#f9f9fb` | 9.88:1 | AAA |
| `#3d3d5c` | `#c1c9f6` | 6.41:1 | AA |
| `#565674` | `#ffffff` | 7.05:1 | AAA |
| `#565674` | `#f9f9fb` | 6.7:1 | AA |
| `#565674` | `#c1c9f6` | 4.35:1 | AA-large |
| `#576ddb` | `#ffffff` | 4.55:1 | AA |

### Gradients

- `linear-gradient(134deg, rgb(214, 219, 245) 0%, rgb(235, 237, 245) 100%)`
- `linear-gradient(to top in oklab, rgb(248, 249, 251) 85%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgb(249, 249, 251)), linear-gradient(97.59deg, rgba(234, 237, 246, 0.2) 4.12%, rgba(119, 165, 245, 0.2) 101.88%), linear-gradient(rgb(235, 238, 244))`
- `radial-gradient(72.29% 72.29% at 34.78% 32.94%, rgb(247, 212, 212) 0%, rgba(247, 212, 212, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| helveticaNeue | `--font-body` | webfont | 300, 400, 500 | Body copy and much of the navigation, with lighter text setting a restrained reading tone. | Inter |
| objectSans | `--font-display` | webfont | 400, 500, 700, 300 | Display and heading hierarchy, buttons, captions, and prominent links. | Space Grotesk |

- **helveticaNeue:** Mostly light-weight, sentence case, and open line spacing; avoid making paragraphs visually heavy.
- **objectSans:** Headlines use tight negative tracking and moderate weights; controls are compact, sentence case, and not all caps.

### Type scale — Perfect Fourth (ratio ≈ 1.303, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1.13 | -0.04em | — | objectSans | Large hero headline and other top-level campaign statements. |
| h1 | 56px | 500 | 1.13 | -0.04em | — | objectSans | Primary page heading, especially the homepage hero. |
| h2 | 48px | 300 | 1 | -0.04em | — | objectSans | Major section titles and centered feature-group introductions. |
| h3 | 40px | 500 | 1.13 | -0.04em | — | objectSans | Feature-card headings and secondary product-story titles. |
| h4 | 30px | 400 | 1.5 | -0.04em | — | objectSans | Smaller card and detail headings within product sections. |
| body | 16px | 300 | 1.5 | 0 | — | helveticaNeue | Explanatory paragraphs, case-study copy, and feature descriptions. |
| caption | 14px | 400 | 1.43 | 0 | — | objectSans | Compact labels, ratings, and supporting interface annotations. |
| button | 14px | 400 | 1.43 | 0 | — | objectSans | Primary and secondary action labels. |
| nav | 14px | 400 | 1.43 | 0 | — | objectSans | Top navigation and related menu labels. |
| link | 16px | 500 | 1.5 | 0 | — | objectSans | Inline feature links and case-study calls to action. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 6, 8, 12, 14, 16, 20, 24, 28, 32, 40, 44, 48 px.
- Section rhythm 120px · element gap 4px · card padding — · max content width 1216px.

Use a centered desktop content frame capped at the measured 1216px maximum, with a spacious density and long pauses between major sections. The hero is a three-part composition: left-aligned copy and signup form, layered product UI on the right, and a customer-logo row below. Feature storytelling alternates centered introductions with two- or three-column cards and offset split layouts. Broad white stretches contrast with continuous pale-gray bands. Keep text blocks short, align cards consistently, and use generous whitespace rather than filling every column.

## Shape & elevation

- Radius: button `4px` · input `9999px` · card `16px` · media `16px` · nav `4px` · link `4px` · xs `4px` · sm `16px` · md `32px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(71, 92, 133, 0.1) 5px 5px 20px 0px, rgba(144, 138, 208, 0.1`
- Shadow `hairline` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(61, 61, 92) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(73, 46, 107, 0.14) 0px 3px 16px 0px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(230, 233, 248, 0.7) 0px 6px 20px 0px, rgba(92, 112, 214, 0.`
- Shadow `lg-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(248, 230, 230, 0.6) 0px 6px 20px 0px, rgba(191, 64, 64, 0.1`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, with fine pale borders defining inputs and cards. Use soft, diffuse shadows selectively beneath floating product previews and prominent cards to create separation without heavy contrast. Rounded card corners soften the interface, while most section boundaries rely on changes in white and pale-gray surface rather than dividers.

## Imagery

Favor polished product-interface illustrations over editorial photography. Compose dashboards, paywall editors, charts, and mobile screens as layered mockups inside soft-edged cards, often with a small amount of overlap. Customer logos, ratings, and case-study marks provide quieter proof. Keep images bright and low-contrast against the pale canvas; colorful details belong inside the interface previews, not as broad decorative fields.

## Components

### Primary action

Use Signal Indigo #576ddb with white text for the free-start action; buttons are compact, rounded pills in the measured components.

### Sales action

Pair the primary action with a restrained outlined or text-style sales option, using Slate Text #3d3d5c rather than competing blue fill.

### Hero signup

Place a white, pill-shaped email input with a Mist Border #eaedf6 outline beside or directly joined to the blue primary action.

### Feature card

Use a white or very pale-gray card, subtle outline, and rounded corners; include a small illustration, clear title, short copy, and a blue text link.

### Product preview

Layer bright dashboard or mobile UI mockups with restrained shadows and soft edges; keep dark text and color accents within the interface.

### Case-study proof

Combine a client mark with a compact outcome-led quote and a small blue case-study link, leaving ample breathing room.

### Logo and trust row

Show customer marks or ratings in a light, low-contrast horizontal group, keeping them subordinate to page headings.

### Measured component styles

- **Primary button** (“Start for free”): background #576ddb · text #ffffff · radius 3.35544e+07px · padding 0px 28px · 500 16px objectSans
- **Secondary button** (“Contact sales”): transparent background · text #3d3d5c · border 1px solid #abb3ba · radius 3.35544e+07px · padding 0px 18px · 500 14px objectSans
- **Link** (“For engineering teams”): transparent background · text #576ddb · radius 4px · padding 0px · 500 16px objectSans
- **Input**: background #ffffff · text #1f1f47 · border 1px solid #eaedf6 · radius 3.35544e+07px · padding 20px 176px 20px 28px · 400 16px objectSans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“Your subscription backend-in-a-box Reven”): background #f8f9fb · text #1f1f47 · border 1px solid #eaedf6 · radius 16px · padding 0px · 400 16px helveticaNeue
- **Navigation item** (“Why RevenueCat? Solutions Developers Res”): transparent background · text #1f1f47 · radius 0px · padding 0px · 400 16px helveticaNeue

## Do

- Use Cloud Gray #f9f9fb and Gallery White #ffffff as the main alternating surfaces.
- Set prominent headings in Object Sans with tight tracking and Midnight Ink #1f1f47.
- Reserve Signal Indigo #576ddb for primary actions, links, and concise data highlights.
- Give feature explanations generous space and short, clearly grouped copy.
- Use product-interface mockups to demonstrate functionality.
- Separate cards with delicate Mist Border #eaedf6 hairlines and soft shadows.

## Don't

- Do not turn the page into a dense dashboard or packed text grid.
- Do not use bright blue as a full-width background.
- Do not add heavy, high-contrast shadows to every card.
- Do not use warm illustration colors as the primary brand palette.
- Do not make headings or navigation all caps.
- Do not fill whitespace with unrelated decorative photography.

## Agent prompt

Build a new RevenueCat-style SaaS page with a calm, spacious rhythm and a clear product-story hierarchy. Use Cloud Gray #f9f9fb and Gallery White #ffffff for alternating surfaces, Midnight Ink #1f1f47 for headlines, and Slate Text #3d3d5c for supporting copy. Apply Signal Indigo #576ddb sparingly to primary actions, links, and key metrics. Use Object Sans or a close geometric substitute for headings and controls, and a neutral sans-serif for body copy. Arrange a centered desktop content frame with short copy blocks, generous whitespace, product UI previews, feature cards, customer proof, and a final conversion prompt. Keep edges lightly bordered with Mist Border #eaedf6 and use soft shadows only for floating previews. Avoid dense layouts, large saturated color fields, and unrelated photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Pale-gray, three-column hero with left copy and signup, right layered product UI, and metrics below. | Email signup, Primary free-start action, Product proof metrics | Dark oversized headline, Pill-shaped input, Layered interface preview |
| 2 | logo-cloud | Single horizontal customer-logo strip on white. | Social proof | Muted brand marks, Even horizontal alignment |
| 3 | other | Centered heading and brief supporting paragraph on white. | Feature orientation | Centered heading, Short supporting copy |
| 4 | feature-grid | Six-column measured section with team cards arranged across the content area. | Explore by role, Inline learn-more links | Small colored icons, Pale cards, Short descriptions |
| 5 | product-showcase | Centered introduction followed by three product cards. | Feature comparison by benefit | Product illustrations, Three-column cards, Soft outlines |
| 6 | integrations | Wide horizontal panel with copy on one side and platform icons on the other. | Documentation link, Free-tier reassurance | Wide bordered panel, Platform logo cluster |
| 7 | testimonials | Two-column case study with client logo and outcome-led copy. | Read case study | Client mark, Highlighted result, Minimal link |
| 8 | other | Tall pale-gray section with generous open space. | Visual pause | Continuous light surface, Sparse content |
| 9 | other | Centered heading and short supporting sentence on pale gray. | Product introduction | Centered title, Minimal supporting copy |
| 10 | feature-split | Two-column section with text on one side and product area on the other. | Explain customization | Asymmetric split, Open visual space |
| 11 | feature-split | Two-column feature section on the continuous pale-gray band. | Learn about targeting | Headline and copy, Inline blue link |
| 12 | feature-split | Two-column feature section with text and supporting product visual. | Learn about experimentation | Short explanatory copy, Inline link |
| 13 | testimonials | Two-column customer proof block with logo, quote, and result. | Read case study | Outcome highlighted in text, Small client mark |
| 14 | other | Open white spacer before the next product-story group. | Visual pause | White canvas, No dense content |
| 15 | feature-grid | Centered heading above three product-feature cards. | Scan feature benefits | Three columns, Interface illustrations, Short captions |
| 16 | testimonials | Two-column case-study block with client mark and quote. | Customer validation, Read case study | Quote-led copy, Client logo |
| 17 | feature-grid | Centered section introduction followed by a two-column, four-card grid. | Explore support tools | Product UI previews, Compact card captions, Soft card treatment |
| 18 | testimonials | Two-column customer proof section with logo and outcome copy. | Read case study | Highlighted result, Client mark |
| 19 | other | Open white spacer before the testimonial and customer-proof band. | Visual pause | White canvas, Generous separation |
| 20 | other | Centered heading on the pale-gray testimonial surface. | Set context for proof | Centered headline, Light background |
| 21 | testimonials | Four-column testimonial area with a featured quote and a row of customer choices. | Switch between customer stories, Case-study action | Large quote card, Logo selector, Outcome metric |
| 22 | reviews | Centered title above four trust and rating cards. | Trust validation | Rating cards, Certification marks, White background |
| 23 | cta | Centered conversion message with paired action links. | Start for free, Talk to sales | Large heading, Blue pill button, Secondary text link |
| 24 | footer | Pale-gray footer with four navigation columns and a utility row. | Browse grouped links, Language selection, Privacy controls | Multi-column link lists, Store badges, Brand and social marks |

## Source CSS custom properties (selected)

```css
--primary: 240 39% 20%;
--foreground: 240 39% 20%;
--primary-blue: 230 65% 60%;
--secondary-red: 357 86% 64%;
--secondary-blue-1: 230 65% 60%;
--secondary-blue-2: 230 50% 48%;
--secondary-green: 155 85% 45%;
--border: 240 39% 20%;
--font-locale-sans: ui-sans-serif,system-ui,sans-serif;
```

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