--- version: alpha name: Craft Zine description: Warm risograph paper, oversized numerals, terracotta ink. An independent magazine that happens to be a product. meta: id: "theme-craft-zine" model: "Claude Opus 5" author: "Claude Code" createdAt: "2026-08-29T15:33:37+09:00" updatedAt: "2026-08-29T15:33:37+09:00" version: "1.0.0" isNew: false lookbook: tagline: Independent magazine energy on warm paper stock bestFor: Editorial products, curated feeds, indie SaaS, newsletters, community showcases avoidFor: Dense analytics, financial dashboards, enterprise admin consoles defaultMode: light surfaceStyle: ruled accentUse: bar caseStyle: labels-upper borderWidth: 1px imageTreatment: warm motion: intensity: 3 duration: 160ms ease: "cubic-bezier(0.16, 1, 0.3, 1)" signature: "Colour and rule shifts. Paper does not float, so nothing lifts." displayFont: Bricolage Grotesque displayKind: sans bodyFont: Public Sans monoFont: JetBrains Mono colors: background: "#F5F0E4" foreground: "#1B1815" card: "#FFFDF7" card-foreground: "#1B1815" popover: "#FFFDF7" popover-foreground: "#1B1815" primary: "#B8431A" primary-foreground: "#FFFDF7" secondary: "#E7DFCC" secondary-foreground: "#3D362A" muted: "#E7DFCC" muted-foreground: "#675E4E" accent: "#55663A" accent-foreground: "#FFFDF7" destructive: "#A32B1E" destructive-foreground: "#FFFDF7" border: "#D6CAB0" input: "#D6CAB0" ring: "#B8431A" chart-1: "#B8431A" chart-2: "#55663A" chart-3: "#9A7318" chart-4: "#7A5233" chart-5: "#3F3A31" colorsDark: background: "#17140F" foreground: "#F2ECDE" card: "#201C15" card-foreground: "#F2ECDE" popover: "#201C15" popover-foreground: "#F2ECDE" primary: "#E9773F" primary-foreground: "#1A1005" secondary: "#2C271D" secondary-foreground: "#E6DECB" muted: "#2C271D" muted-foreground: "#A79C86" accent: "#9BB068" accent-foreground: "#17200C" destructive: "#F2705A" destructive-foreground: "#2A0B05" border: "#383226" input: "#383226" ring: "#E9773F" chart-1: "#E9773F" chart-2: "#9BB068" chart-3: "#D9AE52" chart-4: "#C08A6A" chart-5: "#C9BFA8" typography: display-lg: fontFamily: Bricolage Grotesque fontSize: 60px fontWeight: 700 lineHeight: 1.02 letterSpacing: -0.035em headline-lg: fontFamily: Bricolage Grotesque fontSize: 32px fontWeight: 600 lineHeight: 1.12 letterSpacing: -0.02em headline-md: fontFamily: Bricolage Grotesque fontSize: 21px fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.01em body-lg: fontFamily: Public Sans fontSize: 17px fontWeight: 400 lineHeight: 1.65 body-md: fontFamily: Public Sans fontSize: 15px fontWeight: 400 lineHeight: 1.6 body-sm: fontFamily: Public Sans fontSize: 13px fontWeight: 400 lineHeight: 1.5 label-caps: fontFamily: Public Sans fontSize: 11px fontWeight: 600 lineHeight: 1 letterSpacing: 0.14em label-mono: fontFamily: JetBrains Mono fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em numeral-xl: fontFamily: JetBrains Mono fontSize: 44px fontWeight: 700 lineHeight: 1 letterSpacing: -0.03em rounded: none: 0px sm: 2px md: 4px lg: 4px xl: 6px full: 9999px spacing: base: 16px xs: 4px sm: 8px md: 16px lg: 28px xl: 56px gutter: 24px margin: 32px measure: 68ch components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" rounded: "{rounded.md}" padding: 12px button-secondary: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" rounded: "{rounded.md}" padding: 12px card-article: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" rounded: "{rounded.md}" padding: 24px badge-label: backgroundColor: "{colors.secondary}" textColor: "{colors.secondary-foreground}" typography: "{typography.label-caps}" rounded: "{rounded.sm}" --- # Craft Zine ## Overview Craft Zine reads like a small-press magazine that someone laid out with care and printed two colours at a time. The page is warm paper, never white. Content is ranked out loud — items carry a big mono numeral the way a zine numbers its pieces — and the voice is confident and human rather than corporate. Use it when the product's value is *editorial judgment*: someone picked these things, and the interface should say so. It rewards products with fewer, richer items and punishes wall-to-wall data. Personality: opinionated, tactile, unhurried. Never slick, never neutral. ## Colors Two inks on warm stock, exactly like a risograph run. - **Primary (#B8431A):** Terracotta. The single interaction colour — buttons, active states, the rule under a section title. If two things on a screen are terracotta, one of them is wrong. - **Accent (#55663A):** Field olive. Reserved for the *second* semantic class — verified state, secondary data series, editorial marginalia. Never a button. - **Neutral (#F5F0E4 → #FFFDF7):** Warm limestone page with a lighter card stock on top. Pure `#FFFFFF` is banned; it breaks the paper illusion. - **Foreground (#1B1815):** Warm-black ink, not a cold grey. Dark mode is not an inversion — it is the same zine printed on kraft board. Backgrounds keep their yellow bias and the terracotta lifts to `#E9773F` so it stays legible on dark stock. ## Typography Bricolage Grotesque for anything that behaves like a headline, Public Sans for reading, JetBrains Mono for anything countable. - **Display / headlines:** Bricolage Grotesque, tight tracking, set big. A hero headline should feel one size too large for its box. - **Body:** Public Sans at 15–17px with a generous 1.6 line height, capped at a 68ch measure. Long-form comfort is the point. - **Labels:** Public Sans 11px, uppercase, `0.14em` tracking. Labels are always uppercase in this system; headings never are. - **Numerals:** JetBrains Mono. Ranks, counts, prices and dates are always mono so columns line up and numbers read as *facts*. ## Layout A 12-column grid with a hard 1200px max width and unusually large gutters (24px) so cards breathe. Vertical rhythm is an 8px scale with a 4px half-step. Sections are separated by a full-bleed 1px rule in `border`, with the section title sitting on the rule — a masthead, not a floating heading. Feature items may break the grid and span 8 of 12 columns; supporting items stay at 4. ## Elevation & Depth There are no shadows. Depth comes from **paper layers and rules**: the page is `background`, content sits on `card`, and everything is separated by a hairline `border`. A "raised" element is one that is lighter and ruled, never one that floats. ## Shapes Near-square. 4px is the maximum radius for cards, buttons and inputs; 2px for badges. The tension between soft warm colour and hard corners is the whole visual idea — do not round anything to make it friendlier. Images are cropped to hard rectangles with a 1px border, like a pasted-in plate. ## Components - **Buttons:** solid terracotta with white-paper text, 4px radius, 12px padding, no gradient and no shadow. Secondary buttons are card-coloured with a 1px border. Hover darkens the fill; it does not lift. - **Cards:** card stock, 1px border, 24px padding, a mono rank numeral in the top-left corner, headline, one-line dek, then a metadata row in uppercase labels with mono values. - **Badges:** uppercase label type on `secondary`, 2px radius, 4px/8px padding. - **Tables:** ruled rows only — no zebra striping, no vertical borders. Numeric columns are mono and right-aligned. - **Inputs:** 1px border, 4px radius, card background, terracotta focus ring at 2px offset. ## Do's and Don'ts - Do keep exactly one terracotta element per screen region. - Do set headlines one size larger than feels safe. - Do use mono for every number a user might compare. - Don't use pure white or pure black anywhere. - Don't add shadows, glows or gradients — rules and paper only. - Don't uppercase a heading; only labels are uppercase. - Don't push past ~12 cards per view. This system gets tiring when it gets dense.