---
name: Metalab
description: "A masterclass in using dramatic typography and abstract imagery to create a premium, high-impact agency presence without relying on color."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  neutral: "#C7C7C7"
  line: "rgba(255, 255, 255, 0.1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 88px
    lineHeight: 1.1
    fontWeight: 240
    letterSpacing: "-1.76px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.16px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

A premium design agency site combining high-contrast editorial typography with abstract, glossy 3D visuals.

*A high-end design studio's digital portfolio.*

## Colors

High-contrast monochrome base with subtle gray accents, allowing the dramatic imagery to take center stage.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#C7C7C7`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.1)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** grotesque-sans

## Layout

Asymmetric, editorial layout with floating navigation elements.

*Rhythm:* Consistent use of 24px padding and gaps for modular spacing.

## Elevation & Depth

- Borders: 1px solid rgba(255, 255, 255, 0.1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Pill-shaped navigation items with semi-transparent dark backgrounds and light text.
- **card:** N/A
- **chip:** Semi-transparent dark pills for navigation links (e.g., Midjourney, Uber).
- **input:** N/A
- **hero:** Full-viewport immersive section featuring a large, high-contrast serif headline over a complex 3D abstract background, with secondary descriptive text.

## Do's and Don'ts

**Don't:**
- Don't use bright or saturated accent colors — screenshot shows a strictly monochromatic palette.
- Don't use rounded geometric sans-serif fonts for display — screenshot shows a sharp, high-contrast serif for headlines.
- Don't create a dense, grid-heavy layout — screenshot shows an open, asymmetric composition.
- Don't use solid, opaque background colors for buttons — screenshot shows semi-transparent dark pills.
- Don't use large drop shadows or 3D extrusions on UI elements — screenshot shows flat, translucent surfaces.
- Don't use a standard top-aligned navigation bar — screenshot shows a floating menu pill in the top-left corner.

---

## System Prompt (paste into AI agent)

```
Design DNA for Metalab, a premium design agency. The site uses a high-contrast monochromatic palette with a pure black background (#000000) and white text (#FFFFFF), accented by subtle grays (#C7C7C7). Typography is defined by a large, elegant didone-serif for display headlines and a clean grotesque-sans for body text. The layout is open and editorial, prioritizing dramatic visual impact. Critical constraints: Do not introduce any bright accent colors; keep the palette strictly monochromatic. Do not use rounded, friendly sans-serif fonts for headlines; maintain the sharp serif contrast. Avoid dense, complex grids; preserve the spacious, asymmetric composition.
```