---
name: Ozero
description: "Worth including as a prime example of a minimalist, image-first design studio portfolio that prioritizes visual work over UI chrome."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1B1B1A"
  line: "rgba(27,27,26,1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 106px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.76px"
  display:
    fontFamily: humanist-sans
    fontSize: 88px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.64px"
  heading:
    fontFamily: humanist-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.64px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 16px
  2xl: 20px
  3xl: 24px

---

## Overview

A full-stack cloud design studio showcasing bold, colorful work

*A modern gallery wall displaying diverse client work*

## Colors

High-contrast gallery aesthetic with white space and bold project imagery

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1B1B1A`)** — uses `ink` token
- **Borders (`rgba(27,27,26,1.0)`)** — uses `line` token

## Typography

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

- 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

## Layout

asymmetric masonry grid of large project images

*Rhythm:* generous padding within project containers

## Elevation & Depth

- Borders: none visible between main containers

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** text-only navigation links in the header
- **card:** large full-bleed image containers with occasional text overlay
- **chip:** none visible
- **input:** none visible
- **hero:** full-viewport masonry grid of project imagery

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```