Dev Tools
Components
Single source of truth for all utility components. Every reusable section, block, or UI pattern lives here — content pages use instances only.
PageHeader
Standard page header with optional badge and description.
CodeBlock
Code snippet display with optional title bar and language label.
TabToggle
Underline-style tab navigation bar with URL hash sync.
SegmentedControl
Pill-style segmented button group for switching between options.
StatusBadge
Color-coded status indicator label (ready, in-progress, planned).
TokenTable
Design token list with name, value, and visual preview column.
Switch
iOS-style toggle switch for binary on/off settings.
ThemeToggle
Light/dark mode toggle button with localStorage persistence.
PortableText
Renders Sanity rich text (blocks, images, marks) as semantic HTML.
FigmaImage
Displays images synced from Figma via Sanity. Fetches by frame name with aspect ratio, width variant, and fit mode.
ImageRow
Flex row container for FigmaImage. Handles gap-aware layout so variant widths (half, third, quarter) never overflow.
Columns
Equal-width CSS grid layout primitive. Splits content into 1–4 columns with a fixed 16px gap. Use for cards, thumbnails, and content previews.
TextSection
Prose block with optional heading, body, and button slot. Default variant for inline use (50% width); card variant for use inside Columns or as a standalone card (fills width, vertically centered).
Perex
Large emphasized text block for key brand messages. Headline-sm size, primary color, 50% width constraint.
ContentGuide
TLDR block with three neutral cards — Purpose (blue badges), Usage (green), Avoid (red). Icon + optional badges + bullet list per card.
Thumbnail
Clickable card for category overviews and hub pages. Image + heading + optional description. Fills its grid cell — use inside Columns count={2} or count={3}.
DoDont
Guideline card showing correct (green) or incorrect (red) usage. Image + themed icon + heading + optional description. Fills its grid cell — mix do/dont freely inside Columns.
DownloadButton
Compact clickable card for downloading files. Green icon box + filename with extension + upload date. Auto-width, sits inline in content.
ContentPreview
Versatile showcase box for text, SVG, or image content. Four size variants (full, half, third, quarter) with size-aware padding. Use inside Columns for brand values, taglines, logo showcases, or moodboards.
SurfaceDemo
Live preview of one surface elevation: card painted with fill + border + shadow/blur tokens, with usage notes and token reference. Used on the Surface Elevations foundations page.
ComparisonSlider
Before/after slider with two slots and a draggable vertical divider. Used to compare light and dark themes of the same scene.
SemanticColorDemo
Grid of color swatches showing tokens in context. Three modes: content (text), fill (rectangles), border (bordered squares).
CollapsibleTokenTable
TokenTable wrapped in a disclosure element with chevron and token count badge. Used for interaction state sections.
TokenTag
Inline code badge for displaying design token names. Mono font, neutral-soft fill, primary text color.
Section
Content section wrapper. Groups related components (ImageRow + TextSection, Columns, etc.) into one block with 16px internal gap. Content-flow applies 64px spacing between sections.