# Stinkstudios · Design system migration spec

> Source: https://www.stinkstudios.com  ·  Curated by OpenDesign  ·  en

> The site is worth including as a prime example of a minimalist, photography-driven agency portfolio that prioritizes massive, tightly-tracked typography over complex UI components.

## 1. Identity DNA

Stinkstudios operates as a cinematic gallery, where the architecture of the interface is built to frame and elevate large-scale creative work. Its identity is defined by a stark, high-contrast monochrome foundation that acts as a deliberate void, ensuring the agency's photographic and video projects command the viewer's full attention.

**One-liner:** A premium creative studio portfolio characterized by bold typography, cinematic photography, and a stark black-and-white palette.
**Keywords:** creative studio · advertising · cinematic · bold
**Analogy:** A cinematic gallery showcasing large-scale creative work with high-contrast typography.

## 2. Color

The color system is a strict, high-contrast monochrome palette of pure black and white. This deliberate absence of chromaticity ensures the site's cinematic imagery serves as the primary and only source of visual color.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#101010` | placeholder |
| `--line` | `rgba(255,255,255,0.2)` | divider |

**Color principle:** High-contrast monochrome foundation to let cinematic project photography serve as the primary visual focus.

The core principle is subtractive: the interface recedes to let the work speak.

## 3. Typography

The typographic voice is sharp and authoritative, anchored by Helvetica, a geometric grotesque sans-serif. Its character is defined by massive, tightly-tracked display text set in an extremely lightweight (300) weight for a refined, modern feel that contrasts scale with delicacy.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 300 | -3px | Massive hero titles and primary branding |
| heading | 52px | 1.0 | 300 | -2.08px | Project titles and section headers |
| body | 16px | 1.0 | 300 | normal | Standard body text and UI elements |
| caption | 14px | 1.43 | 300 | 1.4px | Categories, tags, and navigation links |

**Type rules:**
- Use Helvetica, sans-serif as the primary typeface.
- Maintain extremely tight negative letter-spacing on large display text.
- All UI text should be lightweight (300 weight).

## 4. Spacing

The spacing rhythm is one of generous punctuation around hero elements, creating dramatic pauses before transitioning to tighter, consistent gaps in navigation and list structures.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding around large visual elements with tighter, consistent gaps in navigation and lists.

## 5. Surfaces

Surfaces are rendered with absolute flatness, devoid of shadows or elevation. Depth is suggested only through thin, 1px solid borders that act as precise, structural lines for separation and underlines.

- **Radius:** sm 0px · md 10px · lg 10px · pill 999px
- **Borders:** Thin 1px solid white or black lines used primarily for separation and underlines.

## 6. Layout

The foundational layout is a full-bleed, immersive hero experience, immediately followed by a mixed grid of project cards. This structure creates a clear visual hierarchy, moving from an all-encompassing first impression to a curated catalog of work.

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

**Skeleton:** Full-bleed hero imagery followed by a mixed grid of large and small project cards.

## 7. Motion & Interaction

Motion is purpose-driven and subtle, focused on providing immediate feedback through fast, 0.2s opacity fades and transform-based hover states. A rotating logo animation during loading serves as the system's single, branded kinetic moment.

- **Durations:** micro 200ms · small 250ms · medium 400ms
- **Easing:** `ease-out`
- **Patterns:**
  - Smooth opacity fades on interactive elements.
  - Transform-based hover states on navigation and cards.
  - Rotating or spinning animations for logo elements during loading states.

- **Hover:** Subtle opacity reduction or slight color shift to indicate interactivity.
- **Click:** Immediate state change or navigation to project details.
- **Transition:** All transitions use a fast, 0.2s to 0.25s timing for immediate feedback.
- **Keyboard:** Focus states likely defined by standard browser outlines or subtle color shifts.

## 8. Voice & Don'ts

The editorial voice is confident, minimalist, and professional, relying on scale and punchy, short headlines over complex wording. Communication is understated, with calls-to-action blending seamlessly into the quiet, gallery-like interface.

- **Tone:** Confident, minimalist, and professional.
- **Headline style:** Short, punchy, and visually dominant, relying on scale rather than complex wording.
- **CTA style:** Understated text links that blend into the overall minimalist aesthetic.
- **Avoid:** Avoid decorative serif fonts. / Avoid vibrant neon or multi-color gradients. / Avoid cluttered UI with excessive borders or drop shadows. / Avoid playful or rounded bubble-like UI elements. / Avoid dense blocks of body text in hero sections. / Avoid complex animations that distract from the photography.

### Don'ts
- ❌ Don't use decorative serif fonts — screenshot shows a clean, geometric grotesque sans-serif across all UI and display text.
- ❌ Don't add drop shadows to UI elements — screenshot shows completely flat surfaces with no elevation effects.
- ❌ Don't use vibrant, high-chroma accent colors — screenshot shows a strict monochrome palette (black, white, muted gray).
- ❌ Don't use centered text alignment for navigation — screenshot shows right-aligned navigation links at the bottom of the hero.
- ❌ Don't use heavy font weights for body text — screenshot shows predominantly lightweight (300) text for a refined feel.
- ❌ Don't use rounded corners on primary cards — screenshot shows sharp edges on project imagery, with only small 10px radius on minor elements.

This system deliberately avoids decorative serifs, vibrant accent colors, drop shadows, and playful UI elements, committing fully to a stark, photographic brutalism.

## System Prompt (paste into AI tool)

```
Design a premium creative agency portfolio with a high-contrast, cinematic aesthetic. Use a strict monochrome palette with a #000000 background and #FFFFFF text. Use a geometric grotesque-sans font (like Helvetica) at a lightweight (300) weight for a refined, modern feel. Ensure massive display typography has tight negative letter-spacing (e.g., -3px). Critical don'ts: never use decorative serifs, avoid drop shadows, and do not use vibrant accent colors. The UI should feel like a quiet, professional gallery that lets large-scale photography and video be the primary focus.
```
