--- version: alpha name: "Jagjaguwar" description: "Futura PT uppercase masthead over OCR-B monospace catalogue type, near-monochrome ink-on-cream, zero-radius rectangles." colors: background: "#ffffff" surface: "#f5f5f5" surface-elevated: "#f5f5f5" ink: "#000000" ink-muted: "#666666" primary: "#231f20" on-primary: "#ffffff" border: "#d9d9d9" focus-ring: "#231f20" success: "#22c55e" warning: "#f59e0b" error: "#ef4444" shadow-soft: "#d9d9d9" typography: display-hero: fontFamily: "futura-pt, ui-sans-serif, system-ui, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.05 letterSpacing: -1px display: fontFamily: "futura-pt, ui-sans-serif, system-ui, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.5px heading-section: fontFamily: "futura-pt, ui-sans-serif, system-ui, sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 1.15 letterSpacing: -0.25px heading-sub: fontFamily: "futura-pt, ui-sans-serif, system-ui, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0px body-large: fontFamily: "futura-pt, ui-sans-serif, system-ui, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "futura-pt, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "futura-pt, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0px caption: fontFamily: "futura-pt, ui-sans-serif, system-ui, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px rounded: none: 0px sm: 4px md: 8px lg: 16px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.background}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 16px badge: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px --- # Jagjaguwar Design System ## Overview Jagjaguwar's website is the digital extension of an oatmeal-sleeve LP cover — a Bloomington, Indiana indie-folk label (Bon Iver, Sharon Van Etten, Angel Olsen) that has refused, for over thirty years, to dress like a tech company. The page sits on pure white (`#ffffff`) with deep ink-grey type (`#231f20`) and almost no other colour anywhere — 941 of the page's text instances run in this single warm near-black, 796 use pure black for hairline rules, and 553 use white. That's the entire palette. There is no brand red, no accent blue, no hero block. The chromatic richness lives entirely in the album artwork; the surrounding chrome stays as quiet as a record store wall painted matte off-white in 1994. The defining typographic move is a two-face contract: **futura-pt** (uppercase, weight 700 for the masthead and weight 500 for navigation/links) does the announcement, and **ocr-b-std** (a 1965 ISO-standard machine-readable monospace) handles every catalogue entry, every track listing, every release-date eyebrow. Where every other indie label site has migrated toward a generic Helvetica or sans-grotesk, Jagjaguwar holds the line with two specific historical references: Paul Renner's geometric futura set in `2px` letter-spacing UPPERCASE for the wordmark and section openers, and OCR-B (designed by Adrian Frutiger for the European Computer Manufacturers Association) for the catalogue numbers, release notes, and tracklists. The pairing reads as a record label that has handed the design to an obsessive archivist rather than a brand agency. What separates Jagjaguwar from every other indie label is the **commitment to letterpress austerity**. Buttons have `0px` radius (and there are barely any buttons — the catalogue is mostly text-and-image links). Borders are `1px solid #231f20` hairlines that run beneath every navigation link. Shadows do not exist anywhere in the system — the dembrandt extraction confirms zero shadow declarations. The page reads as a printed catalogue insert from a vinyl LP — type-only, hand-set, monochrome ink on uncoated cream. The label trusts the album covers (each LP sleeve carrying its own visual identity from its own designer or photographer) to carry every chromatic moment, and the chrome stays as out-of-the-way as humanly possible. **Key Characteristics:** - Pure white canvas (`#ffffff`) — uncoated paper, never warm cream - Deep ink-grey body (`#231f20`) — softened from pure black, easier on long-form catalogue reading - Two-face contract: `futura-pt` for masthead/nav, `ocr-b-std` for catalogue / track listings - UPPERCASE futura-pt at weight 700 for the masthead, weight 500 for navigation links - OCR-B monospace for catalogue meta — release dates, track numbers, "JAG" SKU codes - `0px` border-radius across the entire system — letterpress-rectangular by conviction - Zero drop shadows, zero gradients — the page is genuinely flat - 1px solid hairlines (`#231f20`) under nav links and around editorial frames - Album artwork is the only chromatic element — the chrome surrounds it, never competes - 162px section spacing scale — generous magazine-spread breathing room ## Colors ### Primary - **Jag Ink** (`#231f20`): The workhorse — used 941 times across the page. All body type, headings, navigation links, masthead, and primary borders. A warm near-black with a slight sepia undertone that reads as printed ink rather than digital text. - **True Black** (`#000000`): Used 796 times for hairline rules and structural separators. Slightly cooler than Jag Ink — deployed where mechanical precision is needed (table rules, divider lines). - **Pure White** (`#ffffff`): Page background, used 553 times. Crisp uncoated-paper white, never tinted warm. Also serves as the inverted text colour on the rare occasions ink panels invert. ### Brand Accent - Jagjaguwar is **chromatically restrained to monochrome** in core brand chrome. The dembrandt extraction returned only `#231f20` as a confirmed palette colour with `medium` confidence on hover/focus states. There is no signature brand red, blue, or yellow in the chrome — the chromatic richness lives entirely in the album-cover thumbnails on the catalogue page. ### Hover / Focus - **Hover Ink** (`#231f20` over `#ffffff` background swap): Links and nav items hover by inverting — the link background fills with ink and the text becomes white. No colour change. - **Inverse Hover** (`#ffffff` text over `#231f20`): On dark sections (rare), hover lifts the text toward pure white from a slightly muted state. ### Neutrals & Text - **Jag Ink** (`#231f20`): All primary text without exception. - **Inverse Text** (`#ffffff`): Text colour on inverted nav drawers and tour-date hover states. ### Surface & Borders - **Page Surface** (`#ffffff`): Default canvas — the only surface in active use. - **Solid Hairline Border** (`1px solid #231f20`): The system's primary structural device — appears 82 times across `` elements as bottom-border underlines for nav and catalogue links. - **Vertical Rule** (`0px 115px 0px 0px solid #000000`): A right-side vertical divider used once on the primary `