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

# Kotn · Design System

> Quiet essentials, framed with editorial warmth

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

Kotn’s homepage pairs restrained retail navigation and product grids with expansive fashion and home photography. A mostly white canvas, soft neutral footer, and muted garment-inspired accents keep the experience calm and tactile.

## North star

Let honest product and lifestyle photography carry the colour, while typography, white space, and quiet retail structure stay restrained.

## Overview

The visual system is built on a clean white canvas (#ffffff) and near-black typography (#000000, #030302), letting garment and home photography supply most of the page’s colour. Full-bleed campaign panels carry large, light-weight white headlines and understated supporting copy over carefully composed imagery. Product collections return to white, with centered headings, compact labels, and horizontally arranged merchandise imagery. A warm light-neutral footer (#edece8) provides a clear tonal close. Kotn Sohne is used throughout in a calm, unembellished sans-serif voice; the Breit cut is reserved for display-scale campaign text. Layout alternates immersive editorial imagery with measured shopping grids, category tiles, and a mission-led split section. Hairline borders and inset separators define controls and navigation without heavy card framing. Accent colours are sparse: deep burgundy and olive appear on small product controls, while orange is limited to text details.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas, product collection backgrounds, and white campaign text over photography. |
| True Ink | `#000000` | `--color-true-ink` | brand | Primary headings, body copy, navigation, product labels, and dark text over light sections. |
| Soft Black | `#030302` | `--color-soft-black` | neutral | Near-black footer and control text, navigation details, input text, and fine borders. |
| Merino Burgundy | `#68242d` | `--color-merino-burgundy` | accent | Small circular product option controls; echoes the burgundy knitwear imagery rather than defining broad page surfaces. |
| Linen Stone | `#edece8` | `--color-linen-stone` | surface | Warm neutral footer band and selected navigation or button surfaces. |
| Warm Greige | `#d3cec5` | `--color-warm-greige` | semantic | Subtle inset separators and hairline borders in navigation, buttons, and cards. |
| Rust Thread | `#bd4800` | `--color-rust-thread` | accent | Occasional small text accent, including product-related details; not a dominant interface colour. |
| Olive Stitch | `#898c55` | `--color-olive-stitch` | accent | Small circular product option control, used sparingly among garment colour choices. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#edece8` (Linen Stone) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#030302` (Soft Black) · `--color-border` → `#030302` (Soft Black) · `--color-accent` → `#68242d` (Merino Burgundy) · `--color-accent-2` → `#bd4800` (Rust Thread) · `--color-accent-3` → `#898c55` (Olive Stitch)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#edece8` | 17.76:1 | AAA |
| `#ffffff` | `#edece8` | 1.18:1 | fail |
| `#030302` | `#ffffff` | 20.63:1 | AAA |
| `#030302` | `#edece8` | 17.45:1 | AAA |
| `#68242d` | `#ffffff` | 11.18:1 | AAA |
| `#68242d` | `#edece8` | 9.45:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Kotn Sohne | `--font-body` | webfont | 400 | Default family for navigation, headings, body copy, product labels, links, and controls. | Inter |
| Kotn Sohne Breit | `--font-display` | webfont | 400 | Oversized campaign display headings, especially full-bleed hero titles. | Manrope |

- **Kotn Sohne:** Measured at regular weight; use sentence case and restrained tracking, with compact navigation and readable, open body leading.
- **Kotn Sohne Breit:** Regular weight with a broad, airy display presence; keep tracking slightly open and avoid uppercase styling.

### Type scale — Perfect Fifth (ratio ≈ 1.47, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 1.2 | 0.01em | — | Kotn Sohne Breit | Oversized titles over full-bleed seasonal and home campaign imagery. |
| h1 | 64px | 400 | 1.1 | 0.01em | — | Kotn Sohne | Primary page or campaign heading where a large standalone heading is needed. |
| h2 | 40px | 400 | 1.1 | 0.013em | — | Kotn Sohne | Collection and major section headings, centered or aligned to content. |
| h3 | 32px | 400 | 1.3 | -0.031em | — | Kotn Sohne | Secondary collection headings and prominent editorial statements. |
| h4 | 24px | 400 | 1.5 | 0 | — | Kotn Sohne | Subsection titles and supporting promotional headings. |
| body | 14px | 400 | 1.71 | 0 | — | Kotn Sohne | Campaign descriptions, mission copy, and general explanatory text. |
| caption | 12px | 400 | 1 | 0.01em | — | Kotn Sohne | Compact product details, utility labels, and small supporting metadata. |
| button | 14px | 400 | 1.5 | 0 | — | Kotn Sohne | Short action labels in retail controls and promotional actions. |
| nav | 14px | 400 | 1.14 | 0.01em | — | Kotn Sohne | Primary category and utility navigation links. |
| link | 14px | 400 | 1.5 | 0.01em | — | Kotn Sohne | Text actions such as Shop Now, Explore Our World, and footer links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 5, 8, 12, 16, 32, 48 px.
- Section rhythm 80px · element gap 12px · card padding — · max content width 1408px.

The homepage uses a centered, wide desktop composition with a measured page maximum of 1408px. A compact announcement strip and primary navigation precede a full-bleed hero. Below, centered collection headings introduce horizontally dense product rows; category imagery forms a three-column band. Large campaign panels reset the rhythm, followed by a two-column impact section and a four-image social gallery. Comfortable spacing and pronounced section breaks keep the long page from feeling crowded.

## Shape & elevation

- Radius: button `50%` · nav `1px` · xs `2px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset`
- Shadow `inset-2` (button): `rgb(255, 255, 255) 0px 0px 0px 2px, rgb(3, 3, 2) 0px 0px 0px 4px, rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset`
- Shadow `inset-3` (nav): `rgb(211, 206, 197) 0px -1px 0px 0px inset`
- Shadow `hairline` (link): `rgb(255, 255, 255) 0px 2.5px 0px -1px`
- Shadow `inset-4` (card): `rgb(211, 206, 197) 1px 0px 0px 0px inset`
- Shadow `hairline-2` (button): `rgb(211, 206, 197) 1px 0px 0px 0px, rgb(211, 206, 197) -1px 0px 0px 0px`
- Motion: standard transition `0.1s ease-in-out` on interactive elements.

The page is mostly flat, with no prominent floating cards or dramatic shadows. Fine inset hairlines in warm greige divide navigation and selected controls; links use a subtle underline treatment. Product tiles rely on imagery and spacing rather than raised surfaces, while campaign text layers directly over photographs.

## Imagery

Photography is the primary visual material: fashion portraits, knitwear, bedding, home textiles, and supply-chain imagery. Campaign photographs run edge to edge with centered white copy layered over them; product imagery is presented in clean, pale cards with little surrounding decoration. Category tiles use full-image crops and centered text. The imagery feels natural and tactile rather than heavily graphic or illustrative.

## Components

### Utility and primary navigation

Thin utility announcement above a white main navigation row, with category links at left, centered Kotn wordmark, and search, help, and bag actions at right.

### Full-bleed campaign hero

Edge-to-edge fashion photograph with a large centered white display heading, concise supporting copy, and an understated underlined Shop Now link.

### Product collection carousel

Centered collection heading above a dense horizontal product row with pale image backgrounds, compact price and name details, and small colour-option dots.

### Category image tiles

Three adjacent lifestyle photographs for Womenswear, Home, and Menswear, each with centered white category text.

### Impact feature split

Left-aligned sustainability statistics and supporting copy paired with a large documentary photograph on the right.

### Instagram gallery

Centered, underlined Instagram heading followed by a row of four closely spaced lifestyle and product photographs.

### Newsletter and footer

Warm stone footer with centered brand statement, signup message and email field, followed by grouped text links and certification mark.

### Measured component styles

- **Primary button** (“EN”): background #ffffff · text #030302 · radius 0px · padding 12px 16px · 400 12px Kotn Sohne
- **Secondary button** (“FR”): background #d3cec5 · text #030302 · radius 0px · padding 12px 16px · 400 12px Kotn Sohne · shadow rgb(211, 206, 197) 1px 0px 0px 0px, rgb(211, 206, 197) -1px 0px 0px 0px
- **Link** (“New”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Kotn Sohne
- **Input**: transparent background · text #030302 · radius 0px · padding 0px · 400 14px Kotn Sohne
- **Card** (“Close You haven’t added anything yet, le”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Kotn Sohne · shadow rgb(211, 206, 197) 1px 0px 0px 0px inset
- **Navigation item** (“Women”): transparent background · text #000000 · radius 0px · padding 16px 8px · 400 14px Kotn Sohne

## Do

- Use white as the default canvas and reserve warm stone for the footer.
- Let full-width photography anchor campaign sections.
- Use large, light campaign headlines with concise supporting copy.
- Keep product labels compact and secondary to the product imagery.
- Use hairline separators instead of heavy card borders.
- Keep burgundy and olive accents limited to small product controls.

## Don't

- Do not add gradients or decorative colour fields.
- Do not turn product cards into raised, shadow-heavy panels.
- Do not use saturated accents as large interface surfaces.
- Do not crowd campaign photography with extra interface elements.
- Do not replace the spacious editorial rhythm with dense content blocks.
- Do not use bold, all-caps display typography.

## Agent prompt

Build a fashion retail page with Kotn’s restrained editorial character. Use Gallery White (#ffffff) as the main canvas, True Ink (#000000) for primary copy, and Soft Black (#030302) for fine interface details. Use Linen Stone (#edece8) only for a warm footer or quiet surface; keep Warm Greige (#d3cec5) to hairlines. Reserve Merino Burgundy (#68242d), Rust Thread (#bd4800), and Olive Stitch (#898c55) for sparse product-level accents. Set most text in a clean regular sans-serif, with an airy display face for oversized campaign headings. Alternate full-bleed lifestyle photography with simple product rows, image-led category tiles, and a mission-focused split section. Keep controls understated, borders thin, and spacing generous; avoid gradients, heavy shadows, and ornamental UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign photograph with centered headline, supporting copy, and action link. | campaign discovery, single primary action | large white display type, edge-to-edge photography, underlined link |
| 2 | product-grid | Centered collection title above a dense horizontal product carousel. | browse products, compare colour options, quick shopping controls | pale product image fields, compact price labels, colour dots |
| 3 | category-nav | Three adjacent image tiles with centered category names. | shop by category, image-led navigation | three-column imagery, centered white labels |
| 4 | hero | Full-bleed home-textile photograph with centered campaign copy and action. | campaign discovery, single primary action | large white headline, full-width lifestyle image, underlined link |
| 5 | product-grid | Centered collection heading above a horizontal row of home product cards. | browse home goods, compare bundles | product photography, compact bundle labels, colour options |
| 6 | hero | Full-bleed seasonal fashion image with centered text overlay. | seasonal collection discovery, single primary action | white display headline, campaign copy overlay, underlined action |
| 7 | feature-split | Two-column impact statement and explanatory copy beside documentary photography. | brand story, explore mission | left-aligned statistics, large supporting image, text link |
| 8 | gallery | Centered Instagram link above a four-image horizontal gallery. | social discovery, browse lifestyle imagery | underlined heading link, four-image strip |
| 9 | footer | Warm neutral full-width footer with centered signup content and compact link groups. | newsletter signup, footer navigation | stone background, email input and submit link, certification mark |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(0,0,0,0);
--osano-button-border-color: #FFFFFF;
--osano-button-background-color: #7A3FF1;
--osano-button-foreground-color: #FFFFFF;
--osano-dialog-background-color: #ffffff;
--osano-dialog-foreground-color: #020202;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.45);
--osano-link-color: #1d65f1;
--osano-toggle-off-track-color: #7A3FF1;
--osano-toggle-off-thumb-color: #FFFFFF;
--osano-toggle-on-track-color: #37CD8F;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-pill-background-color: #EBE0FE;
--osano-pill-foreground-color: #3E1A7F;
--osano-button-close-color: #020202;
--osano-button-accept-background-color: #7A3FF1;
--osano-button-accept-border-color: #FFFFFF;
--osano-button-accept-foreground-color: #FFFFFF;
--osano-button-deny-background-color: #7A3FF1;
--osano-button-deny-border-color: #FFFFFF;
--osano-button-deny-foreground-color: #FFFFFF;
--osano-button-reject-all-background-color: #7A3FF1;
--osano-button-reject-all-background-color-hover: #8e53ff;
--osano-button-reject-all-border-color: #FFFFFF;
--osano-button-reject-all-foreground-color: #FFFFFF;
--osano-button-manage-background-color: #7A3FF1;
--osano-button-manage-border-color: #FFFFFF;
--osano-button-manage-foreground-color: #FFFFFF;
--osano-info-dialog-link-color: #1d65f1;
--osano-info-dialog-button-close-color: #020202;
--osano-info-dialog-toggle-off-track-color: #7A3FF1;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #37CD8F;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #7A3FF1;
--osano-info-dialog-button-border-color: #FFFFFF;
```

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