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

# Studio Oker · Design System

> A quiet canvas for bold brand work

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

Studio Oker pairs a restrained monochrome interface with oversized typography and vivid project imagery. A spacious editorial layout lets the studio introduction, feed, portfolio, and contact details unfold with clarity.

## North star

Keep the interface nearly invisible: use monochrome typography and generous space to let the work provide the colour and character.

## Overview

The page is built on a white canvas with near-black text, muted gray supporting copy, and fine gray rules. Colour is deliberately kept out of the interface; the black-and-white opening reel and richly coloured client work carry the visual variety. NextBook’s light, sans-serif letterforms give headings a calm, open feel, while large display text creates a strong editorial scale. The navigation and project captions remain compact and understated. Layout alternates broad full-bleed media with aligned content areas, two-column project presentations, and a horizontal feed of work. Generous vertical pauses keep the long homepage from feeling crowded. Project imagery is treated as content rather than decoration: each image introduces an identity, product, or campaign, while titles and discipline labels sit close to the media. Thin dividers organize transitions without adding card-like framing or visual weight.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Continuous page canvas behind the navigation, introduction, feed, portfolio, and footer. |
| Studio Ink | `#101010` | `--color-studio-ink` | brand | Primary headings, navigation, project names, body text, and footer details. |
| Quiet Gray | `#a0a0a0` | `--color-quiet-gray` | neutral | Secondary descriptions, metadata, and understated supporting links such as the reel prompt. |
| Rule Gray | `#dcdcdc` | `--color-rule-gray` | semantic | Subtle horizontal dividers that separate content areas and organize footer information. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#101010` (Studio Ink) · `--color-text-muted` → `#a0a0a0` (Quiet Gray) · `--color-border` → `#dcdcdc` (Rule Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#101010` | `#ffffff` | 19.03:1 | AAA |
| `#a0a0a0` | `#ffffff` | 2.61:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NextBookRegular | `--font-body` | webfont | 400, 300 | Site-wide sans serif for navigation, editorial headings, body copy, links, and project captions. | Inter |

- **NextBookRegular:** Use light weights for large headings and regular weight for supporting text; tracking is slightly tight, with natural capitalization.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 300 | 1.13 | -0.02em | — | NextBookLight | Oversized studio wordmark and display-scale editorial moments. |
| h1 | 32px | 300 | 1.13 | -0.02em | — | NextBookRegular | Primary section or introductory heading. |
| h2 | 24px | 400 | 1.13 | -0.02em | — | NextBookRegular | Project and secondary content headings. |
| body | 16px | 400 | 1.25 | -0.01em | — | NextBookRegular | Studio description, project summaries, and supporting copy. |
| nav | 16px | 400 | 1 | -0.01em | — | NextBookRegular | Header navigation and compact site links. |
| link | 24px | 400 | 1.13 | -0.02em | — | NextBookRegular | Prominent project links and named work titles. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 8, 16, 48, 64, 120, 128 px.
- Section rhythm 120px · element gap — · card padding — · max content width 1408px.

Use a spacious, editorial page structure with a measured maximum content width of 1408px. The opening media runs nearly full width, while the introduction and contact details use aligned multi-column layouts. Work is presented in a two-column arrangement, with a horizontal content feed introducing a denser, image-led rhythm. Keep headings left aligned and let section boundaries breathe; the measured section gap is 120px. The overall density is intentionally low, with ample blank canvas between project groups.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.645, 0.045, 0.355, 1)` on interactive elements.

The page is flat and unornamented: measured styles show no shadows, and cards have no raised treatment. Separate groups with thin #dcdcdc rules and whitespace rather than boxes. Keep image content flush within its layout, with no decorative surface layers competing against the work.

## Imagery

Lead with a large black-and-white motion reel, using a geometric grid and oversized white letterforms. Below, present project photography, identity work, product imagery, and campaign visuals in prominent rectangular crops. Keep image colour intact: the interface stays monochrome while project content supplies green, blue, warm, and photographic tones. Feed images form a horizontal strip; portfolio pieces pair media with concise labels and descriptions.

## Components

### Top navigation

A compact, white header with the studio name, live-looking time display, and right-aligned Work, Feed, Studio, and Contact links in dark text.

### Opening reel

Large, near-full-width video or media block with a black grid, oversized white letterforms, and a subdued “→ Play full reel” link.

### Studio introduction

Large studio heading followed by a two-column introduction and small studio facts, separated from later content with a fine rule.

### Content feed

Horizontal row of project updates with image-led thumbnails, concise titles, dates, and minimal supporting copy.

### Project gallery

Two-column portfolio items with prominent rectangular media, a dark project name, and muted summary and discipline labels.

### Contact footer

Sparse contact and online-link columns with copyright and date range, aligned around a subtle horizontal divider.

### Measured component styles

- **Link** (“→ Play full reel”): transparent background · text #a0a0a0 · radius 0px · padding 0px · 400 16px NextBookRegular
- **Navigation item** (“2924:06:20:36 Work Feed Studio Contact”): transparent background · text #101010 · radius 0px · padding 0px · 400 16px NextBookRegular

## Do

- Use white as the continuous page canvas.
- Set primary text and navigation in #101010.
- Reserve #a0a0a0 for secondary copy and metadata.
- Use thin #dcdcdc rules sparingly to distinguish sections.
- Give project media generous space and strong visual prominence.
- Keep captions concise and close to their associated work.

## Don't

- Do not add colourful interface accents or gradients.
- Do not put work into shadowed or heavily bordered cards.
- Do not crowd section transitions with extra decoration.
- Do not let captions compete with the project imagery.
- Do not treat the project images’ colours as interface palette colours.
- Do not introduce rounded UI treatments without evidence.

## Agent prompt

Build a new page in the Studio Oker visual style: quiet, spacious, and editorial. Use Gallery White (#ffffff) as the page canvas, Studio Ink (#101010) for primary text and navigation, Quiet Gray (#a0a0a0) for metadata and supporting links, and Rule Gray (#dcdcdc) for fine separators. Use a clean sans serif close to NextBookRegular, with light, large headings and slightly tight tracking. Keep the header compact, align content to a broad central layout, and create deliberate vertical pauses between sections. Let large, uncropped or carefully cropped project media lead; use monochrome treatment only where the source work calls for it. Project captions should remain small and understated. Avoid shadows, card chrome, colourful controls, and decorative gradients. Treat each project image as the source of visual colour.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Near-full-width reel beneath a slim header, with minimal surrounding copy. | play full reel link | black grid imagery, oversized white lettering, compact top navigation |
| 2 | feature-split | Large studio title followed by a two-column introduction and compact studio facts. | studio overview, key facts | left-aligned heading, muted metadata, fine divider |
| 3 | content-feed | Editorial heading and compact descriptor lead into a horizontal strip of project updates. | browse updates, open project links | image thumbnails, small dates, minimal captions |
| 4 | product-grid | Two-column work grid with paired project media and concise captions. | browse selected work, open project | large project images, compact labels, open white space |
| 5 | product-grid | Two-column project row with paired imagery and caption blocks. | open project | rectangular image crops, under-image captions, wide gutters |
| 6 | product-grid | Two-column portfolio row aligned to the previous project groups. | open project | project photography, brief title and summary, spacious grid |
| 7 | contact | Two-column contact and online links with copyright details across the footer area. | email studio, visit social links | small text, muted labels, fine divider |
| 8 | other | Single-column, oversized studio wordmark on white. | brand recognition | large black lettering, uninterrupted white canvas |

## Source CSS custom properties (selected)

```css
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
```

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