--- version: alpha name: Allotment description: Olive on olive so the orchid can mean “this week”: a twelve-cell month band pinned to every screen, and nothing sorted alphabetically. meta: id: "theme-allotment" 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: The year is the navigation. bestFor: Gardening and planting planners, seed catalogues, seasonal produce, farm and smallholding management, phenology avoidFor: Anything aseasonal, real-time tools, alphabetical reference works defaultMode: light surfaceStyle: ruled accentUse: bar caseStyle: labels-upper borderWidth: 1px imageTreatment: warm motion: intensity: 2 duration: 260ms ease: "cubic-bezier(0.33, 1, 0.68, 1)" signature: "Filtering slides the month band, not the content. The year is fixed furniture; the list underneath is what moves." displayFont: Vollkorn displayKind: serif bodyFont: Gantari monoFont: Lekton colors: background: "#CBC6B9" foreground: "#000000" card: "#BEBDBA" card-foreground: "#000000" popover: "#BEBDBA" popover-foreground: "#000000" primary: "#606216" primary-foreground: "#FBFAF7" secondary: "#B4B3AF" secondary-foreground: "#000000" muted: "#B4B3AF" muted-foreground: "#49452F" accent: "#764E96" accent-foreground: "#FBFAF7" destructive: "#A82321" destructive-foreground: "#FBFAF7" border: "#A5A4A1" input: "#A5A4A1" ring: "#606216" chart-1: "#666929" chart-2: "#297B67" chart-3: "#2B6189" chart-4: "#876495" chart-5: "#7D4330" colorsDark: background: "#1B170E" foreground: "#E4E3D7" card: "#22201C" card-foreground: "#E4E3D7" popover: "#22201C" popover-foreground: "#E4E3D7" primary: "#B5B970" primary-foreground: "#100D08" secondary: "#2D2A25" secondary-foreground: "#E4E3D7" muted: "#2D2A25" muted-foreground: "#949385" accent: "#AA81CD" accent-foreground: "#100D08" destructive: "#FF8D82" destructive-foreground: "#100D08" border: "#393732" input: "#393732" ring: "#B5B970" chart-1: "#B0B373" chart-2: "#67B69F" chart-3: "#86BDE9" chart-4: "#B08BBF" chart-5: "#EEAB95" typography: display-lg: fontFamily: Vollkorn fontSize: 52px fontWeight: 600 lineHeight: 1.08 letterSpacing: -0.02em headline-lg: fontFamily: Vollkorn fontSize: 30px fontWeight: 600 lineHeight: 1.18 letterSpacing: -0.01em headline-md: fontFamily: Vollkorn fontSize: 19px fontWeight: 600 lineHeight: 1.32 body-lg: fontFamily: Gantari fontSize: 16.5px fontWeight: 400 lineHeight: 1.64 body-md: fontFamily: Gantari fontSize: 15px fontWeight: 400 lineHeight: 1.62 body-sm: fontFamily: Gantari fontSize: 13px fontWeight: 400 lineHeight: 1.5 label-caps: fontFamily: Gantari fontSize: 10.5px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.14em label-mono: fontFamily: Lekton fontSize: 13px fontWeight: 400 lineHeight: 1.45 numeral-xl: fontFamily: Lekton fontSize: 44px fontWeight: 600 lineHeight: 1.02 letterSpacing: -0.015em rounded: none: 0px sm: 3px md: 5px lg: 7px xl: 10px full: 9999px spacing: base: 16px xs: 4px sm: 8px md: 16px lg: 26px xl: 48px gutter: 18px margin: 28px measure: 66ch 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: "{colors.secondary}" textColor: "{colors.secondary-foreground}" typography: "{typography.label-caps}" rounded: "{rounded.sm}" --- # Allotment ## Overview Allotment organises by the year. Its structural rule is that **a twelve-cell month band is pinned to the top of every screen** and is the primary filter — not a dropdown, not a date picker, a permanent strip of twelve cells with the current month marked. Everything below it is scoped to the selection. The corollary rule is that **nothing is sorted alphabetically**. Seed lists, task lists, crop lists — all of them sort by their season. An alphabetical seed catalogue is a catalogue for a warehouse; a gardener wants to know what goes in now, and "Aubergine" being first is an accident of language. Olive on olive, so that an orchid can mean this week. It suits planning, catalogues and smallholdings. It is wrong for anything aseasonal. ## Colors Two olives and one flower. - **Ground:** warm olive-grey, a mid-tone. Cards go lighter, the sown/harvested wells go darker. - **Primary (olive green):** structure and action. It is close enough to the ground that the page reads as one material — soil, essentially. - **Accent (orchid):** a **bar**, and it means *now*: the current month cell, the active band in a sowing chart, the 4px marker on a task due this week. Solved to 3:1, and it is the only non-olive thing on the page. - **Neutrals** are olive-tinted with almost no step (0.029), which keeps the page soft and makes the orchid land hard. - Charts are polychrome, but the palette is drawn from crop families rather than a generic ramp, so a chart of beds reads as a planting plan. ## Typography Vollkorn for headings, Gantari for body, Lekton for dates and quantities. - **Display:** Vollkorn at 600, 52px. A warm, slightly rustic serif with strong bracketed serifs; it looks like a seed catalogue and that is the reference. - **Body:** Gantari at 15px, 1.62, 66ch. A clean humanist sans that stays neutral against the Vollkorn. - **Lekton** for sowing depths, spacings, days-to-maturity and dates. It is a narrow typewriter mono and it fits the many small numbers this system carries. - Uppercase at 0.14em for month names in the band and for section labels. ## Layout **The month band, then the list.** Twelve equal cells across the full width, 40px tall, uppercase three-letter month names in the band, orchid bar under the selected month. It is pinned and it appears on the catalogue, the plan, the task list, the crop page and the journal. Below it, content is ruled rather than carded — 1px hairlines between rows, 26px between sections. Cards are reserved for a single crop's detail. The sowing chart is the second signature: a crop row with twelve cells, each filled at one of three strengths for sow / plant out / harvest. Reading down a column tells you the month; reading across tells you the crop. It is the same twelve cells as the band, deliberately. A 12-column grid at 1240px with 18px gutters. ## Elevation & Depth Tonal in both directions from the mid ground, and ruled. Shadows are soft and used on the one open panel. The month band itself has a 1px bottom border and no shadow, even when the page scrolls beneath it — a shadow there would make the band feel temporary, and it is furniture. Filtering slides the band's marker, not the content. The list below re-renders without animation; a list that animates on every filter change is slow to use. ## Shapes Moderate — 3px on controls, 5px on cards. Nothing sharp, nothing pill-shaped except the crop-family chips. Photography is warm-graded: soil, seed packets, hands, sheds, frost on a bed. Never a perfect vegetable on a white background. ## Components - **Month band:** 12 cells, uppercase, 40px, 4px orchid bar under the selected cell. Pinned to every screen. The only always-present navigation. - **Sowing chart row:** crop name at the left, 12 cells at three fill strengths, days-to-maturity in Lekton at the right. - **Task row:** due date in Lekton in a 72px gutter, task, bed reference, and a 4px orchid left bar if it falls in the selected month. - **Seed packet card:** Vollkorn name, latin name in italic body-sm, sowing depth and spacing in Lekton, a 12-cell mini-band. - **Buttons:** olive fill, 3px radius. ## Do's and Don'ts - Do pin the month band to every screen. - Do sort by season everywhere. - Do reuse the same twelve cells for the band and the sowing chart. - Don't sort a seed list alphabetically. - Don't replace the band with a date picker. - Don't use the orchid for anything other than "now". - Don't animate the list on filter change.