--- version: alpha name: Fitting Room description: Mauve daylight where the blue is the garment and the amber is the deadline: every item carries a return date as its first fact. meta: id: "theme-fitting-room" model: "Claude Opus 5" author: "Claude Code" createdAt: "2026-09-02T00:58:18+09:00" updatedAt: "2026-09-02T00:58:18+09:00" version: "1.0.0" isNew: false lookbook: tagline: You have it until the fourteenth. bestFor: Clothing rental and subscription, library and equipment lending, try-before-you-buy, wardrobe management avoidFor: Outright-purchase retail, anything without a return or renewal cycle defaultMode: light surfaceStyle: filled accentUse: underline caseStyle: labels-upper borderWidth: 1px imageTreatment: warm motion: intensity: 2 duration: 280ms ease: "cubic-bezier(0.33, 1, 0.68, 1)" signature: "Items move along the calendar rail when their dates change. Position on the rail is the animation, because position is the meaning." displayFont: Frank Ruhl Libre displayKind: serif bodyFont: Be Vietnam Pro monoFont: M PLUS 1 Code colors: background: "#C0B8CF" foreground: "#000000" card: "#B7B1C3" card-foreground: "#000000" popover: "#B7B1C3" popover-foreground: "#000000" primary: "#00687E" primary-foreground: "#FBF9FF" secondary: "#AFA7BE" secondary-foreground: "#000000" muted: "#AFA7BE" muted-foreground: "#403D45" accent: "#87491F" accent-foreground: "#FBF9FF" destructive: "#B6322D" destructive-foreground: "#FBF9FF" border: "#A19AAF" input: "#A19AAF" ring: "#00687E" chart-1: "#0087A2" chart-2: "#3986C2" chart-3: "#586BB5" chart-4: "#009C9A" chart-5: "#007D5C" colorsDark: background: "#211830" foreground: "#F6F3FF" card: "#2A2830" card-foreground: "#F6F3FF" popover: "#2A2830" popover-foreground: "#F6F3FF" primary: "#04B9DE" primary-foreground: "#0F0B15" secondary: "#383440" secondary-foreground: "#F6F3FF" muted: "#383440" muted-foreground: "#A49CB4" accent: "#F0AB80" accent-foreground: "#0F0B15" destructive: "#FF776B" destructive-foreground: "#0F0B15" border: "#48454F" input: "#48454F" ring: "#04B9DE" chart-1: "#35B7D8" chart-2: "#57A3E0" chart-3: "#93AAFA" chart-4: "#00A9A7" chart-5: "#5FCDA5" typography: display-lg: fontFamily: Frank Ruhl Libre fontSize: 56px fontWeight: 500 lineHeight: 1.08 letterSpacing: -0.02em headline-lg: fontFamily: Frank Ruhl Libre fontSize: 32px fontWeight: 500 lineHeight: 1.18 letterSpacing: -0.012em headline-md: fontFamily: Frank Ruhl Libre fontSize: 20px fontWeight: 600 lineHeight: 1.32 body-lg: fontFamily: Be Vietnam Pro fontSize: 16px fontWeight: 400 lineHeight: 1.62 body-md: fontFamily: Be Vietnam Pro fontSize: 14.5px fontWeight: 400 lineHeight: 1.6 body-sm: fontFamily: Be Vietnam Pro fontSize: 13px fontWeight: 400 lineHeight: 1.5 label-caps: fontFamily: Be Vietnam Pro fontSize: 10.5px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.15em label-mono: fontFamily: M PLUS 1 Code fontSize: 13px fontWeight: 400 lineHeight: 1.42 numeral-xl: fontFamily: M PLUS 1 Code fontSize: 48px fontWeight: 500 lineHeight: 1 letterSpacing: -0.02em rounded: none: 0px sm: 4px md: 8px lg: 12px xl: 16px full: 9999px spacing: base: 16px xs: 4px sm: 8px md: 16px lg: 26px xl: 50px gutter: 20px margin: 28px measure: 62ch components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" rounded: "{rounded.sm}" padding: 13px button-ghost: backgroundColor: transparent textColor: "{colors.foreground}" rounded: "{rounded.sm}" padding: 13px card-panel: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" rounded: "{rounded.md}" padding: 20px badge-label: backgroundColor: "{colors.secondary}" textColor: "{colors.secondary-foreground}" typography: "{typography.label-caps}" rounded: "{rounded.sm}" --- # Fitting Room ## Overview Fitting Room is for things you have but do not own. Rental clothing, a library book, a borrowed drill. Its rule is that **the return date is the first fact about every item** — before the name, before the price, before the image — and it is set in mono at the top-left of every card, row and detail page. The second rule follows: **the calendar is the navigation.** There is no "My Items" list sorted by date added. There is a horizontal calendar rail, and items sit on it at their return date. Adding an item puts a block on the rail; extending it slides the block right. Position on the rail *is* the state, which is why moving along it is the only animation in the system. Mauve daylight, blue garment, amber deadline. It suits rental, lending and subscription. It is wrong for outright purchase, which has no rail. ## Colors A neutral daylight, one colour for the thing and one for the clock. - **Ground:** mauve-grey, a mid-tone. Cards are lighter, the returned/archived well is darker. - **Primary (blue):** the garment — the item itself, its links, its actions. - **Accent (amber):** an **underline**, and it is always about time: the return date's rule, the "due soon" mark under a date, the today line on the rail. Solved to 3:1. It never fills anything, because a filled amber block on a clothing site reads as a sale badge and this is not a sale. - **Destructive** is overdue, and only overdue. - **Neutrals** are mauve-tinted throughout. - Charts are analogous: wear counts and rental frequency in blues. ## Typography Frank Ruhl Libre for names, Be Vietnam Pro for text, M PLUS 1 Code for dates. - **Display:** Frank Ruhl Libre at 500, 56px. A Hebrew-and-Latin serif with crisp, slightly flared stems — it gives garment names a fashion register without going full Didone. - **Body:** Be Vietnam Pro at 14.5px, 1.6, 62ch. Neutral, wide language coverage. - **M PLUS 1 Code** for every date, size and item ID. Dates are the load-bearing data here and they must be tabular so a column of them scans. - Uppercase at 0.15em for size, condition and status labels. ## Layout **The rail, then the grid.** A horizontal calendar rail spans the full width at the top of the wardrobe screen: 14 day-columns, a 2px amber today line, and item blocks positioned at their return dates. Below it, a 4-up grid of item cards at 1280px. Every card is: return date in mono at top-left with an amber underline, image at 3:4, name in Frank Ruhl Libre, size and condition in uppercase, actions. The date is never at the bottom and never in a badge over the image. Portrait images at 3:4 throughout — this is clothing on a hanger, not a square product. ## Elevation & Depth Filled cards with a soft shadow and a 1px border. The rail is flat and pinned with a 1px bottom border. Motion is positional: blocks slide along the rail when dates change, 280ms. Cards do not animate on hover beyond a 1px border colour change — a card that lifts on hover in a grid of forty items makes the whole page feel unstable. ## Shapes Moderately round — 8px on cards, 12px on panels, 4px on controls. Images are rounded at 8px to match their cards. Photography is warm-graded: garments on hangers, rails, folded stacks, natural window light. Whole-outfit shots on people are avoided — this system is about individual items with individual dates. ## Components - **Item card:** return date in M PLUS 1 Code with a 2px amber underline at the top-left, 3:4 image, name in Frank Ruhl Libre 20px, size and condition uppercase, extend/return buttons. - **Calendar rail:** 14 columns, uppercase day initials, 2px amber today line, item blocks in primary positioned by return date. Overdue blocks go destructive. - **Extend control:** a stepper in days that moves the block on the rail live as you press it, so the consequence is visible before committing. - **Condition label:** uppercase on secondary — NEW, GOOD, WORN, REPAIRED. - **Buttons:** blue fill at 4px radius. ## Do's and Don'ts - Do put the return date first on every item surface. - Do make the calendar rail the primary navigation. - Do keep images at 3:4. - Don't sort a wardrobe by date added. - Don't fill anything with the amber; it underlines. - Don't lift cards on hover in a large grid. - Don't hide the date in a badge over the image.