---
name: Dogstudio
description: "This site is an excellent reference for high-end creative agency design, showcasing how bold typography and 3D art can create a powerful, memorable digital presence."
version: alpha

colors:
  background: "#131419"
  primary: "#FFFFFF"
  secondary: "#A0A8DC"
  tertiary: "#E43333"
  neutral: "#A0A8DCB3"
  bg-soft: "#0E101A"
  bg-quiet: "#1E1F26"
  muted-soft: "#BBC2E54D"
  line: "rgba(255, 255, 255, 0.1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 120px
    lineHeight: 0.89
    fontWeight: 500
    letterSpacing: "-4.8px"
  heading:
    fontFamily: humanist-sans
    fontSize: 50px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.2px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 2.1
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 11px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "3.24px"

rounded:
  sm: 3px
  md: 4px
  lg: 20px
  pill: 100px

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

---

## Overview

Dogstudio is a multidisciplinary creative studio at the intersection of art, design, and technology.

*A digital art gallery meets a high-end design studio.*

## Colors

High-contrast dark canvas with deep blue undertones, accented by a sharp, singular red for dynamic energy.

- **Background (`#131419`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#A0A8DC`)** — uses `ink-soft` token
- **Accent (`#E43333`)** — uses `accent` token
- **Muted (`#A0A8DCB3`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.1)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** humanist-sans
- **Mono:** monospace

- Use a high-contrast didone serif for maximum impact on headlines.
- Pair with a clean, geometric humanist sans-serif for body and UI.
- Use wide tracking on uppercase metadata for a premium feel.
- Limit serif usage to major display moments to maintain hierarchy.

## Layout

Asymmetric, editorial layout with full-bleed hero sections and floating 3D elements.

*Rhythm:* Open, breathable spacing that allows large typography and 3D visuals to dominate the viewport.

## Elevation & Depth

- 0px 1px 1px 0px rgba(0,0,0,0.15)
- 0px 1px 2px 0px rgba(0,0,0,0.15)
- 0px 0px 2px 0px rgba(0,0,0,0.4)
- 0px 0px 5px 0px rgba(0,0,0,0.2)
- Borders: Minimal, thin 1px borders used sparingly for subtle separation.

## Shapes

- `sm`: 3px
- `md`: 4px
- `lg`: 20px
- `pill`: 100px

## Components

- **button:** Pill-shaped containers with transparent backgrounds, white text, and a small red accent indicator for interactive states.
- **card:** Minimalist, often transparent, allowing 3D models or large typography to serve as the primary visual.
- **chip:** Small, pill-shaped labels with uppercase text and wide tracking.
- **input:** Understated, clean text fields with minimal chrome.
- **hero:** Immersive, full-viewport sections featuring large 3D models and bold, center-aligned or asymmetric typography.

## Do's and Don'ts

**Don't:**
- Don't use a cluttered layout — the screenshot shows a clean, editorial grid that gives large elements room to breathe.
- Don't use a wide range of bright colors — the screenshot shows a dominant dark palette with only a sharp red accent.
- Don't use all sans-serif for headlines — the screenshot shows a high-contrast didone serif for maximum display impact.
- Don't use tight letter spacing on metadata — the screenshot shows wide, tracked-out uppercase text for dates and labels.
- Don't use heavy, solid-colored backgrounds for all sections — the screenshot shows deep, dark, atmospheric backgrounds with subtle gradients.
- Don't use small, cramped UI elements — the screenshot shows large, generous touch targets and clear interactive zones.

---

## System Prompt (paste into AI agent)

```
Dogstudio is a multidisciplinary creative studio focused on art, design, and technology. The design language is bold and experimental, characterized by an immersive dark mode aesthetic with a deep charcoal/navy background (#131419) and a sharp, singular red accent (#E43333). Typography is a key pillar, utilizing a high-contrast didone-serif for massive display text paired with a clean humanist-sans for UI and body copy. Key hex colors include #FFFFFF for primary ink, #A0A8DC for soft ink, and #E43333 for accents. Critical don'ts: do not use a cluttered layout, do not introduce a wide range of bright colors, do not use all sans-serif for headlines, do not use tight letter spacing on metadata, do not use heavy solid backgrounds, and do not use small cramped UI elements.
```