---
name: Snogproductions
description: "Worth including as a prime example of a 'gallery' studio portfolio that uses extreme typographic scale and raw imagery to convey creative confidence."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#EE242F"
  line: "rgba(238, 36, 47, 1)"

typography:
  display:
    fontFamily: condensed-grotesque
    fontSize: 172.8px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "0"
  body:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 700
    letterSpacing: "0"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 200px

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

---

## Overview

A bold, image-forward portfolio for a creative production studio, defined by a massive red logotype and a chaotic gallery of project visuals.

*A high-end creative production studio's portfolio*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#EE242F`)** — uses `accent` token
- **Borders (`rgba(238, 36, 47, 1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Irregular gallery layout relies on large, absolute whitespace rather than a strict grid.

## Elevation & Depth

- Borders: No structural borders, only image contents and a single 1px border-width rule noted in the facts.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 200px

## Components

- **button:** Plain uppercase text links with cursor pointer
- **card:** Edge-to-edge project imagery without padding or borders
- **hero:** Massive red typography overlapping a vertically stacked gallery of project posters.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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