Skip to content
Highlight

OverviewUpdated Sep 9, 2026

Introduction

The Highlight design system in code. Foundations and primitives from @highlight/ui, rendered from the same source the desktop app ships, so what you see here is what a user gets.

What this is

One place for designers, engineers, and agents to see the current state of the UI kit: every token, every primitive, every variant, with the exact code that produces it. Each example on a component page is a real file that imports from @highlight/ui; the code shown is that file's source.

The goal is to make it easy to get something 80% there fast. Compose from these primitives, keep the tokens, and the result already matches the product.

Principles

  • Design is foundational, not a polish pass. Loop design in during planning; share early, at any fidelity.
  • Primitives before bespoke. New UI composes @highlight/ui parts first. Extend with className, not forks.
  • Semantic tokens. text-foreground, bg-background, border-border. Light and dark are two values of one token; components never branch on theme.
  • The quality bar is visible. If an agent or a teammate drifts from it, this site is the reference to point at.

Using the package

Any React app in the monorepo can consume the package directly from source.

tsx
// package.json"dependencies": { "@highlight/ui": "workspace:*" } // tailwind.config.ts: inherit tokens, scan the package for classesimport uiConfig from '@highlight/ui/tailwind.config'export default {  ...uiConfig,  content: ['./src/**/*.{ts,tsx}', '../../packages/ui/src/**/*.{ts,tsx}'],} // app entry: tokens, reset, component stylesimport '@highlight/ui/base.css'
tsx
import { Button, Dialog } from '@highlight/ui' export function DeleteThread() {  return (    <Dialog>      <Dialog.Trigger variant="primary" tone="danger">Delete</Dialog.Trigger>      <Dialog.Content>        <Dialog.Header>          <Dialog.Title>Delete this thread?</Dialog.Title>          <Dialog.Description>This cannot be undone.</Dialog.Description>        </Dialog.Header>        <Dialog.Footer>          <Dialog.Close variant="outline">Cancel</Dialog.Close>          <Dialog.Close variant="primary" tone="danger">Delete</Dialog.Close>        </Dialog.Footer>      </Dialog.Content>    </Dialog>  )}

Design process

  • Designers join at the planning phase of a project, before scope is set.
  • Regular checkpoints: share thoughts, ideas, and prototypes as soon as they exist. Low, mid, or high fidelity, anything that changes what a user sees or does.
  • Err on the side of looping designers in too much. Prototype in the playground with these primitives and share the link.

What is next

  • Typography, spacing, shadow, and motion foundations.
  • Agent skills for using the kit, with per-component examples generated from this site.
  • Syncing tokens and components to Figma via the Figma MCP.
  • Track progress in the Design Foundations project.