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

# AXEL ARIGATO · Design System

> Quiet monochrome frames bold fashion imagery.

**Theme:** light · **Industry:** fashion · **Source:** https://axelarigato.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 restrained monochrome storefront pairs compact navigation and uppercase labels with expansive fashion campaign photography. Product carousels and editorial image blocks carry the browsing experience, with subtle rules and little visual chrome.

## North star

Keep the interface quiet and tightly typeset so full-bleed campaign photography and product imagery remain the focus.

## Overview

The homepage relies on a quiet neutral frame so campaign imagery and product photography provide nearly all of its visual character. Gallery White (#ffffff) forms the main section surface, while Soft Canvas (#f3f3f3) appears in the page canvas and interface details. Ink (#000000) carries the logo, headlines, and primary text; Near Black (#090909) supports secondary navigation and utility labels. Hairline Gray (#e9e9e9) separates content without introducing heavy panels. HelveticaNowVar is used throughout in compact, mostly uppercase interface copy, with regular mixed-case navigation. The layout alternates a full-bleed campaign hero, horizontal product displays, and paired editorial images. Broad image areas contrast with tightly set product names, prices, and controls. The visual hierarchy stays flat and direct: no prominent shadows or rounded-card language, just photography, whitespace, and precise alignment.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#f3f3f3` | `--color-soft-canvas` | surface | Page canvas and occasional light interface fills; a restrained neutral behind the imagery. |
| Ink | `#000000` | `--color-ink` | neutral | Primary logo, headings, main copy, and high-contrast links or controls. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant section background beneath product carousels, editorial blocks, and footer content. |
| Near Black | `#090909` | `--color-near-black` | neutral | Secondary navigation, utility text, subdued links, and small interface labels. |
| Hairline Gray | `#e9e9e9` | `--color-hairline-gray` | semantic | Fine section separators and understated interface borders. |

### Semantic aliases

`--color-canvas` → `#f3f3f3` (Soft Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#090909` (Near Black) · `--color-border` → `#e9e9e9` (Hairline Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f3f3f3` | 18.93:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#090909` | `#f3f3f3` | 17.94:1 | AAA |
| `#090909` | `#ffffff` | 19.91:1 | AAA |

### Gradients

- `linear-gradient(-55.99deg, rgba(217, 217, 217, 0), rgba(217, 217, 217, 0.24))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| HelveticaNowVar | `--font-body` | webfont | 520, 470 | Site-wide interface type for navigation, body copy, captions, buttons, and links. | Inter |

- **HelveticaNowVar:** Compact sans-serif with measured weights around 470–520; labels and many links are uppercase, while navigation also uses mixed case.

### Type scale — Major Third (ratio ≈ 1.25, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 13px | 520 | 1.5 | 0 | uppercase | HelveticaNowVar | Compact uppercase supporting copy and page-level information. |
| caption | 11px | 520 | 1.5 | 0 | uppercase | HelveticaNowVar | Small uppercase labels accompanying images and product details. |
| button | 13px | 520 | 1.5 | 0 | uppercase | HelveticaNowVar | Uppercase calls to action and carousel controls. |
| nav | 13px | 520 | 1.5 | 0 | — | HelveticaNowVar | Primary and utility navigation, commonly in mixed case. |
| link | 13px | 520 | 1.5 | 0 | uppercase | HelveticaNowVar | Uppercase editorial and shopping links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 12, 16, 20, 24 px.
- Section rhythm 50px · element gap 8px · card padding — · max content width 1408px.

The page uses a wide desktop canvas with a measured maximum content width of 1408px. A compact header sits above a full-bleed campaign hero. Below, the rhythm alternates product carousels, two-column campaign features, and a wider editorial card group before a utility-heavy footer. Product sections are structured as broad multi-column displays; paired editorial sections use two columns. Comfortable spacing and large image areas keep the page airy despite dense product controls and labels.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with white section surfaces and no measured shadow system. Fine gray rules provide the main separation between sections and controls. Avoid rounded cards or elevated containers; hierarchy comes from image scale, whitespace, alignment, and black type. Any colors visible in campaign photography should remain image content rather than interface tokens.

## Imagery

Photography and video are the visual centerpiece: the opening campaign fills the viewport with a close, candid fashion scene, while later sections mix campaign portraits and product imagery. Images use editorial framing and natural-looking environments rather than isolated decorative illustrations. Product photography is arranged in carousels, with image color and styling allowed to vary; the palette remains restrained in the interface, not imposed as a filter on the imagery.

## Components

### Utility and primary navigation

A slim top area combines the free-returns announcement with brand, category, search, help, and shopping utilities. Use black or near-black text on a light surface.

### Campaign hero

A full-bleed campaign image or video leads the page, with a small uppercase campaign label and a discreet discovery link or playback control.

### Product carousel

Horizontal product displays pair large product images with compact category, name, and USD price details plus previous/next controls.

### Editorial split

Two-column campaign blocks combine fashion imagery with short uppercase messaging and direct shopping links for men and women.

### Editorial card group

A multi-column set of image-led community and seasonal stories uses concise titles, short copy, and discovery links.

### Newsletter and contact footer

A compact footer groups contact channels, store locations, newsletter signup, and supporting links on a light background.

### Measured component styles

- **Primary button** (“0”): transparent background · text #000000 · radius 0px · padding 0px · 520 13px HelveticaNowVar
- **Link** (“TEN YEARS OF CLEAN 90.”): transparent background · text #000000 · radius 0px · padding 0px · 520 13px HelveticaNowVar
- **Input**: background #f3f3f3 · text #090909 · radius 0px · padding 8px 12px 8px 16px · 520 13.008px HelveticaNowVar
- **Badge** (“Skip to content”): transparent background · text #000000 · border 1px solid #090909 · radius 0px · padding 4px 16px · 520 13px HelveticaNowVar
- **Navigation item** (“MEN WOMEN SEARCH NEED HELP? 0 0”): transparent background · text #000000 · radius 0px · padding 0px · 520 13px HelveticaNowVar

## Do

- Use white and soft gray as the quiet interface foundation.
- Reserve black and near-black for navigation, copy, and controls.
- Let campaign photography occupy expansive, high-impact areas.
- Set interface labels in compact Helvetica-like uppercase type.
- Keep product names and prices close to their images.
- Use hairline separators instead of heavy panels.
- Preserve clear spacing between editorial and shopping sections.

## Don't

- Do not add bright interface accent colors absent from the measured palette.
- Do not place prominent shadows behind product cards.
- Do not use rounded, app-like card treatments.
- Do not let interface decoration compete with campaign imagery.
- Do not enlarge navigation into oversized display typography.
- Do not treat colors sampled from photographs as brand tokens.

## Agent prompt

Build a new fashion storefront page in the AXEL ARIGATO visual style. Keep the interface quiet: use Gallery White (#ffffff) for broad section surfaces, Soft Canvas (#f3f3f3) for light canvas details, Ink (#000000) for primary text, Near Black (#090909) for secondary utilities, and Hairline Gray (#e9e9e9) for subtle separators. Use a compact HelveticaNowVar-like sans serif, with uppercase labels and restrained weights. Structure the page around a large editorial campaign image, product carousels, paired image-led stories, and a concise footer. Favor wide imagery, clean alignment, comfortable whitespace, and direct product metadata. Keep cards flat and square-edged; do not add shadows, decorative gradients, or colors sampled from photos to interface elements.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign media beneath the global header, with minimal overlay copy and controls. | Campaign discovery link, Video playback control | Full-bleed media, Small uppercase label |
| 2 | product-showcase | Wide horizontal footwear carousel with product images, compact metadata, and navigation controls. | Men/women selector, Previous/next carousel, Product links | Product imagery, Name and USD price, Minimal controls |
| 3 | feature-split | Two-column campaign feature pairing editorial fashion imagery with concise campaign copy. | Shop men link, Shop women link | Paired imagery, Editorial caption |
| 4 | product-showcase | Wide apparel carousel with product cards, concise names and prices, and collection controls. | Men/women selector, Previous/next carousel, New-arrival labels | Product imagery, Price metadata, Small badges |
| 5 | gallery | Two-column campaign gallery with broad image blocks and a small discovery link. | Campaign discovery | Editorial photography, Minimal text |
| 6 | feature-grid | Four-column editorial image group with short story copy and linked seasonal features. | Story discovery links, Category shopping links | Image-led cards, Short descriptions |
| 7 | footer | Light footer arranged in compact columns for support, store locations, and newsletter signup. | Contact channels, Newsletter subscription, Store lookup | Small uppercase labels, Simple text links, Email input |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--main-color: #000000;
--link-color: #234923;
--text-color: #222;
--hover-color: #234923;
--decline-color: #f6f6f6;
--decline-text: #000;
--footer-background: #f6f6f6;
```

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