---
version: alpha
name: Frame & Field
description: An editorial monograph system for a creative production studio — oversized condensed display type, warm paper canvas, plate-sized media, and zero decorative chrome.
colors:
  paper: "#f3f1ec"
  surface: "#ffffff"
  ink: "#111111"
  charcoal: "#2a2a2a"
  muted: "#6b6b6b"
  hairline: "#e2dfd9"
  signal: "#d7ff3a"
  primary: "#111111"
  secondary: "#2a2a2a"
  tertiary: "#6b6b6b"
  neutral: "#f3f1ec"
  on-surface: "#111111"
  on-ink: "#f3f1ec"
  border: "#e2dfd9"
  focus: "#111111"
  error: "#b3261e"
typography:
  display-xxl:
    fontFamily: "Anton, Impact, sans-serif"
    fontSize: "160px"
    lineHeight: "0.92"
    letterSpacing: "-0.01em"
    textTransform: "uppercase"
    fontWeight: 400
  display-xl:
    fontFamily: "Anton, Impact, sans-serif"
    fontSize: "112px"
    lineHeight: "0.94"
    letterSpacing: "-0.005em"
    textTransform: "uppercase"
    fontWeight: 400
  headline-lg:
    fontFamily: "Anton, Impact, sans-serif"
    fontSize: "88px"
    lineHeight: "0.98"
    letterSpacing: "0em"
    textTransform: "uppercase"
    fontWeight: 400
  headline-md:
    fontFamily: "Anton, Impact, sans-serif"
    fontSize: "56px"
    lineHeight: "1.02"
    letterSpacing: "0em"
    textTransform: "uppercase"
    fontWeight: 400
  headline-sm:
    fontFamily: "Anton, Impact, sans-serif"
    fontSize: "32px"
    lineHeight: "1.08"
    letterSpacing: "0em"
    textTransform: "uppercase"
    fontWeight: 400
  body-lg:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "17px"
    lineHeight: "1.55"
    fontWeight: 400
  body-md:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "15px"
    lineHeight: "1.55"
    fontWeight: 400
  body-sm:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "13px"
    lineHeight: "1.5"
    fontWeight: 400
  label-sm:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "12px"
    lineHeight: "1.2"
    fontWeight: 500
    letterSpacing: "0.02em"
  mono-stat:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: "88px"
    lineHeight: "1"
    fontWeight: 500
    letterSpacing: "-0.02em"
  mono-meta:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: "12px"
    lineHeight: "1.4"
    fontWeight: 400
rounded:
  none: "0px"
  sm: "6px"
  md: "12px"
  lg: "18px"
  xl: "24px"
  full: "999px"
spacing:
  xxs: "4px"
  xs: "8px"
  sm: "12px"
  md: "20px"
  lg: "32px"
  xl: "56px"
  xxl: "96px"
  section: "128px"
  gutter: "32px"
  container-max: "1200px"
  container-tight: "960px"
elevation:
  flat: "none"
  plate: "0 24px 60px -32px rgba(17, 17, 17, 0.35)"
  focus-ring: "0 0 0 2px #f3f1ec, 0 0 0 4px #111111"
components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.paper}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "12px 22px"
    height: "44px"
  button-primary-hover:
    backgroundColor: "{colors.charcoal}"
    textColor: "{colors.paper}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "11px 21px"
    height: "44px"
    border: "1px solid {colors.hairline}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "10px 14px"
  pill-accent:
    backgroundColor: "{colors.signal}"
    textColor: "{colors.ink}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "10px 16px"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: "12px 18px"
    height: "46px"
    border: "1px solid {colors.hairline}"
  input-field-focus:
    border: "1px solid {colors.ink}"
    backgroundColor: "{colors.surface}"
  card-frame:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "0px"
    border: "1px solid {colors.hairline}"
  card-stat:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: "0px"
  plate-hero:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.paper}"
    rounded: "{rounded.xl}"
    padding: "48px 48px 56px"
  checkbox-checked:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.paper}"
    rounded: "{rounded.sm}"
    size: "18px"
  tabs-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.paper}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "8px 14px"
  service-row:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: "32px 0"
    border: "1px solid {colors.hairline}"
---

## Overview

Frame & Field is the design system of a printed monograph that happens to scroll. It is built for a creative video production studio that wants its work to lead, not its interface. Every choice in the system trades chrome for breathing room: oversized condensed headlines that anchor each section, a warm paper canvas, single-section vertical rhythm, and a strict ban on the small decorative furniture (eyebrows, category chips, label badges, dotted dividers) that usually clutters editorial pages.

The product feel should be quiet, confident, and curatorial — closer to a magazine spread than a SaaS marketing page. The system is "minimal" not because elements are removed cosmetically but because the page assumes the reader is patient: a single Anton-set headline ending with a period carries the section, body type stays small and neutral, and the only thing allowed to shout is a full-width dark image plate.

Preserve these traits:

- Heavy condensed uppercase display, always ending with a period (`OUR PROJECTS.`, `EXPERIENCES.`, `SERVICES.`).
- One dark plate inside the paper canvas as the hero — never a full dark page.
- Plain stat numerals, not badge containers.
- Strict left alignment for headings and body; centered text is reserved for the dark hero plate's secondary copy when needed.
- Single accent color (Signal yellow) used at most once per page, on a play badge or an emphasis pill.

Avoid these tendencies:

- Adding eyebrow lines, category labels, all-caps kickers, or "scrollytelling" UI tags above headings.
- Pastel gradients, glassmorphism, drop shadows on text, ambient glows, or multi-hue accents.
- Filling whitespace with decorative dividers or section icons.
- Rounded-card-everywhere SaaS layouts — most blocks should sit directly on the paper canvas.

## Colors

The palette is a four-step grey scale on warm paper, with one reserved acid accent.

| Token       | Hex       | Role                                                                  |
| ----------- | --------- | --------------------------------------------------------------------- |
| `paper`     | `#f3f1ec` | Primary canvas. Warmer than `#ffffff` to prevent a clinical feel.     |
| `surface`   | `#ffffff` | Inset tiles, image card frames, quiet contrast against paper.         |
| `ink`       | `#111111` | Primary type, dark plate background, primary button surface.          |
| `charcoal`  | `#2a2a2a` | Secondary type, dense panel surface, primary button hover.            |
| `muted`     | `#6b6b6b` | Supporting paragraphs, captions, meta lines, inactive nav.            |
| `hairline`  | `#e2dfd9` | 1px frames, section seams, input borders.                             |
| `signal`    | `#d7ff3a` | Single-use accent — play badge, one emphasis pill per page. Never a section background. |

Contrast rules:

- Body copy on paper must always use `ink` or `muted` — never the reverse. `muted` only on paper, never on surface white.
- Inside a dark plate, type uses `paper` (warm white) — not pure `#ffffff`.
- Signal yellow only ever sits on `ink` or on a circular play badge. Do not place Signal type on paper at small sizes (contrast fails).

## Typography

Three families, sharply separated by role.

- **Anton** — the system voice. Every headline and section title is set in Anton, uppercase, with a period terminator. The condensed letterforms are what make a single line of text feel like a banner; respect that by keeping headlines on as few lines as possible. Size is oversized in absolute terms: 160px on the hero plate, 88px on section titles, 56px on dark CTA banners. Letter-spacing is near zero; do not track-out Anton.
- **Inter** — the supporting voice. Body, captions, navigation, button labels, footer microtext. Use weights 400 and 500 only. 600 may appear once for the wordmark next to the logo mark. Body copy stays at 15px on dense layouts and 17px on hero paragraphs, line-height 1.55. Inter is never set in all caps except for label-sm meta marks (12px).
- **JetBrains Mono** — used exclusively for stat numerals (`98%`, `87+`, `50K+`) and the occasional meta mark (e.g., a section index `02 / 06`). Do not use mono for paragraphs.

Rules:

- Headlines end with a period. This is a system signature.
- Never mix Anton and Inter on the same line.
- Never apply text shadow, gradient fill, or stroke to type.
- Underlines belong on inline links inside paragraphs only.

## Layout

Frame & Field uses a single primary container with strict left alignment and generous vertical rhythm.

- **Container.** Max width `1200px`, side gutter `32px` on desktop, `20px` on mobile. The hero plate is allowed to bleed wider than the text container only on screens above 1280px (it is allowed to touch the container edge but never the viewport edge).
- **Section rhythm.** `128px` vertical padding between sections on desktop, `72px` on mobile. There are no horizontal dividers between sections; the whitespace is the divider.
- **Grid.** Columns are flexible: 1-column hero, 4-column project grid (drops to 2 columns under 900px, 1 column under 600px), 1-column services list. Stats sit on a 4-up baseline grid with no card containers.
- **Alignment.** Left-aligned headlines and body, period-terminated. The dark hero plate is the only block where headline + paragraph stack tightly at the top-left and a circular play badge anchors the visual center. Stat numerals are left-aligned within their column.
- **Navigation.** Top bar is one row: 3x3 dot logo + wordmark on the left, four to five small Inter 500 links in the center, a single dark pill button on the right. No dropdowns, no eyebrows, no announcement bar.
- **Hero plate.** Full-width inside the container, rounded `xl` (24px), `ink` background, soft elevation. Headline sits top-left at 160px, a 17px paragraph sits beneath it constrained to ~520px. A circular Signal-yellow play badge anchors the optical center.
- **Project grid.** Each tile is `card-frame` (white surface, 1px hairline, rounded `lg`), image fills the frame, one Inter 500 caption line below the tile — no badge, no category, no hover overlay.
- **Stats row.** Four stat blocks, each: oversized JetBrains Mono numeral, one Inter `muted` line beneath. No tile container, no icon.
- **Services list.** Ordered numeric rows separated by 1px hairlines. Number on the left in JetBrains Mono, service name in Anton 32px on the right, with a chevron icon at the far right. The row itself is the entire interaction surface.
- **CTA banner.** A second dark plate near the bottom, same `ink` background and `xl` radius as the hero, holding a centered Anton headline and a single pill button.
- **Footer.** Plain paper background, small Inter 13px links in a single row, copyright on the right. No social grid, no newsletter form (unless the page demands it — then a single 46px pill input + dark pill button).

Stacking behavior:

- On screens under 720px, the hero headline drops from 160px to 64px and the play badge moves below the paragraph.
- The project grid stacks to 2 columns at 900px and 1 column at 600px.
- Service rows keep their structure but reduce font-size to Anton 22px.

## Elevation & Depth

The system is effectively flat.

- No drop shadows on type, buttons, inputs, or surface tiles.
- The single allowed elevation token is `plate`, used only on the dark hero plate and the dark CTA banner. The shadow is broad and soft (60px blur, 24px offset down, low opacity), tuned to feel like the plate is resting on warm paper, not floating above it.
- Hover states change color, never z-depth. Buttons darken from `ink` to `charcoal`. Tiles do not lift; their hairline shifts from `hairline` to `ink` at 60% alpha.
- Focus rings are a double ring (paper inner, ink outer) for visibility on both surfaces.

## Shapes

Near-flat geometry with intentional radii.

- **999px (`full`)** for every interactive pill: primary button, secondary button, accent pill, ghost link button, search input, accent badge.
- **24px (`xl`)** for the dark plate hero and the CTA banner.
- **18px (`lg`)** for image card frames and inset stat tiles when they appear.
- **12px (`md`)** for small inline tiles (logo wells, footer chips) — used sparingly.
- **0** for service rows, footer cells, body containers.
- **1px** hairline borders only. No 2px borders, no double borders, no dashed/dotted strokes.
- No diagonal cuts, no asymmetric tabs, no concave radii.

## Components

All components share one grammar: paper canvas, hairline frames, pill interactives, period-terminated condensed display. Components below are the canonical set; everything else should be assembled from these primitives.

- **Button (primary).** Dark `ink` pill, 44px tall, Inter 500/12px label. Used for the single primary CTA (`GET IN TOUCH`). Hover: surface goes `charcoal`.
- **Button (secondary).** Transparent pill with a 1px `hairline` border, same height. Used for "View Reel" or nav-area secondary actions. Hover: surface goes `surface` (white).
- **Button (ghost / nav link).** No border, no background, Inter 500/14px in `ink`. Hover: 60% opacity. Used for top-nav links.
- **Pill (accent).** Signal-yellow pill. Used at most once per page — typically on a single emphasis statement near the CTA banner. Never used on multiple components simultaneously.
- **Play badge.** 84px circle, Signal-yellow background, `ink` triangle icon, dropped onto the dark hero plate. The badge is the only "playful" element in the system.
- **Input.** Pill input, 46px tall, surface white, 1px hairline border, ink type, muted placeholder. Focus: border becomes `ink`.
- **Image frame (project tile).** White surface, 1px hairline border, 18px radius. The image fills the frame, with the caption (Inter 500/14px) sitting outside and below the frame.
- **Hero plate.** `ink` background, 24px radius, 48px padding, oversized Anton headline top-left, 17px Inter paragraph below in `paper`, circular play badge at center. Soft `plate` shadow.
- **Stat numeral.** Plain JetBrains Mono 88px numeral in `ink`, with a single Inter 13px `muted` line beneath. No container.
- **Service row.** 1px hairline top border. Mono `02` index on the left, Anton 32px service name in the center, Lucide `chevron-right` icon on the right. Full-row hover: name shifts from `ink` to `charcoal`.
- **Tabs.** Pill tab strip with `ink` filled active state. Used sparingly — typically on a single filter row above a portfolio grid.
- **Checkbox.** 18px square, 6px radius, hairline border, `ink` fill when checked with a paper checkmark.
- **Footer.** Single row of Inter 500/13px nav links in `muted`, a small "© Year — Studio Name" on the right in `muted`.

**Icon library.** Lucide (https://lucide.dev/, ISC license). Used only for `play`, `arrow-right`, `arrow-up-right`, `chevron-right`, `chevron-down`, `instagram`, `linkedin`, `youtube`, and `behance`. Stroke width 1.75. Size matches cap height (16px next to body, 20px on service rows, 28px inside the play badge).

## Do's and Don'ts

**Do.**

- Lead every section with the heading itself, set in Anton, uppercase, ending with a period.
- Reserve Signal yellow for one element per page (the play badge or one emphasis pill).
- Keep the project grid quiet — image, single caption line, nothing else.
- Treat whitespace as a divider; let 128px of vertical space separate sections.
- Use JetBrains Mono only for numerals and the occasional meta index.
- Keep the dark hero plate inside the paper canvas — never make the whole page dark.
- Place the play badge near the optical center of the hero plate, not in a corner.

**Don't.**

- Don't add a kicker, label, category, or small-caps line above a heading. Lead with the heading.
- Don't add chip tags ("UI Design", "Branding") under project tiles. One plain caption line only.
- Don't put Signal yellow on more than one element per page or use it as a section background.
- Don't center body copy. Left alignment is part of the editorial language.
- Don't apply drop shadows to type, project tiles, or buttons.
- Don't dotted/dashed borders, gradients, or duotone overlays on imagery.
- Don't introduce a third display font or an additional accent color.
- Don't compress section vertical rhythm to fit more content; trim the content instead.
