# One Is · Design system migration spec

> Source: https://one-is.com  ·  Curated by OpenDesign  ·  en

> The site is a strong example of a modern, speculative design studio portfolio that prioritizes high-impact visuals and poetic copy over traditional UI patterns.

## 1. Identity DNA

One Is operates as a digital-physical studio, a space where generative art, narrative structures, and physical installations converge. Its design system is the architecture of that bridge—sparse, high-contrast, and built to frame speculative work without overshadowing it.

**One-liner:** A speculative creative platform that blends generative art, narrative spaces, and physical installations.
**Keywords:** speculative · generative · physical · narrative · high-resolution
**Analogy:** A digital-physical studio bridging art, tech, and narrative spaces.

## 2. Color

The color system is a strict monochromatic canvas. Deep black ink sits on a clean white ground, with a single neutral gray reserved for subdued secondary text.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FBFBFA` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#BEC0C5` | placeholder |
| `--line` | `rgba(190,192,197,1.0)` | divider |

**Color principle:** Minimalist canvas with high-contrast ink and a single neutral muted tone for subdued secondary text.

The principle is restraint: no accent colors distract from the high-resolution media or the poetic headline structure.

## 3. Typography

Typographic voice is built on a clean grotesque sans-serif, set at a medium weight with deliberately tight letter spacing. The scale distinguishes between primary headlines and secondary body text, using uppercase transforms only for specific labels and buttons.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 24px | 1.4 | 500 | -0.24px | Primary headlines and list items |
| body | 18px | 1.33 | 400 | 0px | Secondary body text |

**Type rules:**
- Primary text uses a tight letter spacing of -0.24px
- Headings and body text share a medium weight (500)
- Uppercase transform is applied to specific labels or buttons

## 4. Spacing

Spacing follows a generous vertical rhythm, with padding that breathes to create a gallery-like pause between content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding (32px to 80px) creates a spacious, breathing layout.

## 5. Surfaces

Surfaces are flat and clean, rejecting decorative depth. Borders are reserved for interactive elements like buttons, using a consistent 2px solid line to define affordance.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - None visible
- **Borders:** 2px solid borders on interactive elements like buttons.

## 6. Layout

The layout skeleton is stark: a simple header with a left-aligned logo and right-aligned call-to-action. This gives way to full-bleed media or wide text blocks, where vast white space acts as the primary structural separator.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Simple header with logo left and CTA right, followed by full-bleed media or wide text blocks.

## 7. Motion & Interaction

Motion is a functional whisper, not a performance. Transitions are subtle and fast, using opacity and transform changes to provide immediate, refined feedback for interactive states.

- **Durations:** micro 125ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle opacity and transform transitions for interactive elements.

- **Hover:** Standard cursor pointer on interactive elements.
- **Click:** Immediate visual feedback via transitions.
- **Transition:** all 0.125s ease-out
- **Keyboard:** Standard focusable elements.

## 8. Voice & Don'ts

Editorial voice is speculative, abstract, and poetic. It employs a repetitive 'ONE is [concept]' manifesto structure for headlines, contrasted with simple, functional single-word calls to action.

- **Tone:** Speculative, abstract, and poetic.
- **Headline style:** Repetitive 'ONE is [concept]' structure to build a brand manifesto.
- **CTA style:** Simple, functional single-word CTA ('Contact').
- **Avoid:** Corporate jargon / Excessive marketing fluff / Dense paragraphs of explanation

### Don'ts
- ❌ Don't use multiple accent colors — screenshot shows a monochrome palette with black text on white.
- ❌ Don't use decorative or script fonts — screenshot shows a clean, modern grotesque sans-serif.
- ❌ Don't use heavy drop shadows — screenshot shows flat, clean surfaces with no visible shadows.
- ❌ Don't use small, tight containers — screenshot shows a very spacious, almost empty layout.
- ❌ Don't use traditional grid lines or heavy borders — screenshot uses vast white space as the primary separator.
- ❌ Don't use standard corporate calls to action — screenshot uses a very minimal 'Contact' button.

The system deliberately avoids corporate jargon, dense explanatory paragraphs, and decorative typographic flair.

## System Prompt (paste into AI tool)

```
One Is is a speculative creative platform positioned as a bridge between art, technology, and physical spaces. The design is a minimalist, gallery-style canvas dominated by a stark black-on-white palette (#000000 on #FBFBFA), with a single neutral muted tone (#BEC0C5) used for subdued list items. The typography relies on a clean grotesque sans-serif category at a medium weight (500) with tight letter spacing. Critical donts include avoiding decorative fonts, avoiding multiple accent colors, and avoiding cluttered layouts with heavy borders or shadows. The system should emphasize vast white space, high-resolution media, and a poetic, manifesto-style tone.
```
