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 classes
import uiConfig from '@highlight/ui/tailwind.config'
export default {
  ...uiConfig,
  content: ['./src/**/*.{ts,tsx}', '../../packages/ui/src/**/*.{ts,tsx}'],
}

// app entry: tokens, reset, component styles
import '@highlight/ui/base.css'

tsx

import { Button, Dialog } from '@highlight/ui'

export function DeleteThread() {
  return (
    <Dialog>
      <Dialog.Trigger variant="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="secondary">Cancel</Dialog.Close>
          <Dialog.Close variant="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.