---
version: alpha
name: Red Collar
description: Award-winning agency bravado — oversized editorial display type on a near-white canvas, charcoal-black ink, and a single signature red used as a confident punctuation mark. Sharp corners, tactile drag interactions, and gallery whitespace.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f4f3f1"
  surface-dark: "#0d0c0c"
  ink: "#0d0c0c"
  ink-secondary: "#5c5a58"
  ink-muted: "#908d8a"

  # Signature accent
  primary: "#e8330a"        # Red Collar red
  primary-hover: "#c72b08"
  accent-soft: "#fdece8"    # red tint flattened over white

  # Interactive
  link: "#0d0c0c"
  focus: "#e8330a"
  border: "#e6e4e1"
  border-strong: "#0d0c0c"

  # Neutral scale
  gray-900: "#0d0c0c"
  gray-600: "#5c5a58"
  gray-400: "#908d8a"
  gray-200: "#d9d6d2"
  gray-100: "#e6e4e1"
  gray-50: "#f4f3f1"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"
  on-dark: "#ffffff"

typography:
  display-hero:
    fontFamily: "Archivo, Arial Narrow, sans-serif"
    fontSize: 96px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -3px
  display-large:
    fontFamily: "Archivo, Arial Narrow, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 0.98
    letterSpacing: -2.4px
  section-heading:
    fontFamily: "Archivo, Arial Narrow, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.6px
  sub-heading:
    fontFamily: "Archivo, Arial Narrow, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Archivo, Arial Narrow, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.4px
  label-mono:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.2px
  caption:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 32px
    borderColor: "{colors.border-strong}"
  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.border}"
  card-work:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.none}"
    padding: 32px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 0px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 24px 40px
  tag:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
---

# Red Collar Design System

## Overview

Red Collar's site is an exercise in agency confidence — the digital portfolio of a studio that has collected enough Awwwards and FWA trophies to let the work speak at full volume. The canvas is near-pure white (`{colors.background}`) with a warm charcoal-black ink (`{colors.ink}`) that stops just short of true black, giving the type a softer, editorial weight. There is almost no decorative chrome: the design trusts oversized typography, generous negative space, and motion to carry the experience.

Typography is the loudest voice in the system. Headlines run enormous — 72px to 96px and beyond — set in a tightly-tracked grotesque with aggressive negative letter-spacing and sub-1.0 line-heights, so display text stacks into dense, magazine-cover blocks. This compression is the signature move: words become graphic objects, not just labels. Body copy relaxes into a comfortable 16–20px reading rhythm in the same family, keeping the system coherent from billboard to paragraph.

Color is deployed with extreme discipline. The palette is essentially monochrome — white, charcoal, and a ladder of warm grays — punctuated by a single saturated Red Collar red (`{colors.primary}`). That red is the brand's exclamation point: it appears on hover states, key calls to action, and small accent marks, never as a wash. Used sparingly against the achromatic field, it reads as intentional and high-energy rather than loud.

**Key Characteristics:**
- Oversized editorial display type (72–96px) with tight negative tracking and sub-1.0 line-height
- Warm charcoal-black ink (`{colors.ink}`) on a near-pure white canvas — softer than true black
- A single signature red (`{colors.primary}`) used as punctuation, never as a fill wash
- Sharp corners almost everywhere (`{rounded.none}`); pills reserved for buttons and tags
- Tactile, drag-enabled interactions and horizontal-scroll work galleries
- Gallery-grade whitespace — sections breathe with `{spacing.3xl}`–`{spacing.4xl}` rhythm
- Hairline `{colors.border}` dividers and full-bleed work tiles over heavy card chrome

## Colors

### Primary
- **Ink Charcoal** (`{colors.ink}`): Primary text, headings, dark buttons. Warm near-black, not pure black.
- **Pure White** (`{colors.background}`): Page background, card surfaces, text on dark.
- **Red Collar Red** (`{colors.primary}`): The signature accent — hover states, key CTAs, accent marks.

### Accent
- **Red Hover** (`{colors.primary-hover}`): Pressed/darker accent state.
- **Accent Soft** (`{colors.accent-soft}`): Red tint background for badges and highlights.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary ink, equal to charcoal.
- **Gray 600** (`{colors.gray-600}`): Secondary text, descriptions.
- **Gray 400** (`{colors.gray-400}`): Muted captions, placeholders.
- **Gray 200** (`{colors.gray-200}`): Subtle dividers.
- **Gray 100** (`{colors.gray-100}`): Hairline borders, card outlines.
- **Gray 50** (`{colors.gray-50}`): Soft surface tint for work tiles and sections.

### Interactive
- **Link** (`{colors.link}`): Inline links, default charcoal with underline-on-hover.
- **Focus** (`{colors.focus}`): Red focus ring on interactive elements.
- **Border Strong** (`{colors.border-strong}`): Charcoal outline for ghost buttons and inputs.

### Surfaces
- **Surface Soft** (`{colors.surface-soft}`): Light warm-gray section and work-tile background.
- **Surface Dark** (`{colors.surface-dark}`): Charcoal full-bleed sections and dark cards.

## Typography

### Font Family
- **Primary**: `Archivo`, with fallbacks: `Arial Narrow, Arial, sans-serif` — a tightly-set grotesque chosen for its condensed display presence.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 96px hero — maximum editorial impact |
| `display-large` | 72px large display headings |
| `section-heading` | 48px feature section titles |
| `sub-heading` | 32px sub-sections |
| `card-title` | 24px work/feature card titles |
| `body-large` | Introductions, lead paragraphs |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text |
| `button-ui` | Buttons and links |
| `label-mono` | Uppercase tracked labels, tags |
| `caption` | Metadata, fine print |

### Principles
- **Compression as identity**: Display type uses negative tracking (-1.6px to -3px) and sub-1.0 line-height so headlines stack into dense graphic blocks.
- **One family, full range**: Archivo spans billboard to paragraph — coherence through a single grotesque.
- **Uppercase tracked labels**: Small metadata uses positive letter-spacing (1.2px) for an editorial caption feel.
- **Weight discipline**: 700 for display, 600 for sub-heads and UI, 400 for reading.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps (`{spacing.3xl}` 96px, `{spacing.4xl}` 160px) for gallery-grade section rhythm.

### Grid & Container
- Wide content container with generous side margins
- Hero: large single-column display type, left-aligned
- Work: full-bleed tiles in 2-column grids and horizontal-scroll rows
- Hairline `{colors.border}` dividers separate sections

### Whitespace Philosophy
- **Gallery emptiness**: Sections separated by `{spacing.3xl}`–`{spacing.4xl}` vertical space.
- **Type does the work**: Oversized headlines counterbalanced by surrounding emptiness.
- **Edge-to-edge media**: Work imagery runs full-bleed against the whitespace.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Cards, work tiles, inputs — sharp corners dominate |
| `xs` | 2px | Tiny accents |
| `sm` | 4px | Small containers |
| `md` | 8px | Occasional soft containers |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Charcoal pill, white text; on hover flips to Red Collar red.
- **`button-accent`** — Solid red pill for the loudest CTAs.
- **`button-ghost`** — White with charcoal outline, pill radius.

### Pills & Tags
- **`badge`** — Soft red tint background, red uppercase label.
- **`tag`** — Warm-gray surface, charcoal tracked label.

### Cards
- **`card`** — White, sharp corners, hairline border.
- **`card-work`** — Full-bleed work tile on soft warm-gray, zero radius, zero padding.
- **`card-dark`** — Charcoal surface, white text for high-contrast sections.

### Inputs
- **`input`** — Underline-only field (charcoal bottom border), sharp corners; focus flips border to red.

### Navigation
- **`nav-bar`** — White, minimal, uppercase tracked links with charcoal text.

## Do's and Don'ts

### Do
- Use oversized Archivo display type with tight negative tracking
- Keep `{colors.primary}` red as sparing punctuation — hover, CTA, accent marks
- Default to sharp corners (`{rounded.none}`); reserve pills for buttons and tags
- Lean on whitespace and full-bleed media instead of card chrome
- Use the warm charcoal `{colors.ink}`, not pure black

### Don't
- Don't wash large areas in red — it must stay an accent
- Don't soften display type with positive tracking or loose line-height
- Don't add heavy borders or shadows — hairline dividers only
- Don't introduce a second accent color into the monochrome field
- Don't round work tiles — full-bleed sharp edges are the signature

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display type scales to ~48px |
| Tablet | 600–1024px | 2-column work grids begin |
| Desktop | 1024–1440px | Full layout, large display type |
| Large Desktop | >1440px | Generous margins, max display impact |

### Collapsing Strategy
- Hero: 96px → ~48px, negative tracking eases proportionally
- Work: full grid → 2-column → single stacked tiles
- Horizontal-scroll rows: maintain drag, snap to single items on mobile
- Section spacing: 160px → ~64px on mobile

### Touch Targets
- Buttons use comfortable 16px×32px padding
- Drag interactions enlarge hit areas on touch
- Tracked labels keep adequate tap spacing

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Charcoal `{colors.ink}` (red on hover)
- Loud CTA: Red `{colors.primary}`
- Background: White `{colors.background}`
- Heading text: Charcoal `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Focus ring: Red `{colors.focus}`

### Example Component Prompts
- "Create a hero on white. Headline at 96px Archivo weight 700, line-height 0.95, letter-spacing -3px, color `{colors.ink}`, left-aligned. Subtitle at 20px weight 400, `{colors.gray-600}`. Charcoal pill CTA (`{colors.ink}`, 9999px radius, 16px 32px padding) that turns `{colors.primary}` red on hover."
- "Design a work tile: full-bleed image on `{colors.surface-soft}`, zero radius, zero padding. Caption below at 24px Archivo weight 600 with a small `{colors.primary}` accent mark."
- "Build a tag: `{colors.surface-soft}` background, `{colors.ink-secondary}` text, 12px Archivo weight 600 uppercase, letter-spacing 1.2px, 9999px radius, 6px 14px padding."
- "Create an underline input: no box, charcoal bottom border only, sharp corners, body text; focus turns the border `{colors.primary}` red."

### Iteration Guide
1. Display type leads — go big, tight, and left-aligned
2. Red is punctuation, never a wash
3. Sharp corners everywhere except buttons and tags
4. Whitespace and full-bleed media replace card chrome
5. Use warm charcoal `{colors.ink}` for the softer editorial black

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Red Collar. Brand names and trademarks belong to their respective owners.