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

# Arcade · Design System

> A calm canvas for vivid product stories

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

Arcade pairs a restrained SaaS interface with luminous blue gradients and product-led storytelling. The long homepage alternates concise editorial copy with large demonstrations, customer proof, and clear signup actions.

## North star

Keep the page mostly white and editorial, reserving saturated blue gradients for high-impact product moments and primary actions.

## Overview

Arcade’s visual strategy begins with a white canvas and a compact, dark navigation, then introduces an unusually vivid blue-and-cyan gradient behind the hero’s product-entry form. That saturated field is the page’s signature moment; it contrasts with the quieter white space and pale-gray feature panels used further down. Inter Variable carries the experience throughout, with crisp, tightly tracked headlines, restrained body copy, and medium-weight navigation. The layout keeps content centered within a measured 1080px maximum width, but varies alignment to make each section feel purposeful: centered statements, split feature explanations, tiled process steps, and compact proof cards. Screenshots, video previews, interface mockups, and customer marks provide the visual substance instead of decorative photography. Soft corners, fine borders, and layered shadows make interactive objects feel tangible without making the page dense. A dark integration panel creates a focused contrast near the bottom.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, white cards, and the light content areas surrounding product demonstrations. |
| Slate Copy | `#4b5563` | `--color-slate-copy` | neutral | Muted paragraph text, secondary navigation links, and supporting copy within feature cards. |
| Midnight Ink | `#111827` | `--color-midnight-ink` | neutral | Primary headings, navigation emphasis, inverse dark surfaces, and high-contrast text. |
| Mist Surface | `#f9fafb` | `--color-mist-surface` | surface | Subtle feature-card backgrounds and pale navigation or content surfaces. |
| Quiet Hairline | `#e5e7eb` | `--color-quiet-hairline` | semantic | Fine input and navigation borders that separate controls without adding visual weight. |
| Arcade Blue | `#2142e7` | `--color-arcade-blue` | accent | Primary signup buttons, small active interface details, and the measured brand accent. |
| Cloud Tint | `#f3f4f6` | `--color-cloud-tint` | surface | Pale gradient endpoint and occasional soft section or control backgrounds. |
| Blue Slate | `#34405a` | `--color-blue-slate` | neutral | A secondary heading shade detected in measured data; use sparingly for supporting display text. |
| Graphite Gray | `#414652` | `--color-graphite-gray` | neutral | Subtle heading text detected in the palette; secondary to the site’s dominant ink color. |
| Soft Pewter | `#70747d` | `--color-soft-pewter` | neutral | Occasional low-emphasis text and gradient details, not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9fafb` (Mist Surface) · `--color-surface-2` → `#111827` (Midnight Ink) · `--color-text` → `#111827` (Midnight Ink) · `--color-text-muted` → `#4b5563` (Slate Copy) · `--color-border` → `#e5e7eb` (Quiet Hairline) · `--color-accent` → `#2142e7` (Arcade Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111827` | `#ffffff` | 17.74:1 | AAA |
| `#111827` | `#f9fafb` | 16.98:1 | AAA |
| `#4b5563` | `#ffffff` | 7.56:1 | AAA |
| `#4b5563` | `#f9fafb` | 7.23:1 | AAA |
| `#4b5563` | `#111827` | 2.35:1 | fail |
| `#2142e7` | `#ffffff` | 7.01:1 | AAA |
| `#2142e7` | `#f9fafb` | 6.7:1 | AA |
| `#2142e7` | `#111827` | 2.53:1 | fail |

### Gradients

- `linear-gradient(rgb(255, 255, 255), rgb(243, 244, 246))`
- `linear-gradient(92deg, rgb(17, 24, 39) 70%, rgba(30, 43, 72, 0.9) 95%)`
- `linear-gradient(102deg, rgb(17, 24, 39) 70%, rgba(30, 43, 72, 0.9) 90%)`
- `linear-gradient(110deg, rgb(255, 255, 255) 50.64%, rgba(255, 255, 255, 0.4) 90%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Variable | `--font-body` | webfont | 400, 500, 600 | Site-wide typography for headlines, body copy, navigation, buttons, links, and captions. | Inter |

- **Inter Variable:** Use the measured 400, 500, and 600 weights. Headlines are compact and slightly negatively tracked; keep casing natural and avoid all-caps.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | 1.08 | -0.02em | — | Inter Variable | Hero headline; large, centered, tightly tracked product promise. |
| h2 | 36px | 500 | 1.17 | -0.015em | — | Inter Variable | Major section headings for product, workflow, and customer storytelling. |
| h3 | 32px | 500 | 1.13 | -0.01em | — | Inter Variable | Feature or use-case headings within secondary page sections. |
| h4 | 30px | 600 | 1.2 | 0 | — | Inter Variable | Compact emphatic headings and supporting feature titles. |
| body | 16px | 400 | 1.5 | 0 | — | Inter Variable | Paragraphs explaining product value, workflow, and use cases. |
| caption | 14px | 400 | 1.25 | 0 | — | Inter Variable | Small labels, attribution, helper text, and supporting interface details. |
| button | 14px | 600 | 1.43 | 0 | — | Inter Variable | Signup and other primary or secondary action labels. |
| nav | 14px | 500 | 1.43 | 0 | — | Inter Variable | Top-level navigation items and menu labels. |
| link | 14px | 400 | 1.25 | 0 | — | Inter Variable | Inline actions, customer-story links, and footer navigation. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 32, 96 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width 1080px.

Use a centered content frame with a measured 1080px maximum width and a spacious vertical rhythm, including the measured 96px section gap. The page moves between centered hero and section introductions, left-aligned split features, multi-column process cards, and compact customer-proof tiles. Keep the overall density low: short copy blocks sit beside or above large product visuals. Use generous white margins to separate sections rather than relying on colored bands; reserve the strong dark panel for integrations.

## Shape & elevation

- Radius: button `12px` · input `16px` · card `16px` · media `50%` · nav `12px` · link `16px` · xs `6px` · sm `8px` · md `12px` · lg `16px` · xl `24px`
- Shadow `inset` (other): `rgba(17, 24, 39, 0.2) 0px 8px 8px 0px, rgba(17, 24, 39, 0.1) 0px 4px 4px 0px, rgba(17, 24, 39, 0.1) 0px 2px 2px 0px, rgba(17, 24, 39, 0.1) 0px 0px 0px 1px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px in`
- Shadow `hairline` (link, other): `rgba(17, 24, 39, 0.12) 0px 0px 0px 1px`
- Shadow `lg` (other, card): `rgba(17, 24, 39, 0.12) 0px 0px 0px 1px, rgba(17, 24, 39, 0.03) 0px 2px 2px -2px, rgba(17, 24, 39, 0.03) 0px 4px 4px 0px, rgba(17, 24, 39, 0.03) 0px 8px 8px 0px, rgba(17, 24, 39, 0.03) 0px 16px 16px 0p`
- Shadow `xl` (button, nav, link): `rgba(17, 24, 39, 0.04) 0px 32px 32px 0px, rgba(17, 24, 39, 0.04) 0px 16px 16px 0px, rgba(17, 24, 39, 0.04) 0px 8px 8px 0px, rgba(17, 24, 39, 0.04) 0px 4px 4px -2px, rgba(17, 24, 39, 0.04) 0px 2px 2px `
- Shadow `xl-2` (button): `rgba(17, 24, 39, 0.04) 0px 32px 32px 0px, rgba(17, 24, 39, 0.04) 0px 16px 16px 0px, rgba(17, 24, 39, 0.04) 0px 8px 8px 0px, rgba(17, 24, 39, 0.04) 0px 4px 4px -2px, rgba(17, 24, 39, 0.04) 0px 2px 2px `
- Shadow `lg-2` (nav, text): `rgba(17, 24, 39, 0.1) 0px 0px 0px 1px, rgba(17, 24, 39, 0.04) 0px 1px 1px -0.5px, rgba(17, 24, 39, 0.04) 0px 3px 3px -1.5px, rgba(17, 24, 39, 0.04) 0px 6px 6px -3px, rgba(17, 24, 39, 0.04) 0px 12px 12`
- Motion: standard transition `0.2s ease` on interactive elements.

Most sections remain flat against white, with pale-gray card surfaces and fine borders doing the structural work. Use measured soft, layered shadows to lift interface previews, floating controls, and primary actions. Rounded corners are consistent across buttons, cards, and inputs; avoid heavy outlines or dramatic shadows on ordinary content.

## Imagery

Treat product interfaces and videos as the primary imagery: large, clean, lightly framed previews, screenshots, and animated product demonstrations. The hero uses an atmospheric blue-to-cyan field behind a simple URL-entry control. Customer logos and interface marks add proof without dominating. Avoid lifestyle photography; the screenshot’s vivid green and other bright demo colors belong inside product media, not the core brand palette.

## Components

### Top navigation

Compact logo and text links across the top, with a quiet sales action beside a blue signup button. Navigation text uses Inter and muted slate tones.

### Hero product entry

Centered headline and brief supporting copy over a luminous blue gradient, followed by mode toggles and a wide rounded URL input.

### Primary signup button

Arcade Blue #2142e7 fill, white label, 12px radius, and measured 14px semibold button typography.

### Product preview

Large video or interface mockup, frequently paired with a soft glow or pale surface and a restrained layered shadow.

### Feature card

Light #f9fafb surface with a 16px radius, muted explanatory copy, and product media as the focal point.

### Customer proof tiles

A compact collection of customer logos, quotations, or outcome figures on white cards with subtle borders and shadows.

### Dark integrations panel

Rounded Midnight Ink #111827 panel with centered light copy, a small light CTA, and a horizontal strip of integration marks.

### Measured component styles

- **Primary button** (“Sign up for free”): background #2142e7 · text #ffffff · radius 12px · padding 10px 16px · 600 14px Inter Variable · shadow rgba(17, 24, 39, 0.04) 0px 32px 32px 0px, rgba(17, 24, 39, 0.04) 0px 16px 16px 0
- **Secondary button** (“Arcade on Twitter”): background #f3f4f6 · text #111827 · radius 50% · padding 0px · 400 14px Inter Variable
- **Link** (“AI Videos”): transparent background · text #4b5563 · radius 0px · padding 8px · 400 14px Inter Variable
- **Input**: transparent background · text #111827 · border 1px solid #e5e7eb · radius 16px · padding 0px 114px 0px 16px · 400 14px Inter Variable
- **Card** (“No designer needed Set up a Brand Kit Pu”): background #f9fafb · text #4b5563 · radius 16px · padding 0px · 400 20px Inter Variable
- **Navigation item** (“Product Solutions Resources Enterprise P”): transparent background · text #4b5563 · radius 0px · padding 0px · 400 16px Inter Variable

## Do

- Keep most page surfaces white and uncluttered.
- Use the blue gradient as a focused hero or media treatment.
- Set headlines in Inter with a compact, confident rhythm.
- Pair concise copy with product-interface visuals.
- Use Arcade Blue #2142e7 for primary signup actions.
- Separate sections with generous white space.
- Use subtle borders and soft elevation for previews.

## Don't

- Do not make every section a colored panel.
- Do not use saturated blue as a general page background.
- Do not treat bright demo-media colors as brand colors.
- Do not crowd product screenshots with decorative elements.
- Do not use heavy borders or harsh shadows on every card.
- Do not replace the clean interface aesthetic with lifestyle photography.

## Agent prompt

Build a new SaaS page in Arcade’s calm, product-led visual style. Use Gallery White #ffffff as the main canvas, Midnight Ink #111827 for headings, and Slate Copy #4b5563 for secondary text. Apply Arcade Blue #2142e7 to the primary action only; use Mist Surface #f9fafb and Cloud Tint #f3f4f6 for restrained supporting surfaces. Set all text in Inter, with compact, slightly tight headlines and clear, readable body copy. Structure the page within a centered 1080px maximum-width frame, using generous section spacing and a mix of centered introductions, split features, and product-preview cards. Make real interface visuals the focal point. Use fine borders, rounded controls, and soft layered shadows; reserve dramatic color treatment for a single hero or featured media moment.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width hero with top navigation; centered headline and product URL entry over a blue gradient. | Primary signup action, Video/demo mode toggle, Website URL input | Compact navigation, Large centered headline, Blue gradient background, Cookie consent panel |
| 2 | logo-cloud | Short centered trust statement followed by a horizontal row of customer logos. | Social proof | Muted customer marks, Single-line logo strip |
| 3 | video | Centered heading and short introduction above a large, full-bleed product video preview. | Product demonstration, Video-led explanation | Centered text, Large interface preview, Soft blue glow |
| 4 | feature-split | Four-column section with heading and copy aligned beside a prominent video demonstration. | Feature explanation, Product demonstration | Split text and media, Pale panel, Rounded video frame |
| 5 | testimonials | Single centered testimonial with rating, quote, and customer attribution. | Customer endorsement | Centered quotation, Rating marks, Small attribution |
| 6 | how-it-works | Two-column introduction followed by a spacious grid of process steps and interface imagery. | Workflow overview, Step-by-step explanation | Alternating text and screenshots, Multi-column feature grid |
| 7 | feature-split | Centered section introduction, team-category tabs, then text and product preview in a split layout. | Audience selection tabs, Use-case exploration, Learn more link | Centered heading, Horizontal tab row, Alternating feature content |
| 8 | integrations | Wide dark rounded panel with centered copy, CTA, and a horizontal row of integration icons. | Explore integrations | Midnight panel, Centered content, Icon strip |
| 9 | stats | Left-aligned section heading over an asymmetrical grid of customer outcome cards. | Customer outcome proof, Case-study links | Logo-led cards, Large metric figures, Light dividers |
| 10 | cta | Concise heading alongside two distinct actions in a two-column closing band. | Free signup, Talk to an expert | Simple CTA band, Primary and secondary actions |
| 11 | footer | Multi-column footer navigation, social links, and an email subscription area. | Newsletter signup, Social links, Footer navigation | Five-column link groups, Email input, Large low-contrast brand mark |

## Source CSS custom properties (selected)

```css
--new-text-dim-black: #4b5563;
--primary-700: #182fa5;
--primary-600: #2142e7;
--primary-500: #4460ed;
--card-bg-white: #f9fafb;
--card-bg-yellow: #fffaea;
--card-bg-blue: #f1f3fe;
--card-bg-green: #e7faef;
--card-bg-pink: #fff2fc;
--card-bg-red: #fff3f4;
--_new-brand---900: black;
--_new-brand---content: "Inter Variable",Arial,sans-serif;
--_new-brand---white: white;
--_new-brand---700: #404040;
--_new-brand---200: #e7e7e7;
--_new-brand---50: #fafafa;
--_new-brand---100: #f4f4f4;
--_new-brand---heading: "Inter Display",Arial,sans-serif;
--_new-brand---header-size: 72px;
--_new-brand---300: #d4d4d4;
--_new-brand---400: #a2a2a2;
--_new-brand---500: #717171;
--_new-brand---600: #545454;
--_new-brand---800: #282828;
```

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