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

# Swap · Design System

> Editorial clarity for global commerce

**Theme:** light · **Industry:** saas · **Source:** https://www.swap-commerce.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._

Swap pairs oversized editorial typography and open white space with fresh green accents to present an all-in-one commerce platform. A restrained mix of product cards, certification marks, blog imagery, and a dark demo form makes the page feel polished and practical.

## North star

Let editorial serif headlines and generous white space lead, using pale green bands and compact rounded controls to organize commerce details.

## Overview

The page uses a bright white canvas as its main visual field, with black text providing crisp contrast and pale green reserved for product-feature bands and the demo section. A vivid green CTA gradient adds a focal point without overwhelming the restrained palette. Large, lightweight serif headlines create an editorial voice; a clean sans-serif handles navigation, body copy, buttons, and form labels. The centered hero leads into a customer-logo strip, then a green-tinted product feature area with three compact cards. Later sections return to white for results, security, and the blog, before a pale green contact band anchors the demo form. Content stays airy and carefully aligned, with rounded pills and cards softening the otherwise clean geometry. Product interfaces and editorial photography support the message, while the illustrated footer adds a distinct hand-drawn finish.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas and white space; also used for reversed text and the dark demo form's submit control. |
| Ink | `#000000` | `--color-ink` | neutral | Main text, navigation, headings, footer links, and the solid dark hero CTA. |
| Fresh Mint | `#a3fda7` | `--color-fresh-mint` | brand | Primary demo buttons, green CTA gradient midpoint, and selected footer or interface accents. |
| Lime Wash | `#f2ffe3` | `--color-lime-wash` | surface | Soft green feature and demo section backgrounds, including fading section gradients. |
| Slate Rule | `#626869` | `--color-slate-rule` | semantic | Measured border tone on rounded form fields; use for subdued input outlines. |
| Deep Moss | `#2d3637` | `--color-deep-moss` | surface | Inverse card surface and dark demo form panel, with white text and occasional dark links. |
| Lime Spark | `#82ff87` | `--color-lime-spark` | accent | Bright leading stop in the CTA gradient; keep as a supporting accent rather than a broad surface. |
| Citrus Glow | `#deff82` | `--color-citrus-glow` | accent | Yellow-green ending stop in the CTA gradient; appears as a small button treatment. |
| Soft Graphite | `#cccccc` | `--color-soft-graphite` | neutral | Thin dividers and outlines, including small article badges and navigation details. |
| Warm Stone | `#e9e7e2` | `--color-warm-stone` | semantic | Muted tariff-category chips and small secondary button surfaces. |
| Dusk Slate | `#575e5f` | `--color-dusk-slate` | semantic | Secondary phone-input border tone; visible in form details rather than the main page canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2ffe3` (Lime Wash) · `--color-surface-2` → `#2d3637` (Deep Moss) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#626869` (Slate Rule) · `--color-accent` → `#a3fda7` (Fresh Mint) · `--color-on-accent` → `#000000` (Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f2ffe3` | 20.19:1 | AAA |
| `#000000` | `#2d3637` | 1.69:1 | fail |
| `#ffffff` | `#f2ffe3` | 1.04:1 | fail |
| `#ffffff` | `#2d3637` | 12.39:1 | AAA |
| `#a3fda7` | `#ffffff` | 1.22:1 | fail |
| `#a3fda7` | `#f2ffe3` | 1.18:1 | fail |
| `#a3fda7` | `#2d3637` | 10.13:1 | AAA |

### Gradients

- `linear-gradient(rgb(242, 255, 227) 0px, rgba(242, 255, 227, 0) 100%)`
- `linear-gradient(0deg, rgb(242, 255, 227) 0px, rgba(242, 255, 227, 0) 100%)`
- `linear-gradient(rgb(163, 253, 167), rgb(163, 253, 167))`
- `linear-gradient(90deg, rgb(130, 255, 135) 0%, rgb(163, 253, 167) 50%, rgb(222, 255, 130) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| mainFont | `--font-body` | webfont | 400, 500, 700 | Sans-serif for navigation, body copy, buttons, captions, form controls, and compact labels. | Inter |
| secondaryFont | `--font-display` | webfont | 300, 400, 100 | Serif display face for the hero and major section headlines, results figures, and editorial titles. | Cormorant Garamond |

- **mainFont:** Use mostly regular weight, with medium navigation or link emphasis; keep labels and buttons in sentence case.
- **secondaryFont:** Light weights, tight tracking, and compact leading create large, refined headlines; avoid all-caps display styling.

### Type scale — Perfect Fifth (ratio ≈ 1.516, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 100 | 0.95 | -0.01em | — | secondaryFont | Oversized editorial display headlines where the layout calls for a dramatic statement. |
| h1 | 100px | 300 | 0.95 | -0.01em | — | secondaryFont | Main hero headline and the largest page-level title. |
| h2 | 80px | 300 | 0.95 | -0.01em | — | secondaryFont | Major section headlines such as product platform and blog introductions. |
| h3 | 72px | 300 | 1 | -0.017em | — | secondaryFont | Feature or section subheads, including security and results messaging. |
| h4 | 60px | 300 | 0.95 | -0.01em | — | secondaryFont | Smaller card and subsection headings where present. |
| body | 15px | 400 | 1.2 | 0 | — | mainFont | Supporting descriptions, card copy, and general page text. |
| caption | 12px | 400 | 1.2 | 0 | — | mainFont | Compact article metadata, tags, and secondary labels. |
| button | 12px | 400 | 1.2 | 0 | — | mainFont | Small button labels and compact interface actions. |
| nav | 15px | 400 | 1.2 | 0 | — | mainFont | Header navigation links and menu items. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 6, 7, 8, 10, 11, 12, 14, 15, 19, 20, 30, 40, 80 px.
- Section rhythm 80px · element gap 12px · card padding 20px · max content width 1040px.

The header and content sit within a centered, measured page width, while most sections retain broad white margins. A centered hero gives way to a horizontal logo cloud, then a three-column feature-card grid. Results and security sections use simpler centered or split alignments, followed by a multi-card editorial feed. The demo area switches to a two-column layout with copy beside a dark form. Section spacing is generous and consistent, while cards and labels remain compact enough to keep the long page scannable.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `24px` · media `10px` · badge `9999px` · nav `10px` · link `10px` · xs `10px` · sm `24px` · pill `9999px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.22) 0px 14px 32px -20px, rgba(0, 0, 0, 0.1) 0px `
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most surfaces are flat against white, with separation created by background bands, spacing, and fine outlines rather than prominent shadows. Feature cards have rounded corners and subtle depth around their product media. The demo form is a dark rounded panel on the pale green band; avoid adding strong shadows or layered effects elsewhere.

## Imagery

Brand logos appear in a restrained horizontal strip. Product feature cards include small commerce-interface screenshots framed within soft, pale media areas; blog cards use varied editorial images with rounded corners. Certification logos provide credibility without dominating the security section. The final footer illustration is black line art on white, offering a hand-drawn contrast to the otherwise polished product UI. Keep image treatments clean and avoid heavy overlays.

## Components

### Pill navigation and CTA

Use black navigation text on white with a fine header divider. The primary Book a Demo action is a mint pill with black text; a solid black pill provides a secondary contrast in the hero.

### Editorial hero

Center a lightweight serif headline, small uppercase sans-serif eyebrow, short supporting copy, and a paired gradient and black pill CTA treatment.

### Commerce feature cards

Arrange three rounded cards in a row with compact sans-serif labels, serif result figures, concise copy, and framed product-interface imagery.

### Result metrics

Present large light serif figures in an open three-column row, with brief sans-serif explanations underneath.

### Article cards

Use rounded editorial thumbnails, small outlined or warm neutral topic badges, compact metadata, serif or restrained headings, and bold black Read more links.

### Demo form

Place a rounded Deep Moss panel on the pale green contact band, with light text, rounded outlined fields, and a white full-width submit control.

### Hand-drawn footer art

Finish with a wide black line-art commerce scene on the white canvas, beneath a dense but orderly multi-column link directory.

### Measured component styles

- **Primary button** (“Book a Demo”): background #a3fda7 · text #000000 · border 1px solid #a3fda7 · radius 200px · padding 0px 18.8px · 400 15px mainFont
- **Secondary button** (“Tariffs”): background #e9e7e2 · text #000000 · border 1px solid #e9e7e2 · radius 3.35544e+07px · padding 7.2px 10.2px · 400 12px mainFont
- **Link** (“Read more”): transparent background · text #000000 · radius 0px · padding 0px 0px 4px 0px · 700 15px mainFont
- **Input** (“Afghanistan (‫افغانستان‬‎) Albania (Shqi”): transparent background · text #ffffff · border 1px solid #626869 · radius 100px · padding 12px 42px 0px 18.8px · 400 16px mainFont
- **Card** (“Agentic Storefront 2x conversion Guided ”): transparent background · text #000000 · radius 24px · padding 20px · 400 16px mainFont · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“4 Min”): transparent background · text #000000 · border 1px solid #cccccc · radius 3.35544e+07px · padding 7.2px 10.2px · 400 12px mainFont
- **Navigation item** (“Services Industries Resources Customer S”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px mainFont

## Do

- Use white as the dominant canvas.
- Reserve pale green bands for feature and contact sections.
- Pair large lightweight serif headlines with clean sans-serif interface text.
- Keep primary actions rounded and visually distinct.
- Give major sections generous breathing room.
- Use product imagery to clarify platform features.

## Don't

- Do not make the page feel dark or densely filled.
- Do not use green as the default text color.
- Do not replace editorial serif headlines with heavy bold sans-serif.
- Do not add conspicuous shadows to every card.
- Do not let product screenshots overpower their cards.
- Do not crowd the hero with extra copy or controls.

## Agent prompt

Build a new page in Swap’s visual style: a clean white canvas with Ink (#000000) text and Gallery White (#ffffff) space. Use lightweight editorial serif headlines, paired with a restrained sans-serif for navigation, body copy, controls, and labels. Keep the header simple and the hero centered, with a small uppercase eyebrow, a concise message, and rounded CTAs. Use Fresh Mint (#a3fda7) for the main action; a subtle gradient can move from Lime Spark (#82ff87) to Citrus Glow (#deff82). Organize content into spacious sections, using Lime Wash (#f2ffe3) for a feature or contact band. Show product details in compact rounded cards, and reserve Deep Moss (#2d3637) for inverse panels. Favor thin outlines over heavy shadows, and use authentic product imagery or restrained editorial visuals.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero beneath a slim, full-width navigation bar. | primary and secondary CTA, explainer video link | serif headline, mint gradient pill, black pill CTA |
| 2 | logo-cloud | Centered heading above a horizontal strip of customer logos. | social proof | monochrome logo row, open white space |
| 3 | feature-grid | Centered headline over three feature cards in a row. | feature discovery, linked card details | pale green band, rounded cards, product screenshots |
| 4 | feature-split | Single left-aligned section headline with broad surrounding whitespace. | benefit framing | small uppercase eyebrow, editorial serif heading |
| 5 | stats | Three evenly spaced metrics in a horizontal row. | outcome scanning | large serif numerals, short sans-serif captions |
| 6 | cta | Centered title, supporting sentence, and action above trust marks. | learn more link, trust signals | serif heading, compact mint button, certification logos |
| 7 | gallery | Two certification images arranged side by side. | trust reinforcement | isolated certification marks, white background |
| 8 | content-feed | Left-aligned editorial heading above a three-card article row. | article discovery, read-more links | rounded thumbnails, topic badges, compact metadata |
| 9 | contact | Two-column contact band with copy on the left and form on the right. | lead capture, country-code phone entry | Lime Wash band, Deep Moss form, rounded outlined inputs |
| 10 | footer | Dense multi-column link directory on white, followed by footer details. | grouped site navigation, email signup | small link lists, hand-drawn illustration |
| 11 | gallery | Full-bleed horizontal illustration spanning the page width. | brand sign-off | black line art, white canvas |

## Source CSS custom properties (selected)

```css
--v-space: clamp(calc(160*1px),calc(160*1px + (160 - 160)*(0.10417vw - 1.5px)),calc(160*1px));
--v-space-small: clamp(calc(80*1px),calc(80*1px + (80 - 80)*(0.10417vw - 1.5px)),calc(80*1px));
--color-bg: #fff;
--color-text: #000;
--color-light-text: #0009;
--color-hr: #ccc;
--PhoneInput-color--focus: #a3fda7;
--PhoneInputCountrySelectArrow-borderWidth: 1px;
--PhoneInputCountrySelectArrow-color: currentColor;
--PhoneInputCountrySelectArrow-color--focus: #a3fda7;
--PhoneInputCountryFlag-borderWidth: 1px;
--PhoneInputCountryFlag-borderColor: #00000080;
--PhoneInputCountryFlag-borderColor--focus: #a3fda7;
--PhoneInputCountryFlag-backgroundColor--loading: #0000001a;
--surface-0: #fff;
--surface-1: color-mix(in srgb,#fff/**/94%,#000 6%);
--surface-2: color-mix(in srgb,#fff/**/88%,#000 12%);
--surface-border: #ccc;
--surface-green-rule: #083a2633;
--surface-green-gradient-outer: #f2ffe300;
--surface-marquee-chip-bg: #d0e3c7;
--surface-marquee-chip-radius: 8px;
--v-space-mobile: 80;
--v-space-desktop: 160;
--v-space-desktop-large: 160;
--v-space-small-mobile: 40;
--v-space-small-desktop: 80;
--v-space-small-desktop-large: 80;
```

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