---
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 (#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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | White surfaces, text on dark sections, and the light portions of product and card treatments. |
| Ink Black | `#111111` | `--color-ink-black` | brand | Primary text, navigation, dark section backgrounds, and the filled trial CTA. |
| Warm Canvas | `#f6f5f3` | `--color-warm-canvas` | surface | Main page canvas across the hero, customer logos, feature content, and conversion sections. |
| Charcoal Panel | `#272625` | `--color-charcoal-panel` | surface | Dark testimonial cards and secondary dark surfaces within the product and footer areas. |
| Electric Aqua | `#99fff9` | `--color-electric-aqua` | accent | Small vivid highlight in product media and gradient artwork, not a dominant page background. |
| Signal Orange | `#e8400d` | `--color-signal-orange` | accent | Expressive orange glow in hero artwork and selected footer or media details. |
| Soft Gray | `#a9a8a8` | `--color-soft-gray` | neutral | Muted supporting copy and footer text against light or dark surfaces. |
| Button Gray | `#b4b4b3` | `--color-button-gray` | semantic | Measured button border tone; use for understated control outlines where applicable. |
| Footer Gray | `#a0a0a0` | `--color-footer-gray` | neutral | Secondary footer and heading text with subdued contrast. |
| Input Border | `#dedddb` | `--color-input-border` | semantic | Fine outline around the white email input. |
| Deep Indigo | `#2e2463` | `--color-deep-indigo` | semantic | Measured dark input border in a colored form treatment. |
| Control Graphite | `#2f2f2f` | `--color-control-graphite` | semantic | Dark control detail sampled from input styling, not a core page color. |
| Night Indigo | `#10054d` | `--color-night-indigo` | surface | Deep violet background used in a single promotional journey graphic. |
| Pale Control | `#e8e8e7` | `--color-pale-control` | semantic | Light button border detail for restrained control separation. |
| Soft Lilac | `#d0b2ff` | `--color-soft-lilac` | accent | Lavender highlight in gradients, hero artwork, and selected expressive graphic details. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Small sampled button detail; the primary dark interface color is #111111. |

### Semantic aliases

`--color-canvas` → `#f6f5f3` (Warm Canvas) · `--color-surface` → `#111111` (Ink Black) · `--color-surface-2` → `#ffffff` (Gallery White) · `--color-surface-3` → `#272625` (Charcoal Panel) · `--color-surface-4` → `#99fff9` (Electric Aqua) · `--color-text` → `#111111` (Ink Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#a9a8a8` (Soft Gray) · `--color-border` → `#ffffff` (Gallery White) · `--color-accent` → `#e8400d` (Signal Orange) · `--color-accent-2` → `#d0b2ff` (Soft Lilac)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#f6f5f3` | 17.33:1 | AAA |
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#111111` | `#272625` | 1.25:1 | fail |
| `#ffffff` | `#f6f5f3` | 1.09:1 | fail |
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#ffffff` | `#272625` | 15.11:1 | AAA |
| `#a9a8a8` | `#f6f5f3` | 2.18:1 | fail |
| `#a9a8a8` | `#111111` | 7.96:1 | AAA |
| `#a9a8a8` | `#ffffff` | 2.37:1 | fail |
| `#a9a8a8` | `#272625` | 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 #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.

### Measured component styles

- **Primary button** (“Sales Leaders”): background #f7f6f3 · text #111111 · border 1px solid #f2f1f0 · radius 8px · padding 12px 0px 28px 0px · 400 16px Labil Grotesk Variable
- **Secondary button** (“Product”): transparent background · text #111111 · border 1px solid · radius 8px · padding 12px 16px · 500 14px Labil Grotesk Variable
- **Link** (“Generative AI Cool Vendor by”): transparent background · text #111111 · radius 0px · padding 0px · 400 16px Labil Grotesk Variable
- **Input**: background #ffffff · text #111111 · border 1px solid #dedddb · radius 12px · padding 0px 16px · 400 16px Labil Grotesk Variable
- **Card** (“Agnieszka Hayashida Business Development”): background #272625 · text #111111 · border 1px solid #1a1a1a · radius 12px · padding 20px · 400 16px Labil Grotesk Variable
- **Navigation item** (“Product Why us Resources Customers Prici”): transparent background · text #111111 · radius 0px · padding 0px · 400 16px Labil Grotesk Variable

## Do

- 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.

## 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 (#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.

## 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: #272625;
--am--secondary-white-transparent: #fff9;
--am--primary-light: #f6f5f3;
--am--secondary-light: #fbfaf9;
--am--border-black: #1111110a;
--color-2<deleted|variable-15c3d4a5-e840-b686-42ee-d9a209b96e2d>: #111;
--color-11<deleted|variable-0611e579-38af-9200-e5e4-9a5cbfeb1294>: #fff0;
--am--primary-dark-transparent: #1119;
--color-3<deleted|variable-f784e865-badb-18ad-f0b6-c80f6d6219b8>: #03198b;
--am--extra--primary-dark-80: #111c;
--am--borders--white-medium: #ffffff14;
--am--borders--black-stronger: #1111114d;
--_ds-theme---surface-primary: #fbfaf9;
--_ds-primitives---font-family-brand: "Labil Grotesk Variable",Arial,sans-serif;
--_ds-theme---text-primary: #111;
--_ds-semantic---typography-display-l-font-size: 64px;
--_ds-semantic---typography-display-l-letter-spacing: -.05em;
--_ds-semantic---typography-display-m-font-size: 56px;
--_ds-semantic---typography-display-m-letter-spacing: -.05em;
--_ds-semantic---typography-display-s-font-size: 44px;
--_ds-semantic---typography-display-s-letter-spacing: -.05em;
--_ds-primitives---spacing-12: 12px;
--_ds-semantic---typography-heading-l-font-size: 36px;
--_ds-semantic---typography-heading-l-letter-spacing: -.04em;
--_ds-semantic---typography-heading-m-font-size: 32px;
--_ds-semantic---typography-heading-m-letter-spacing: -.04em;
--_ds-semantic---typography-heading-s-font-size: 28px;
--_ds-semantic---typography-heading-s-letter-spacing: -.03em;
--_ds-primitives---spacing-24: 24px;
--_ds-semantic---typography-title-l-font-size: 24px;
--_ds-semantic---typography-title-l-letter-spacing: -.03em;
--_ds-semantic---typography-title-m-font-size: 20px;
--_ds-semantic---typography-title-m-letter-spacing: -.02em;
--_ds-semantic---typography-title-s-font-size: 18px;
```

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