Reference

Design system

The building blocks of the site’s visual language. Icons are 24×24, stroke-only, and inherit text color via currentColor, so they adapt to context and theme.

Icons

38 icons

Navigation

  • chevron-left
  • chevron-right
  • chevron-up
  • chevron-down
  • arrow-right
  • arrow-up-right
  • menu
  • close

View controls

  • layout-grid
  • list

Content status

  • lock
  • unlock
  • star
  • eye

Actions

  • check
  • check-circle
  • trash
  • pencil
  • rotate-ccw
  • send
  • shield

Feedback

  • info
  • help
  • alert
  • clock

Booking & auth

  • calendar
  • mail
  • log-in
  • log-out
  • user

Domains

  • dashboard
  • file-text
  • briefcase
  • book
  • message
  • settings
  • plug
  • sparkles

Usage: import { LockIcon } from "@/components/icons/brand". Add or edit icons in scripts/build-icon-library.mjs and re-run it.

Spot illustrations

duotone · light / dark

A richer tier of the same concepts, for empty states, section headers, and CTA bands. Each is a single source that swaps --spot-fg / --spot-bg on a [data-dark] surface — the rainbow stays constant.

  • workWork / craft
  • calendarCalendar / booking
  • messageMessage / inbox
  • sparklesSparkles / AI
  • bookBook / reading
  • consultingConsulting / strategy
  • profileProfile / about
  • invoiceInvoice / payment
  • gatedGated / locked
  • documentDocument / writing
  • not-foundNot found / 404
  • healthcareHealthcare / Glytec
  • dashboardDashboard / overview
  • search-emptySearch / no results
  • design-infraDesign is infrastructure
  • ai-toolAI is a tool, not taste
  • data-partnerData is a partner
  • fundamentalsStudy the fundamentals