Gallery/halogen

Halogen

v19 · 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 - 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:

1 · Brings the system in
npx synthesisui@latest init --styles tailwind --ds halogen
2 · Turns the check and the tools on
npx synthesisui@latest connect
2 · Turn the check and the tools on
npx synthesisui@latest connect
Ask your agent
Use 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 "…".

Dependencies

What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.

  • Web fonts - Inter Variable, Berkeley Mono

    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.

  • Icons - Lucidenpm i lucide-react

    Components reference Lucide icon names. Install it (or swap in your own icon set) to render them.

Color

Primitives and roles.

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

Shape & depth.

Corner radius, spacing rhythm and elevation - the physical feel of the system.

radius

xs
sm
md
lg
full

spacing

3xs0.25rem
2xs0.5rem
xs0.75rem
sm1rem
md1.5rem
lg2rem
xl3rem
2xl4rem
3xl6rem

shadow

md
sm
glow
ring

Typography

The voice of the system.

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

xsDesign, set free0.75rem / 1rem
smDesign, set free0.875rem / 1.5
baseDesign, set free1rem / 1.6
lgDesign, set free1.25rem / 1.4
xlDesign, set free1.5rem / 1.3
2xlDesign, set free2rem / 1.2
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 · 7

Blueprints, 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.

command-bar

bespoke · field

⌘K launcher - the product's front door.

card

bespoke · surface

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.

badge

bespoke · surface

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

intent

PillPillPillPillPillPill

input

bespoke · surface

Quiet field that reveals an indigo focus ring on interaction.

avatar

bespoke · indicator

Identity token - sized circle with initials or image.

size

MAMAMA

button

bespoke · surface

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

intent

select

bespoke · field

Field trigger that reveals a focus ring on interaction.

Choose an option

Icons · lucide

A consistent icon set.

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

A landing made only from Halogen's sections.

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.

example landinghalogen · 6 of 33 sections
  1. nav-top-bar
  2. hero
  3. pricing-lead
  4. testimonials-lead
  5. closing-band
  6. footer-columns

Make yours

Your main colour buttons and links

or

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?

KeptThe tokens and type, with the six sections as the skeleton.
InventedSection variants, the order, and one rule broken on purpose - when your goal asks for it.
  1. In your project, install Halogen once

    npx synthesisui@latest init --ds halogen

    Your agent reads Halogen's tokens and rules from the folder this creates.

  2. Paste this into your agent Claude Code, Cursor, Codex…

    See what it says
    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.