# Dogstudio · Design system migration spec

> Source: https://dogstudio.co  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

Dogstudio's identity system operates like an avant-garde creative director's portfolio: bold, expressive, and deliberately immersive. The system is built to make a loud, memorable statement at the intersection of art, design, and technology.

**One-liner:** Dogstudio is a multidisciplinary creative studio at the intersection of art, design, and technology.
**Keywords:** multidisciplinary · creative · bold · experimental · art-tech
**Analogy:** A digital art gallery meets a high-end design studio.

## 2. Color

The color system is built on a dark, atmospheric base that creates a moody, high-contrast environment. Vibrant red is used sparingly as a high-chroma accent, ensuring maximum contrast and readability against the deep charcoal foundation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#131419` | main background |
| `--bg-soft` | `#0E101A` | card background |
| `--bg-quiet` | `#1E1F26` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#A0A8DC` | secondary text |
| `--muted` | `#A0A8DCB3` | placeholder |
| `--muted-soft` | `#BBC2E54D` | weak hint |
| `--accent` | `#E43333` | single accent |
| `--line` | `rgba(255, 255, 255, 0.1)` | divider |

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

The principle is restraint: a vibrant accent earns its impact by being the exception, not the rule.

## 3. Typography

The type voice is defined by a bold didone-serif for display headlines and a clean humanist-sans for body copy and UI. This pairing establishes a strong editorial hierarchy, with tight negative letter-spacing on large text creating a dense, impactful look.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.89 | 500 | -4.8px | Primary hero statement and project titles |
| heading | 50px | 1.0 | 500 | -1.2px | Section headings and large descriptive text |
| body | 14px | 2.1 | 400 | 0px | General body copy and UI labels |
| small | 11px | 1.0 | 400 | 3.24px | Metadata, dates, and secondary UI text |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows an asymmetric rhythm, with generous whitespace around hero elements and tighter grouping for metadata.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Open, breathable spacing that allows large typography and 3D visuals to dominate the viewport.

## 5. Surfaces

Surfaces avoid visible hard borders, relying instead on color contrast, generous spacing, and subtle shadows to create separation. This approach maintains the dark, immersive atmosphere without introducing visual clutter.

- **Radius:** sm 3px · md 4px · lg 20px · pill 100px
- **Shadows:**
  - 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.

## 6. Layout

The layout skeleton is full-bleed and immersive, built around large background imagery with centered, overlapping text blocks. This structure prioritizes expressive, large-scale compositions over traditional grid-based content.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy is deliberate and cinematic, with slow, eased transitions (0.6s to 0.8s) creating a premium feel. The system uses parallax for depth, staggered animations for text reveals, and smooth color shifts for interactive feedback.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.165, 0.84, 0.44, 1)`
- **Patterns:**
  - Smooth, fluid transitions for color and transform properties.
  - Staggered fade-in and slide-up animations for revealing content.
  - Interactive 3D models that respond subtly to cursor movement.

- **Hover:** Subtle color transitions and scale transformations, often accompanied by the appearance of a red accent element.
- **Click:** Immediate, tactile feedback through smooth transform transitions.
- **Transition:** Global 0.6s to 0.8s transitions using a custom cubic-bezier for a refined, deliberate feel.
- **Keyboard:** Standard focus states that align with the clean UI aesthetic.

## 8. Voice & Don'ts

The editorial voice is confident, bold, and slightly irreverent, yet highly professional. It favors short, provocative statements in massive serif typography and direct, action-oriented CTAs.

- **Tone:** Bold, unapologetic, and creative with a hint of intellectual sophistication.
- **Headline style:** Declarative and impactful, often using a single, large didone serif word or phrase.
- **CTA style:** Direct and confident, usually accompanied by a small, colored arrow or indicator.
- **Avoid:** Corporate jargon / Passive language / Cluttered interfaces

### Don'ts
- ❌ 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.

The system deliberately avoids clichés, corporate jargon, and overly complex sentences, favoring clarity and impact over elaboration.

## System Prompt (paste into AI tool)

```
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.
```