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

# amp · Design System

> Sculptural fitness, framed with clarity and warmth

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

amp pairs a dramatic black hero with a long, mostly white product story, using vivid orange to mark calls to action and key phrases. Large, lightweight typography and cinematic fitness imagery make the compact strength machine feel both premium and approachable.

## North star

Use quiet white space and precise, lightweight typography to frame vivid fitness imagery, reserving orange for decisive emphasis.

## Overview

The page opens with a nearly black, full-width hero that gives the oversized white headline and bright orange Buy now button strong contrast. A slim announcement and navigation sit above it, while a fine rule separates the hero message from concise reassurance points. The rest of the page shifts to a bright white canvas, with pale-gray panels used for selected copy blocks, filters, and product cards rather than continuous colored bands. PublicaSans is used throughout: headlines are large, light to regular, tightly tracked, and sentence-case; body copy is restrained and light. Orange highlights selected words and purchase actions, not large background areas. A mix of full-bleed workout video, warm-toned lifestyle photography, and clean product close-ups gives the long page variety while keeping the device central. Generous whitespace and clear section breaks let the editorial story breathe.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, bright content sections, hero headings, and fine rules over dark media. |
| Graphite Ink | `#292b2a` | `--color-graphite-ink` | brand | Primary text and dark inverse surfaces, including compact UI controls. |
| Cool Mist | `#e5e7eb` | `--color-cool-mist` | surface | Pale canvas tone detected in controls and cards; use sparingly behind secondary UI. |
| Soft Alloy | `#bfbfbf` | `--color-soft-alloy` | surface | Muted section surface tone; supports neutral transitions and product-focused panels. |
| Amp Orange | `#ff6105` | `--color-amp-orange` | accent | Primary purchase buttons and selective highlighted words or links. |
| Cloud Panel | `#f5f5f7` | `--color-cloud-panel` | surface | Light-gray cards, feature panels, and soft filter controls against white. |
| Midnight Gradient | `#141416` | `--color-midnight-gradient` | semantic | Deep endpoint in measured dark gradients; mainly a media or gradient detail. |
| Slate Copy | `#656665` | `--color-slate-copy` | neutral | Muted body text and supporting copy where primary ink would feel too strong. |
| Pale Divider | `#cccccc` | `--color-pale-divider` | neutral | Occasional subdued section or text detail; not a defining brand surface. |
| Sandstone Image | `#a89a8b` | `--color-sandstone-image` | semantic | Warm hue appearing in lifestyle media and photography rather than core interface chrome. |
| Iron Hairline | `#3c3e3d` | `--color-iron-hairline` | neutral | Subtle dark border detail, used sparingly for separation on dark elements. |
| Silver Detail | `#a6a6a6` | `--color-silver-detail` | neutral | Minor neutral detail in measured UI or media; keep subordinate to text and imagery. |
| Deep Charcoal | `#202120` | `--color-deep-charcoal` | neutral | Near-black text and button detail on selected components. |
| Quiet Gray | `#8a8b8a` | `--color-quiet-gray` | neutral | Secondary text or control detail with restrained contrast. |

### Semantic aliases

`--color-canvas` → `#e5e7eb` (Cool Mist) · `--color-surface` → `#292b2a` (Graphite Ink) · `--color-surface-2` → `#ffffff` (Gallery White) · `--color-surface-3` → `#bfbfbf` (Soft Alloy) · `--color-surface-4` → `#f5f5f7` (Cloud Panel) · `--color-text` → `#292b2a` (Graphite Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#f5f5f7` (Cloud Panel) · `--color-border` → `#ffffff` (Gallery White) · `--color-accent` → `#ff6105` (Amp Orange) · `--color-on-accent` → `#0a0a0a`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#292b2a` | `#e5e7eb` | 11.51:1 | AAA |
| `#292b2a` | `#ffffff` | 14.25:1 | AAA |
| `#292b2a` | `#bfbfbf` | 7.75:1 | AAA |
| `#ffffff` | `#e5e7eb` | 1.24:1 | fail |
| `#ffffff` | `#292b2a` | 14.25:1 | AAA |
| `#ffffff` | `#bfbfbf` | 1.84:1 | fail |
| `#f5f5f7` | `#e5e7eb` | 1.14:1 | fail |
| `#f5f5f7` | `#292b2a` | 13.09:1 | AAA |
| `#f5f5f7` | `#ffffff` | 1.09:1 | fail |
| `#f5f5f7` | `#bfbfbf` | 1.69:1 | fail |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02))`
- `linear-gradient(145deg, rgb(42, 42, 46), rgb(20, 20, 22))`
- `linear-gradient(165deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 40%, rgba(0, 0, 0, 0) 65%)`
- `linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PublicaSans | `--font-body` | webfont | 300, 400, 500 | Site-wide display headings, body copy, navigation, links, and buttons. | Manrope |

- **PublicaSans:** Use light-to-regular weights, tight negative tracking on large headings, sentence case, and restrained, clean body copy.

### Type scale — Augmented Fourth (ratio ≈ 1.428, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 95px | 400 | 0.9 | -0.03em | — | PublicaSans | Oversized hero-scale headline treatment. |
| h1 | 55px | 400 | 1 | -0.03em | — | PublicaSans | Primary page and major section headings. |
| h2 | 50px | 400 | 1 | -0.03em | — | PublicaSans | Large feature and product-story headings. |
| h3 | 45px | 300 | 1 | -0.03em | — | PublicaSans | Secondary feature headings, usually lightweight. |
| h4 | 34px | 300 | 1 | -0.03em | — | PublicaSans | Smaller feature titles and card headings. |
| body | 16px | 300 | 1.2 | 0 | — | PublicaSans | Supporting descriptions and explanatory copy. |
| caption | 14px | 400 | 1 | 0 | — | PublicaSans | Compact media labels and fine supporting notes. |
| button | 16px | 300 | 1.2 | 0 | — | PublicaSans | Purchase actions and pill-style category controls. |
| nav | 14px | 400 | 1.5 | 0 | — | PublicaSans | Top navigation links and announcement details. |
| link | 14px | 400 | 1 | 0 | — | PublicaSans | Inline learn-more and supporting navigation links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 8, 10, 12, 14, 15, 16, 18, 20, 23, 25, 32, 40, 50, 80, 120 px.
- Section rhythm 80px · element gap 2px · card padding 20px · max content width 1400px.

Use a centered desktop frame with a measured maximum width of 1400px, but let the hero and select media sections run full bleed. Alternate two-column text-and-media stories with broad single-column moments and card or carousel rows. Keep headings left aligned except for focused centered feature and category sections. The measured section rhythm is spacious, with an 80px section gap and comfortable density; use smaller measured gaps for related controls and card content. Preserve ample white space between the image-led narrative blocks.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `8px` · xs `6px` · sm `8px` · md `10px` · lg `12px` · xl `16px` · 2xl `24px` · pill `9999px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0.11) 0px 0px 0.5px 0px inset`
- Shadow `md` (button): `rgba(37, 44, 97, 0.15) 0px 5px 15px 0px, rgba(93, 100, 148, 0.2) 0px 2px 4px 0px`
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The design is mostly flat: whitespace, tonal panels, and occasional hairlines establish structure rather than heavy shadows. Keep card edges softly rounded and use measured borders sparingly. Layer text directly over media only where the photo treatment keeps it legible; dark gradients and subtle overlays are media treatments, not a reason to add generic interface depth.

## Imagery

Use cinematic video and lifestyle photography of people training with the device, often in warm, softly lit interiors. Mix full-bleed story panels with carefully framed product close-ups, phone screens, and compact feature cards. Keep imagery realistic and editorial, with restrained grading; warm tans and muted colors belong to the media, while the interface remains mostly white and neutral.

## Components

### Announcement and navigation

A narrow announcement line sits above a restrained navigation row with brand mark, centered links, account control, and an orange purchase action.

### Hero purchase block

Full-width near-black opening with a large left-aligned white headline, rounded orange Buy now button, and a bottom reassurance row separated by a fine rule.

### Pale feature panel

Use a #f5f5f7 panel for selected editorial copy, feature lists, or onboarding steps against the white page.

### Media story panel

Pair workout video or lifestyle imagery with short white overlaid headings and supporting copy; keep the image as the dominant surface.

### Product feature cards

Present device details and adaptive features in softly rounded cards, with light surfaces and concise copy rather than decorative chrome.

### Category filter pills

Compact rounded controls use pale neutral fills and dark text, with a dark selected state for exercise and muscle-group filters.

### Orange emphasis

Reserve #ff6105 for purchase actions and occasional highlighted words in otherwise dark editorial headings.

### Measured component styles

- **Primary button** (“Buy Now”): background #ff6105 · text #0a0a0a · radius 3.35544e+07px · padding 10px 26px · 400 16px PublicaSans
- **Secondary button** (“Pilates”): background #f7f7f9 · text #292b2a · radius 24px · padding 18px 20px · 300 16px PublicaSans
- **Link** (“Learn More”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px PublicaSans
- **Card** (“Weight that thinks for you Resistance in”): transparent background · text #f5f5f7 · border 1px solid #ffffff · radius 12px · padding 20px · 400 16px SF Pro Display
- **Navigation item** (“Device Try amp Blog Support Buy Now”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 16px PublicaSans

## Do

- Keep the hero dark, spacious, and high contrast.
- Use orange for primary actions and selective text emphasis.
- Set large headings in a light, tightly tracked sans serif.
- Let white space separate major story sections.
- Use warm, realistic fitness photography and video.
- Keep panels pale and interface decoration restrained.

## Don't

- Do not spread orange across large interface backgrounds.
- Do not make every section a card grid.
- Do not add heavy shadows or ornamental borders.
- Do not use dense, bold all-caps typography.
- Do not replace the white page rhythm with continuous dark bands.
- Do not treat warm photographic tones as interface colors.

## Agent prompt

Build a new page in amp’s visual style: begin with a dramatic near-black hero, oversized lightweight white heading, and a clear Amp Orange (#ff6105) purchase action. Use Graphite Ink (#292b2a) for primary text and Gallery White (#ffffff) as the main content canvas. Introduce Cloud Panel (#f5f5f7) only for selected feature blocks, filters, or cards. Use PublicaSans or a close substitute such as Manrope, with tight tracking on large sentence-case headings and light body copy. Organize the page as a spacious editorial sequence of text-and-media splits, full-bleed workout imagery, product close-ups, and restrained pill controls. Keep UI largely flat, with subtle dividers and softly rounded elements. Preserve natural photography warmth without importing its colors into the core interface palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark full-width hero; left-aligned headline and CTA, with reassurance notes along the bottom. | Primary purchase action, Trust and payment reassurance | Black media backdrop, Oversized white headline, Orange pill CTA, Fine divider |
| 2 | feature-split | Two-column story pairing a pale editorial card with product or lifestyle media. | Feature introduction, Progressive benefit list | Pale-gray panel, Orange phrase emphasis, Video-led pairing |
| 3 | feature-split | Single-column editorial transition with heading and short supporting copy. | Benefit framing, Story transition | White canvas, Left-aligned heading, Selective orange emphasis |
| 4 | video | Full-width cinematic video panel with text and interface details overlaid on the imagery. | Visual product demonstration, Contextual benefit copy | Warm lifestyle footage, White overlay text, Full-bleed framing |
| 5 | video | Full-width story panel, with training footage balanced by a concise text overlay. | Workout guidance, Personalized-plan explanation | Lifestyle video, Overlay copy, Warm neutral grading |
| 6 | video | Edge-to-edge media story with short heading and supporting text. | Anywhere training, Coaching and progress cues | Full-bleed footage, Overlaid typography, Muted warm tones |
| 7 | video | Wide video-led feature with text positioned beside the subject. | Flexible workout intensity, Encouraging guidance | Cinematic fitness footage, Short overlay heading, Subtle color grading |
| 8 | feature-split | Lifestyle image paired with concise copy in a broad two-part composition. | Shared training, Household motivation | Phone and people imagery, Editorial overlay copy, Warm pale tones |
| 9 | product-showcase | Introductory heading and copy followed by a horizontally arranged feature-card carousel. | Feature browsing, Adaptive product explanation | Product close-ups, Rounded media cards, Carousel indicator |
| 10 | product-showcase | Split introduction above a large full-bleed product showcase with feature controls. | Product feature exploration, Progressive detail reveal | Device close-up, Feature list, Rounded media frame |
| 11 | feature-grid | Centered heading over a horizontal sequence of image-led feature cards. | Benefit discovery, Carousel browsing | Lifestyle card imagery, Centered heading, Carousel indicator |
| 12 | how-it-works | Two-column section with a pale numbered-step panel beside video content. | Three-step onboarding, Step selection | Pale-gray card, Numbered rows, Video demonstration |
| 13 | category-nav | Centered heading above two rows of horizontally arranged filter controls and exercise content. | Workout-type filter, Muscle-group filter | Rounded pills, Dark selected option, Compact category labels |
| 14 | testimonials | Editorial heading and supporting copy above a horizontal row of portrait testimonial cards. | Credibility through endorsements, Browse testimonials | Grayscale portrait cards, Two-column introduction, Editorial typography |

## Source CSS custom properties (selected)

```css
--background-primary-v2: #f3f4f3;
--background-assistencial-v2: #c94b00;
--text-primary-v2: #292b2a;
--text-secondary-v2: #6b6c6c;
--text-tertiary-v2: #a2a3a2;
--radius: .625rem;
--background: oklch(1 0 0);
--foreground: oklch(.145 0 0);
--card-foreground: oklch(.145 0 0);
--popover-foreground: oklch(.145 0 0);
--primary: oklch(.205 0 0);
--primary-foreground: oklch(.985 0 0);
--secondary: oklch(.97 0 0);
--secondary-foreground: oklch(.205 0 0);
--muted-foreground: oklch(.556 0 0);
--accent: oklch(.97 0 0);
--accent-foreground: oklch(.205 0 0);
--border: oklch(.922 0 0);
--sidebar-foreground: oklch(.145 0 0);
--sidebar-primary: oklch(.205 0 0);
--sidebar-primary-foreground: oklch(.985 0 0);
--sidebar-accent: oklch(.97 0 0);
--sidebar-accent-foreground: oklch(.205 0 0);
--sidebar-border: oklch(.922 0 0);
--swiper-theme-color: #007aff;
--color-component-overlay-bg: rgba(25, 25, 37, 0.9);
--color-component-button-primary-bg-default-neutral-inverse-resting: #ffffff;
--color-component-button-primary-text-default-neutral-inverse-resting: #0c0c14;
--color-component-button-primary-bg-default-neutral-inverse-hover: #e5e5e9;
--color-component-button-primary-text-default-neutral-inverse-hover: #313142;
--color-component-button-secondary-icon-default-neutral-inverse-resting: #ffffff;
--color-component-button-secondary-text-default-neutral-inverse-resting: #ffffff;
--color-fill-brand-indigo: #4a4af4;
--components-spacing-xxxxs: 2px;
--components-spacing-lg: 24px;
--components-spacing-xxl: 40px;
--color-primary-light: #A8A9FC;
--color-primary-dark: #2F2FC1;
--color-greyscale-black-60: #6D6E71;
--color-ui-colors-background-neutral-2: #F0F5F7;
```

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