# Ozero · Design system migration spec

> Source: https://www.ozero.design  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a minimalist, image-first design studio portfolio that prioritizes visual work over UI chrome.

## 1. Identity DNA

Ozero functions as a modern gallery wall, its design subservient to the work it displays. The system is built to let the studio's colorful, experimental projects provide all the visual complexity, while the interface itself remains a quiet, confident frame.

**One-liner:** A full-stack cloud design studio showcasing bold, colorful work
**Keywords:** creative · minimal · experimental · cloud · design
**Analogy:** A modern gallery wall displaying diverse client work

## 2. Color

The palette is a study in high-contrast restraint, using only pure white and dark charcoal. This binary approach creates a neutral field, ensuring the vibrant project imagery becomes the primary visual event.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#1B1B1A` | body text |
| `--line` | `rgba(27,27,26,1.0)` | divider |

**Color principle:** High-contrast gallery aesthetic with white space and bold project imagery

The principle is that color is content; the interface itself should not compete with it.

## 3. Typography

Typographic voice is delivered through the **humanist-sans Inter**, used at massive display sizes with tight tracking. This choice ensures clarity and a clean, contemporary feel that supports rather than overwhelms the visual work.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 106px | 1.0 | 400 | -1.76px | hero headline |
| display | 88px | 1.0 | 400 | -0.64px | large display |
| heading | 64px | 1.0 | 400 | -0.64px | section titles |
| body | 16px | 1.5 | 400 | normal | navigation |

**Type rules:**
- font-size: 64px; line-height: 1.0; letter-spacing: -0.64px
- font-size: 106px; line-height: 1.0; letter-spacing: -1.76px
- font-family: Inter, Arial, sans-serif

## 4. Spacing

Rhythm is established through generous, unstructured padding within project containers, creating breathing room around the dense visual assets.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 12 / 16 / 20 / 24 / 32 / 60 / 64 px
- **Rhythm:** generous padding within project containers

## 5. Surfaces

Surfaces are defined by their absence of decoration; the composition is flat and borderless. Depth is achieved not through shadows or frames, but through the stark contrast between the background field and the layered project imagery.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** none visible between main containers

## 6. Layout

The foundational skeleton is an asymmetric masonry grid, presenting project images as large, full-bleed sections. This layout prioritizes visual impact over uniform alignment, creating a dynamic, curated flow of work.

- **Grid:** 2 columns, gutter 0px
- **Breakpoints:** 768 px

**Skeleton:** asymmetric masonry grid of large project images

## 7. Motion & Interaction

Motion is a subtle, utilitarian tool rather than a decorative flourish. Its philosophy is to provide smooth, immediate feedback through simple opacity transitions, reinforcing the interface's responsive but unobtrusive nature.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - opacity fades on hover
  - transition: all 0.4s

- **Hover:** opacity change on interactive elements
- **Click:** triggers navigation
- **Transition:** all 0.4s
- **Keyboard:** standard tab navigation

## 8. Voice & Don'ts

The editorial voice is minimal and confident, expressed through massive, tightly tracked display typography and clean, capitalized text links. It avoids excessive copy and ornamental decoration, trusting the visual work to carry the narrative.

- **Tone:** minimal and confident
- **Headline style:** massive, tightly tracked display typography
- **CTA style:** clean, capitalized text links
- **Avoid:** excessive copy / ornamental decoration / complex interfaces

### Don'ts
- ❌ don't use decorative borders — screenshot shows clean, borderless layout
- ❌ don't use drop shadows on containers — screenshot shows flat, image-based composition
- ❌ don't use small, dense grids — screenshot shows large, expansive project imagery
- ❌ don't use serif typography — screenshot shows exclusively sans-serif Inter
- ❌ don't use muted or pastel backgrounds for the overall page — screenshot shows high-contrast white/black
- ❌ don't use standard card components — screenshot shows full-bleed image sections

This system deliberately does not use standard card components, drop shadows, or decorative borders, adhering to a strict 'less but better' principle.

## System Prompt (paste into AI tool)

```
Ozero is a full-stack cloud design studio website featuring a bold, gallery-style portfolio. The layout is an asymmetric masonry grid of large, full-bleed project images with minimal whitespace. The primary background is white (#FFFFFF) with black (#1B1B1A) text. Navigation is a simple top-right aligned list of links in capitalized, sans-serif text. Typography is a humanist-sans (Inter) used at massive display sizes with tight tracking. Key design elements include a two-column layout on desktop, generous padding within containers, and clean, borderless surfaces. Motion is limited to smooth opacity transitions. Critical donts: do not add drop shadows or decorative borders, do not use small grids, and do not use serif fonts. This site represents a premium, minimalist creative portfolio focused on visual work.
```