---
name: Studio Dumbar
description: "This site is worth including as a prime example of how a design studio can demonstrate its motion and typography capabilities through its own portfolio experience rather than just documenting them."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  secondary: "#868686"
  neutral: "#868686"
  line: "rgba(255,255,255,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"

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 motion-first design agency portfolio that pushes typographic boundaries through 3D rendering and bold visual experimentation.

*An experimental motion design studio that treats typography as 3D sculpture.*

## Colors

Strict monochrome palette where color emerges only from the showcased work imagery.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#868686`)** — uses `ink-soft` token
- **Muted (`#868686`)** — uses `muted` token
- **Borders (`rgba(255,255,255,1.0)`)** — uses `line` token

## Typography

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

- Navigation uses consistent 20px sans-serif type.
- Display typography relies on 3D rendered forms rather than traditional web fonts.
- Hierarchy is achieved through scale and dimensional rendering, not weight variations.

## Layout

Full-bleed immersive layout with floating navigation and minimal structural grid visibility.

*Rhythm:* Asymmetric spacing focused on visual composition rather than strict grid adherence.

## Elevation & Depth

- 0 0 0 rgba(0,0,0,0) for flat UI elements
- Complex 3D lighting rendered within project imagery
- Borders: Minimal visible borders; separation achieved through spacing and composition.

## Shapes

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

## Components

- **button:** Minimal text-based navigation links with no visible button chrome.
- **card:** Full-bleed project showcases using video/imagery as the primary container.
- **chip:** Not observed.
- **input:** Not observed.
- **hero:** Full-viewport immersive area dominated by large-scale 3D typographic or motion graphics.

## Do's and Don'ts

**Don't:**
- Don't use colorful UI elements — screenshot shows a strictly monochrome palette where all color comes from the work imagery.
- Don't apply heavy drop shadows to UI components — screenshot shows a flat interface where all dimensionality exists within the project renders.
- Don't use multiple font weights for emphasis — screenshot shows consistent 400 weight throughout the UI.
- Don't clutter the interface with secondary UI elements — screenshot shows minimal chrome with only navigation and project title.
- Don't use rounded corners on containers — screenshot shows sharp, clean edges throughout the layout.
- Don't use a light background — screenshot shows a pure black background dominating the experience.

---

## System Prompt (paste into AI agent)

```
This is an experimental motion design studio portfolio that positions itself at the intersection of 3D rendering and typography. The visual system is built on a strict monochrome foundation: pure black backgrounds (#000000), white text (#FFFFFF), and muted gray (#868686) for secondary elements. Typography is minimal in the UI layer, using geometric and humanist sans-serif categories at 20px for navigation, while the actual display moments are 3D rendered typographic sculptures that serve as both hero imagery and project identifiers. The layout is full-bleed and immersive, abandoning traditional grid structures for cinematic compositions. Critical constraints include: no colorful UI elements (all color emerges from work), no heavy drop shadows on interface components, and no rounded corners on containers. The motion system emphasizes smooth 1s transitions and 3D object manipulation. This approach ensures the portfolio itself demonstrates the studio's motion capabilities rather than just describing them.
```