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

# Koto · Design System

> A quiet dark canvas for vivid creative work

**Theme:** dark · **Industry:** agency · **Source:** https://koto.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._

Koto’s homepage pairs a near-black canvas and restrained typography with expansive, cinematic project imagery. Asymmetrical work cards, compact utility labels, and a quiet editorial news and contact area keep attention on the agency’s creative output.

## North star

Keep the interface nearly black and typographically restrained, letting oversized project imagery provide the page’s colour and energy.

## Overview

Build the page around a nearly uninterrupted #060606 canvas; it is the defining brand colour, not a backdrop for colourful UI chrome. White headings and muted grey supporting copy create a restrained hierarchy, while #141414 media surfaces and #1f1f1f hairlines separate content without adding elevation. Use the measured Koto condensed face for large, light-weight headings and the standard face for readable body copy and compact links. The mono face gives small uppercase utility labels a technical counterpoint. Keep the composition spacious and deliberately asymmetric: work media can sit offset from the page edge, while the news area uses a compact multi-column arrangement and the footer returns to sparse text. The hero and project imagery may carry strong natural or campaign colours; treat those as artwork, not interface accents. Maintain clear contrast and let imagery, typography, and negative space do the expressive work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Koto Black | `#060606` | `--color-koto-black` | brand | Dominant page canvas and negative space, including the hero, work, news, and contact sections. |
| Soft Ash | `#989898` | `--color-soft-ash` | neutral | Muted link text and secondary headings, including the press email and supporting copy. |
| Graphite Line | `#1f1f1f` | `--color-graphite-line` | surface | Subtle card and section boundaries; measured hairlines separate content without strong contrast. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Primary headings, navigation, links, and high-contrast text over the dark canvas or media. |
| Media Charcoal | `#141414` | `--color-media-charcoal` | surface | Dark media and card backing, visible beneath or around project imagery. |
| Pale Grey | `#b4b4b4` | `--color-pale-grey` | neutral | Rare secondary text tone; use sparingly where measured lighter-muted copy appears. |
| Footer Slate | `#595959` | `--color-footer-slate` | neutral | Low-emphasis footer text, keeping legal and peripheral details subordinate. |

### Semantic aliases

`--color-canvas` → `#060606` (Koto Black) · `--color-surface` → `#141414` (Media Charcoal) · `--color-surface-2` → `#1f1f1f` (Graphite Line) · `--color-text` → `#ffffff` (Studio White) · `--color-text-muted` → `#989898` (Soft Ash) · `--color-border` → `#1f1f1f` (Graphite Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#060606` | 20.26:1 | AAA |
| `#ffffff` | `#141414` | 18.42:1 | AAA |
| `#ffffff` | `#1f1f1f` | 16.48:1 | AAA |
| `#989898` | `#060606` | 7.02:1 | AAA |
| `#989898` | `#141414` | 6.39:1 | AA |
| `#989898` | `#1f1f1f` | 5.71:1 | AA |

### Gradients

- `linear-gradient(oklab(0 0 0 / 0) 0px, oklab(0 0 0 / 0) 50%, oklab(0.122118 0.00000555813 0.00000243634 / 0.8) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| gtKotoheim | `--font-body` | webfont | 350 | Main body copy, navigation, links, and compact labels. | Inter |
| gtKotoheimMono | `--font-mono` | webfont | 400 | Small utility and time-style labels. | IBM Plex Mono |
| gtKotoheimCondensed | `--font-display` | webfont | 300 | Large page and section headings. | Roboto Condensed |

- **gtKotoheim:** Use the measured light 350 weight for a clean, understated reading voice; keep labels compact and avoid unnecessary uppercase.
- **gtKotoheimMono:** Use regular mono for tiny uppercase metadata and technical details.
- **gtKotoheimCondensed:** Light weight, tight negative tracking, and compact line height; preserve the tall, narrow editorial silhouette.

### Type scale — Custom (ratio ≈ 1.732, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 300 | 1 | -0.01em | — | gtKotoheimCondensed | Large, light condensed hero and primary page heading. |
| h2 | 38px | 300 | 1.1 | -0.01em | — | gtKotoheimCondensed | Light condensed section titles and prominent editorial headings. |
| body | 16px | 350 | 1.25 | 0 | — | gtKotoheim | Introductory statements, article summaries, and supporting paragraphs. |
| caption | 14px | 350 | 1.25 | 0 | — | gtKotoheim | Compact news metadata, image labels, and secondary copy. |
| code | 11px | 400 | 1 | 0 | uppercase | gtKotoheimMono | Uppercase mono utility details, such as the live clock. |

OpenType features in use: `"salt"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 24, 36, 48 px.
- Section rhythm 40px · element gap 12px · card padding 6px · max content width 1408px.

Use a wide, single-page canvas with a measured maximum content width of 1408px and compact overall density. The hero is full bleed; work content shifts into an offset, media-led composition rather than a rigid card grid. News is a two-column section with a featured story and smaller adjacent items. The contact area is also split into columns, while the footer stays sparse. Section transitions rely on generous black negative space; align headings to the start edge and keep utility labels small.

## Shape & elevation

- Radius: xs `2px` · sm `4px` · md `6px` · lg `10px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.167s linear` on interactive elements.

Keep the interface flat: measured shadows are absent, corners are square in the sampled card and link styles, and separation comes mainly from empty space. Use subtle #1f1f1f hairlines and dark media backing instead of raised panels. A dark lower-edge media gradient may improve text legibility over video.

## Imagery

Use large, edge-to-edge or offset campaign photography and video as the primary expressive element. The hero is a cinematic full-bleed landscape with text anchored low and left; project tiles show varied campaign footage and branded artwork. Preserve each project’s own colours rather than turning them into UI accents. News imagery uses a compact editorial crop, including portraits and studio scenes.

## Components

### Top navigation

Compact links sit over the full-bleed hero, with the wordmark at the left and a small live time detail aligned to the right.

### Hero statement

A cinematic full-bleed media field carries centered campaign branding and a light condensed agency introduction anchored near the lower-left.

### Project showcase

Offset project media tiles combine video or imagery with simple white labels and minimal surrounding chrome.

### News feed

A two-column editorial area pairs a larger lead story with smaller cards, using compact metadata and concise text.

### Contact and careers

Split contact information and recruitment links sit on the dark canvas with restrained headings and muted supporting links.

### Footer details

Low-contrast legal and utility links remain small and unobtrusive beneath the main contact content.

### Measured component styles

- **Primary button** (“05:19 UTC+0”): transparent background · text #ffffff · radius 0px · padding 0px · 400 12px gtKotoheim
- **Link** (“Work Explore case studies”): transparent background · text #ffffff · radius 0px · padding 0px · 400 12px gtKotoheim
- **Card** (“CHANNELS INSTAGRAM OFF.LIVE OFF.BRAND SE”): transparent background · text #ffffff · border 1px solid #202020 · radius 0px · padding 8px 2px 8px 6px · 400 12px gtKotoheim

## Do

- Use #060606 as the dominant canvas.
- Keep white text for primary headings and links.
- Use muted grey for secondary copy and email links.
- Let project media introduce its own colour.
- Favor light, condensed headings over heavy display type.
- Use asymmetrical media placement and ample negative space.

## Don't

- Do not add bright interface accents absent from the measured palette.
- Do not use shadows to make cards appear raised.
- Do not force every project into an identical grid.
- Do not place dense body copy over busy imagery without contrast support.
- Do not use heavy, bold headings as the default.
- Do not make footer and metadata as prominent as project work.

## Agent prompt

Build a new page in Koto’s restrained creative-agency style. Use Koto Black (#060606) as the dominant canvas, Studio White (#ffffff) for primary text, and Soft Ash (#989898) for supporting copy and quiet links. Reserve Graphite Line (#1f1f1f) and Media Charcoal (#141414) for subtle boundaries and media backing; do not invent bright UI accents. Use light, narrow editorial headings, clean body text, and tiny uppercase mono utility labels. Make imagery the expressive focus: favor cinematic full-bleed or offset campaign media, then balance it with sparse copy and generous negative space. Keep layouts asymmetric where appropriate, with compact editorial content blocks and clear start-edge alignment. Avoid shadows, heavy cards, and decorative chrome; use contrast, spacing, and restrained hairlines to establish hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed cinematic media with navigation above and an agency statement aligned low and left. | overlay navigation, campaign title over media, introductory statement | near-black canvas, light condensed heading, small utility clock |
| 2 | gallery | Media-led project tiles sit in an offset composition on a continuous dark background. | project browsing, media-led storytelling, case-study links | video and image tiles, white project labels, minimal card chrome |
| 3 | content-feed | Two-column editorial feed with one prominent story and smaller adjacent news cards. | featured article, view-all link, press and event browsing | editorial image crops, compact labels, small supporting text |
| 4 | contact | Split contact and recruitment content above a sparse, low-contrast footer. | press contact link, recruitment path, social channel links | muted secondary text, simple text links, minimal footer details |

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