Greenhouse Design System

Field Notes

A record of what's been planted, pruned, and tended to in the Greenhouse.


Added

  • Field Notes page - a versioned changelog of all work shipped to the Greenhouse
  • Field Notes entry in the sidebar navigation with a current version badge

Fixed

  • Bug fixes to demo page

Added

  • Sidebar search — client-side type-ahead filtering across Foundations and Components
  • Subsection-level search results powered by per-page meta.ts files
  • SidebarSearchContext to share search state between the input and the nav

Added

  • Interactive demo playground extended to all 17 component pages

Added

  • Interactive demo playground introduced on the Button page as a proof of concept
  • Tabbed Overview + Demo layout with live prop controls and an inverse-theme JSX code block
  • Demo controls dogfood the system — built using Dropdown, Toggle, and TextInput

Added

  • Typography system — Plus Jakarta Sans (body and UI), Fraunces (expressive headings), Fira Code (code blocks)
  • All three typefaces wired up via next/font/google with semantic CSS variables
  • Typefaces section and pill-variant Tabs font switcher added to the typography documentation page

Fixed

  • Fira Code now applies to inline code (previously bypassed by a hardcoded system monospace stack)

Added

  • Active state highlighting on sidebar navigation links
  • aria-current support for assistive technologies

Added

  • Mobile-responsive docsite — full-screen drawer navigation below the 1024px breakpoint
  • DocShell client component to manage mobile nav state
  • NavLink component to replace raw Link usage in the sidebar

Changed

  • Checkbox documentation page reformatted to match the divider-based layout used across other component pages

Added

  • 17 components — Alert, Avatar, Badge, Button (with icon prop and icon-only variant), Card, Checkbox, Divider, Dropdown, Modal, Radio, Spinner, Tabs, Tag, Text Input, Toast, Toggle, Tooltip (Stage 1 positioning)
  • Three-layer color token architecture — scales, named palette, semantic tokens — with full dark mode support
  • Spacing system on a 4px grid
  • 64 Phosphor icons hand-selected across 9 categories
  • Sticky sidebar navigation with dark mode toggle
  • Landing page and standardized divider-based component documentation pages