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

# A-dam · Design System

> Playful essentials, grounded in responsible materials

**Theme:** light · **Industry:** fashion · **Source:** https://a-dam.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._

A-dam’s homepage pairs crisp, product-led shopping with expressive seasonal photography and sustainability storytelling. A restrained white-and-ink interface lets vivid campaign imagery, product prints, and a sharp blue announcement band provide the visual energy.

## North star

Keep the interface quiet and product-focused so vivid, natural campaign photography supplies the personality.

## Overview

The page uses a predominantly white canvas and deep blue-black text to keep a long, image-rich storefront feeling clean and easy to scan. A saturated blue announcement strip at the top is the most visible interface accent; sale badges use a small, punchy red highlight, while muted gray supports secondary copy and pale gray grounds product cards. GT Walsheim Pro supplies a friendly, geometric sans-serif voice: large bold headings anchor sections, with compact, regular-weight product and supporting text. The layout alternates wide campaign imagery, centered product carousels, category tiles, and editorial image-text splits. Photography carries most of the color, moving from earthy autumn tones and dark forest greens to bright prints and lifestyle scenes. Broad white gaps separate these varied content blocks, while rounded pill CTAs provide a soft counterpoint to mostly square media and card surfaces.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Ink | `#000e1f` | `--color-midnight-ink` | brand | Primary text and links; also anchors dark inverse surfaces such as the footer. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation text over photography, and light CTA surfaces. |
| Soft Fog | `#f4f4f4` | `--color-soft-fog` | surface | Pale product-card and footer surfaces that distinguish content without heavy framing. |
| Sale Coral | `#fa3f3f` | `--color-sale-coral` | accent | Small uppercase promotional badges and occasional highlighted text. |
| Slate Mist | `#666e79` | `--color-slate-mist` | neutral | Secondary text and supporting links where primary ink would feel too strong. |
| Quiet Divider | `#dcdddf` | `--color-quiet-divider` | neutral | Thin footer and interface hairlines, not a prominent card outline. |
| True Black | `#000000` | `--color-true-black` | semantic | Occasional dark text and inverse section details; campaign photography contributes most perceived black. |
| Signal Cobalt | `#0000c5` | `--color-signal-cobalt` | accent | Top announcement band and a single archive-sale promotional card; a rare, high-contrast accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f4f4` (Soft Fog) · `--color-surface-2` → `#000e1f` (Midnight Ink) · `--color-surface-3` → `#000000` (True Black) · `--color-text` → `#000e1f` (Midnight Ink) · `--color-text-muted` → `#666e79` (Slate Mist) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#dcdddf` (Quiet Divider) · `--color-accent` → `#fa3f3f` (Sale Coral) · `--color-accent-2` → `#0000c5` (Signal Cobalt)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000e1f` | `#ffffff` | 19.4:1 | AAA |
| `#000e1f` | `#f4f4f4` | 17.64:1 | AAA |
| `#000e1f` | `#000000` | 1.08:1 | fail |
| `#666e79` | `#ffffff` | 5.16:1 | AA |
| `#666e79` | `#f4f4f4` | 4.69:1 | AA |
| `#666e79` | `#000e1f` | 3.76:1 | AA-large |
| `#666e79` | `#000000` | 4.07:1 | AA-large |
| `#ffffff` | `#f4f4f4` | 1.1:1 | fail |
| `#ffffff` | `#000e1f` | 19.4:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |

### Gradients

- `linear-gradient(to right, rgb(0, 14, 31), rgb(0, 14, 31))`
- `linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT Walsheim Pro | `--font-body` | webfont | 400, 700, 500, 600 | Site-wide navigation, headings, product information, links, and promotional labels. | Manrope |

- **GT Walsheim Pro:** Geometric sans with bold, compact headings and regular body copy; measured tracking is neutral and text casing is generally natural.

### Type scale — Augmented Fourth (ratio ≈ 1.402, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 70.5px | 700 | 1 | 0 | — | GT Walsheim Pro | Oversized campaign or editorial display headings. |
| h1 | 43.5px | 700 | 1 | 0 | — | GT Walsheim Pro | Primary hero headline. |
| h2 | 37.5px | 700 | 1.1 | 0 | — | GT Walsheim Pro | Major section headings and prominent editorial titles. |
| h3 | 30px | 700 | 1.4 | 0 | — | GT Walsheim Pro | Subsection and category headings. |
| h4 | 26px | 700 | 1.1 | 0 | — | GT Walsheim Pro | Smaller feature or content-block headings. |
| body | 13px | 400 | 1.4 | 0 | — | GT Walsheim Pro | Product details, descriptions, and supporting copy. |
| caption | 12px | 500 | normal | 0 | — | GT Walsheim Pro | Compact labels, product metadata, and image captions. |
| nav | 12px | 500 | normal | 0 | — | GT Walsheim Pro | Header menu and utility navigation labels. |
| link | 13px | 400 | 1.4 | 0 | — | GT Walsheim Pro | Product names, editorial links, and supporting actions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 24, 32, 40, 48, 72 px.
- Section rhythm 48px · element gap 2px · card padding — · max content width 1344px.

The page is a long, comfortable-density storefront, with a measured maximum content width of 1344px and full-bleed campaign media. Product collections use multi-column rows and carousels; category imagery appears in three-column grids, while brand stories use two-column image-and-copy splits. Most sections align to the left or center according to their content, with generous white intervals between them. The measured spacing system uses a 4px base and a 48px section gap; use these measured values as the rhythm rather than adding decorative layout complexity.

## Shape & elevation

- Radius: button `9999px` · media `50%` · link `9999px` · pill `9999px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0.15) 1px 1px 2px 0px, rgba(0, 0, 0, 0.15) 3px 3px 8px 0px, rgba(255, 255, 255, 0.3) -0.5px -0.5px 0.5px 0px inset, rgba(50, 50, 50, 0.2) -0.6px -0.6px 0.5px 0px inset, rgba(0, 0, 0, 0.2`
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The overall treatment is flat, with white space and pale card grounds doing most of the grouping. Borders are restrained and appear mainly as fine footer or control dividers. Buttons use rounded pill silhouettes; the measured button shadow is an inset layered treatment rather than a broad floating shadow. Keep overlays and badges compact, reserving stronger contrast for the cobalt announcement and red sale labels.

## Imagery

Photography is the primary expressive layer: full-width seasonal product campaigns, close product images on pale card grounds, and lifestyle/editorial scenes. Images favor natural textures, dark greens, warm earth tones, and visible garment prints. Category tiles crop photography tightly and overlay bold white labels; product cutouts remain clean and centered. The interface itself is mostly flat, so avoid illustration or 3D embellishment that competes with the photography.

## Components

### Announcement strip

A narrow, saturated #0000c5 band at the top, with centered white linked copy and small directional arrows.

### Hero campaign

Full-bleed seasonal product photography with white navigation and a lower-left text block; pair a compact eyebrow and bold headline with a white pill CTA.

### Product carousel

A row of product cutouts on #f4f4f4 grounds, with small product names, prices, ratings, and compact promotional badges.

### Category image tiles

Three photographic tiles with large, bold white category labels over darkened imagery.

### Editorial split

Two-column storytelling block combining lifestyle or material photography with a small eyebrow, bold title, concise copy, and understated link.

### Pill control

Rounded, minimal CTA or collection link with a light surface and #000e1f text; keep its treatment clear without heavy outlines.

### Footer

Multi-column company, contact, and policy links on a pale gray surface, separated from the payment and locale row by a fine hairline.

### Measured component styles

- **Primary button** (“Nieuwe collectie”): background #ffffff · text #000e1f · border 1px solid · radius 30px · padding 0px · 400 16px GT Walsheim Pro
- **Link** (“A-dam”): transparent background · text #000d20 · radius 0px · padding 0px · 400 13px GT Walsheim Pro
- **Card** (“BESPAAR 29%”): background #f4f4f4 · text #000e1f · radius 0px · padding 0px · 400 15px GT Walsheim Pro
- **Badge** (“BESPAAR 29%”): background #fa3f3f · text #ffffff · radius 0px · padding 6px · 600 10px GT Walsheim Pro · uppercase
- **Navigation item** (“Shop Archive sale Campaigns Over ons Loy”): transparent background · text #ffffff · radius 0px · padding 0px · 400 15px GT Walsheim Pro

## Do

- Use #ffffff as the dominant canvas.
- Set primary text and links in #000e1f.
- Let campaign photography carry most of the color.
- Use #0000c5 sparingly for a high-contrast announcement or promotion.
- Reserve #fa3f3f for small sale highlights.
- Keep headings bold and product copy compact.
- Separate content with generous white space.

## Don't

- Do not turn every section into a colored band.
- Do not use shadows to make cards appear to float.
- Do not add gradients absent from the measured visual system.
- Do not let promotional accents overpower product photography.
- Do not use decorative display fonts or wide tracking.
- Do not frame every card with a prominent border.

## Agent prompt

Build a fashion-commerce page in A-dam’s visual style. Use Gallery White (#ffffff) as the main canvas, Midnight Ink (#000e1f) for headings and links, and Soft Fog (#f4f4f4) for quiet product-card grounds. Reserve Signal Cobalt (#0000c5) for a narrow announcement or one promotional feature, and Sale Coral (#fa3f3f) for small sale badges. Use a GT Walsheim Pro-like geometric sans: bold, natural-case headlines and compact, readable product details. Create a full-width photographic campaign hero, scannable product rows, image-led category tiles, and editorial image-text splits. Keep the overall layout open, with generous white intervals and minimal borders or elevation. Make photography feel tactile and natural; keep controls simple, pill-shaped, and secondary to the merchandise.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed seasonal image with lower-left text and a transparent overlay navigation. | Campaign CTA, Overlay navigation | Full-bleed photography, White hero text, Pill button |
| 2 | product-grid | Wide product carousel beneath a left-aligned heading and right-side browse link. | Horizontal product browsing, Product ratings | Pale product grounds, Sale badges, Compact product metadata |
| 3 | feature-grid | Centered sustainability introduction above a multi-column archive-sale and product row. | Brand story, Shop sale | Centered heading, Cobalt promotion tile, Product cards |
| 4 | category-nav | Three equal photographic category tiles in a single row. | Category navigation | Image tiles, Bold white labels |
| 5 | category-nav | Three equal photographic category tiles in a single row. | Category navigation | Image tiles, Bold white labels |
| 6 | testimonials | Compact horizontal review cards spanning the content width. | Review browsing, Star ratings | Small white cards, Rating marks, Fine dividers |
| 7 | hero | Full-width dark lifestyle campaign with lower-left copy and action. | Campaign CTA | Dark photography, White overlay type |
| 8 | category-nav | Three evenly spaced product-category images on pale grounds. | Category navigation | Centered product cutouts, Pale gray cards |
| 9 | product-grid | Product carousel with heading and browse link above a multi-column product row. | Gift shopping, Horizontal product browsing | Product cutouts, Sale badges, Ratings |
| 10 | feature-split | Two-column split with campaign image beside copy and an editorial link. | Collection discovery | Lifestyle image, Small eyebrow, Bold title |
| 11 | feature-split | Two-column editorial block with copy beside material photography. | Sustainability education | Material still life, Eyebrow label, Text link |
| 12 | feature-grid | Two large image-led story cards beneath a left-aligned section heading. | Brand discovery | Large editorial images, Understated links |
| 13 | newsletter | Centered heading and compact email signup form. | Email signup | Centered content, Simple input, Pill action |
| 14 | footer | Four-column footer information area above a separated payment and locale utility row. | Contact access, Policy navigation, Locale selection | Pale footer surface, Fine divider, Compact link columns |

## Source CSS custom properties (selected)

```css
--section-vertical-spacing: 4.5rem;
--section-stack-row-gap: 3rem;
--form-gap: 1.25rem;
--fieldset-gap: 0.75rem;
--form-control-gap: 0.5rem;
--checkbox-control-gap: 0.75rem;
--product-list-column-gap: 0.75rem;
--product-list-row-gap: 2.5rem;
--subheading-font-family: "GT Walsheim Pro", sans-serif;
--subheading-font-weight: 500;
--subheading-font-style: normal;
--subheading-font-size: 0.75rem;
--subheading-text-transform: none;
--subheading-letter-spacing: 0em;
--heading-font-family: "GT Walsheim Pro", sans-serif;
--heading-font-weight: 700;
--heading-font-style: normal;
--heading-text-transform: none;
--heading-letter-spacing: 0em;
--heading-italic-font-family: Helvetica, Arial, sans-serif;
--heading-italic-font-weight: 400;
--heading-italic-font-size-multiplier: 0%;
--text-font-family: "GT Walsheim Pro", sans-serif;
--text-font-weight: 400;
--text-font-style: normal;
--text-transform: none;
--text-letter-spacing: 0em;
--text-line-height: 1.4;
--text-font-medium-weight: 500;
--text-font-bold-weight: 700;
--button-font: normal 400 1.0rem / normal "GT Walsheim Pro", sans-serif;
--button-text-transform: none;
--button-letter-spacing: 0em;
--text-heading-size-factor: 0.9;
--text-display-xl: max(0.75rem, clamp(3.5rem, 1.9223rem + 6.7314vw, 10rem) * 0.9);
--text-display-l: max(0.75rem, clamp(3.375rem, 2.1311rem + 5.3074vw, 8.5rem) * 0.9);
--text-display-m: max(0.75rem, clamp(3.25rem, 2.3701rem + 3.7540vw, 6.875rem) * 0.9);
--text-h1: max(0.75rem, clamp(3rem, 2.3325rem + 2.8479vw, 5.75rem) * 0.9);
--text-h2: max(0.75rem, clamp(2.5rem, 1.9539rem + 2.3301vw, 4.75rem) * 0.9);
--text-h3: max(0.75rem, clamp(2rem, 1.6359rem + 1.5534vw, 3.5rem) * 0.9);
```

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