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

# AZAK · Design System

> Quiet precision for a new kind of mobility.

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

AZAK’s homepage pairs stark dark and warm light sections with restrained typography to present a patented mobility system. Large areas of negative space give way to product-focused video and imagery, keeping the visual emphasis on the wheel technology and its applications.

## North star

Use generous empty space and restrained type to let high-contrast product media carry the story.

## Overview

The visual strategy is built around contrast and restraint: near-black hero and footer areas alternate with a warm off-white canvas, creating clear visual chapters without decorative framing. A muted gray is reserved for secondary text, while a subdued green-gray appears in product media rather than acting as a prominent interface accent. FT Aktual carries the whole page, using light-weight, generously sized headings against compact, quiet body copy. The layout shifts between a sparse, full-width opening, long light content stretches, dark feature bands, and split performance content. Product videos and large contextual product imagery provide most of the visual complexity; the surrounding interface stays flat and uncluttered. Sections are spacious and comfortable rather than card-dense, with alignment and negative space doing the work of hierarchy. Links remain understated and text-led.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#f8f7f3` | `--color-gallery-white` | brand | Warm light canvas for long content sections; also colors text and links on dark sections. |
| Soft Black | `#121211` | `--color-soft-black` | surface | Primary dark section surface and main text color on the light canvas. |
| True Black | `#000000` | `--color-true-black` | surface | Deep inverse canvas used in the opening hero and dark regions. |
| Stone Gray | `#85837e` | `--color-stone-gray` | neutral | Muted footer and supporting text, secondary to the main text color. |
| Wheel Slate | `#3a4a49` | `--color-wheel-slate` | accent | Subdued green-gray visible in product imagery; not a primary interface accent. |

### Semantic aliases

`--color-canvas` → `#f8f7f3` (Gallery White) · `--color-surface` → `#000000` (True Black) · `--color-surface-2` → `#121211` (Soft Black) · `--color-surface-3` → `#3a4a49` (Wheel Slate) · `--color-text` → `#121211` (Soft Black) · `--color-text-muted` → `#f8f7f3` (Gallery White) · `--color-text-subtle` → `#85837e` (Stone Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121211` | `#f8f7f3` | 17.49:1 | AAA |
| `#121211` | `#000000` | 1.12:1 | fail |
| `#121211` | `#3a4a49` | 2.01:1 | fail |
| `#f8f7f3` | `#000000` | 19.59:1 | AAA |
| `#f8f7f3` | `#121211` | 17.49:1 | AAA |
| `#f8f7f3` | `#3a4a49` | 8.68:1 | AAA |
| `#85837e` | `#f8f7f3` | 3.53:1 | AA-large |
| `#85837e` | `#000000` | 5.55:1 | AA |
| `#85837e` | `#121211` | 4.95:1 | AA |
| `#85837e` | `#3a4a49` | 2.46:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| FT Aktual | `--font-body` | webfont | 400, 300, 500 | Sole typeface for navigation, headings, body text, captions, and links. | Inter |

- **FT Aktual:** Use light weights for display headings and regular weight for body and navigation; keep tracking neutral and casing natural.

### Type scale — Augmented Fourth (ratio ≈ 1.433, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 67.5px | 300 | 1 | 0 | — | FT Aktual | Oversized, light-weight statements in prominent hero or feature moments. |
| h1 | 45px | 300 | 1 | 0 | — | FT Aktual | Primary page or section headline, set large and light. |
| h2 | 30px | 300 | 1.1 | 0 | — | FT Aktual | Section headings on light and dark feature bands. |
| h3 | 20.5px | 300 | 3.33 | 0 | — | FT Aktual | Small feature labels or subordinate headings. |
| body | 16px | 400 | 1.4 | 0 | — | FT Aktual | Product explanation and supporting descriptive copy. |
| caption | 11.5px | 400 | 1.99 | 0 | — | FT Aktual | Compact secondary notes and footer details. |
| nav | 16px | 400 | 1.4 | 0 | — | FT Aktual | Quiet, regular-weight navigation links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 4, 6, 8, 17, 18, 36, 72, 144 px.
- Section rhythm 72px · element gap 4px · card padding — · max content width —.

The page uses broad, alternating full-width section bands and sparse content arrangements rather than a card-based grid. The opening is a dark, expansive hero with navigation at the top and headline content low in the viewport. Light sections use split or multi-column compositions, while feature copy is often offset rather than centered. Preserve the measured comfortable density and generous section gaps; the supplied data does not establish a maximum content width. Keep text alignment purposeful and leave substantial negative space around media and copy.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The interface is predominantly flat, with no measured shadow system or radius scale. Use color bands, spacing, and media placement to separate content rather than cards or raised panels. Borders are not a defining visual feature; avoid introducing ornamental outlines or layered containers.

## Imagery

Product video and large product visuals are the main expressive elements. Media shows the wheel system and a rugged vehicle application, with natural, muted industrial colors; it sits within otherwise quiet layouts. Treat imagery as immersive or as a deliberate split-panel focal point, not as decorative thumbnail content. The green-gray measured color belongs to the product-media environment, not the core UI palette.

## Components

### Top navigation

A minimal row over the dark hero, with a contrasting AZAK wordmark and widely distributed text links.

### Hero headline and link

Large light-weight two-line statement near the bottom of the dark opening; pair it with a small, understated Explore Now text link.

### Product explanation

Warm-white content area combining product video with concise copy about the mobility system and its patents.

### Dark feature band

Inverse-color section for design-freedom messaging; measured controls are square-cornered with no shadow.

### Performance feature

Light section with a heading, supporting copy, and product video arranged in a sparse split layout.

### Product showcase

Dark product section featuring large imagery and a simple Explore Now link.

### Footer

Dark, multi-column information area for company, products, contact details, and muted copyright text.

### Measured component styles

- **Primary button** (“Collapse and Rebuild No tools required. ”): transparent background · text #f8f7f3 · radius 0px · padding 18px 18px 0px 18px · 400 16px FT Aktual
- **Link** (“Explore Now”): transparent background · text #f8f7f3 · radius 0px · padding 0px · 400 16px FT Aktual
- **Navigation item** (“Company”): transparent background · text #f8f7f3 · radius 0px · padding 0px · 400 16px FT Aktual

## Do

- Alternate warm-white and near-black section bands.
- Use FT Aktual or a close neutral sans-serif substitute.
- Keep display headlines light and visually calm.
- Let product media command broad areas of the page.
- Use muted gray only for secondary information.
- Separate content with whitespace instead of cards.

## Don't

- Do not add bright interface accents.
- Do not introduce gradients or decorative shadows.
- Do not place every feature inside a card.
- Do not make headings heavy or tightly tracked.
- Do not treat product-image colors as UI brand accents.
- Do not compress the long-form sections into a dense grid.

## Agent prompt

Build a new AZAK-style mobility page with a restrained editorial feel. Use Gallery White (#f8f7f3) for light content and Soft Black (#121211) or True Black (#000000) for inverse bands; reserve Stone Gray (#85837e) for supporting text. Wheel Slate (#3a4a49) may appear in product imagery, not as a UI accent. Use a clean sans-serif such as Inter, with light, large headlines and quiet regular-weight body copy. Compose full-width sections with generous negative space, alternating dark and light chapters, and occasional split layouts. Make product photography or video the visual focus, framed simply without cards, shadows, or ornamental borders. Keep navigation and links understated and text-led. Preserve a comfortable, spacious rhythm and make each section feel like a deliberate change of chapter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-height dark opening with a top navigation row and low-positioned headline and link. | top-level navigation, explore link | near-black canvas, light text, large negative space |
| 2 | feature-split | Long warm-white section with split product video and offset supporting text. | product explanation, feature storytelling | warm-white canvas, video media, multi-column layout |
| 3 | feature-grid | Dark feature band with a heading and distributed content across multiple columns. | benefit messaging, feature details | dark surface, light text, flat square controls |
| 4 | feature-split | Light section with two-column structure, heading, body copy, and product video. | performance explanation, supporting detail | warm-white canvas, sparse split layout, embedded video |
| 5 | product-showcase | Dark, full-bleed product presentation with prominent imagery and a text link. | product discovery, explore link | dark background, large product imagery, minimal text |
| 6 | footer | Dark footer arranged into three broad information columns. | company navigation, product navigation, contact information | dark surface, muted secondary text, simple link groups |

## Source CSS custom properties (selected)

```css
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
--color-white: #F8F7F3;
--color-black: #000000;
--color-dark-azak-black: #121211;
--color-dark-azak-gray: #3A3935;
--color-medium-azak-gray: #85837E;
--color-light-azak-gray: #B6B5B2;
--color-ultra-light-azak-grey: #F8F7F3;
--animation-primary: 0.25s ease-in-out all;
--color-text: #F8F7F3;
--color-text-subtle: #85837E;
--color-background: #121211;
```

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