# Snogproductions · Design system migration spec

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

> Worth including as a prime example of a 'gallery' studio portfolio that uses extreme typographic scale and raw imagery to convey creative confidence.

## 1. Identity DNA

The Snogproductions system is built like a production studio's project wall: a stark, white gallery space where the work itself, and one confident logotype, are the only elements that matter. Its DNA is defined by a single high-chroma red accent and a chaotic, image-forward layout that prioritizes the portfolio over the platform.

**One-liner:** A bold, image-forward portfolio for a creative production studio, defined by a massive red logotype and a chaotic gallery of project visuals.
**Keywords:** Creative Studio · Production · Bold · Gallery
**Analogy:** A high-end creative production studio's portfolio

## 2. Color

The palette is reductive and confrontational. A stark white canvas (#FFFFFF) provides the ground for a single, high-chroma red accent (#EE242F) and dense, colorful imagery, with black (#000000) reserved for essential text.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--accent` | `#EE242F` | single accent |
| `--line` | `rgba(238, 36, 47, 1)` | divider |

**Color principle:** Stark white background acts as a neutral canvas for a single high-chroma red accent and dense, colorful imagery.

The principle is one of subtraction: the background is a neutral field, making the singular red and the project imagery the only visual authorities.

## 3. Typography

Type is used for impact, not description. The voice is dominated by a massive, ultra-bold condensed display face for the logotype, contrasted with a secondary grotesque sans-serif for navigation, where hierarchy is minimal and function is paramount.

- **Display:** condensed-grotesque
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 172.8px | 1.0 | 700 | 0 | Primary branding logotype |
| body | 14px | 1.4 | 700 | 0 | Navigation and links |

**Type rules:**
- Navigation text is consistently uppercase and bold
- Display logotype dominates the top of the layout
- Minimal type hierarchy, mostly just logotype and links

## 4. Spacing

Rhythm is irregular and gallery-driven, relying on large, absolute areas of whitespace to frame floating project imagery rather than a strict, measured grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Irregular gallery layout relies on large, absolute whitespace rather than a strict grid.

## 5. Surfaces

The surface system is deliberately flat and borderless. Depth is created only by the layering of floating images over the white ground, with no shadows or structural borders to contain them.

- **Radius:** sm 0px · md 0px · lg 0px · pill 200px
- **Borders:** No structural borders, only image contents and a single 1px border-width rule noted in the facts.

## 6. Layout

The layout skeleton is an asymmetrical scatter of project visuals, with images of varying sizes that overlap and float freely. It rejects a centered, symmetrical grid in favor of a dynamic, composed chaos.

- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetrical scattered gallery, images of varying sizes overlap and float over a white background.

## 7. Motion & Interaction

Motion is purely functional and near-instantaneous, with 0.05s transitions on interactive states. The philosophy rejects expressive animation, treating movement as a utilitarian signal of interactivity rather than a decorative layer.

- **Durations:** micro 50ms · small 50ms · medium 50ms
- **Easing:** `linear`
- **Patterns:**
  - Minimal, near-instant transitions of 0.05s on elements

- **Hover:** Cursor changes to pointer on interactive elements
- **Click:** Standard link navigation
- **Transition:** Extremely fast 0.05s transitions on opacity, height, and width
- **Keyboard:** Standard tab navigation

## 8. Voice & Don'ts

The editorial voice is confident, bold, and direct, matching the typographic scale. It avoids hedging or soft language, with headlines as massive logotypes and calls-to-action as simple, uppercase text links.

- **Tone:** Confident, bold, direct
- **Headline style:** Massive, condensed, uppercase logotype
- **CTA style:** Simple, uppercase text links
- **Avoid:** Subtle animations / Muted palettes / Centered symmetrical layouts

### Don'ts
- ❌ don't use a muted or pastel palette — screenshot shows a stark white background with a single bold red accent
- ❌ don't center-align all content symmetrically — screenshot shows an asymmetrical, scattered gallery layout
- ❌ don't use thin, delicate typography — screenshot shows a massive, ultra-bold condensed logotype
- ❌ don't add padding or borders to image cards — screenshot shows imagery edge-to-edge or floating freely
- ❌ don't implement slow, sweeping animations — screenshot facts show rapid 0.05s transitions
- ❌ don't rely on complex UI components — screenshot shows only text links and floating project imagery

The system deliberately excludes muted palettes, subtle animations, and symmetrical layouts, as these would dilute its core assertion of creative confidence.

## System Prompt (paste into AI tool)

```
This site is a creative production studio portfolio defined by extreme visual confidence. It uses a stark white background (#FFFFFF) as a canvas for a massive, ultra-bold red condensed logotype (#EE242F) and a scattered gallery of high-impact project imagery. The typography is dominated by the display font (Druk) at 172.8px, with navigation in a secondary grotesque sans (GT Zirkon) at 14px uppercase. Key colors are strictly red (#EE242F) and black (#000000) on white. Critical donts: 1) Don't use subtle UI components like shadows or borders on images, as the layout relies on raw, floating photography. 2) Don't symmetricaly align content, as the scattered gallery is intentionally asymmetrical. 3) Don't use long, smooth animations, as the interaction model relies on near-instant 0.05s transitions.
```