Arcade以克制清爽的软件界面，搭配明亮的蓝色渐变和产品演示，突出产品故事创作。长页面通过简洁文案、功能展示、客户案例和醒目的注册入口，引导用户逐步了解产品。
North star · Keep the page mostly white and editorial, reserving saturated blue gradients for high-impact product moments and primary actions.
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.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
强调色
Arcade Blue
#2142e7
Primary signup buttons, small active interface details, and the measured brand accent.
表层色
Gallery White
#ffffff
Main page canvas, white cards, and the light content areas surrounding product demonstrations.
Mist Surface
#f9fafb
Subtle feature-card backgrounds and pale navigation or content surfaces.
Cloud Tint
#f3f4f6
Pale gradient endpoint and occasional soft section or control backgrounds.
中性色
Slate Copy
#4b5563
Muted paragraph text, secondary navigation links, and supporting copy within feature cards.
Midnight Ink
#111827
Primary headings, navigation emphasis, inverse dark surfaces, and high-contrast text.
Blue Slate
#34405a
A secondary heading shade detected in measured data; use sparingly for supporting display text.
Graphite Gray
#414652
Subtle heading text detected in the palette; secondary to the site’s dominant ink color.
Soft Pewter
#70747d
Occasional low-emphasis text and gradient details, not a defining brand color.
功能色
Quiet Hairline
#e5e7eb
Fine input and navigation borders that separate controls without adding visual weight.
文字 背景 对比度 WCAG #111827 Midnight Ink#ffffff Gallery White17.74:1 AAA #111827 Midnight Ink#f9fafb Mist Surface16.98:1 AAA #4b5563 Slate Copy#ffffff Gallery White7.56:1 AAA #4b5563 Slate Copy#f9fafb Mist Surface7.23:1 AAA #4b5563 Slate Copy#111827 Midnight Ink2.35:1 不达标 #2142e7 Arcade Blue#ffffff Gallery White7.01:1 AAA
字体 字号阶梯：Perfect Fourth（比例约 1.316，正文 16px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Inter Variable 网络字体 · 字重 400 / 500 / 600 · 占比 100%
免费替代：Inter
Site-wide typography for headlines, body copy, navigation, buttons, links, and captions.
角色 示例 字号 字重 行高 字距 一级标题 Hero headline; large, centered, tightly tracked product promise.
Arcade
48px 600 1.08 -0.02em 二级标题 Major section headings for product, workflow, and customer storytelling.
Arcade
36px 500 1.17 -0.015em 三级标题 Feature or use-case headings within secondary page sections.
Arcade
32px 500 1.13 -0.01em 四级标题 Compact emphatic headings and supporting feature titles.
Arcade
30px 600 1.2 0 正文 Paragraphs explaining product value, workflow, and use cases.
The quick brown fox 敏捷的狐狸
16px 400 1.5 0 辅助文字 Small labels, attribution, helper text, and supporting interface details.
The quick brown fox 敏捷的狐狸
14px 400 1.25 0 按钮 Signup and other primary or secondary action labels.
The quick brown fox 敏捷的狐狸
14px 600 1.43 0 导航 Top-level navigation items and menu labels.
The quick brown fox 敏捷的狐狸
14px 500 1.43 0 链接 Inline actions, customer-story links, and footer navigation.
The quick brown fox 敏捷的狐狸
14px 400 1.25 0
间距与布局 基准单位 8px · 密度：宽松
96px 版块间距
8px 元素间距
— 卡片内边距
1080px 内容最大宽度
4px
6px
8px
10px
12px
16px
20px
24px
32px
96px
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.
圆角与层次 inset · other
hairline · link, other
lg · other, card
xl · button, nav, link
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.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
页面版块 共 11 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 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. ✕ 不该做 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. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 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.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
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 | ` | `--color-gallery-white` | surface | Main page canvas, white cards, and the light content areas surrounding product demonstrations. |
| Slate Copy | ` | `--color-slate-copy` | neutral | Muted paragraph text, secondary navigation links, and supporting copy within feature cards. |
| Midnight Ink | ` | `--color-midnight-ink` | neutral | Primary headings, navigation emphasis, inverse dark surfaces, and high-contrast text. |
| Mist Surface | ` | `--color-mist-surface` | surface | Subtle feature-card backgrounds and pale navigation or content surfaces. |
| Quiet Hairline | ` | `--color-quiet-hairline` | semantic | Fine input and navigation borders that separate controls without adding visual weight. |
| Arcade Blue | ` | `--color-arcade-blue` | accent | Primary signup buttons, small active interface details, and the measured brand accent. |
| Cloud Tint | ` | `--color-cloud-tint` | surface | Pale gradient endpoint and occasional soft section or control backgrounds. |
| Blue Slate | ` | `--color-blue-slate` | neutral | A secondary heading shade detected in measured data; use sparingly for supporting display text. |
| Graphite Gray | ` | `--color-graphite-gray` | neutral | Subtle heading text detected in the palette; secondary to the site’s dominant ink color. |
| Soft Pewter | ` | `--color-soft-pewter` | neutral | Occasional low-emphasis text and gradient details, not a defining brand color. |
### Semantic aliases
`--color-canvas` → ` (Gallery White) · `--color-surface` → ` (Mist Surface) · `--color-surface-2` → ` (Midnight Ink) · `--color-text` → ` (Midnight Ink) · `--color-text-muted` → ` (Slate Copy) · `--color-border` → ` (Quiet Hairline) · `--color-accent` → ` (Arcade Blue) · `--color-on-accent` → ` (Gallery White)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 17.74:1 | AAA |
| ` | ` | 16.98:1 | AAA |
| ` | ` | 7.56:1 | AAA |
| ` | ` | 7.23:1 | AAA |
| ` | ` | 2.35:1 | fail |
| ` | ` | 7.01:1 | AAA |
| ` | ` | 6.7:1 | AA |
| ` | ` | 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 ### Product preview
Large video or interface mockup, frequently paired with a soft glow or pale surface and a restrained layered shadow.
### Feature card
Light ### 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 ### Measured component styles
- **Primary button** (“Sign up for free”): background ## 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 ## 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 ## 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: 
