---
name: Xxxi Studio
description: "Worth including as a prime example of a premium portfolio that uses absolute restraint and high-quality imagery to communicate technical expertise."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#E5E7EB"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 28px
    lineHeight: 1.14
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 17px
    lineHeight: 1.18
    fontWeight: 400
    letterSpacing: "0"

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

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A refined architectural practice bridging conceptual innovation and technical execution.

*A high-end architectural portfolio where the medium (the website) mirrors the precision and raw materiality of the studio's physical projects.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#E5E7EB`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* The layout relies on a strict 4px base grid with minimal padding, allowing full-bleed photography to dominate the viewport.

## Elevation & Depth

- Borders: Extremely minimal, using 1px solid lines (#E5E7EB) only where necessary for subtle separation.

## Shapes

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

## Components

- **button:** Minimal text-based buttons, likely relying on hover states rather than heavy visual styling.
- **card:** No traditional cards; content is presented in a continuous, scroll-based narrative flow.
- **chip:** None.
- **input:** None.
- **hero:** A full-viewport, immersive architectural photograph with overlaid introductory text.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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