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

# Adanola · Design System

> Quiet neutrals, confident activewear imagery

**Theme:** light · **Industry:** fashion · **Source:** https://adanola.com/en-us · **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._

Adanola’s homepage pairs a crisp monochrome storefront with expansive, understated activewear photography. Product carousels, editorial campaign panels, and compact utility navigation keep the shopping journey image-led and direct.

## North star

Let calm monochrome commerce UI frame large, muted campaign photography without competing with it.

## Overview

The visual system is built on white canvas, black text, and restrained pale-gray product surfaces. Full-width campaign photography supplies the warmth and tonal variation; the palette’s muted clothing and studio backgrounds define the mood more than interface color. Favorit is used throughout, with measured medium headings, compact navigation and button labels, and regular-weight product details. The page alternates spacious, full-bleed editorial imagery with dense horizontal product rails. Centered campaign copy sits directly over photography, while product sections return to white backgrounds and left-aligned headings. Thin borders and rectangular controls keep the interface crisp rather than decorative. New badges use a soft gray fill, and quick-add controls invert to black with white text. Maintain a clear contrast between immersive brand imagery and highly legible, practical shopping UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#000000` | `--color-soft-ink` | brand | Primary text, navigation, logo, filled quick-add controls, and outlined shopping buttons. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Page canvas, product-section backgrounds, inverse button text, and announcement-bar copy. |
| Mist Gray | `#e5e7eb` | `--color-mist-gray` | surface | Measured product-card and new-badge surface; pale gray seen in shopping UI. |
| Stone Haze | `#dfe2e1` | `--color-stone-haze` | accent | One half of a measured gradient sample; not a defining interface color in the screenshots. |
| Slate Blue | `#283b4e` | `--color-slate-blue` | accent | Other half of a measured gradient sample; appears as a minor gradient/illustration color, not core UI. |
| Fine Line | `#f2f2f2` | `--color-fine-line` | semantic | Subtle footer hairline separating the utility footer area from surrounding content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e5e7eb` (Mist Gray) · `--color-text` → `#000000` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#f2f2f2` (Fine Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e5e7eb` | 16.96:1 | AAA |
| `#ffffff` | `#e5e7eb` | 1.24:1 | fail |

### Gradients

- `linear-gradient(to right, rgb(223, 226, 225) 50%, rgb(40, 59, 78) 50%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Favorit | `--font-body` | webfont | 400, 700, 500 | Site-wide type for headings, body copy, product details, navigation, links, and buttons. | Inter |

- **Favorit:** Measured weights 400, 500, and 700; headings use medium weight, while labels and navigation stay compact and mostly sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.37, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 36px | 500 | 1.33 | 0 | — | Favorit | Primary campaign headline over hero photography. |
| h2 | 30px | 500 | 1.2 | 0 | — | Favorit | Section headings such as New & Trending. |
| h3 | 20px | 700 | 1.4 | 0 | — | Favorit | Product names and prominent smaller headings. |
| body | 14px | 400 | 1.33 | 0 | — | Favorit | Product details and supporting store copy. |
| caption | 12px | 400 | 1.33 | 0 | — | Favorit | Compact product labels and secondary metadata. |
| button | 12px | 500 | 1.33 | 0 | — | Favorit | Shop, view-all, and quick-add controls. |
| nav | 12px | 400 | 1.33 | 0 | — | Favorit | Header category links and footer navigation labels. |
| link | 12px | 400 | 1.33 | 0 | — | Favorit | Product names, utility links, and promotional text. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 24 px.
- Section rhythm 54px · element gap 8px · card padding 94px · max content width 1392px.

The page uses full-width campaign panels interleaved with constrained shopping sections. Measured page max width is 1392px, with product rails arranged as dense multi-column rows and section headings aligned to the left. Hero copy is centered over the image; product and footer content is predominantly left-aligned. Section spacing is comfortable, with a measured 54px section gap and 8px element gap. Keep the layout responsive while preserving the contrast between expansive image bands and compact merchandise grids.

## Shape & elevation

- Radius: button `4px` · nav `4px` · xs `4px`
- No box shadows measured: the page is flat.

The interface is mostly flat, with no measured shadows. Use white space, subtle hairlines, and image boundaries to separate regions rather than raised cards. Product cards sit directly on the page; gray badges and black quick-add buttons provide the limited layering and contrast.

## Imagery

Photography is the primary visual expression: editorial models wear neutral, dark, and muted activewear in soft studio settings. Campaign panels use full-bleed compositions with centered white or dark copy, while product cards show individual looks against pale backgrounds. Measured page sections include video in the fabric story. Favor natural poses, muted grading, and uncluttered framing; interface illustrations are not a defining element.

## Components

### Announcement bar

A narrow black strip above the white header, with centered white delivery copy.

### Store navigation

White horizontal header with compact black category links, centered wordmark, and utility icons.

### Campaign hero

Full-bleed photography with centered headline and a compact, high-contrast shopping CTA.

### Product rail

Horizontal multi-item merchandise carousel with image, compact name and price, color options, and quick-add.

### New badge

Small rectangular pale-gray badge with black text, placed over product imagery.

### Quick Add

Black rectangular product action with white Favorit text; measured label uses 12px bold.

### Footer

White multi-column link area with bold wordmark, compact category lists, and fine divider.

### Measured component styles

- **Primary button** (“Quick Add”): background #000000 · text #ffffff · radius 0px · padding 4px 8px · 700 12px Favorit
- **Secondary button** (“SHOP NEW IN”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 11px 24px · 500 12px Favorit
- **Link** (“Funnel Neck Balloon Sleeve Down Puffer J”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Favorit
- **Input** (“Afghanistan (USD $) Åland Islands (USD $”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 0px 32px 0px 8px · 400 14px Favorit
- **Card** (“New”): background #e5e7eb · text #000000 · radius 0px · padding 376.7px 0px 0px 0px · 400 12px Favorit
- **Badge** (“New”): background #e7e9e9 · text #000000 · radius 0px · padding 4px 8px · 500 12px Favorit
- **Navigation item** (“NEW SHOP ACTIVE SWEATS KNITS”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Favorit

## Do

- Use white space and black type as the default interface foundation.
- Give campaign photography the dominant visual area.
- Keep navigation and shopping labels compact and clear.
- Use black filled controls for quick-add actions.
- Keep product cards flat with restrained gray badges.
- Alternate image-led storytelling with practical product rails.

## Don't

- Do not introduce a bright interface accent palette.
- Do not add shadows or decorative card elevation.
- Do not place dense copy over campaign photography.
- Do not round controls beyond the measured minimal treatment.
- Do not let product UI overpower the photography.
- Do not treat gradient sample colors as core brand colors.

## Agent prompt

Build a fashion storefront page in Adanola’s restrained editorial style. Use Gallery White (#ffffff) as the canvas and Soft Ink (#000000) for navigation, headings, product details, and primary actions. Keep Mist Gray (#e5e7eb) to subtle product surfaces or badges; use Fine Line (#f2f2f2) only for delicate separators. Treat Stone Haze (#dfe2e1) and Slate Blue (#283b4e) as incidental measured gradient colors, not a required brand treatment. Use Favorit or a close sans-serif substitute, compact labels, and medium-weight headings. Arrange a clean header, full-bleed muted campaign image, product rail, and editorial content bands. Keep product cards flat, with concise details and black quick-add controls. Let photography carry the color and mood; keep the interface quiet, direct, and legible.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two full-bleed campaign panels with centered copy and compact CTAs. | Shop campaign CTA, Carousel position indicator | Full-bleed photography, Centered overlay text, Rectangular button |
| 2 | product-grid | White product rail with left-aligned title and dense horizontal cards. | View all, Quick add, Product carousel | Pale product surfaces, New badges, Compact product details |
| 3 | video | Single full-bleed editorial media panel with centered heading and shop link. | Shop now, Video-led storytelling | Large media, Centered overlay copy |
| 4 | product-grid | White-background horizontal product rail with multiple compact cards. | Quick add, Swipeable product row | Product photography, New badges, Color options |
| 5 | category-nav | Full-bleed category imagery in a multi-column image grid. | Category discovery, Explore links | Large category photos, Overlay CTA |
| 6 | cta | Single full-bleed campaign panel with centered CTA. | Start here | Model photography, Centered overlay copy, Compact button |
| 7 | product-grid | White product rail with left-aligned heading and several product cards. | Recommended products, Quick add | Product carousel, Color swatches, Compact prices |
| 8 | footer | White footer arranged in several compact link columns with a larger wordmark. | Customer support links, Country and currency selector | Column navigation, Fine divider, Brand wordmark |

## Source CSS custom properties (selected)

```css
--ada-color-foreground: 0 0 0;
--wishlist-inactive-color: #000000;
--wishlist-active-color: #dc2626;
--atlas-background-main: #FFFFFF;
--atlas-background-content: #FFFFFF;
--atlas-background-success: #518b22;
--atlas-background-error: #be2119;
--atlas-text-primary: #000000;
--atlas-text-secondary: #00000080;
--atlas-text-negative: #be2119;
--atlas-text-positive: #366d12;
--atlas-text-placeholder: #747576;
--atlas-text-primary-inverse: #FFFFFF;
--atlas-primary-color: #000000;
--atlas-button-primary: #000000;
--atlas-button-disabled-color: grey;
--atlas-button-text-disabled-color: lightgrey;
--atlas-border-light: rgba(0, 0, 0, 0.05);
--atlas-border-focus: #41a1e6;
--atlas-border-dark: rgba(0, 0, 0, 0.5);
--atlas-focus-outline-color: rgba(65, 161, 230, 0.2);
--atlas-text-selection: rgba(150, 180, 255, 0.5);
--atlas-font-family: Favorit, ui-serif, Georgia, "Times New Roman", Times, serif;
--atlas-font-size-tiny: 12px;
--atlas-font-size-small: 14px;
--atlas-font-size-normal: 16px;
--atlas-font-size-large: 18px;
--atlas-font-weight-normal: 400;
--atlas-font-weight-bold: bolder;
--atlas-heading-font-family: Favorit, ui-serif, Georgia, "Times New Roman", Times, serif;
--atlas-heading-text-primary: #000000;
--atlas-heading-text-secondary: #00000080;
--atlas-heading-text-negative: #be2119;
--atlas-font-size-display: 40px;
--atlas-font-size-h1: 40px;
--atlas-font-size-h2: 32px;
--atlas-font-size-h3: 24px;
--atlas-font-size-h4: 18px;
--atlas-font-size-h5: 16px;
--atlas-font-weight-heading: 400;
```

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