--- version: alpha name: Sleeve Notes description: Cream sleeve, violet ink, magenta for the record that is playing. Everything in the grid is a square. meta: id: "theme-sleeve-notes" model: "Claude Opus 5" author: "Claude Code" createdAt: "2026-09-02T00:58:17+09:00" updatedAt: "2026-09-02T00:58:17+09:00" version: "1.0.0" isNew: false lookbook: tagline: Square, because the object is. bestFor: Record labels and music catalogues, streaming and radio, podcast networks, artist discographies avoidFor: Dashboards, forms-heavy admin, anything whose content is not a fixed-ratio object defaultMode: light surfaceStyle: flat accentUse: text caseStyle: labels-upper borderWidth: 1px imageTreatment: duotone motion: intensity: 2 duration: 260ms ease: "cubic-bezier(0.33, 1, 0.68, 1)" signature: "The playing sleeve rotates by two degrees and stays there. It is the only element in the system that is ever off-square." displayFont: Bodoni Moda displayKind: serif bodyFont: Epilogue monoFont: Chivo Mono colors: background: "#FBEAD2" foreground: "#211F1A" card: "#E9DFD2" card-foreground: "#211F1A" popover: "#E9DFD2" popover-foreground: "#211F1A" primary: "#5E7AD8" primary-foreground: "#150B01" secondary: "#DFD2C0" secondary-foreground: "#211F1A" muted: "#DFD2C0" muted-foreground: "#5D5A52" accent: "#68386D" accent-foreground: "#FFF9F1" destructive: "#B6322D" destructive-foreground: "#FFF9F1" border: "#CDC2B2" input: "#CDC2B2" ring: "#5E7AD8" chart-1: "#5D77CA" chart-2: "#A27F00" chart-3: "#7863BA" chart-4: "#93921A" chart-5: "#1F71B5" colorsDark: background: "#1A0E00" foreground: "#E0DDCE" card: "#21190F" card-foreground: "#E0DDCE" popover: "#21190F" popover-foreground: "#E0DDCE" primary: "#809FFF" primary-foreground: "#150B01" secondary: "#2F2515" secondary-foreground: "#E0DDCE" muted: "#2F2515" muted-foreground: "#938F7D" accent: "#BE89C3" accent-foreground: "#150B01" destructive: "#FD7469" destructive-foreground: "#150B01" border: "#3D3325" input: "#3D3325" ring: "#809FFF" chart-1: "#83A0F7" chart-2: "#BC9622" chart-3: "#B19DF9" chart-4: "#999824" chart-5: "#73BAFF" typography: display-lg: fontFamily: Bodoni Moda fontSize: 68px fontWeight: 500 lineHeight: 1.02 letterSpacing: -0.025em headline-lg: fontFamily: Bodoni Moda fontSize: 34px fontWeight: 500 lineHeight: 1.14 letterSpacing: -0.015em headline-md: fontFamily: Bodoni Moda fontSize: 20px fontWeight: 600 lineHeight: 1.3 body-lg: fontFamily: Epilogue fontSize: 16px fontWeight: 400 lineHeight: 1.62 body-md: fontFamily: Epilogue fontSize: 14.5px fontWeight: 400 lineHeight: 1.6 body-sm: fontFamily: Epilogue fontSize: 13px fontWeight: 400 lineHeight: 1.5 label-caps: fontFamily: Epilogue fontSize: 10px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.16em label-mono: fontFamily: Chivo Mono fontSize: 12.5px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.01em numeral-xl: fontFamily: Chivo Mono fontSize: 42px fontWeight: 500 lineHeight: 1 letterSpacing: -0.02em rounded: none: 0px sm: 1px md: 2px lg: 2px xl: 3px full: 9999px spacing: base: 16px xs: 4px sm: 8px md: 16px lg: 24px xl: 48px gutter: 18px margin: 30px measure: 62ch components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" rounded: "{rounded.sm}" padding: 12px button-ghost: backgroundColor: transparent textColor: "{colors.foreground}" rounded: "{rounded.sm}" padding: 12px card-panel: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" rounded: "{rounded.md}" padding: 20px badge-label: backgroundColor: transparent textColor: "{colors.accent}" typography: "{typography.label-caps}" rounded: "{rounded.none}" --- # Sleeve Notes ## Overview Sleeve Notes is a catalogue for a label. Its structural rule is that **the grid is square-only**: every release, every artist, every playlist renders at 1:1, and there are no 16:9 hero images, no wide cards and no portrait tiles anywhere in the system. The object being catalogued is a square, so the catalogue is squares. The second rule is narrower and does more work than it sounds: **durations in mono are the only right-aligned text in the system.** Track lists therefore read as a left-aligned column of titles with a hard right edge of times, which is the back of a sleeve, and nothing else in the interface is permitted that edge. Cream, violet ink, and a magenta reserved for whatever is currently playing. It suits labels, catalogues and radio. It is wrong for admin, whose content has no natural ratio. ## Colors Printed sleeve, one ink, one highlight. - **Ground:** warm cream. The paper of a sleeve, slightly yellow. - **Primary (violet-blue):** the ink. Navigation, headings on dark, the play button fill. - **Accent (magenta):** **text**, and it means "now" — the playing track, the new release, the live show. Solved to 4.5:1 because a now-playing marker that is hard to read defeats itself. - **Neutrals** are cream-tinted, so a muted credit line reads as faded print. - Charts are duotone: violet and magenta. Play counts over time, and nothing more elaborate than that. ## Typography Bodoni Moda for the title, Epilogue for text, Chivo Mono for time. - **Display:** Bodoni Moda at 500, 68px. Extreme thick-thin contrast; it is a record sleeve face and it is used on the release title and the artist name. - **Body:** Epilogue at 14.5px, 1.6. A neutral grotesque that stays out of the way of the Bodoni. - **Chivo Mono** carries every duration, catalogue number, BPM and release date. Durations are the system's right edge and they must be tabular. - Uppercase at 0.16em for format labels: LP, 12", DIGITAL, REISSUE. ## Layout **Squares and a right edge.** The catalogue grid is 4-up at 1320px, every cell 1:1, 18px gutters. A release cell is: square sleeve, title in Bodoni at 20px, artist in body-sm muted, catalogue number in mono. No cell is ever taller than another. A track list is a two-part line: title flush left, duration in Chivo Mono flush right, with nothing between them but space. No leader, no rule, no track number column — the number is a superscript on the title. The release page is a square sleeve at 480px on the left and the notes in a 62ch column on the right, and the sleeve does not scroll with the notes; it sticks. ## Elevation & Depth Flat, with one exception. Sleeves cast a 1px hard offset shadow down-right — not a blur, a hard offset, the way a printed sleeve photographs. Everything else in the system is flat with 1px borders. The playing sleeve rotates 2 degrees and holds. It is the only off-square element and the only rotation in the library. ## Shapes Square: 1px on controls, 2px on cards, 0 on images. Sleeves are never rounded and never cropped — if a source image is not square it is letterboxed onto the ground rather than cropped, because cropping a sleeve destroys the artwork. Photography is duotone in violet: artists in rooms, studio gear, crowd shots. Sleeves themselves are never duotoned — they are reproduced. ## Components - **Release cell:** 1:1 sleeve with a 1px hard shadow, title in Bodoni 20px, artist muted, catalogue number in mono. Fixed height, always. - **Track line:** superscript number, title, flexible space, duration in Chivo Mono flush right. Playing track is magenta throughout including its duration. - **Now playing bar:** pinned to the bottom, 72px, square sleeve at 56px rotated 2 degrees, title and artist, duration and a progress rule at 2px. - **Format badge:** accent text, uppercase, no background, no border. - **Buttons:** violet fill, 1px radius, 12px padding. ## Do's and Don'ts - Do keep every image in the grid at 1:1. - Do right-align durations and nothing else. - Do letterbox a non-square sleeve rather than crop it. - Don't introduce a wide hero image. - Don't add a track-number column. - Don't duotone a sleeve. - Don't use magenta for anything that is not currently happening.