# Opx Studio · Design system migration spec

> Source: https://opx.studio  ·  Curated by OpenDesign  ·  en

> Worth including as an example of minimalist, typography-driven agency portfolio design that relies on bold visual statements rather than complex UI patterns.

## 1. Identity DNA

The Opx Studio identity operates like a gallery exhibition where every element earns its place through sheer presence. The system strips design to its essential components—form, contrast, and space—letting bold typographic statements carry the full weight of communication against a stark, monochromatic field.

**One-liner:** A minimalist creative agency portfolio with a bold, black-and-white typographic identity.
**Keywords:** branding · studio · creative · agency · portfolio
**Analogy:** A high-end creative agency showcasing bold typography and minimalist presentation to demonstrate design expertise.

## 2. Color

The color system is deliberately reductive: a strict monochromatic palette using pure black and white for dramatic impact, with neutral gray reserved for subtle secondary elements. This approach turns chromatic restraint into a visual strength, ensuring every hue decision carries intention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#ffffff` | body text |
| `--muted` | `#9b9b9b` | placeholder |
| `--line` | `rgba(255,255,255,0.1)` | divider |

**Color principle:** High-contrast, monochromatic palette using pure black and white for dramatic impact, with neutral grays for subtle secondary elements.

The principle is absolute: no accent colors, no decorative tints—only the fundamental contrast between light and dark.

## 3. Typography

Typographic voice splits cleanly between a **grotesque-sans display** for impact and a **humanist-sans body** for readability, both fixed at 400 weight. Display type uses tight letter-spacing at large scales, while body text maintains generous line-height to preserve clarity in a system that relies entirely on typography for hierarchy.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.1 | 400 | -0.02em | Main hero headline |
| heading | 36px | 1.2 | 400 | -0.01em | Section titles and navigation |
| body | 18px | 1.6 | 400 | normal | Body text and descriptions |

**Type rules:**
- Display typography uses tight letter-spacing and large sizes for visual impact.
- Body text maintains generous line-height for readability.
- Font weight stays consistent at 400 for a clean, uniform appearance.

## 4. Spacing

Rhythm is established through deliberate generosity: 50px horizontal padding and 99px vertical spacing create vast breathing room that frames content like negative space in a print layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous white space with large padding values (50px horizontal, 99px vertical) creating breathing room around elements.

## 5. Surfaces

Surfaces are defined by absence rather than addition—shadows and decorative borders are rejected in favor of clean edges. Minimal 1px borders in white or dark gray appear only when structural separation is essential.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Minimal 1px borders in white or dark gray, used sparingly for subtle separation.

## 6. Layout

The skeleton begins with full-width hero sections where centered typography commands the viewport, then transitions to image-focused project grids. Generous spacing between elements maintains the exhibition-like clarity throughout the vertical scroll.

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

**Skeleton:** Full-width hero sections with centered content, transitioning to image-focused project grids with generous spacing.

## 7. Motion & Interaction

Motion is treated as punctuation rather than performance: smooth opacity and transform transitions mark element reveals with calculated timing. Default state changes use a restrained 0.2s linear transition, while entrance animations employ cubic-bezier easing for more complex choreography.

- **Durations:** micro 200ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions for element reveals.
  - Linear transitions for simple state changes.
  - Cubic-bezier easing for more complex entrance animations.

- **Hover:** Subtle opacity or color transitions on interactive elements.
- **Click:** Immediate visual feedback through state changes.
- **Transition:** All elements have transition: all 0.2s linear by default, with specific timing for animations.
- **Keyboard:** No specific keyboard navigation patterns visible in the static screenshots.

## 8. Voice & Don'ts

Editorial voice is confident and direct—bold, declarative headlines with strong verbs like 'invent' and 'transform' set the tone. The system avoids technical jargon and flashy calls-to-action, relying on minimal, text-based interaction patterns.

- **Tone:** Confident, professional, and direct.
- **Headline style:** Bold, declarative statements with strong verbs ('invent', 'reinvigorate', 'transform').
- **CTA style:** Minimal and understated, likely text-based without flashy buttons.
- **Avoid:** Avoid overly technical jargon. / Avoid cluttered layouts with multiple competing elements. / Avoid bright, saturated color accents. / Avoid complex decorative elements or patterns. / Avoid small, cramped typography. / Avoid inconsistent spacing or alignment.

### Don'ts
- ❌ Don't use multiple accent colors — screenshot shows strict monochromatic black-and-white palette.
- ❌ Don't use serif typography — screenshot shows clean sans-serif display and body fonts.
- ❌ Don't create cluttered layouts — screenshot shows generous white space and minimal elements.
- ❌ Don't use decorative borders or shadows — screenshot shows minimal, clean edges.
- ❌ Don't use small display typography — screenshot shows large, impactful headline sizes (80px).
- ❌ Don't use inconsistent font weights — screenshot shows consistent 400 weight throughout.

What they deliberately omit—serif fonts, saturated colors, decorative patterns, and cluttered layouts—defines the identity as much as what remains.

## System Prompt (paste into AI tool)

```
This is a creative agency/studio portfolio website with a minimalist, high-contrast black-and-white design. The identity centers on bold typography and generous white space to showcase design expertise. Key colors are pure black (#000000) background with white (#ffffff) text and neutral gray (#9b9b9b) for secondary elements. Typography features grotesque-sans for display and humanist-sans for body text at 400 weight. Critical design principles: maintain high contrast, use generous spacing, keep typography clean and impactful. Avoid colored accents, cluttered layouts, serif fonts, decorative elements, small typography, and inconsistent weights. The design relies on the strength of typography and photography rather than complex UI patterns.
```