# Oker · Design system migration spec

> Source: https://oker.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of minimalist editorial design, effectively using scale and whitespace to create a premium, gallery-like feel.

## 1. Identity DNA

Studio Oker's design system operates like a quiet, refined gallery of creative work, where the architecture of whitespace and typography frames each piece without distraction. The system is built on a strict monochrome foundation, using stark high-contrast modes to direct focus entirely toward the creative output. It is a portfolio system that lets the work itself provide the color and narrative.

**One-liner:** A minimalist design studio portfolio characterized by a monochrome palette, refined typography, and generous whitespace.
**Keywords:** design studio · minimal · creative · portfolio · editorial
**Analogy:** A quiet, refined gallery of creative work with a focus on typography and large imagery.

## 2. Color

The color system is a study in restraint, built on a strict monochrome foundation of black, white, and calibrated grays. This palette is not an absence of color but a deliberate tool for creating focus, using stark high-contrast modes to separate content and create visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#101010` | card background |
| `--bg-quiet` | `#F5F5F5` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#A0A0A0` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--line` | `rgba(160, 160, 160, 1.0)` | divider |

**Color principle:** Strict monochrome foundation with stark high-contrast modes (black/white) for focus.

The principle is one of absolute discipline: color is reserved for the work itself, while the interface remains a neutral, silent frame.

## 3. Typography

Typography is set in transitional-serif categories, lending a voice that is both editorial and timeless. The scale is carefully tiered to distinguish large display titles from primary body text and secondary labels, creating a clear hierarchy without decorative flourish.

- **Display:** transitional-serif
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -1.6px | Large display titles and headings |
| title | 32px | 1.0 | 400 | -0.64px | Secondary headings or sub-titles |
| body | 16px | 1.25 | 400 | -0.16px | Primary body text and navigation links |
| caption | 16px | 1.0 | 300 | -0.16px | Secondary labels and subtle captions |

## 4. Spacing

Rhythm is established through consistent use of 8px and 16px increments for padding and alignment.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent use of 8px and 16px increments for padding and alignment.

## 5. Surfaces

Depth is communicated not through shadow but through separation, using a thin 1px solid border in a mid-gray for subtle horizontal dividers. The system avoids heavy drop shadows entirely, maintaining a flat, gallery-like surface where imagery and type occupy distinct planes.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid rgb(160, 160, 160) for subtle horizontal dividers.

## 6. Layout

The layout skeleton is defined by large, full-bleed imagery separated by generous black or white padding. It favors a single-column focus for typographic content, creating a path of intentional, uncluttered whitespace that guides the viewer's eye downward through the work.

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

**Skeleton:** Large full-bleed imagery separated by generous black or white padding.

## 7. Motion & Interaction

Motion is applied with subtlety and purpose, using smooth fade-in and color transitions to acknowledge interaction without demanding attention. Transform and opacity transitions for image reveals are orchestrated with a refined cubic-bezier easing, ensuring movement feels considered and continuous.

- **Durations:** micro 200ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.645, 0.045, 0.355, 1)`
- **Patterns:**
  - Smooth fade-in and color transitions on hover
  - Transform and opacity transitions for image reveals

- **Hover:** Color transitions on text links and subtle cursor changes.
- **Click:** Standard pointer interactions.
- **Transition:** Opacity and color changes over 0.3s using custom cubic-bezier easing.
- **Keyboard:** Standard focus management implied by accessible link structure.

## 8. Voice & Don'ts

The editorial voice is minimalist, professional, and quiet, matching the visual tone of the system. It avoids bright neon accents, rounded UI elements, and complex gradients, favoring instead simple text links and large-scale serif typography.

- **Tone:** Minimalist, professional, and quiet.
- **Headline style:** Large-scale, low-weight transitional serif, often centered or left-aligned.
- **CTA style:** Simple text links without button styling.
- **Avoid:** Bright neon colors / Heavy drop shadows / Busy decorative backgrounds / Rounded UI elements / Sans-serif display fonts / Complex gradients

### Don'ts
- ❌ Don't use sans-serif display fonts — screenshot shows transitional-serif for all headings.
- ❌ Don't use rounded buttons — screenshot shows text-only links with no button containers.
- ❌ Don't use colorful accent palettes — screenshot shows a strict monochrome foundation.
- ❌ Don't use heavy drop shadows — screenshot shows completely flat imagery and typography.
- ❌ Don't use complex multi-column grids for text — screenshot shows generous single-column whitespace.
- ❌ Don't use busy decorative patterns — screenshot shows large, clean photographic or illustrative areas.

What is deliberately omitted—colorful palettes, decorative patterns, complex grids—is as much a part of the system's identity as what is included.

## System Prompt (paste into AI tool)

```
Studio Oker is a minimalist design studio portfolio with a refined, editorial aesthetic. The design relies on a strict monochrome palette, primarily using #000000 and #FFFFFF, complemented by #A0A0A0 and #808080 for secondary text and borders. The typography uses transitional-serif font categories with tight letter-spacing (-1.6px for display). The layout features large, full-bleed imagery separated by generous black or white padding. Key constraints include: strictly monochrome colors only, avoid rounded UI elements or heavy shadows, and maintain generous whitespace around large typography and imagery. The interaction style is subtle, using smooth opacity and color transitions with a custom cubic-bezier easing.
```