# Xxxi Studio · Design system migration spec

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

> Worth including as a prime example of a premium portfolio that uses absolute restraint and high-quality imagery to communicate technical expertise.

## 1. Identity DNA

The design system for Xxxi Studio operates like the precision framework of a high-end architectural portfolio. Its core identity is defined by a strict monochrome palette and utilitarian typography, serving as a neutral, unobtrusive frame for the studio's photographic and technical work.

**One-liner:** A refined architectural practice bridging conceptual innovation and technical execution.
**Keywords:** Architecture · Product Design · Construction · Conceptual · Technical
**Analogy:** A high-end architectural portfolio where the medium (the website) mirrors the precision and raw materiality of the studio's physical projects.

## 2. Color

A strictly monochromatic palette of pure white and solid black establishes a clean, neutral foundation. A single light gray (#E5E7EB) is used sparingly, exclusively for minimal 1px solid borders where subtle separation is necessary.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#E5E7EB` | placeholder |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** A strict monochrome palette that serves as a neutral, unobtrusive frame for high-quality architectural photography.

The principle is one of absolute restraint, ensuring the color system never competes with the primary visual content.

## 3. Typography

The typographic voice is defined by a single clean grotesque sans-serif, used in a consistent 400 weight to maintain a modern, utilitarian aesthetic. This choice prioritizes legibility and technical clarity over expressive flair, allowing the system to function as a subtle conduit for information.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 28px | 1.14 | 400 | -0.5px | Introductory descriptive paragraph |
| body | 17px | 1.18 | 400 | 0 | Standard text and captions |

**Type rules:**
- Use a clean grotesque sans-serif for all text to maintain a modern, utilitarian aesthetic.
- Keep font weight consistently at 400 to avoid visual heaviness.

## 4. Spacing

The spatial rhythm is governed by a strict 4px base grid, enforcing disciplined alignment and minimal padding to maximize the impact of full-bleed photography.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** The layout relies on a strict 4px base grid with minimal padding, allowing full-bleed photography to dominate the viewport.

## 5. Surfaces

Depth is communicated not through shadows, but through the stark contrast of photographic layers against the flat, neutral surfaces. Borders are reduced to the absolute minimum, appearing only as 1px solid lines of #E5E7EB for essential, subtle division.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Extremely minimal, using 1px solid lines (#E5E7EB) only where necessary for subtle separation.

## 6. Layout

The layout skeleton is a full-bleed, editorial grid where large-scale architectural photography acts as the primary structural element. Text overlays are minimal and purposeful, positioned to complement rather than obstruct the visual narrative.

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

**Skeleton:** A full-bleed, editorial grid where large-scale photography is the primary structural element, overlaid with minimal text.

## 7. Motion & Interaction

Motion is applied with surgical precision, consisting solely of smooth 0.3s transitions on color, background-color, and opacity. The philosophy is to provide unobtrusive feedback and enhance readability without introducing decorative animation.

- **Durations:** micro 220ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity and color transitions on hover, subtle scroll-based reveals of images and text.

- **Hover:** Smooth color transitions, likely changing text or background color to indicate interactivity.
- **Click:** Standard pointer cursor indicating clickable elements.
- **Transition:** Consistent 0.3s cubic-bezier transition applied to color, background-color, and opacity properties.
- **Keyboard:** Standard browser focus states.

## 8. Voice & Don'ts

The editorial voice is professional, concise, and highly confident, mirroring the directness of architectural blueprints. Calls to action are deliberately understated, often taking the form of a simple text link or icon.

- **Tone:** Professional, concise, and highly confident.
- **Headline style:** Direct and declarative, using a standard weight to let the photography do the talking.
- **CTA style:** Minimal and understated, often just a text link or icon.
- **Avoid:** Overly enthusiastic language / Visual clutter / Decorative elements

### Don'ts
- ❌ don't use vibrant accent colors — the screenshot shows a strictly monochromatic palette.
- ❌ don't apply heavy drop shadows or glows — the screenshot shows completely flat, unadorned elements.
- ❌ don't use decorative, handwritten, or script fonts — the screenshot uses only a clean, standard grotesque sans-serif.
- ❌ don't use thick borders or highly rounded corners — the screenshot shows sharp, minimal lines.
- ❌ don't use heavy bold weights for headlines — the screenshot maintains a consistent, standard font weight.
- ❌ don't add unnecessary padding or margins that detract from the full-bleed photography.

The system deliberately avoids vibrant accent colors, heavy shadows, decorative fonts, and rounded corners—elements it considers antithetical to raw, industrial materiality.

## System Prompt (paste into AI tool)

```
This is a premium architectural studio portfolio focused on raw, industrial materials and minimalist execution. The design relies heavily on a monochrome palette of pure white (#FFFFFF) and solid black (#000000), using a single grotesque sans-serif font family at a consistent 400 weight. Key critical constraints include avoiding any vibrant accent colors, omitting heavy shadows or rounded corners, and refusing to use decorative typography. The layout is entirely driven by full-bleed, high-quality photography with minimal, overlaid text. Interaction is subtle, relying on smooth 0.3s transitions. This restraint ensures the design never competes with the studio's architectural work.
```