---
name: Spacelab
description: "A strong example of how extreme restraint and massive typography can create a premium, sophisticated brand presence."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#2C2222"
  secondary: "#B2B4B1"
  neutral: "#B2B4B1"
  line: "rgba(255,255,255,0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 62px
    lineHeight: 1.05
    fontWeight: 400
    letterSpacing: "0.7px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 30px
    lineHeight: 1.07
    fontWeight: 400
    letterSpacing: "0.3px"
  body:
    fontFamily: grotesque-sans
    fontSize: 21px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "normal"

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

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 21px
  xl: 32px
  2xl: 42px
  3xl: 84px

---

## Overview

A minimalist, photo-led portfolio for an architectural design studio.

*An open-plan studio where light, space, and structural honesty define the environment.*

## Colors

Strict monochrome palette where photography provides all color.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#2C2222`)** — uses `ink` token
- **Secondary text (`#B2B4B1`)** — uses `ink-soft` token
- **Muted (`#B2B4B1`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0)`)** — uses `line` token

## Typography

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

- Use a uniform font-weight of 400 across all sizes
- Maintain a tight line-height of 1.05 to 1.2 for clean vertical rhythm
- Use slight positive letter-spacing for clarity

## Layout

Asymmetrical split layout with a fixed left navigation column and a fluid right content area.

*Rhythm:* Based on a 4px baseline, with prominent use of 21px (1.5rem) and 42px (3rem) increments.

## Elevation & Depth

- Borders: No visible borders; relies on spacing and high-contrast photography.

## Shapes

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

## Components

- **button:** Minimal text links without borders or backgrounds.
- **card:** No traditional cards; content is presented as full-bleed architectural photography.
- **chip:** None.
- **input:** None.
- **hero:** A massive typographic manifesto statement followed by a full-width hero image.

## Do's and Don'ts

**Don't:**
- don't use bold font-weights — screenshot shows all text in a regular 400 weight
- don't add decorative UI borders — screenshot shows a completely borderless layout
- don't use vibrant accent colors — screenshot relies strictly on neutral text and photography
- don't use a serif font — screenshot uses a clean, uniform grotesque sans-serif
- don't create a rigid grid layout — screenshot shows a split layout with a distinct left column
- don't use drop shadows on elements — screenshot shows a completely flat, 2D surface treatment

---

## System Prompt (paste into AI agent)

```
A minimalist, photo-led portfolio for an architectural design studio. Positioning: High-end architectural studio. Key hex colors: #FFFFFF background, #2C2222 ink, #B2B4B1 muted. Font categories: Grotesque sans-serif at a uniform 400 weight. Critical donts: Do not use bold font-weights; do not add decorative UI borders; do not use vibrant accent colors; do not use serif fonts; do not use drop shadows. The design prioritizes massive typography and full-bleed photography over traditional UI components, creating a clean, spacious feel.
```