---
version: alpha
name: JP Works
description: Editorial template-studio minimalism — near-black ink on pure white, a single high-impact display type voice, generous whitespace, tight grid of preview cards with subtle shadow-borders, and a restrained mono accent for category labels.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f6f5"
  ink: "#0e0e0e"
  ink-secondary: "#5c5c5c"
  ink-muted: "#8a8a8a"

  # Accent (dark CTA voice)
  primary: "#0e0e0e"
  on-primary: "#ffffff"
  on-ink: "#ffffff"

  # Category / dark-template tint
  dark-tile: "#161616"
  dark-tile-ink: "#f2f2f2"

  # Neutral scale
  gray-900: "#0e0e0e"
  gray-600: "#5c5c5c"
  gray-400: "#8a8a8a"
  gray-200: "#e4e4e2"
  gray-100: "#ededeb"
  gray-50: "#f6f6f5"

  # Lines + shadow tints (opaque over white)
  border: "#e4e4e2"
  shadow-border: "#ebebeb"
  shadow-soft: "#f3f3f2"

typography:
  display-hero:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: -2.56px
  section-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -1.6px
  sub-heading:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.46
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.15px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px
  label-mono:
    fontFamily: "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.4px

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

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 11px 22px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 11px 22px
    borderColor: "{colors.border}"
  button-ghost:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 11px 22px

  filter-pill:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 7px 14px
  filter-pill-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 7px 14px

  category-label:
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-mono}"

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 16px
    borderColor: "{colors.border}"
  card-preview:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.md}"
    borderColor: "{colors.shadow-border}"
  card-dark:
    backgroundColor: "{colors.dark-tile}"
    textColor: "{colors.dark-tile-ink}"
    rounded: "{rounded.lg}"
    padding: 16px

  badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 3px 10px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
    borderColor: "{colors.border}"
---

# JP Works Design System

## Overview

JP Works is a template studio, and its site reads like one: an editorial gallery where the work is the hero and the chrome disappears. The canvas is pure white (`{colors.background}`) under near-black ink (`{colors.ink}`), with a confident display headline ("High-impact templates for fast teams") doing nearly all the expressive work. There is no decorative color, no gradient wash, no illustration — the visual energy comes entirely from typographic scale and the rhythm of a tight preview-card grid.

The type voice is a single geometric grotesque (mapped here to Inter as the closest Google equivalent) carried across every level, from a 64px compressed hero with negative tracking down to 13px metadata. Weight does the talking: 400 for reading, 500 for interactive and labels, 600 for headlines. The aggressive negative letter-spacing at display sizes gives headlines a packed, magazine-cover density that pairs against deliberately roomy whitespace — the classic editorial-minimal counterbalance.

Structurally the page is a marketplace grid: rows of template preview cards, each a soft-surfaced thumbnail (`{colors.surface-soft}`) inside a hairline shadow-border, topped by a small mono category label and a 20px card title. A horizontal filter rail (All · Exclusive · Dark · Minimal …) sits above the grid as pill toggles — inactive pills are muted gray surfaces, the active pill flips to solid ink. Dark templates get an inverted `{colors.dark-tile}` tile so the preview reads true.

**Key Characteristics:**
- Pure-white canvas, near-black `{colors.ink}` — zero chromatic accent in chrome
- One grotesque type voice (Inter) across all levels; weight, not color, sets hierarchy
- Compressed display headlines: 64px / weight 600 / -2.56px tracking against generous whitespace
- Mono category micro-labels (`{typography.label-mono}`) as the only typographic counterpoint
- Pill filter rail: muted-surface inactive, solid-ink active
- Preview-card grid with soft surface thumbnails and hairline shadow-borders
- Inverted dark tile for dark-template previews
- Pill CTAs (dark primary, hairline-bordered secondary)

## Colors

### Primary
- **Ink** (`{colors.ink}`): Headlines, body text, the active filter pill, primary CTA fill.
- **Pure White** (`{colors.background}`): Page and card surface, text on dark fills.
- **On Primary** (`{colors.on-primary}`): White text on the dark CTA.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, inactive filter text.
- **Ink Muted** (`{colors.ink-muted}`): Mono category labels, metadata, placeholders.

### Surfaces
- **Surface Soft** (`{colors.surface-soft}`): Card preview backdrops, ghost buttons, inputs.
- **Dark Tile** (`{colors.dark-tile}`): Inverted tile for dark-template previews.
- **Dark Tile Ink** (`{colors.dark-tile-ink}`): Text on the dark tile.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Equivalent to ink.
- **Gray 600** (`{colors.gray-600}`): Secondary text.
- **Gray 400** (`{colors.gray-400}`): Muted labels.
- **Gray 200 / 100** (`{colors.gray-200}` / `{colors.gray-100}`): Lines, dividers.
- **Gray 50** (`{colors.gray-50}`): Subtle surface tint.

### Lines & Depth
- **Border** (`{colors.border}`): Card and nav hairlines.
- **Shadow Border** (`{colors.shadow-border}`): Soft ring around preview thumbnails.
- **Shadow Soft** (`{colors.shadow-soft}`): Minimal card lift.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Arial, sans-serif` — a geometric grotesque standing in for the studio's display grotesk.
- **Mono**: `Roboto Mono`, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — category labels only.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px hero headline, maximum compression |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections |
| `card-title` | Template card titles |
| `body-large` | Hero subtitle, intros |
| `body` | Standard reading text |
| `body-medium` | Nav, filter labels, emphasized UI |
| `button-ui` | Buttons |
| `caption` | Metadata, badges |
| `label-mono` | Category micro-labels |

### Principles
- **One voice, weighted**: A single family at 400 / 500 / 600. Hierarchy comes from size and weight, never color.
- **Compression at scale**: Negative tracking tightens with size (-2.56px at 64px, -1.6px at 40px, normal at body) for a magazine-cover density.
- **Mono as counterpoint**: The only non-grotesque type is the mono category label — a small technical signal against the editorial body.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block above. Base unit is 8px with large editorial jumps (`{spacing.4xl}`–`{spacing.5xl}`) between major sections.

### Grid & Container
- Max content width ~1240px, centered.
- Hero: left- or center-aligned single column with heavy top padding.
- Templates: responsive 3-column card grid (3 → 2 → 1).
- Filter rail: single horizontal row of pills above the grid, scrolls on mobile.

### Whitespace Philosophy
- **Gallery emptiness**: Large vertical rhythm between sections; whitespace frames the work.
- **Compressed text, expanded space**: Tight headline tracking offset by roomy margins.
- **Quiet chrome**: Separation comes from hairline borders and spacing, not background blocks.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Page, text |
| Hairline | `1px solid {colors.border}` | Nav, cards |
| Soft ring | `0 0 0 1px {colors.shadow-border}` | Preview thumbnails |
| Lifted card | Ring + `0 6px 20px {colors.shadow-soft}` | Hover on template cards |

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 4px | Inline elements |
| `sm` | 8px | Inputs, preview thumbnails |
| `md` | 12px | Inner preview surfaces |
| `lg` | 16px | Template cards, dark tiles |
| `xl` | 24px | Large containers |
| `pill` | 9999px | Buttons, filter pills, badges |

## Components

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

### Buttons
- **`button-primary`** — Solid ink pill, white text. The default CTA ("Buy", "Get unlimited access").
- **`button-secondary`** — White pill with hairline border.
- **`button-ghost`** — Soft-surface pill for low-emphasis actions ("Get it for Free").

### Filters
- **`filter-pill`** — Muted soft-surface pill, secondary text (inactive).
- **`filter-pill-active`** — Solid ink fill, white text (selected category).

### Cards
- **`card`** — White template card, hairline border, 16px radius.
- **`card-preview`** — Soft-surface thumbnail backdrop with a shadow-border ring.
- **`card-dark`** — Inverted dark tile for dark-template previews.

### Labels & Badges
- **`category-label`** — Mono micro-label above card titles.
- **`badge`** — Solid ink pill for "Exclusive" / "New" markers.

### Navigation
- **`nav-bar`** — White header, hairline bottom border, Inter 15px weight 500, dark pill CTA right.

### Inputs
- **`input`** — Soft-surface field, hairline border, 8px radius.

## Do's and Don'ts

### Do
- Keep chrome achromatic — let template previews supply all the color
- Use negative tracking that scales with size on headlines
- Drive hierarchy with weight (400/500/600), not hue
- Use the mono label only for category micro-text
- Flip filter pills to solid ink when active
- Invert to the dark tile for dark-template previews

### Don't
- Don't add accent colors to buttons or chrome — ink and white only
- Don't use weight 700; 600 is the headline ceiling
- Don't put positive tracking on display headlines
- Don't set the dark CTA to anything but `{colors.ink}`
- Don't crowd the grid — whitespace is the layout

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column grid, scrolling filter rail |
| Tablet | 600–1024px | 2-column grid |
| Desktop | 1024–1240px | 3-column grid, full layout |
| Large | >1240px | Centered, generous margins |

### Collapsing Strategy
- Hero: 64px → scales down, keeps proportional negative tracking
- Filter rail: full row → horizontal scroll
- Template grid: 3 → 2 → 1 columns
- Nav: links + CTA → hamburger
- Section spacing: 140px → 64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink `{colors.ink}`
- Background: White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Border: `1px solid {colors.border}`
- Category label: Ink Muted `{colors.ink-muted}`

### Example Component Prompts
- "Hero on white. Headline 64px Inter weight 600, line-height 1.04, letter-spacing -2.56px, color `{colors.ink}`. Subtitle 20px weight 400 in `{colors.ink-secondary}`. Dark pill CTA (`{colors.ink}`, 9999px, 11px 22px) plus hairline-bordered secondary."
- "Filter rail of pills: inactive `{colors.surface-soft}` with `{colors.ink-secondary}` text; active solid `{colors.ink}` with white text; all 9999px, 7px 14px padding, 15px weight 500."
- "Template card: white surface, `1px solid {colors.border}`, 16px radius. Soft-surface preview thumbnail (`{colors.surface-soft}`) with `0 0 0 1px {colors.shadow-border}` ring. Mono category label above a 20px weight 500 title."

### Iteration Guide
1. Chrome stays achromatic — color belongs to the previews, never the UI
2. Letter-spacing scales with size: -2.56px at 64px, -1.6px at 40px, normal at 16px
3. Three weights only: 400 read, 500 interact, 600 announce
4. Active state = solid ink fill; everything else is white or soft-surface
5. Mono is reserved for category micro-labels

---

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