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

# ONE · Design System

> Quiet canvas, immersive work, confident type.

**Theme:** light · **Industry:** design · **Source:** https://one-is.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._

ONE presents a collaborative creative studio through a restrained, near-white canvas and a large atmospheric video. Small black navigation and low-contrast editorial copy keep the identity understated while partner marks and a long text manifesto add breadth.

## North star

Keep the interface nearly invisible: let broad white space and expressive media carry the page, with black type and hairline-like outlines as anchors.

## Overview

The page builds its identity from a near-white canvas (#fbfbfa), black typography and outlines (#000000), and pale gray supporting text (#bec0c5). The measured palette is deliberately narrow; saturated hues and earthy tones in the hero are video imagery, not a site-wide brand palette. MagicUiPro gives the small navigation, body copy, and headings a consistent sans-serif voice, with modest negative tracking on the measured heading role. The layout pairs a compact top bar with an almost full-width video framed by broad page margins. Farther down, substantial blank intervals separate a slim editorial text column, a stack of outlined partner-name pills, a collaboration prompt, a broad logo field, and a long manifesto. Most elements sit directly on the canvas rather than in cards. Rounded outline controls supply the page’s most visible interface detail, while the media provides the visual intensity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fbfbfa` | `--color-gallery-white` | surface | Dominant page canvas behind navigation, video, editorial copy, partner marks, and manifesto. |
| Soft Haze | `#bec0c5` | `--color-soft-haze` | neutral | Muted supporting text, including the long manifesto and secondary editorial copy. |
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Wordmark, primary text, outlined Contact control, and borders around pill-shaped controls. |

### Semantic aliases

`--color-canvas` → `#fbfbfa` (Gallery White) · `--color-surface` → `#000000` (Studio Ink) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#bec0c5` (Soft Haze) · `--color-border` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fbfbfa` | 20.28:1 | AAA |
| `#bec0c5` | `#fbfbfa` | 1.76:1 | fail |
| `#bec0c5` | `#000000` | 11.54:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MagicUiPro | `--font-body` | webfont | 500, 600 | Navigation, headings, body copy, and outlined button labels. | Inter |

- **MagicUiPro:** Measured weights 500 and 600; heading role uses subtle negative tracking. Keep text in sentence case and avoid heavy display styling.

### Type scale — Perfect Fourth (ratio ≈ 1.333, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 500 | 1.4 | -0.01em | — | MagicUiPro | Heading role for prominent page statements and editorial leads. |
| body | 18px | 500 | normal | 0 | — | MagicUiPro | Descriptive studio copy, supporting text, and interface labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 16, 19, 24, 28, 32, 64, 80, 96 px.
- Section rhythm 32px · element gap — · card padding — · max content width 1376px.

Use a single-column page with a centered content boundary; the measured page maximum is 1376px. Keep the compact navigation aligned across the top, then place the video as a broad, near-full-bleed block. Below it, the long page is intentionally sparse: a narrow editorial column and manifesto sit amid large blank intervals, with partner names and logos arranged in broader groupings. The measured spacing scale runs from 16px to 96px, with a 32px section gap; preserve the comfortable rhythm rather than compressing content.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is essentially flat: no measured shadows or gradients establish depth. Separate content through open canvas and generous whitespace rather than stacked cards. Use crisp black outlines for pill controls; the hero video itself provides the main visual depth and contrast.

## Imagery

The hero is a large, rounded video window featuring abstract, tactile, high-contrast moving imagery. Its dramatic dark, blue, and warm tones belong to the media, not the measured interface palette. Use immersive footage or similarly atmospheric creative work, crop it to fill the frame, and keep surrounding interface elements quiet. Partner logos appear as monochrome marks on the plain canvas.

## Components

### Top navigation

Place the ONE wordmark at the left and an outlined Contact pill at the right on the near-white canvas.

### Hero video

Use a wide, rounded video surface with a centered dark circular play control; keep the media visually dominant.

### Editorial text

Set studio description in a narrow, left-aligned column using the measured sans-serif body style and muted supporting text.

### Partner pills

Show studio names as vertically stacked, black-outlined capsules with concise labels.

### Partner logo field

Arrange monochrome client and partner marks across a broad area on the uninterrupted canvas.

### Manifesto

Present a long, narrow list of short statements in pale gray text, visually subordinate to the hero.

### Measured component styles

- **Primary button**: background #151515 · text #fbfbfa · radius 999px · padding 0px 28px · 500 20px MagicUiPro
- **Secondary button** (“Contact”): transparent background · text #000000 · border 2px solid #000000 · radius 999px · padding 0px 19.2px · 500 18px MagicUiPro

## Do

- Use #fbfbfa as the dominant page canvas.
- Reserve #000000 for primary text, wordmarks, and outlined controls.
- Use #bec0c5 for low-priority supporting text.
- Give the hero media a broad, prominent frame.
- Separate long-page content with generous open space.
- Use rounded, outlined pills for compact actions and labels.

## Don't

- Do not turn colors inside the hero video into interface tokens.
- Do not add decorative shadows to the flat interface.
- Do not fill the page with card containers.
- Do not make supporting copy as dark or prominent as navigation.
- Do not crowd the manifesto or partner marks into the hero.
- Do not add unmeasured accent colors to the core palette.

## Agent prompt

Build a new page in ONE’s restrained creative-studio style. Use Gallery White (#fbfbfa) as the main canvas, Studio Ink (#000000) for primary text and crisp pill outlines, and Soft Haze (#bec0c5) only for secondary copy. Use MagicUiPro where available, or a close neutral sans-serif substitute, with medium weights and subtle negative heading tracking. Keep navigation compact and put a broad, rounded, immersive video near the top; do not treat colors in footage as brand colors. Arrange content in a narrow editorial column with substantial vertical breathing room, then use simple outlined capsules and a broad monochrome partner-mark field. Avoid cards, shadows, gradients, and ornamental UI. Let large media and spacing provide the drama while the typography and controls remain quiet.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact top navigation above a broad, rounded video framed by page margins. | play video | wordmark, outlined contact pill, centered play control |
| 2 | other | Long, sparse single-column sequence with a narrow editorial column and wider partner-mark groups. | read studio overview, browse partner names, scan manifesto | muted text, outlined name pills, monochrome logos |

## Source CSS custom properties (selected)

```css
--primary: #0075ff;
--font-sans-serif: "MagicUiPro",sans-serif;
--font-monospace: Menlo,Monaco,"Courier New",monospace;
--checkbox-spacing: 0.5rem;
--checkbox-border-radius-sm: 5px;
--checkbox-border-radius: 7px;
--checkbox-border-radius-lg: 9px;
--checkbox-border-width: 1px;
--checkbox-color-fg: #fff;
--checkbox-color-focus-ring: rgba(26,102,255,0.25);
--checkbox-color-disabled-bg: rgba(129,136,152,0.06);
--checkbox-color-disabled-fg: rgba(129,136,152,0.25);
--checkbox-color-disabled-border: rgba(129,136,152,0.15);
--checkbox-color-unchecked-outline-border: rgba(103,111,126,0.55);
--checkbox-color-unchecked-solid-bg: rgba(129,136,152,0.25);
--checkbox-color-unchecked-focus-border: #1a66ff;
--checkbox-color-unchecked-active-border: #004ce6;
--checkbox-color-checked-bg: #1a66ff;
--checkbox-color-checked-focus-bg: #1a66ff;
--checkbox-color-checked-active-bg: #004ce6;
--checkbox-color-error-border: #ff4b1a;
--checkbox-color-error-fg: #e63200;
```

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