Halogen

v4 · published

Engineered calm — cold light on graphite, precise to the pixel.

precisegraphiteluminousrestrained

Halogen is a re-reading of the modern product-tool aesthetic: a near-black graphite canvas where almost nothing glows, so the few things that do feel deliberate. Color is rationed to a whisper — surfaces and borders are barely-there white films, text is a cool off-white at high contrast, and a single electric indigo carries every primary action. A humanist sans does the talking while a mono face stamps the technical details, echoing the engineering culture the source was built for. Motion is fast and restrained, riding one signature easing curve.

re-imagined from https://linear.app

Use in your project

Pull this design system into any project with the synthesisui CLI, then ask your coding agent to build components — it follows the system's tokens, recipes and rules.

1 · Authenticate

npx synthesisui login

2 · Add this design system

npx synthesisui add halogen --version 4

3 · Import the tokens in your global CSS

@import "_synthesisui/ds/halogen/tokens.css";
@import "_synthesisui/ds/halogen/theme.css";

4 · Ask your agent

Add a button using the halogen design system

Color

Primitives and roles.

Named scales forged by the synthesis; semantic roles only ever point at them.

color.blush

300#f9bfe9

400#f79ce0

500#ec6fd0

color.slate

50#ffffff

100#f7f8f8

200#e2e4e7

300#d0d6e0

400#8a8f98

500#62666d

600#383b3f

700#23252a

800#18191c

900#0f1011

950#08090a

color.indigo

300#a5b4ff

400#7c8cff

500#5b6cff

600#4453e6

700#3540b4

color.semantic — resolved live via CSS variables

faint

{color.slate.500}

muted

{color.slate.400}

accent

{color.blush.400}

border

{color.slate.700}

canvas

{color.slate.950}

raised

{color.slate.800}

overlay

{color.slate.700}

primary

{color.indigo.500}

surface

{color.slate.900}

foreground

{color.slate.100}

Typography

The voice of the system.

Display: Inter Variable · Body: Inter Variable · Mono: Berkeley Mono

lgDesign, set free1.25rem / 1.4

smDesign, set free0.875rem / 1.5

xlDesign, set free1.5rem / 1.3

xsDesign, set free0.75rem / 1rem

2xlDesign, set free2rem / 1.2

baseDesign, set free1rem / 1.6

displayDesign, set free4rem / 1.05

Motion

How it breathes.

Every keyframe runs live below, dressed in the system's own colors — durations, easing curves and the interactions they power.

keyframes — 7 live

rise

blink

float

pulse

sheen

expand

slide-in

easings

outease-out

swiftcubic-bezier(0.25, 0.46, 0.45, 0.94)

standardease

durations

base · 200msfast · 120msslow · 320msambient · 3.5s

interaction patterns

enterentrance

Content rises a short distance as it fades in.

hoverhover-raise

Interactive surfaces brighten their ring on hover.

loopcursor-blink

The command-bar caret blinks with mechanical precision.

enterlist-stagger

Rows slide in from the left in quick succession.

loopambient-pulse

Status dots breathe at a calm, steady cadence.

pressunderline-grow

Active tab underline expands from the center.

Components · 11

Recipes, rendered live.

Every value below is a token reference resolved by the renderer — hover, toggle and switch tabs to feel the states. Bespoke components are rendered from their anatomy hint.

ds-card

Graphite surface defined by a hairline ring rather than a border; raises on hover.

emphasis

default

A card wearing this system.

elevated

A card wearing this system.

ds-tabs

Segmented control; the active segment lifts onto a surface.

tone

ds-alert

Inline message. Tone maps onto the system's own semantic accents.

tone

accent

A message wearing this system.

neutral

A message wearing this system.

primary

A message wearing this system.

ds-badge

Mono-stamped label for technical metadata; accent variant uses the blush highlight.

intent

accentneutral

ds-input

Quiet field that reveals an indigo focus ring on interaction.

tone

ds-avatar

Identity token — sized circle with initials or image.

size

MAMAMA

ds-button

Compact, low-radius action. Primary carries the lone indigo; the rest stay in graphite films.

intent

ds-select

Field trigger that reveals a focus ring on interaction.

tone

Choose an option

ds-switch

Binary toggle — the track wears the system, on flips primary.

size

ds-progress

Determinate track — the fill carries the primary.

tone

ds-command-bar

bespoke · field

⌘K launcher — the product's front door.

tone