Greenhouse Catalogue

About Greenhouse Catalogue

Overview

Greenhouse Catalogue is for online shops that should read like a printed magazine. Product pages are stories, collection pages are spreads, and checkout is the quiet last page. Hierarchy comes from a 64px display headline against 16px body text, wide margins and one green action color (primary). Every other surface is warm paper and ink, so photography and copy carry the page.

Color

Neutrals are warm paper to ink (hue ~45, low chroma). neutral.50 #faf8f3 is the page and neutral.950 #181714 is the text, so nothing renders as cool grey. Brand green (hue ~150) is the only chromatic accent. Use it for primary, ring, links and accent fills. Success is a bluer teal (hue ~170) so confirmations never read as a call to action. Destructive is a crimson (hue ~345), far from green in both modes. The warning ramp was re-curved so chroma rises smoothly to 400–500 instead of jumping, which removes the muddy 300 step. Light contrast: primary-foreground on primary is 5.1:1, destructive-foreground on destructive 5.6:1, muted-foreground on muted 6.6:1, and primary on background 4.8:1. Dark contrast: primary-foreground on primary is 6.7:1, destructive 6.3:1, warning 6.9:1, and muted-foreground on muted 6.2:1.

Typography

The scale is a major third (1.25) from a 16px base, rounded to the 4px grid: 16, 20, 24, 32, 48, 64. The 39px step is skipped on purpose, so the display sizes jump hard like a masthead. 18px (body-lg) is a half-step for lead paragraphs. Sora (600/700) is used only at 32px and above: display-lg, display-md and heading-lg. Its tracking tightens from -0.02em at 32px to -0.035em at 64px. Plus Jakarta Sans (400–700) sets heading-md and below, body, labels, forms and prices. Body line heights land on the grid: 16/26, 18/28 and 14/22. JetBrains Mono (400/500) is only for SKUs, order numbers and codes.

Layout

Spacious density on a 4px grid. Section gaps are {space.16}–{space.24} (64–96px), and card padding is {space.8} (32px). Use a 12-column grid with a 1200px max content width. Long-form editorial copy sits in a 640px column. Hero headlines leave one empty column beside them.

Elevation

Print is flat, so the system is too. Cards separate from the page with a 1px border and whitespace. Their shadow.sm is a 5% ink tint and is barely visible. shadow.md is for menus and popovers. shadow.lg is for dialogs and the sticky cart drawer. In dark mode, depth comes from surface steps rather than shadows: background #181714, card #211f1b, then popover and muted at neutral.900 and neutral.800.

Shapes

Radii are small, like trimmed paper: {radius.md} 4px on buttons and inputs, {radius.lg} 6px on cards. {radius.full} is only for badges and avatars. Product imagery is never rounded beyond 6px.

Do

• Set page and collection titles in display-lg (Sora 64/68, -0.035em) or display-md (Sora 48/52, -0.03em), and follow them directly with body-lg (18px) so the size jump is at least 2.6×.
• Give each view one primary button for the main action, such as Add to bag or Checkout. Use secondary (neutral.100 fill) or ghost buttons for every other action.
• Show a 2px ring (brand.600 light, brand.400 dark) at a 2px offset on every focused button, input, link and product card.
• Keep section gaps at {space.16}–{space.24} and card padding at {space.8}. Keep at least {space.4} between form fields.
• Cap editorial copy at 640px (65–75 characters) in body-md (16/26) or body-lg (18/28).
• Set prices and quantities in Plus Jakarta Sans with font-feature-settings 'tnum'. Use the code token (JetBrains Mono 14/22) only for SKUs and order IDs.
• Separate cards with a 1px border token. Use shadow.md for menus and popovers, and shadow.lg for dialogs and the cart drawer.
• Set category kickers above headlines in uppercase caption (12/16, 600, 0.05em) using muted-foreground.

Don’t

• Don't set Sora below 32px (heading-lg). heading-md (24px) and anything smaller, including forms, tables, prices and buttons, use Plus Jakarta Sans.
• Don't put a second saturated color on a screen. Primary green is the only accent. Sale and error states use destructive or warning tokens, at most once per product card.
• Don't use primary or brand green for errors or out-of-stock states. Use destructive (danger.600 light, danger.400 dark).
• Don't use success teal for buttons or links. It only marks completed states such as 'Order placed' or 'In stock'.
• Don't round corners beyond {radius.lg} (6px) on cards or {radius.md} (4px) on buttons and inputs, and never round product imagery beyond 6px.
• Don't use #000000 or cool greys. Text uses neutral.950 (light) or neutral.50 (dark), and hairlines use border (neutral.200 light, neutral.800 dark).
• Don't place muted-foreground text on brand or accent fills. Use accent-foreground (brand.900 light, brand.100 dark) instead.
• Don't reduce button or input height below 48px, or badge height below 24px.