command-bar
bespoke · field⌘K launcher - the product's front door.
Engineered calm - cold light on graphite, precise to the pixel.
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
Pull this design system into any project - it follows the system's tokens, recipes and rules. Run the commands yourself, or let your coding agent set it up and build.
Make Halogen yours
Give it a name and it becomes a system in your account - with your dashboard, the checks your agent sends, and Autopilot. Then two commands bring it into your project.
Or pull the gallery version as it is, without an account:
npx synthesisui@latest init --styles tailwind --ds halogennpx synthesisui@latest connectnpx synthesisui@latest connectUse the "Halogen" design system (slug: halogen) to: build the UI I describe next First make sure it's installed: run `npx synthesisui add halogen` if `_synthesisui/ds/halogen/` isn't in the project yet. Read these files first (highest authority first): - _synthesisui/ds/halogen/rules.md - project rules for this system (if present); obey them above everything else - _synthesisui/ds/halogen/philosophy.md - the mission, voice and principles (if present); let it shape every screen - _synthesisui/ds/halogen/v19/GUIDE.md - how to apply the system, the recipes and the token vocabulary Follow this contract (target framework: next): - First check whether this refers to UI that already exists in the project. If it does, modify only what's needed and keep the rest intact and on-system. If it doesn't, build it new. - Scope the markup with `data-ds="halogen"` (or rely on it at the app root). - Style with the design system only: reuse the `.ds-*` recipe classes and the DS-backed Tailwind utilities (`bg-primary`, `text-foreground`, `p-md`, `rounded-lg`, `font-display`…). Never use raw hex/px outside the system's scale. - Make sure `tokens.css` + `theme.css` are imported in the global CSS (see the GUIDE's "How to apply"). - Implement the behavior yourself (open/close, focus, routing) - the system ships the looks, not the JS. Composition (make it look composed, not just correct): - Cap page content with a max-width container and center it - this DS ships `max-w-app` for dashboards/wide UI and `max-w-prose` for text columns. Don't stretch content edge-to-edge. - Give the page a complete, intentional layout: clear vertical rhythm, sensible density and grouped sections. Never leave a single thin row floating on an empty screen. Deliver senior-level, production-quality code: clean structure, accessible (ARIA + keyboard), and responsive.
Paste into Claude Code, Cursor or any coding agent. From your project you can also run npx synthesisui use halogen "…".
What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.
The system ships token names, not the fonts. Load them (Google Fonts, next/font or Fontsource) or type falls back to a generic family and loses the system's identity.
npm i lucide-reactComponents reference Lucide icon names. Install it (or swap in your own icon set) to render them.
Color
Named scales forged by the synthesis; semantic roles only ever point at them.
color.moss
375#85c2a3
400#4f9d76
500#3f8a66
550#428362
color.rose
375#eda0aa
400#e0576a
450#d9394e
500#cf3f54
color.veil
500#05070ab3
color.amber
375#d5af6a
400#c9973f
500#b3842f
550#96702a
color.blush
300#f9bfe9
400#f79ce0
500#ec6fd0
550#db12a8
color.slate
50#ffffff
100#f7f8f8
200#e2e4e7
300#d0d6e0
350#b1b5ba
400#8a8f98
500#62666d
600#383b3f
700#23252a
800#18191c
900#0f1011
950#08090a
color.indigo
300#a5b4ff
350#a4b0ff
380#9ea8ff
400#7c8cff
500#5b6cff
550#4e65ff
580#4c5eff
600#4453e6
700#3540b4
color.semantic - resolved live via CSS variables
info
{color.indigo.350}
faint
{color.slate.500}
muted
{color.slate.350}
scrim
{color.veil.500}
accent
{color.blush.400}
border
{color.slate.700}
canvas
{color.slate.950}
danger
{color.rose.375}
raised
{color.slate.800}
overlay
{color.slate.700}
primary
{color.indigo.380}
success
{color.moss.375}
surface
{color.slate.900}
warning
{color.amber.375}
foreground
{color.slate.100}
color.series - categorical data-viz palette (bg-series-*)
series-1
series-2
series-3
series-4
series-5
series-6
series-7
series-8
Foundations
Corner radius, spacing rhythm and elevation - the physical feel of the system.
radius
spacing
shadow
Typography
Display: Inter Variable · Body: Inter Variable · Mono: Berkeley Mono
Motion
Every keyframe runs live below, dressed in the system's own colors - durations, easing curves and the interactions they power.
keyframes - 7 live
easings
durations
interaction patterns
Content rises a short distance as it fades in.
Interactive surfaces brighten their ring on hover.
The command-bar caret blinks with mechanical precision.
Rows slide in from the left in quick succession.
Status dots breathe at a calm, steady cadence.
Active tab underline expands from the center.
Components · 7
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.
⌘K launcher - the product's front door.
Graphite surface defined by a hairline ring rather than a border; raises on hover.
padding
A card wearing this system.
A card wearing this system.
emphasis
A card wearing this system.
A card wearing this system.
Mono-stamped label for technical metadata; accent variant uses the blush highlight.
intent
Quiet field that reveals an indigo focus ring on interaction.
Identity token - sized circle with initials or image.
size
Compact, low-radius action. Primary carries the lone indigo; the rest stay in graphite films.
intent
Field trigger that reveals a focus ring on interaction.
Icons · lucide
Icons inherit the system: color via currentColor, a standardized stroke, sizing on the scale. Lucide by default; more libraries can be enabled per system.
Pages
Halogen has no ready-made page. It has 33 sections, and this is what 6 of them make together. Yours starts from the same pieces.
Your main colour buttons and links
Text on your buttons: 9:1 - readable.
The more you say about who it is for and what they should do, the less the agent has to guess.
How much can the agent invent?
In your project, install Halogen once
npx synthesisui@latest init --ds halogenYour agent reads Halogen's tokens and rules from the folder this creates.
Paste this into your agent Claude Code, Cursor, Codex…
Build a landing page with SynthesisUI in the system "halogen".
My request: "a landing page"
Before you start: if this project does not have the halogen design system yet, run `npx synthesisui@latest add halogen`. If any SynthesisUI command asks to sign in (or says the system does not exist), run `npx synthesisui@latest login`, tell me to sign in in the browser, and wait.
Fonts: `add` writes a `fonts.ts` that loads this system's type with next/font. Import it in the root layout and put each export's `.variable` on `<body>`, as `add` prints - the templates read those variables. Don't replace it with a Google Fonts link.
Top to bottom, write each section with its template, then render it in one page, with the content written from my request:
1. npx synthesisui@latest template halogen nav-top-bar
content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
phone menu: npx synthesisui@latest template halogen phone-menu, then pass it as <AppNav PhoneMenu={PhoneMenu} ... /> so the links stay on phones. Every link that starts with # points at a section of this page: give that section the id; if no section matches, leave the item out and tell me.
text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"brand":42,"items.label":60}
2. npx synthesisui@latest template halogen hero
content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"action.label":26,"line":46,"link.label":56,"name":8,"options.name":118,"specs.label":38,"specs.value":40}
3. npx synthesisui@latest template halogen pricing-lead
content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"compare.label":50,"plans.action.label":24,"plans.facts":80,"plans.name":18,"plans.price":7,"plans.who":39,"title":42}
4. npx synthesisui@latest template halogen testimonials-lead
content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"all.label":52,"title":42,"voices.detail":40,"voices.name":33,"voices.quote":118}
5. npx synthesisui@latest template halogen closing-band
content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"action.label":31,"fact":60,"title":40}
6. npx synthesisui@latest template halogen footer-columns
content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"address":98,"brand":29,"columns.links.label":24,"columns.title":35,"email":52,"legal.label":48,"line":112}
Text between asterisks is emphasis: render it as <em>. Keep my words as I wrote them. Where you write the text, stay within each section's text limits.
A button or link whose href is anything other than # goes exactly where I set it - use that address as written. An href of # is yours to point at the right page of this project.
You may go beyond the list: swap a section for another variant of the same kind (`npx synthesisui@latest landing halogen` lists them), reorder the body, or break one layout rule on purpose when my goal calls for it. Tell me which and why.