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

# ALIGNE · Design System

> East London tailoring, framed as modern editorial.

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

ALIGNE pairs a restrained monochrome interface with cinematic fashion photography and warm, earthy editorial moments. The homepage moves between full-bleed campaigns, compact product grids, category imagery, and a softly tinted journal section.

## North star

Let editorial fashion photography lead, and keep the shopping interface quiet, sharply typed, and easy to scan.

## Overview

The visual strategy is led by contrast: clean white canvases and deep brown-black text keep the shopping interface quiet, while full-bleed campaign photography supplies the mood and colour. A muted beige section gives the editorial feed a distinct, warmer pause. Headings use Nimbus Sans Extended in uppercase with conspicuous tracking; GT America Mono carries navigation, utility copy, prices, and buttons, lending the page a precise, catalog-like voice. Large image panels alternate with four-column product rows and smaller editorial grids, so the page feels like a fashion magazine that remains easy to shop. Images are the dominant colour source, often darkened behind white campaign copy. Buttons are square-cornered and outlined rather than rounded or heavily filled. Hairlines and restrained spacing organize the merchandise without adding visual weight; the experience relies on image scale, typography, and section rhythm rather than decoration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Roasted Ink | `#24170f` | `--color-roasted-ink` | brand | Primary text, announcement band, footer details, and dark button fills; a warm brown-black rather than neutral charcoal. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, navigation ground, product-card background, and reversed campaign text. |
| Signal Blue | `#0073ff` | `--color-signal-blue` | accent | Sparse interactive accent, including hover/link states and small interface details; not a dominant brand field. |
| Oat Linen | `#e7dcd1` | `--color-oat-linen` | surface | Warm tinted background for the Get Up editorial section, separating brand stories from the white shopping areas. |
| Quiet Line | `#e1e1e1` | `--color-quiet-line` | semantic | Subtle structural border and divider colour; keep it secondary to the darker outlined controls. |
| Soft Stone | `#e9e7e7` | `--color-soft-stone` | surface | Occasional pale section surface in measured data; use sparingly and do not mistake image-derived tones for a defining brand colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#24170f` (Roasted Ink) · `--color-surface-2` → `#e7dcd1` (Oat Linen) · `--color-text` → `#24170f` (Roasted Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#e1e1e1` (Quiet Line) · `--color-accent` → `#0073ff` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#24170f` | `#ffffff` | 17.44:1 | AAA |
| `#24170f` | `#e7dcd1` | 12.92:1 | AAA |
| `#ffffff` | `#24170f` | 17.44:1 | AAA |
| `#ffffff` | `#e7dcd1` | 1.35:1 | fail |
| `#0073ff` | `#ffffff` | 4.29:1 | AA-large |
| `#0073ff` | `#24170f` | 4.07:1 | AA-large |
| `#0073ff` | `#e7dcd1` | 3.18:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| nimbus-sans-extended | `--font-display` | webfont | 400, 700, 600 | Campaign and section headings, uppercase navigation, and editorial/category links. | Montserrat |
| GT America Mono | `--font-mono` | webfont | 400, 700 | Body copy, utility navigation, product details, prices, buttons, captions, and cookie controls. | Space Mono |

- **nimbus-sans-extended:** Use bold or semibold for headings; uppercase is common, with clearly expanded tracking on headings and navigation.
- **GT America Mono:** Mostly regular weight, compact and legible; uppercase buttons and utility labels contrast with sentence-case editorial copy.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 30px | 700 | 1 | 0.333em | uppercase | nimbus-sans-extended | Primary campaign headline over the full-bleed hero. |
| h2 | 25px | 700 | 1.15 | 0.1em | uppercase | nimbus-sans-extended | Section titles such as New Arrivals and The Icons. |
| h3 | 24px | 600 | 1.15 | 0 | uppercase | nimbus-sans-extended | Editorial card and feature headings. |
| h4 | 22px | 700 | 1 | 0.455em | uppercase | nimbus-sans-extended | Small emphatic section or campaign headings. |
| body | 13px | 400 | 1.4 | 0 | — | GT America Mono | Editorial descriptions and supporting shopping copy. |
| caption | 11px | 400 | 1 | 0 | — | GT America Mono | Compact product labels, prices, and image captions. |
| button | 14px | 400 | 1 | 0 | uppercase | GT America Mono | Uppercase calls to action and outlined shopping controls. |
| nav | 14px | 400 | 1 | 0.714em | uppercase | nimbus-sans-extended | Uppercase primary navigation and utility links. |
| link | 14px | 400 | 1 | 0.714em | uppercase | nimbus-sans-extended | Collection, editorial, and product navigation links. |
| eyebrow | 14px | 400 | 1 | 0.714em | uppercase | nimbus-sans-extended | Short uppercase labels introducing editorial content. |
| code | 13px | 400 | 1.4 | 0 | — | GT America Mono | Monospaced utility text and compact informational details. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 5, 10, 12, 14, 15, 16, 20, 30, 40, 50, 60, 80 px.
- Section rhythm 60px · element gap 10px · card padding — · max content width 1400px.

The page uses a wide, image-led canvas, with content capped around the measured 1400px maximum width where applicable. Full-bleed campaign panels bookend product and editorial sections; the product showcases use four columns, while category panels split into two and story cards into three or four. Headings tend to align left above shopping grids, but campaign copy is centered over imagery. Generous section breaks create a comfortable rhythm, while product labels and controls remain compact. The overall density is comfortable, not sparse.

## Shape & elevation

- Shadow `inset` (other): `rgb(255, 255, 255) 0px 0px 0px 2px inset`
- Shadow `md` (other): `rgba(0, 0, 0, 0.15) 0px 2px 10px 0px`
- Motion: standard transition `0.25s cubic-bezier(0.104, 0.204, 0.492, 1)` on interactive elements.

The interface is predominantly flat: white and beige section fields, square-cornered outlines, and fine separators establish structure. Product panels do not rely on visible card shadows. Layered campaign text sits directly over darkened photography, while the cookie banner is a distinct white strip with dark action buttons. Keep depth subtle and functional.

## Imagery

Use real fashion and lifestyle photography as the primary visual material: street-style portraits, seasonal campaigns, product-on-model imagery, and behind-the-scenes brand stories. Hero and category images are broad, edge-to-edge panels, often with a dark overlay to preserve white text contrast. Product photography sits in orderly white-backed grids with consistent framing. Avoid decorative illustration or 3D styling.

## Components

### Campaign hero

Full-bleed seasonal fashion image with centered uppercase heading and a square-cornered, white-outlined shopping CTA over a darkened photo.

### Product carousel

Four-column merchandise row on white, led by a left-aligned uppercase title; images dominate, with compact monospaced names and prices below.

### Category panels

Two side-by-side lifestyle image panels with uppercase white category titles and small outlined SHOP NOW buttons near the bottom.

### Editorial feature cards

Three-image story grid with image-led cards, uppercase titles, short monospaced descriptions, and lightweight learn-more links.

### Get Up editorial band

Warm #e7dcd1 section with introductory copy, a discovery link, and a row of compact campaign-story thumbnails.

### Cookie consent bar

White horizontal strip with monospaced notice text and separate dark ACCEPT and DECLINE buttons plus a light outlined PREFERENCES control.

### Multi-column footer

White footer with compact uppercase column labels, small monospaced links, newsletter controls, and an oversized ALIGNE wordmark.

### Measured component styles

- **Primary button** (“SHOP COATS”): transparent background · text #ffffff · border 1px solid #ffffff · radius 0px · padding 15px 20px · 400 14px GT America Mono · uppercase
- **Link** (“SHOP NOWNEW ARRIVALS”): transparent background · text #24170f · radius 0px · padding 0px · 400 16px nimbus-sans-extended
- **Input**: transparent background · text #24170f · radius 0px · padding 0px · 700 16px nimbus-sans-extended · uppercase
- **Navigation item** (“NEW ARRIVALS SHOP COLLECTIONS THE GET UP”): transparent background · text #24170f · radius 0px · padding 0px · 400 14px GT America Mono · uppercase

## Do

- Use photography as the strongest visual statement.
- Keep the main shopping canvas white and uncluttered.
- Set display headings in tracked uppercase.
- Use monospaced type for utility copy and product details.
- Keep CTA corners square and outlines fine.
- Give editorial content a warm beige band.
- Use blue only for sparse interactive accents.

## Don't

- Do not add gradients or decorative colour fields.
- Do not turn product items into elevated shadow cards.
- Do not round buttons or image panels.
- Do not let interface colour compete with campaign imagery.
- Do not use loose, oversized body typography.
- Do not apply the blue accent as a large background.

## Agent prompt

Build a new fashion storefront page in ALIGNE’s editorial style. Use Gallery White (#ffffff) as the main canvas and Roasted Ink (#24170f) for text, utility bands, and key controls. Reserve Oat Linen (#e7dcd1) for a distinct editorial/story section; use Signal Blue (#0073ff) only for a small interactive accent. Pair extended uppercase sans headings with monospaced body, navigation, prices, and buttons. Structure the page with a cinematic full-bleed image, clean multi-column product grids, and image-led category or story panels. Overlay campaign copy on subtly darkened photography. Use square-cornered outlined CTAs, restrained hairlines, and minimal elevation. Keep spacing comfortable, text compact, and product information easy to scan. Let the imagery provide seasonal colour rather than introducing extra interface colours.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image with centered headline and CTA. | Shop seasonal collection | Darkened photo overlay, Centered uppercase heading, Outlined button |
| 2 | product-grid | Left-aligned section heading above a four-column product row. | Browse new arrivals, Explore collection | Product photography, Compact price labels, Small product controls |
| 3 | category-nav | Two side-by-side lifestyle image panels with text near the lower edge. | Shop category, Discover seasonal edit | Image-led split, White uppercase titles, Outlined CTAs |
| 4 | feature-grid | Three editorial columns with image, title, copy, and link. | Read style story, Discover investment pieces | Three-column imagery, Uppercase headings, Text links |
| 5 | hero | Full-bleed campaign image with centered title and CTA. | Shop the icons | Dark image treatment, Centered uppercase title, Outlined button |
| 6 | product-grid | Four-column merchandise row on white beneath a left-aligned heading. | Browse signature items, Open product detail | Product image grid, Compact captions, Prices and badges |
| 7 | category-nav | Two side-by-side full-height lifestyle category images. | Shop dresses, Shop denim | Split image panels, Bottom-aligned titles, Outlined shopping links |
| 8 | content-feed | Warm tinted editorial band with intro above a row of story cards. | Discover brand stories, Browse campaign updates | Beige surface, Editorial intro, Image story cards |
| 9 | footer | Multi-column link groups above newsletter controls and oversized wordmark. | Browse support links, Follow social channels, Subscribe to newsletter | Compact uppercase labels, Monospaced link lists, Large brand wordmark |

## Source CSS custom properties (selected)

```css
--font-body-scale: 1.0;
--font-body-line-height-scale: 1.0;
--font-body-letter-spacing: 0.01em;
--font-heading-scale: 1.0;
--font-heading-line-height-scale: 1.0;
--font-heading-letter-spacing: 0.05em;
--font-navigation-scale: 1.0;
--font-product-title-scale: 1.0;
--font-product-title-line-height-scale: 1.0;
--button-letter-spacing: 0.02em;
--bg-body: #ffffff;
--bg-body-rgb: 255,255,255;
--bg-body-darken: #f7f7f7;
--payment-terms-background-color: #ffffff;
--color-body: #24170f;
--color-body-rgb: 36,23,15;
--color-accent: #24170f;
--color-accent-rgb: 36,23,15;
--color-border: #24170f;
--color-form-border: #24170f;
--color-announcement-bar-text: #ffffff;
--color-announcement-bar-bg: #24170f;
--color-header-bg: #ffffff;
--color-header-bg-rgb: 255,255,255;
--color-header-text: #24170f;
--color-header-text-rgb: 36,23,15;
--color-header-links: #24170f;
--color-header-links-hover: #0073ff;
--color-header-icons: #24170f;
--color-header-border: rgba(0,0,0,0);
--solid-button-background: #000000;
--color-price: #24170f;
--color-star: #000000;
--color-dots: #000000;
--color-inventory-instock: #000000;
--color-inventory-lowstock: #000000;
--section-spacing-mobile: 50px;
--section-spacing-desktop: 100px;
--button-border-radius: 0px;
--color-badge-text: #0073ff;
```

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