Amplemarket 以暖调浅色画布和醒目的编辑式标题为主，穿插深色产品展示区与柔和鲜亮的渐变视觉。产品界面、手绘人物、客户案例和直接的试用表单，让长页面兼顾品牌表达与转化目标。
North star · Keep the warm, spacious editorial canvas in control, and use dark bands and expressive color as deliberate product-story accents.
The page is built on a warm off-white canvas (#f6f5f3), with black (#111111) used for confident headlines, navigation, and several full-width product and testimonial bands. The transition between light and dark sections creates a clear rhythm across the long page; a quieter near-white (#fbfaf9) distinguishes customer results and editorial content. Labil Grotesk Variable supplies rounded, contemporary forms, with large, tightly tracked headlines and restrained gray supporting text. Most sections use centered introductions above product UI, logo rows, customer quotes, or card collections. Spacious gaps keep these varied blocks legible rather than crowded. The imagery mixes actual interface captures with sketch-like human illustrations and soft, blurred color fields. Orange (#e8400d), aqua (#99fff9), and lavender (#d0b2ff) appear as selective highlights, often within expressive artwork or product visuals rather than as the main interface color. Cards and controls stay lightly outlined and softly rounded.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
Ink Black
#111111
Primary text, navigation, dark section backgrounds, and the filled trial CTA.
强调色
Electric Aqua
#99fff9
Small vivid highlight in product media and gradient artwork, not a dominant page background.
Signal Orange
#e8400d
Expressive orange glow in hero artwork and selected footer or media details.
Soft Lilac
#d0b2ff
Lavender highlight in gradients, hero artwork, and selected expressive graphic details.
表层色
Gallery White
#ffffff
White surfaces, text on dark sections, and the light portions of product and card treatments.
Warm Canvas
#f6f5f3
Main page canvas across the hero, customer logos, feature content, and conversion sections.
Charcoal Panel
#272625
Dark testimonial cards and secondary dark surfaces within the product and footer areas.
Night Indigo
#10054d
Deep violet background used in a single promotional journey graphic.
中性色
Soft Gray
#a9a8a8
Muted supporting copy and footer text against light or dark surfaces.
Footer Gray
#a0a0a0
Secondary footer and heading text with subdued contrast.
功能色
Button Gray
#b4b4b3
Measured button border tone; use for understated control outlines where applicable.
Input Border
#dedddb
Fine outline around the white email input.
Deep Indigo
#2e2463
Measured dark input border in a colored form treatment.
Control Graphite
#2f2f2f
Dark control detail sampled from input styling, not a core page color.
Pale Control
#e8e8e7
Light button border detail for restrained control separation.
Pure Black
#000000
Small sampled button detail; the primary dark interface color is #111111.
文字 背景 对比度 WCAG #111111 Ink Black#f6f5f3 Warm Canvas17.33:1 AAA #111111 Ink Black#ffffff Gallery White18.88:1 AAA #111111 Ink Black#272625 Charcoal Panel1.25:1 不达标 #ffffff Gallery White#f6f5f3 Warm Canvas1.09:1 不达标 #ffffff Gallery White#111111 Ink Black18.88:1 AAA #ffffff Gallery White#272625 Charcoal Panel15.11:1 AAA
字体 字号阶梯：Perfect Fourth（比例约 1.294，正文 20px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Labil Grotesk Variable 网络字体 · 字重 400 / 500 / 900 · 占比 100%
免费替代：Inter
All page typography, from navigation and controls to headings, testimonials, and footer links.
角色 示例 字号 字重 行高 字距 特大标题 Large hero and campaign headlines.
Amplemarket
56px 400 1 -0.05em 一级标题 Primary section headlines and prominent page statements.
Amplemarket
44px 400 1.1 -0.04em 二级标题 Feature, product, and customer-story headings.
Amplemarket
36px 400 1.2 -0.03em 三级标题 Card titles and subordinate feature headings.
Amplemarket
28px 400 1.1 -0.017em 正文 Introductory copy, quotes, and explanatory text.
The quick brown fox 敏捷的狐狸
20px 400 1.3 -0.02em 辅助文字 Compact labels, metadata, and supporting details.
The quick brown fox 敏捷的狐狸
16px 400 1 -0.01em 按钮 Trial CTAs and compact interactive controls.
The quick brown fox 敏捷的狐狸
14px 500 1 0 导航 Top navigation links and menu items.
The quick brown fox 敏捷的狐狸
14px 500 1 0
间距与布局 基准单位 4px · 密度：宽松
144px 版块间距
8px 元素间距
20px 卡片内边距
1328px 内容最大宽度
4px
6px
8px
10px
12px
16px
20px
24px
28px
56px
A spacious, centered composition with a measured maximum content width of 1328px and varied multi-column sections. The hero centers its message above a wide product preview, while logo and testimonial groups use structured rows and cards. Section backgrounds alternate between warm light and near-black to mark major story beats; selected result and editorial areas sit on near-white. Generous section gaps create a slow vertical rhythm, with compact controls and denser content reserved for product UI and the footer.
圆角与层次 inset · other, card
xl · card
md · card
sm · other
Surfaces are mostly flat, with subtle borders and restrained shadows rather than heavy card elevation. Product mockups and selected cards gain depth through layering, inset hairlines, or soft shadow. Rounded corners keep controls and content panels approachable; dark bands provide the strongest visual separation.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Primary trial button Filled #111111 button with white, medium-weight 14px text, an 8px radius, and compact horizontal padding.
Top navigation Black Labil Grotesk links in a single horizontal row, balanced by a logo on the left and app and trial actions on the right.
Email trial form White email field with a #dedddb outline and 12px radius, paired directly with a dark filled trial action.
Product showcase Large interface screenshot set into a light or dark section, sometimes surrounded by floating cards and colored signal labels.
Customer logo row Compact monochrome customer marks distributed across a spacious grid, with brief migration or customer context beneath.
Customer quote card Dark #272625 card on black testimonial bands, using a short quote, small portrait, and customer role or company detail.
Result cards Mixed customer metrics and quote blocks on a near-white field, with restrained outlines and occasional bright graphic color.
Imagery · Product screenshots and interface mockups are the main proof points, often presented large and layered with small floating signal cards. Hand-drawn line-art characters add a human, playful counterpoint to precise software UI. The hero uses blurred orange, lavender, and aqua fields; gradients are concentrated in artwork and campaign panels. Customer portraits appear as small testimonial identifiers rather than large lifestyle photography.
页面版块 共 12 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 Use #f6f5f3 as the default canvas. Set main headings and primary actions in #111111. Use full-width dark bands to separate major product stories. Keep aqua, orange, and lilac accents concentrated in media and artwork. Pair product screenshots with clear, centered section introductions. Use generous whitespace and lightly outlined rounded controls. ✕ 不该做 Do not make vivid gradients the default background. Do not crowd the page with tight section spacing. Do not replace the product UI with generic lifestyle photography. Do not use heavy shadows on every card. Do not make all sections dark or all sections visually identical. Do not treat illustration-only colors as core interface colors. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 Build a new Amplemarket-style SaaS page using Labil Grotesk Variable or Inter, with a spacious editorial rhythm and clear product proof. Use Warm Canvas (#f6f5f3) for the main background, Ink Black (#111111) for headings and primary controls, and occasional charcoal (#272625) bands for feature or testimonial storytelling. Keep Electric Aqua (#99fff9), Signal Orange (#e8400d), and Soft Lilac (#d0b2ff) mainly in gradients, product media, and illustration. Center section introductions, then show real interface mockups, customer logos, concise proof points, or quotes in structured grids. Maintain generous whitespace, thin borders, rounded inputs and cards, and restrained shadows. Make the trial form and CTA easy to find without making every section feel like a conversion banner. Use hand-drawn line art sparingly to humanize the software story.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
title: "Amplemarket design system"
variant: extended
source: https://www.amplemarket.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/amplemarket-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---
# Amplemarket · Design System
> Calm editorial space meets expressive AI sales visuals
**Theme:** light · **Industry:** ai · **Source:** https://www.amplemarket.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._
Amplemarket pairs a warm, near-white canvas and oversized editorial typography with dark product sections and vivid, soft-edged gradients. Product UI, hand-drawn characters, customer proof, and direct trial forms make the long homepage feel both illustrative and conversion-focused.
## North star
Keep the warm, spacious editorial canvas in control, and use dark bands and expressive color as deliberate product-story accents.
## Overview
The page is built on a warm off-white canvas (## Colors
| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | ` | `--color-gallery-white` | surface | White surfaces, text on dark sections, and the light portions of product and card treatments. |
| Ink Black | ` | `--color-ink-black` | brand | Primary text, navigation, dark section backgrounds, and the filled trial CTA. |
| Warm Canvas | ` | `--color-warm-canvas` | surface | Main page canvas across the hero, customer logos, feature content, and conversion sections. |
| Charcoal Panel | ` | `--color-charcoal-panel` | surface | Dark testimonial cards and secondary dark surfaces within the product and footer areas. |
| Electric Aqua | ` | `--color-electric-aqua` | accent | Small vivid highlight in product media and gradient artwork, not a dominant page background. |
| Signal Orange | ` | `--color-signal-orange` | accent | Expressive orange glow in hero artwork and selected footer or media details. |
| Soft Gray | ` | `--color-soft-gray` | neutral | Muted supporting copy and footer text against light or dark surfaces. |
| Button Gray | ` | `--color-button-gray` | semantic | Measured button border tone; use for understated control outlines where applicable. |
| Footer Gray | ` | `--color-footer-gray` | neutral | Secondary footer and heading text with subdued contrast. |
| Input Border | ` | `--color-input-border` | semantic | Fine outline around the white email input. |
| Deep Indigo | ` | `--color-deep-indigo` | semantic | Measured dark input border in a colored form treatment. |
| Control Graphite | ` | `--color-control-graphite` | semantic | Dark control detail sampled from input styling, not a core page color. |
| Night Indigo | ` | `--color-night-indigo` | surface | Deep violet background used in a single promotional journey graphic. |
| Pale Control | ` | `--color-pale-control` | semantic | Light button border detail for restrained control separation. |
| Soft Lilac | ` | `--color-soft-lilac` | accent | Lavender highlight in gradients, hero artwork, and selected expressive graphic details. |
| Pure Black | ` | `--color-pure-black` | semantic | Small sampled button detail; the primary dark interface color is ### Semantic aliases
`--color-canvas` → ` (Warm Canvas) · `--color-surface` → ` (Ink Black) · `--color-surface-2` → ` (Gallery White) · `--color-surface-3` → ` (Charcoal Panel) · `--color-surface-4` → ` (Electric Aqua) · `--color-text` → ` (Ink Black) · `--color-text-muted` → ` (Gallery White) · `--color-text-subtle` → ` (Soft Gray) · `--color-border` → ` (Gallery White) · `--color-accent` → ` (Signal Orange) · `--color-accent-2` → ` (Soft Lilac)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 17.33:1 | AAA |
| ` | ` | 18.88:1 | AAA |
| ` | ` | 1.25:1 | fail |
| ` | ` | 1.09:1 | fail |
| ` | ` | 18.88:1 | AAA |
| ` | ` | 15.11:1 | AAA |
| ` | ` | 2.18:1 | fail |
| ` | ` | 7.96:1 | AAA |
| ` | ` | 2.37:1 | fail |
| ` | ` | 6.37:1 | AA |
### Gradients
- `linear-gradient(0deg, rgb(255, 255, 255), rgba(255, 255, 255, 0))`
- `linear-gradient(0deg, rgb(17, 17, 17), rgba(17, 17, 17, 0))`
- `linear-gradient(rgb(17, 17, 17), rgba(17, 17, 17, 0))`
- `radial-gradient(80.17% 109.2% at 46.2448% 61.1089%, rgb(208, 178, 255) 0%, rgb(198, 236, 233) 45.6944%, rgb(153, 255, 249) 94.8986%)`
## Typography
| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Labil Grotesk Variable | `--font-body` | webfont | 400, 500, 900 | All page typography, from navigation and controls to headings, testimonials, and footer links. | Inter |
- **Labil Grotesk Variable:** Use regular weights for editorial headings and body, medium for nav and buttons; headlines are tightly tracked, sentence case, and rarely shout.
### Type scale — Perfect Fourth (ratio ≈ 1.294, base 20px)
| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 400 | 1 | -0.05em | — | Labil Grotesk Variable | Large hero and campaign headlines. |
| h1 | 44px | 400 | 1.1 | -0.04em | — | Labil Grotesk Variable | Primary section headlines and prominent page statements. |
| h2 | 36px | 400 | 1.2 | -0.03em | — | Labil Grotesk Variable | Feature, product, and customer-story headings. |
| h3 | 28px | 400 | 1.1 | -0.017em | — | Labil Grotesk Variable | Card titles and subordinate feature headings. |
| body | 20px | 400 | 1.3 | -0.02em | — | Labil Grotesk Variable | Introductory copy, quotes, and explanatory text. |
| caption | 16px | 400 | 1 | -0.01em | — | Labil Grotesk Variable | Compact labels, metadata, and supporting details. |
| button | 14px | 500 | 1 | 0 | — | Labil Grotesk Variable | Trial CTAs and compact interactive controls. |
| nav | 14px | 500 | 1 | 0 | — | Labil Grotesk Variable | Top navigation links and menu items. |
OpenType features in use: `"ss02"` , `"ss01"` .
## Spacing & layout
- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 28, 56 px.
- Section rhythm 144px · element gap 8px · card padding 20px · max content width 1328px.
A spacious, centered composition with a measured maximum content width of 1328px and varied multi-column sections. The hero centers its message above a wide product preview, while logo and testimonial groups use structured rows and cards. Section backgrounds alternate between warm light and near-black to mark major story beats; selected result and editorial areas sit on near-white. Generous section gaps create a slow vertical rhythm, with compact controls and denser content reserved for product UI and the footer.
## Shape & elevation
- Radius: button `8px` · input `12px` · card `12px` · media `8px` · xs `3px` · sm `4px` · md `6px` · lg `8px` · xl `12px` · 2xl `16px`
- Shadow `inset` (other, card): `rgba(17, 17, 17, 0.04) 0px 0px 0px 1px inset`
- Shadow `xl` (card): `rgba(17, 17, 17, 0.12) 0px 26px 60px -6px, rgba(17, 17, 17, 0.02) 0px 28px 28px -14px, rgba(17, 17, 17, 0.04) 0px 6px 6px -3px, rgba(17, 17, 17, 0.04) 0px 1px 1px -0.5px`
- Shadow `md` (card): `rgba(17, 17, 17, 0.02) 0px -6px 6px 0px, rgba(17, 17, 17, 0.01) 0px -23px 9px 0px`
- Shadow `sm` (other): `rgba(17, 17, 17, 0.05) 0px 0px 1px 0px, rgba(17, 17, 17, 0.04) 1px 1px 1px 0px, rgba(17, 17, 17, 0.03) 2px 3px 2px 0px, rgba(17, 17, 17, 0.01) 4px 4px 2px 0px`
- Shadow `xl-2` (media): `rgba(25, 34, 35, 0.12) 0px 26px 60px -6px, rgba(25, 34, 35, 0.02) 0px 28px 28px -14px, rgba(25, 34, 35, 0.04) 0px 6px 6px -3px, rgba(25, 34, 35, 0.04) 0px 1px 1px -0.5px`
- Shadow `md-2` (button, other): `rgba(17, 17, 17, 0.04) 0px 1px 2px 0px, rgba(17, 17, 17, 0.04) 0px 4px 8px 0px, rgba(17, 17, 17, 0.04) 0px 0px 1px 0px, rgba(17, 17, 17, 0.04) 0px 0px 1px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.
Surfaces are mostly flat, with subtle borders and restrained shadows rather than heavy card elevation. Product mockups and selected cards gain depth through layering, inset hairlines, or soft shadow. Rounded corners keep controls and content panels approachable; dark bands provide the strongest visual separation.
## Imagery
Product screenshots and interface mockups are the main proof points, often presented large and layered with small floating signal cards. Hand-drawn line-art characters add a human, playful counterpoint to precise software UI. The hero uses blurred orange, lavender, and aqua fields; gradients are concentrated in artwork and campaign panels. Customer portraits appear as small testimonial identifiers rather than large lifestyle photography.
## Components
### Primary trial button
Filled ### Top navigation
Black Labil Grotesk links in a single horizontal row, balanced by a logo on the left and app and trial actions on the right.
### Email trial form
White email field with a ### Product showcase
Large interface screenshot set into a light or dark section, sometimes surrounded by floating cards and colored signal labels.
### Customer logo row
Compact monochrome customer marks distributed across a spacious grid, with brief migration or customer context beneath.
### Customer quote card
Dark ### Result cards
Mixed customer metrics and quote blocks on a near-white field, with restrained outlines and occasional bright graphic color.
### Measured component styles
- **Primary button** (“Sales Leaders”): background ## Do
- Use ## Don't
- Do not make vivid gradients the default background.
- Do not crowd the page with tight section spacing.
- Do not replace the product UI with generic lifestyle photography.
- Do not use heavy shadows on every card.
- Do not make all sections dark or all sections visually identical.
- Do not treat illustration-only colors as core interface colors.
## Agent prompt
Build a new Amplemarket-style SaaS page using Labil Grotesk Variable or Inter, with a spacious editorial rhythm and clear product proof. Use Warm Canvas (## Page sections (top to bottom)
| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero copy and signup form above a wide product preview, with decorative artwork at the sides. | email-to-trial signup, primary CTA, product preview | warm canvas, blurred gradient artwork, hand-drawn illustration, rounded form |
| 2 | logo-cloud | Section heading above customer logos in a multi-column grid, followed by a centered customer quote. | social proof, customer migration context | monochrome logos, light canvas, quote and portrait |
| 3 | product-showcase | Centered heading and short introduction over a large product interface on a full-width dark band. | product explanation, discover product link | black background, large UI mockup, floating signal cards |
| 4 | feature-split | Two-column dark section pairing a feature headline and explanation with product-related visual content. | feature benefit, signal examples | black background, high-contrast text, product imagery |
| 5 | feature-grid | Centered section introduction above a full-width product feature presentation with supporting content. | platform overview, feature navigation | warm canvas, wide interface visual, small annotation |
| 6 | testimonials | Centered customer quote with a small portrait, role, and company mark. | customer endorsement, named attribution | open whitespace, large quote text, compact identity row |
| 7 | cta | Centered campaign message and trial form within a prominent promotional visual. | email capture, free-trial CTA | dark indigo artwork, bright display lettering, rounded form |
| 8 | category-nav | Centered heading above audience tabs and a multi-column role-specific content area. | audience selection, solution exploration | light card panels, line-art role illustrations, compact links |
| 9 | stats | Centered heading above an asymmetrical grid of metric tiles and customer quote blocks. | quantified outcomes, case-study links | near-white band, pastel metric cards, mixed text blocks |
| 10 | content-feed | Left-aligned section heading above a horizontal row of article previews and a view-all link. | browse articles, view all | near-white surface, thumbnail cards, compact metadata |
| 11 | testimonials | Centered heading above a dense, multi-column testimonial card grid on black. | customer reviews, portrait attribution | black section, charcoal cards, small profile images |
| 12 | footer | Centered final signup message above a wide footer with brand, grouped link columns, and legal links. | final trial signup, site navigation | black background, white headline, muted footer links |
## Source CSS custom properties (selected)
```css
--am--primary-dark: #111;
--am--borders--black-medium: #11111114;
--am--secondary-white: #fff;
--color<deleted|variable-87038ccd-c960-c0f9-a1cc-8dbf267ec9e6>: #111;
--am--borders--white-stronger: #ffffff4d;
--am--border-white: #ffffff0a;
--am--secondary-dark: 
