---
name: Mire Studio
description: "A visually striking example of expressive, gallery-style portfolio design using massive typography and bold color blocks."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#4F4F4F"
  neutral: "#4C4C4C"
  bg-quiet: "#4F4F4F"
  line: "rgba(0, 0, 0, 0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 400px
    lineHeight: 0.85
    fontWeight: 600
    letterSpacing: "0px"
  body:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 20px
  lg: 25px
  pill: 999px

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

---

## Overview

A vibrant, expressive design studio portfolio showcasing work through bold colors and massive typography.

*A bold, colorful portfolio gallery with oversized, overlapping typography.*

## Colors

High-chroma, saturated palettes applied in large geometric blocks and overlapping typography.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#4F4F4F`)** — uses `ink-soft` token
- **Muted (`#4C4C4C`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0)`)** — uses `line` token

## Typography

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

- Use PP Pangram Sans Rounded for all text elements.
- Display logotype uses extreme scale and overlapping fills.
- Body text is small, rounded, and highly legible against colored blocks.

## Layout

Full-bleed grid of large rounded rectangular blocks with massive overlapping type.

*Rhythm:* Generous padding within rounded color blocks; tight spacing between overlapping elements.

## Elevation & Depth

- rgba(84, 84, 84, 0.23) 0px 0px 20px 0px
- Borders: None; shapes defined by solid color blocks and overlapping typography.

## Shapes

- `sm`: 4px
- `md`: 20px
- `lg`: 25px
- `pill`: 999px

## Components

- **button:** Small, rounded pill buttons with white background and dark text.
- **card:** Large, full-bleed rounded rectangles filled with solid colors or project imagery.
- **chip:** Small, rounded white labels overlapping project imagery.
- **hero:** Dynamic, multi-colored grid of blocks with massive overlapping logotype and descriptive text.

## Do's and Don'ts

**Don't:**
- Don't use muted or low-contrast color palettes — screenshot shows bold, high-saturation color blocks.
- Don't use small, rigid typography — screenshot shows massive, overlapping logotype elements.
- Don't use sharp corners on containers — screenshot shows heavily rounded corners (20-25px radius).
- Don't use complex drop shadows or 3D effects — screenshot shows flat color blocks with minimal, soft shadows.
- Don't use traditional, strictly aligned grid systems — screenshot shows overlapping, dynamic layout with massive type.
- Don't use generic or corporate design language — screenshot shows an expressive, artistic studio portfolio.

---

## System Prompt (paste into AI agent)

```
This is the portfolio site for Mire, a graphic design and art direction studio. The design DNA is defined by bold, high-saturation color blocks (yellow, blue, green, pink) and massive, overlapping logotype elements using PP Pangram Sans Rounded. The layout is a full-bleed grid of large, rounded rectangular cards. Key colors are #FFFFFF (background), #4F4F4F (quiet text), and #000000 (primary text), with the vibrant block colors as dominant accents. Typography is geometric sans, used at extreme scales for the display logotype and small scales for navigation and labels. Critical donts: never use muted palettes, never use small display text, never use sharp corners, never use complex shadows, and never use rigid, corporate-style grids.
```