---
version: alpha
name: Middlename
description: Editorial studio minimalism — General Grotesque on a warm cream canvas, deep ink-navy as the single dominant color, uppercase pill buttons, generously rounded media tiles, and a restrained warm-accent palette (ochre, salmon, oxblood) used sparingly against the calm cream-and-navy base.

colors:
  # Canvas + ink
  background: "#faf8f4"      # warm cream page canvas
  surface: "#f1f1f1"         # neutral image/panel placeholder + panel surface
  surface-beige: "#edece9"   # secondary button / soft beige chip
  ink: "#10286f"             # deep navy — primary text, primary brand color
  ink-on-dark: "#faf8f4"     # cream text on navy panels
  on-ink: "#ffffff"          # white text on navy buttons/panels

  # Warm accents (used sparingly)
  accent-ochre: "#d38136"    # warm ochre/orange accent
  accent-salmon: "#e09686"   # soft salmon accent
  accent-oxblood: "#740700"  # deep red / oxblood accent

  # Neutrals
  white: "#ffffff"
  placeholder: "#f1f1f1"

typography:
  hero-marquee:
    fontFamily: "General, Hanken Grotesk, Arial, sans-serif"
    fontSize: 78px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: -1px
  display:
    fontFamily: "General, Hanken Grotesk, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.5px
  heading:
    fontFamily: "General, Hanken Grotesk, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.3px
  title:
    fontFamily: "General, Hanken Grotesk, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0px
  body-large:
    fontFamily: "General, Hanken Grotesk, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body:
    fontFamily: "General, Hanken Grotesk, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  body-small:
    fontFamily: "General, Hanken Grotesk, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label-uppercase:
    fontFamily: "General, Hanken Grotesk, Arial, sans-serif"
    fontSize: 13.5px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0.3px
  button-pill:
    fontFamily: "General, Hanken Grotesk, Arial, sans-serif"
    fontSize: 13.5px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0.4px
  caption:
    fontFamily: "General, Hanken Grotesk, Arial, sans-serif"
    fontSize: 10.5px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0.3px

spacing:
  xs: 6px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 80px

rounded:
  none: 0px
  sm: 6px
  md: 8px
  lg: 12px
  pill: 24px
  full: 9999px

components:
  # Primary navy pill CTA
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-pill}"
    rounded: "{rounded.pill}"
    padding: 0px 11px
    height: 32px

  # Secondary beige pill (inverts to navy on hover)
  button-secondary:
    backgroundColor: "{colors.surface-beige}"
    textColor: "{colors.ink}"
    typography: "{typography.button-pill}"
    rounded: "{rounded.pill}"
    padding: 0px 11px
    height: 32px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-pill}"
    rounded: "{rounded.pill}"
    padding: 0px 11px
    height: 32px

  # Submit pill on navy panels (white fill, navy text)
  button-submit:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.button-pill}"
    rounded: "{rounded.pill}"
    padding: 0px 11px
    height: 32px

  # Rounded media tile (images/video)
  media-tile:
    backgroundColor: "{colors.placeholder}"
    rounded: "{rounded.lg}"
    width: 100%

  # Floating content panel
  panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-large}"
    rounded: "{rounded.lg}"
    padding: 32px

  # About panel — navy inverted
  panel-about:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.body-large}"
    rounded: "{rounded.lg}"
    padding: 32px

  # Newsletter card — navy
  newsletter-card:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 16px

  # Underline input on navy panel
  input-underline:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label-uppercase}"
    borderColor: "{colors.on-ink}"
    padding: 0px

  # Uppercase eyebrow/label
  label:
    textColor: "{colors.ink}"
    typography: "{typography.label-uppercase}"
---

# Middlename Design System

## Overview

Middle Name is a brand studio, and its own site is the cleanest possible demonstration of its thesis: brands with "intelligence, character, and clarity." The visual system is editorial-grade minimalism built on exactly two structural colors — a warm cream canvas (`{colors.background}`) and a deep, confident ink-navy (`{colors.ink}`). There is almost no chrome. Type does the work, navy carries the brand, and a small set of warm accents (ochre, salmon, oxblood) appear like pigment notes in a moodboard rather than as a functional UI palette.

The typeface is General Grotesque, a contemporary neo-grotesque with a tight, slightly editorial character. It runs in only two weights — 400 for reading and 600 for everything that asserts itself (labels, buttons, the marquee). The brand leans heavily on `text-transform: uppercase` for its functional voice: button labels, eyebrows, and form inputs are all set uppercase at small sizes with a touch of positive tracking, giving the interface a quiet, gallery-signage formality. The hero is a horizontally scrolling marquee — large SVG wordmarks animating across the viewport — paired with small rounded media tiles, so the whole top of the page reads as a moving editorial strip rather than a conventional headline block.

Geometry is soft and consistent. Everything that holds media or content is rounded: media tiles and panels at 12px, smaller images at 6–8px, and every button is a full 24px pill at a fixed 28–32px height. Interaction is restrained — the signature move is the secondary beige pill (`{colors.surface-beige}`) inverting to solid navy on hover, a single decisive color flip with a 0.25s ease. Content lives in floating fixed panels (about, work, newsletter) that slide in over the cream canvas, the navy "about" panel inverting the whole palette to cream-on-navy.

**Key Characteristics:**
- Two-color foundation: warm cream canvas (`{colors.background}`) + deep ink-navy (`{colors.ink}`) as the dominant brand color
- General Grotesque in just two weights — 400 (read) and 600 (assert)
- Pervasive uppercase for labels, buttons, eyebrows, and form inputs with light positive tracking
- Full-pill buttons (24px radius) at fixed 28–32px heights; beige secondary inverts to navy on hover
- Consistently rounded media (12px tiles, 6–8px small images) on a neutral `{colors.placeholder}` placeholder
- Warm accent trio (ochre, salmon, oxblood) used as sparing pigment, never as UI chrome
- Floating fixed panels that slide over the canvas; the about panel inverts to cream-on-navy
- Animated marquee hero instead of a static headline

## Colors

### Primary
- **Cream Canvas** (`{colors.background}`): The warm off-white page background. Calm, paper-like, never pure white.
- **Ink Navy** (`{colors.ink}`): The studio's signature deep navy — primary text, primary brand color, primary button fill, and the inverted-panel background.
- **White** (`{colors.white}`): Reserved for text and submit pills sitting on navy surfaces.

### Surfaces
- **Panel Surface** (`{colors.surface}`): Neutral light gray for floating content panels and as the default image placeholder.
- **Beige Chip** (`{colors.surface-beige}`): Soft warm beige for secondary pill buttons (inverts to navy on hover).
- **Placeholder** (`{colors.placeholder}`): Neutral gray behind lazy-loading media tiles.

### Warm Accents (sparing)
- **Ochre** (`{colors.accent-ochre}`): Warm orange accent — moodboard pigment, highlights.
- **Salmon** (`{colors.accent-salmon}`): Soft salmon accent.
- **Oxblood** (`{colors.accent-oxblood}`): Deep red accent for the most assertive warm note.

### Inverted
- **Cream on Navy** (`{colors.ink-on-dark}`): Cream text used on navy "about" panels.
- **On Ink** (`{colors.on-ink}`): White text/labels on navy buttons and panels.

## Typography

### Font Family
- **Primary**: `General` (General Grotesque), with fallbacks `Hanken Grotesk, Arial, sans-serif`.
- **Weights**: Only 400 (regular) and 600 (demi). No light, no black.
- **Case**: Functional text — buttons, eyebrows, inputs, newsletter titles — is set `uppercase` with light positive tracking.

### Hierarchy

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

| Token | Use |
|---|---|
| `hero-marquee` | Large scrolling wordmark strip in the hero |
| `display` | Largest standalone headings (panel titles, newsletter title) |
| `heading` | Section headings inside panels |
| `title` | Sub-headings, emphasized lines |
| `body-large` | Panel reading copy (18px) |
| `body` | Standard UI text |
| `body-small` | Captions, fine print |
| `label-uppercase` | Eyebrows, navigation labels, input text |
| `button-pill` | Pill button labels |
| `caption` | Smallest uppercase metadata |

### Principles
- **Two weights, strict roles**: 400 reads, 600 asserts. No other weight exists in the system.
- **Uppercase as voice**: The studio's functional/UI register is uppercase General 600 at 12–13.5px with ~0.3–0.4px tracking — calm, signage-like, formal.
- **Tight display tracking**: Larger headings pull in slightly (-0.3 to -1px) for an editorial, set-by-hand feel; body stays at neutral tracking.
- **Type carries the page**: With almost no decorative chrome, hierarchy comes from size, case, and the single navy ink — not from color variety.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is built on small increments (6/8/12/16px) that roughly double up to section scale (40/80px). Panels use a 32px interior pad on desktop, 16px on mobile.

### Grid & Container
- Full-viewport hero (`100dvh`) split top/bottom with `space-between` — wordmark strip up top, marquee + media tiles at the bottom edge.
- Outer page padding: 16px mobile → 40px desktop.
- Floating content panels are fixed-position, ~50vw wide on desktop, sliding in from the right over the cream canvas.
- Media tiles sized by viewport fractions (e.g. `22vw - 32px`) so the editorial strip scales fluidly.

### Whitespace Philosophy
- **Calm canvas**: The cream background is given room to breathe; content clusters at edges and in panels rather than filling the page.
- **Edge-anchored**: Hero content sits flush to top and bottom edges (`space-between`), leaving the center open.
- **Panels over pages**: Rather than scrolling sections, content arrives as rounded panels that overlay the canvas.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, cream canvas | Page background, type |
| Rounded media (Level 1) | 12px radius on `{colors.placeholder}` | Image/video tiles |
| Floating panel (Level 2) | Fixed-position, 12px radius, fills over canvas | About / work / content panels |
| Inverted panel (Level 2b) | Navy fill, cream text, 12px radius | About panel, newsletter card |

**Depth Philosophy**: Middle Name avoids shadows almost entirely. Depth comes from layering — fixed rounded panels sliding over the static cream canvas — and from the navy/cream inversion, not from elevation shadow. The interface feels like sheets of warm paper and navy card stock laid over each other.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 6px | Small/mobile media tiles |
| `md` | 8px | Mid media tiles, image placeholders |
| `lg` | 12px | Panels, large media tiles, newsletter card |
| `pill` | 24px | All buttons |
| `full` | 9999px | Reserved for fully circular elements |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.panel}`).

### Buttons
- **`button-primary`** — Solid navy fill, white uppercase label, full 24px pill, fixed ~32px height. The default CTA.
- **`button-secondary`** — Beige (`{colors.surface-beige}`) fill, navy label; inverts to a solid navy fill with white label on hover (0.25s ease). The signature interaction.
- **`button-submit`** — White fill, navy label; used on navy panels/newsletter where the beige variant wouldn't read.

### Panels
- **`panel`** — Light neutral floating panel, navy text, 12px radius, slides in over the cream canvas.
- **`panel-about`** — Inverted navy panel with cream text — the palette flips wholesale.
- **`newsletter-card`** — Compact navy card with white text and an underline input.

### Media
- **`media-tile`** — Rounded (12px desktop / 6px mobile) image or video tile on a neutral placeholder; the building block of the editorial strip.

### Inputs
- **`input-underline`** — Borderless input on navy with a single 1px white bottom border, uppercase General 600 text, white placeholder. No box, no fill.

## Do's and Don'ts

### Do
- Build on the two-color foundation: cream canvas (`{colors.background}`) + ink-navy (`{colors.ink}`)
- Set buttons, labels, eyebrows, and inputs in uppercase General 600 with light positive tracking
- Use full 24px pills at fixed 28–32px heights for every button
- Round all media: 12px tiles, 6–8px small images, on a neutral placeholder
- Use the beige→navy hover inversion as the primary interactive signal
- Keep the warm accents (ochre, salmon, oxblood) sparing — as pigment, not chrome
- Invert wholesale to cream-on-navy for "about" surfaces

### Don't
- Don't introduce a third structural color — navy and cream carry the system
- Don't use pure white as a page background — the canvas is warm cream
- Don't add a weight beyond 400 and 600
- Don't use the warm accents as button fills or large UI surfaces
- Don't add drop shadows for depth — use layered rounded panels and inversion instead
- Don't set squared (0px) corners on media or buttons — the system is uniformly rounded
- Don't lowercase the functional/label register — uppercase is the brand voice

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <740px | 16px page padding, 6px media radius, smaller pills (28px), single tiles |
| Tablet | 740–1080px | 40px page padding, 12px media radius, panels ~50vw region |
| Desktop | >1080px | Full layout, 13.5px labels, 32px pills, fluid `vw`-sized media tiles |

### Touch Targets
- Pill buttons fixed at 28px (mobile) → 32px (desktop) height
- Generous 16–40px page padding keeps interactive elements off edges
- Close buttons on panels use a fixed top-right hit area

### Collapsing Strategy
- Hero: marquee strip and media tiles scale by viewport fraction; padding tightens to 16px
- Panels: ~50vw on desktop expand toward full width (minus margin) on smaller screens
- Type steps down: panel copy 18px → 12px, titles 28px → 20px on mobile
- Newsletter: fixed centered card on mobile, top-left anchored on desktop

### Image Behavior
- Media tiles keep their rounded corners (6px mobile → 12px desktop) at all sizes
- Lazy-loaded images fade in over the `{colors.placeholder}` background (opacity 0 → 1, 0.25s)
- Video and image tiles share identical `object-fit: cover` rounded treatment

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: Cream `{colors.background}`
- Primary text / brand: Ink Navy `{colors.ink}`
- Primary CTA: Navy fill `{colors.ink}`, white uppercase label
- Secondary CTA: Beige `{colors.surface-beige}` → inverts to navy on hover
- Media placeholder: `{colors.placeholder}`
- Warm accents (sparing): `{colors.accent-ochre}`, `{colors.accent-salmon}`, `{colors.accent-oxblood}`

### Example Component Prompts
- "Create a hero on a warm cream background (`{colors.background}`). Place a horizontally scrolling marquee of the wordmark in General 600, navy `{colors.ink}`, anchored to top and bottom edges with `space-between`. Add small rounded media tiles (12px radius) along the bottom."
- "Build a primary pill button: navy `{colors.ink}` fill, white uppercase label in General 600 at 13.5px with 0.4px tracking, 24px radius, 32px height, padding 0 11px."
- "Build a secondary pill: beige `{colors.surface-beige}` fill, navy label; on hover invert to navy fill with white label, 0.25s ease."
- "Design an about panel: fixed floating card, navy `{colors.ink}` background, cream `{colors.ink-on-dark}` text, 12px radius, 32px padding, body copy in General 400 at 18px line-height 1.56."
- "Add a newsletter card: navy background, white text, 12px radius, an uppercase title in General 600 at 20–28px, and a borderless underline input (1px white bottom border, white uppercase placeholder)."

### Iteration Guide
1. Start from cream + navy only; add a warm accent solely as a small pigment note
2. Uppercase + General 600 is the functional register; 400 is for reading copy
3. Every button is a full 24px pill at a fixed height — never square, never variable
4. Round all media; let depth come from layered panels and inversion, not shadow
5. The beige→navy hover flip is the signature interaction — use it for secondary actions

---

## 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 Middlename. Brand names and trademarks belong to their respective owners.