expo.dev
设计示例预览
←
返回全部设计模板
Expo
适合开发者工具、文档和预览平台，白底、黑色 8px CTA、设备 mockup 与代码面板让能力表达轻快清楚。
工程工具 柔和渐变
配色方案
4 colors #000000
#ffffff
#cfe7ff
#0d74ce
字体排版
Aa
Inter
字重 600 · 字距 -0.03em
形状与组件
按钮
圆角 12px · 按钮 8px
相关模板
查看更多 →
查看提示词
---
version: alpha
name: "Expo"
description: "Expo 的 DESIGN.md 中文参考模板，保留原始 design token 与专业术语，覆盖 color system、typography、layout、components、motion 与 interaction states。"
language: zh-CN
sourceLanguage: en
---
## 概览
Expo 的 marketing site 读起来像一个安静自信的 React-Native developer platform。Base canvas 是 **pure white**（`{colors.canvas}` — #ffffff），hero band 后方有柔和的 **sky-blue gradient atmospheric wash**。Near-black ink `{colors.ink}` (#171717) 同时承载 body 和 display。唯一 brand voltage 是 primary CTA 使用的 **pure black**（`{colors.primary}` — #000000），minimal 且有 editorial 感。小范围 blue text-link accent（`{colors.text-link}` — #0d74ce）只保留给 inline body link，绝不作为 CTA。
Type 使用 **Inter** 作为唯一 sans family，并保持 modest weight（display 600，body 400）。JetBrains Mono 承担每个 code surface。没有 custom typeface；品牌信任 Inter 的 editorial neutrality。
品牌最强的 visual signature 是 **device-mockup hero**：居中的 MacBook + iPhone composite，展示真实 Expo dev surface（Expo Studio、EAS Build dashboard、Expo Go simulator），并位于 sky-blue gradient atmospheric wash 上方。这个 composite 是页面 chrome，而不是 illustration。
**Key Characteristics:**
- Pure white canvas，只在 hero 中使用 sky-blue gradient atmospheric backdrop。
- 单一 primary CTA：`{rounded.md}` (8px) 的 pure black pill，体现 compact developer-tool dialect。
- Text-link blue（`{colors.text-link}`）只用于 inline link，绝不用于 CTA。
- Inter 是唯一 sans family，没有 custom display typeface。
- 每个 code surface 都使用 JetBrains Mono。
- 带真实 Expo product surface 的 device-mockup hero 就是 brand chrome。
- Hairline + soft drop depth；hero 之外没有 atmospheric brand decoration。
- 96px section rhythm。
## Colors
### Brand & Accent
- **Black** (`{colors.primary}` — #000000): Primary CTA fill，使用克制。
- **Black Active** (`{colors.primary-active}` — #1a1a1a): Press state。
- **Text Link Blue** (`{colors.text-link}` — #0d74ce): Long-form copy 内的 inline body link。范围很窄，绝不用于 CTA。
- **Legal Link Blue** (`{colors.text-link-secondary}` — #476cff): Legal copy footer 内的 inline link。
- **Bright Cyan** (`{colors.accent-link-bright}` — #47c2ff): 极少用于 docs widget link 内部。
### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): Pure white page floor。
- **Canvas Soft** (`{colors.canvas-soft}` — #fafafa): Subtle alternating band。
- **Surface Card** (`{colors.surface-card}` — #ffffff): Pure white card。
- **Surface Strong** (`{colors.surface-strong}` — #f0f0f3): Badge、ecosystem tile、secondary button。
- **Surface Dark** (`{colors.surface-dark}` — #171717): Dark feature card、code block、IDE mockup、featured pricing。
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #1a1a1a): Dark card 内部更亮一步。
### Atmospheric Backdrop
- **Sky Light** (`{colors.gradient-sky-light}` — #cfe7ff) + **Sky Mid** (`{colors.gradient-sky-mid}` — #a8c8e8): 只用于 homepage hero 后方的 soft sky-blue gradient wash。不是 brand action color。
### Hairlines
- **Hairline** (`{colors.hairline}` — #f0f0f3): 默认 1px divider。
- **Hairline Soft** (`{colors.hairline-soft}` — #f5f5f7): 更浅的 divider。
- **Hairline Strong** (`{colors.hairline-strong}` — #dcdee0): 更强的 panel outline。
### Text
- **Ink** (`{colors.ink}` — #171717): Display、body emphasis。
- **Body** (`{colors.body}` — #60646c): Default running-text，略 cool gray。
- **Body Strong** (`{colors.body-strong}` — #171717): 与 ink 相同。
- **Muted** (`{colors.muted}` — #999999): Sub-title。
- **Muted Soft** (`{colors.muted-soft}` — #cccccc): Disabled text。
- **On Primary** (`{colors.on-primary}` — #ffffff): Black CTA 上的 white text。
- **On Dark** (`{colors.on-dark}` — #ffffff): Dark card 上的 white text。
- **On Dark Soft** (`{colors.on-dark-soft}` — #b0b4ba): Dark 上的 muted off-white。
### Semantic Colors
- **Warning** (`{colors.accent-warning}` — #ab6400): Docs callout 内的 warning text。
- **Preview** (`{colors.accent-preview}` — #8145b5): "Preview" tag color。
- **Success** (`{colors.semantic-success}` — #16a34a): Confirmation state。
- **Error** (`{colors.semantic-error}` — #eb8e90): Validation error。
## Typography
### Font Family
**Inter** 是所有 text role 的唯一 sans family。**JetBrains Mono** 承担每个 code surface。Fallback: `-apple-system, system-ui, sans-serif`。
### Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
| `{typography.display-mega}` | 64px | 600 | 1.05 | -1.92px | Homepage hero h1 |
| `{typography.display-xl}` | 48px | 600 | 1.1 | -1.44px | Subsidiary hero |
| `{typography.display-lg}` | 36px | 600 | 1.15 | -1.08px | Section head |
| `{typography.display-md}` | 28px | 600 | 1.2 | -0.84px | Sub-section head |
| `{typography.display-sm}` | 22px | 600 | 1.25 | -0.5px | Card group title |
| `{typography.title-md}` | 18px | 600 | 1.4 | 0 | Component title |
| `{typography.title-sm}` | 16px | 600 | 1.4 | 0 | List label |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body |
| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body |
| `{typography.caption}` | 13px | 400 | 1.4 | 0 | Photo caption |
| `{typography.caption-uppercase}` | 11px | 600 | 1.4 | 0.88px | Section label、badge |
| `{typography.code}` | 13px | 400 | 1.5 | 0 | Code block：JetBrains Mono |
| `{typography.button}` | 14px | 500 | 1.0 | 0 | CTA label |
| `{typography.nav-link}` | 14px | 500 | 1.4 | 0 | Top-nav menu |
### Principles
- **Display weight 保持 600**，自信但不夸张。Inter 600 比 700 更干净。
- **Display 使用 negative letter-spacing**，tracking 范围为 -0.5px 到 -1.92px。
- **每个 code surface 都使用 JetBrains Mono。**
### Font Substitutes
Inter 和 JetBrains Mono 都可免费获取；系统直接使用它们。
## Layout
### Spacing System
- **Base unit:** 4px.
- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 96px.
- **Section padding:** 96px.
### Grid & Container
- Max content width: 约 1200px。
- Editorial body: 12-column grid。
- Feature card grid: hero split 在 desktop 为 2-up，benefit grid 为 3-up。
- Ecosystem tile grid: desktop 为 8-up。
- Footer: desktop 为 5-column。
### Whitespace Philosophy
宽松的 editorial pacing。White canvas 不与 hero 的 gradient sky wash 竞争；dense workflow section 内的 card 靠得较近（16-24px gap）。
## Elevation & Depth
| Level | Treatment | 用途 |
|---|---|---|
| Flat (canvas) | `{colors.canvas}` (#ffffff) | Body band、footer |
| Card | `{colors.surface-card}` (#ffffff) | Content card |
| Hairline border | 1px `{colors.hairline}` | Card outline |
| Soft drop | `0 4px 12px rgba(0, 0, 0, 0.04)` | Hovered card（单一 shadow tier） |
| Atmospheric gradient | Sky-blue radial wash | 只用于 hero backdrop |
| Dark inversion | `{colors.surface-dark}` (#171717) | Dark feature card、code block、featured pricing |
### Decorative Depth
- **Sky-blue gradient backdrop** 只用于 hero，提供 atmospheric depth，但不成为 brand color。
- **Device mockup composite** 作为 page chrome：MacBook + iPhone 展示真实 Expo dev surface。
## Shapes
### Border Radius Scale
| Token | Value | 用途 |
|---|---|---|
| `{rounded.none}` | 0px | Reserved |
| `{rounded.xs}` | 4px | Inline tag |
| `{rounded.sm}` | 6px | Compact row |
| `{rounded.md}` | 8px | CTA button、form input、ecosystem tile |
| `{rounded.lg}` | 12px | Feature card、code block、pricing tier |
| `{rounded.xl}` | 16px | Device mockup card |
| `{rounded.xxl}` | 24px | Larger atmospheric card（少见） |
| `{rounded.pill}` | 9999px | 仅用于 badge |
| `{rounded.full}` | 9999px | Avatar plate（少见） |
Compact developer-ergonomic radius：CTA 为 8px，card 为 12px。Pill geometry 只留给 badge，绝不用于 CTA。
## Components
### Top Navigation
**`top-nav`** — Background `{colors.canvas}`、text `{colors.ink}`、height 64px。Layout：Expo wordmark 在左，primary horizontal menu（Tools / Workflows / EAS / Pricing / Docs / Showcase）居中，Sign In + Get started CTA 在右。导航保持白底和轻量结构，不引入额外品牌色。
### Buttons
**`button-primary`** — Pure black pill。Background `{colors.primary}`、text `{colors.on-primary}`、type `{typography.button}` (14px / 500)、padding 10px × 18px、height 40px、rounded `{rounded.md}` (8px)。这是唯一高优先级 action 样式，视觉上非常克制。
**`button-primary-active`** — Press state。Background `{colors.primary-active}`。
**`button-secondary`** — 带 1px hairline-strong border 的 white card。Background `{colors.surface-card}`、text `{colors.ink}`、1px `{colors.hairline-strong}` border。
**`button-tertiary-text`** — Inline blue text link。Background transparent、text `{colors.text-link}`。
### Hero & Device Mockup
**`hero-band`** — Background `{colors.canvas}`，centered headline 后方带 soft sky-blue gradient wash。Display headline 使用 `{typography.display-mega}`（64px / 600 / -1.92px），subhead 使用 `{typography.body-md}`，包含单个 primary CTA，下方放置 device mockup composite。Hero 的视觉能量来自真实设备画面，而不是插画装饰。
**`device-mockup-card`** — Layered MacBook + iPhone composite，展示真实 Expo dev surface。Background `{colors.surface-card}`、rounded `{rounded.xl}`。MacBook 承载 EAS dashboard 或 Expo Studio screenshot；iPhone overlay 展示 Expo Go 中运行的 app。这就是 page chrome。
### Cards
**`feature-card`** — Background `{colors.surface-card}`、text `{colors.ink}`、type `{typography.title-md}`、rounded `{rounded.lg}`、padding 24px、1px `{colors.hairline-strong}` border。用于解释平台能力，保持清晰、低噪声的 developer-tool 语气。
**`feature-card-dark`** — Dark variant。Background `{colors.surface-dark}`、text `{colors.on-dark}`。Shape 相同，使用 dark inversion。
**`workflow-step-card`** — "Get your app on every device" workflow row 中的 step。Background `{colors.surface-card}`、text `{colors.body}`、rounded `{rounded.lg}`、padding 20px。Layout：32px square `{component.workflow-step-icon}` + step number + label + body。
**`workflow-step-icon`** — Square plate。Background `{colors.surface-strong}`、rounded `{rounded.md}`、size 32px。
**`testimonial-card`** — Quote card。Background `{colors.surface-card}`、text `{colors.body}`、rounded `{rounded.lg}`、padding 24px。用于短引用和 customer proof，保持轻量 card chrome。
### Code & IDE
**`code-block`** — Inline code block。Background `{colors.surface-dark}`，text `{colors.on-dark}` 使用 `{typography.code}`（JetBrains Mono 13px），rounded `{rounded.lg}`、padding 20px。Dark 上的 white text。
**`ide-mockup-card`** — Stylized IDE mockup。Background `{colors.surface-dark}`、rounded `{rounded.lg}`。包含 multi-pane editor + terminal preview，用来展示真实开发流程。
### Pricing
**`pricing-tier-card`** — Standard pricing tier。Background `{colors.surface-card}`、rounded `{rounded.lg}`、padding 32px、1px `{colors.hairline-strong}` border。用于比较 plan 信息，避免用彩色 ribbon 增加噪声。
**`pricing-tier-featured`** — Featured tier。Background `{colors.surface-dark}`、text `{colors.on-dark}`。Shape 相同，使用 dark inversion 做强调，让推荐方案在白色页面中清晰跳出。
### Ecosystem
**`ecosystem-tile`** — Ecosystem partner logo（TypeScript、React、Sentry 等）的 square logo plate。Background `{colors.surface-card}`、rounded `{rounded.md}`、size 64px、1px `{colors.hairline}` border。
### Forms & Tags
**`text-input`** — Background `{colors.surface-card}`、text `{colors.ink}`、rounded `{rounded.md}` (8px)、padding 12px × 16px、height 44px、1px `{colors.hairline-strong}` border。Focus 时 border 加粗为 2px ink。
**`badge-pill`** — Small uppercase pill。Background `{colors.surface-strong}`、text `{colors.ink}`、type `{typography.caption-uppercase}`、rounded `{rounded.pill}`、padding 4px × 10px。
### CTA / Footer
**`cta-band`** — Pre-footer band。Background `{colors.canvas}`，centered display headline 使用 `{typography.display-lg}`，单个 black pill CTA。Padding 96px。
**`footer-light`** — Closing white footer。Background `{colors.canvas}`、text `{colors.body}`。5-column link list。64×48px padding。
**`footer-link`** — Background transparent、text `{colors.body}`、type `{typography.body-sm}`。
## Do's and Don'ts
### Do
- 将 `{colors.primary}`（black）保留给 primary CTA。
- `{colors.text-link}`（blue）只用于 inline body link，绝不用于 CTA 或 button。
- 每个 CTA 都使用 `{rounded.md}` (8px)，体现 developer dialect。
- Display 使用 Inter weight 600，body 使用 400。
- 每个 code surface 都用 JetBrains Mono 渲染。
- Hero 必须搭配 device-mockup composite；它就是 page chrome。
### Don't
- 不要引入 saturated brand action color。Black 是唯一 CTA fill。
- 不要在 CTA 上使用 blue（`{colors.text-link}`）。它只属于 inline link。
- 不要让 display 低于 weight 600 或高于 700。
- 不要在 CTA 上使用 full pill；pill 只属于 badge。
- 不要在 hero 之外复制 sky-blue gradient backdrop。
- 不要从 third-party widget（cookie consent、OneTrust）提取 CTA color。品牌 CTA 以真实页面 CTA 为准。
## Responsive Behavior
### Breakpoints
| Name | Width | 关键变化 |
|---|---|---|
| Mobile | < 640px | Hero h1 64→32px；device mockup → single iPhone screen；feature grid 1-up；nav hamburger。 |
| Tablet | 640–1024px | Hero h1 48px；device mockup 压缩；feature grid 2-up。 |
| Desktop | 1024–1280px | 完整 hero h1 64px；完整 MacBook + iPhone composite；feature grid 3-up。 |
| Wide | > 1280px | Content capped at 1200px。 |
### Touch Targets
- Primary CTA 高度 40px，达到 WCAG AA，并通过 padding 接近 AAA。
- Search input 高度 44px，达到 AAA。
### Collapsing Strategy
- Top nav 在 768px 以下切换为 hamburger。
- Device mockup 的 MacBook + iPhone 在 mobile 上折叠为 single iPhone preview。
- Feature grid: 3-up → 2-up → 1-up。
- Ecosystem tile grid: 8-up → 4-up → 3-up → 2-up。
## Iteration Guide
1. 每次聚焦单个 component。
2. CTA 默认使用 `{rounded.md}` (8px)。Card 使用 `{rounded.lg}` (12px)。
3. Variant 作为独立条目存在。
4. 所有地方使用 `{token.refs}`，不要 inline hex。
5. 不记录 hover state。
6. Display 使用 Inter 600，body 使用 Inter 400。Code 使用 JetBrains Mono。
7. Black 保持唯一 CTA color；text-link blue 只用于 inline。
## Known Gaps
- Inter 和 JetBrains Mono 都可免费获取，没有 licensing concern。
- Animation timing（device mockup parallax、hero entrance）不在范围内。
- In-app surface（EAS dashboard interactive、Expo Go simulator）只通过 marketing mockup 部分捕获。
- Focus 之外的 form validation state 在捕获 surface 中不可见。