---
name: Def Studio
description: "This site is an excellent example of 'type-as-interface' design, where the typography scale itself defines the entire visual hierarchy and spatial structure."
version: alpha

colors:
  background: "#000000"
  primary: "#EFEFEF"
  neutral: "#747474"
  line: "rgba(239,239,239,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 96px
    lineHeight: 0.95
    fontWeight: 300
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 25px
    lineHeight: 1.4
    fontWeight: 300
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

A design studio portfolio featuring large-scale typography over dark, atmospheric product photography.

*A minimalist digital portfolio showcasing creative work through bold typography and high-contrast visuals.*

## Colors

Strict high-contrast monochrome palette relying on pure black backgrounds and white/light-gray text for maximum legibility.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#EFEFEF`)** — uses `ink` token
- **Muted (`#747474`)** — uses `muted` token
- **Borders (`rgba(239,239,239,0.1)`)** — uses `line` token

## Typography

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

- Light weight (300) used for display and navigation text to maintain elegance.
- Text hierarchy is established primarily through extreme size differences rather than weight variations.
- Navigation items utilize the same typography as section headings but at a smaller scale.

## Layout

Full-width dark background with large, left-aligned typography overlays.

*Rhythm:* Generous, asymmetric spacing driven by specific padding values like 100px 30px 60px 30px.

## Elevation & Depth

- Borders: Minimal borders used, primarily text borders for navigation elements.

## Shapes

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

## Components

- **button:** Text-only button with cursor pointer, no background fill.
- **card:** Image-based portfolio cards with text labels underneath, lacking borders or background containers.
- **hero:** Full-screen dark atmospheric image with massive left-aligned text navigation.

## Do's and Don'ts

**Don't:**
- don't use rounded corners — screenshot shows sharp edges on all cards and elements
- don't add drop shadows — screenshot shows completely flat, borderless surfaces
- don't use multi-column text layouts — screenshot shows left-aligned, wide typography
- don't apply heavy font weights — screenshot shows predominantly light (300) and regular (400) weights
- don't use decorative patterns — screenshot shows solid colors and photographic backgrounds
- don't use centered text alignment — screenshot shows strong left alignment for navigation and headings

---

## System Prompt (paste into AI agent)

```
Def.studio is a design studio portfolio characterized by extreme typographic scale and a strict monochrome palette. The visual identity relies on light-weight sans-serif typography at massive sizes (96px) to create a bold, minimalist aesthetic against a solid black background (#000000). Key colors include pure black for the background and light gray (#EFEFEF) for primary text, with a secondary muted gray (#747474) for less prominent elements. The layout is asymmetric and full-bleed, using photography as a background texture rather than framing it. Critical constraints include avoiding rounded corners or shadows, maintaining strictly left-aligned text, and never using high-chroma accent colors, ensuring the focus remains entirely on the work and the typography.
```