1---
2name: "Halogen Editor"
3description: "Dark-mode-native canvas where content emerges like starlight. Geometric variable sans, the signature 510 weight, semi-transparent white borders, and a single indigo-violet accent."
4tags: [dark, minimal, engineering, saas, modern]
5colors:
6  primary:   "#f7f8f8"
7  secondary: "#d0d6e0"
8  tertiary:  "#7170ff"
9  neutral:   "#08090a"
10  surface:   "#0f1011"
11typography:
12  display: Inter
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.5rem / 1 / 510 / -1.584px"
17    h1:   "3rem / 1 / 510 / -1.056px"
18    h2:   "2rem / 1.13 / 400 / -0.704px"
19    body: "1rem / 1.5 / 400 / 0"
20radius:
21  sm: 2px
22  md: 6px
23  lg: 12px
24  pill: 9999px
25shadows:
26  card:   "rgba(255,255,255,0.08) 0 0 0 1px, rgba(0,0,0,0.4) 0 2px 4px"
27  button: "rgba(94,106,210,0.35) 0 0 0 1px, rgba(0,0,0,0.4) 0 4px 12px"
28buttons:
29  primary:
30    background: #5E6AD2
31    color: #FFFFFF
32    border: none
33    shape: rounded
34    padding: 8px 14px
35    font: 510 / 0.8125rem
36    shadow: rgba(94,106,210,0.32) 0 0 0 1px, rgba(94,106,210,0.18) 0 4px 12px -4px
37  secondary:
38    background: rgba(255,255,255,0.06)
39    color: #F7F8F8
40    border: 1px solid rgba(255,255,255,0.10)
41    shape: rounded
42    padding: 8px 14px
43    font: 510 / 0.8125rem
44  outline:
45    background: transparent
46    color: #F7F8F8
47    border: 1px solid rgba(255,255,255,0.14)
48    shape: rounded
49    padding: 8px 14px
50    font: 510 / 0.8125rem
51  ghost:
52    background: transparent
53    color: rgba(247,248,248,0.6)
54    border: none
55    shape: rounded
56    padding: 8px 10px
57    font: 510 / 0.8125rem
58charts:
59  variant: bars
60  stroke_width: 1.5
61  fill_opacity: 0.25
62  gridlines: true
63  bar_radius: 2px
64  bar_gap: 8px
65  highlight: all
66  dot_marker: true
67fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap"
68dependencies: ["lucide-react"]
69---
70 
71# Halogen Editor
72 
73## AI Build Instructions
74 
75> **Read this section before writing any code.** The rules below
76> are non-negotiable. Every value used in the UI must come from this
77> file's frontmatter — never substitute, approximate, or invent new
78> colors, fonts, radii, or shadows. If a value is missing, ask the
79> user before adding one.
80 
81### 1 · Your role
82 
83You are building UI for a project that has adopted **Halogen Editor** as its
84design system. Treat `DESIGN.md` as the single source of truth.
85Your job is to translate the user's product requirements into
86components and pages that look like they were designed by the same
87person who authored this file.
88 
89### 2 · Token compliance
90 
91- Pull every color, font family, radius, shadow, and spacing value
92  from the frontmatter at the top of this file.
93- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
94  hard-code hex values that bypass the system.
95- When a token can be expressed as a CSS variable, declare it once
96  in your global stylesheet and reference it everywhere downstream.
97- The Google Fonts `<link>` is provided in the Typography section.
98  Add it to `<head>` before any component renders.
99 
100### 3 · Component recipes
101 
102Use these recipes verbatim when building the corresponding component.
103 
104#### Buttons
105 
106Four variants are defined. Pick one — never blend variants or invent a fifth.
107 
108- **Primary** — rounded shape, bg `#5E6AD2`, text `#FFFFFF`, padding `8px 14px`, weight `510`, shadow `rgba(94,106,210,0.32) 0 0 0 1px, rgba(94,106,210,0.18) 0 4px 12px -4px`.
109- **Secondary** — rounded shape, bg `rgba(255,255,255,0.06)`, text `#F7F8F8`, border `1px solid rgba(255,255,255,0.10)`, padding `8px 14px`, weight `510`.
110- **Outline** — rounded shape, text `#F7F8F8`, border `1px solid rgba(255,255,255,0.14)`, padding `8px 14px`, weight `510`.
111- **Ghost** — rounded shape, text `rgba(247,248,248,0.6)`, padding `8px 10px`, weight `510`.
112 
113Reach for **primary** as the single dominant CTA per screen.
114**Secondary** for the supporting action. **Outline** for tertiary
115actions in toolbars. **Ghost** for inline links and table actions.
116 
117#### Cards
118 
119- Background: `#0f1011`
120- Shadow: `rgba(255,255,255,0.08) 0 0 0 1px, rgba(0,0,0,0.4) 0 2px 4px`
121- Radius: `radius.lg` (`12px`)
122- Internal padding: `20px` for compact cards, `24–28px` for content cards.
123 
124#### Charts
125 
126- Bar/line variant: `bars`
127- Bar radius: `2px`
128- Highlight strategy: `all` — emphasize a single bar/point per chart.
129 
130#### Typography pairings
131 
132- **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks.
133- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
134- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
135 
136### 4 · Hard constraints
137 
138Never do any of the following without explicit instruction from the user:
139 
140- Introduce a new color, font, radius, or shadow that isn't declared above.
141- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
142- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
143- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
144- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
145 
146### 5 · Before you finish — verify
147 
148Run through this checklist for every screen you produce:
149 
150- [ ] Every color used appears in the Colors table above.
151- [ ] Headlines use the display font; body copy uses the body font.
152- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
153- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
154- [ ] Cards and dividers use the declared border + shadow tokens.
155- [ ] No values were invented; if you needed something missing, you stopped and asked.
156 
157---
158 
159## 1. Atmosphere
160 
161Halogen Editor is dark-mode native. The canvas (`#08090a`) is near-black with the faintest blue-cool undertone, and content emerges from it like starlight — a calibrated luminance hierarchy from barely-visible borders (`rgba(255,255,255,0.05)`) up to soft, luminous text (`#f7f8f8`). This is not a dark theme bolted onto a light design; darkness is the medium, and information density is managed through gradations of white opacity rather than color shifts.
162 
163The typography is built entirely on a geometric variable sans with OpenType alternates enabled globally for a cleaner, more engineered character. Weight **510** — sitting between regular (400) and medium (500) — is the signature: a subtle emphasis that doesn't shout. Display sizes (72/64/48px) use aggressive negative tracking (-1.584px to -1.056px) for compressed, authoritative headlines.
164 
165The palette is almost entirely achromatic — dark surfaces, white-opacity text — punctuated by a single brand accent: indigo-violet (`#5e6ad2` for backgrounds, `#7170ff` for interactive). Borders are wisp-thin semi-transparent whites that suggest structure without visual noise, like wireframes drawn in moonlight.
166 
167**Signature moves**
168- `#08090a` marketing canvas, `#0f1011` panels, `#191a1b` elevated surfaces
169- Variable sans with weight 510 as the workhorse
170- Aggressive display tracking: -1.584px at 72px, -1.056px at 48px
171- Single chromatic accent: `#5e6ad2` / `#7170ff` / `#828fff` — used only for CTAs and brand
172- Borders as semi-transparent white: `rgba(255,255,255,0.05–0.08)`
173- Button surfaces at near-zero opacity: `rgba(255,255,255,0.02–0.05)`
174- Multi-layer shadows with inset variants for depth on dark
175 
176## 2. Palette
177 
178### Surfaces
179- Marketing `#08090a` — deepest canvas
180- Panel `#0f1011` — sidebars, panels
181- Level 3 `#191a1b` — elevated surfaces, cards
182- Secondary `#28282c` — hover states
183 
184### Text
185- Primary `#f7f8f8` — barely-warm near-white (never `#ffffff` — too harsh)
186- Secondary `#d0d6e0` — silver-gray body
187- Tertiary `#8a8f98` — placeholders, metadata
188- Quaternary `#62666d` — timestamps, disabled
189 
190### Brand
191- Indigo `#5e6ad2` — primary CTA background
192- Violet `#7170ff` — interactive accent
193- Hover `#828fff` — lighter saturated variant
194 
195### Status
196- Green `#27a644` — in-progress
197- Emerald `#10b981` — completion pills
198 
199### Borders
200- Subtle `rgba(255,255,255,0.05)` — default
201- Standard `rgba(255,255,255,0.08)` — cards, inputs
202- Solid Primary `#23252a` — prominent separations
203 
204## 3. Typography
205 
206| Role | Size | Weight | Leading | Tracking |
207|------|------|--------|---------|----------|
208| Display XL | 72px | 510 | 1.00 | -1.584px |
209| Display | 48px | 510 | 1.00 | -1.056px |
210| Heading 1 | 32px | 400 | 1.13 | -0.704px |
211| Heading 3 | 20px | 590 | 1.33 | -0.24px |
212| Body L | 18px | 400 | 1.60 | -0.165px |
213| Body | 16px | 400 | 1.50 | normal |
214| Body Medium | 16px | 510 | 1.50 | normal |
215| Caption | 13px | 400 | 1.50 | -0.13px |
216| Mono | 14px | 400 | 1.50 | normal |
217 
218**510 is the signature weight.** Between regular (400) and medium (500), it produces emphasis without heaviness. Three-tier system: 400 (read), 510 (emphasize / UI), 590 (announce).
219 
220## 4. Buttons
221 
222### Brand Indigo (Primary)
223```css
224background: #5e6ad2;
225color: #ffffff;
226padding: 8px 16px;
227border-radius: 6px;
228```
229Hover shifts to `#828fff`.
230 
231### Ghost
232- Background `rgba(255,255,255,0.02)`
233- Text `#e2e4e7`
234- Border `1px solid rgb(36, 40, 44)`, radius 6px
235- Focus: `rgba(0,0,0,0.1) 0 4px 12px`
236 
237### Subtle / Toolbar
238- Background `rgba(255,255,255,0.04)` or `rgba(255,255,255,0.05)`
239- 12px text at weight 510, radius 2–6px
240 
241### Pill / Filter
242- Transparent background, `#d0d6e0` text
243- `1px solid rgb(35,37,42)`, radius 9999px
244 
245## 5. Cards
246 
247- Background: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)` (always translucent — never solid)
248- Border: `1px solid rgba(255,255,255,0.08)`
249- Radius: 8px standard, 12px featured, 22px large panels
250- Hover: subtle background opacity bump
251 
252## 6. Spacing
253 
254- Base: 8px
255- Scale: `1, 4, 7, 8, 11, 12, 16, 19, 20, 22, 24, 28, 32, 35`
256- 7px and 11px exist for optical alignment
257- Section vertical: 80px+
258 
259## 7. Radius scale
260 
261`2 / 4 / 6 / 8 / 12 / 22 / 9999 / 50%` — circle for icon buttons, pill for chips, 6px for buttons.
262 
263## 8. Depth & elevation
264 
265| Level | Treatment | Use |
266|-------|-----------|-----|
267| 0 | Flat `#08090a` | Page background |
268| 1 | `rgba(0,0,0,0.03) 0 1.2px 0` | Toolbar buttons |
269| 2 | `rgba(255,255,255,0.05)` bg + `rgba(255,255,255,0.08)` border | Cards |
270| 3 | `rgba(0,0,0,0.4) 0 2px 4px` | Floating, dropdowns |
271| 4 | Multi-layer stack | Popovers, command palette |
272 
273**Elevation through luminance, not shadow.** On dark, traditional drop shadows disappear. Halogen Editor stacks elevation by stepping the white opacity of each surface (`0.02 → 0.04 → 0.05`), producing depth without color.
274 
275## 9. Do's & don'ts
276 
277✅ **Do**
278- Build on `#08090a` / `#0f1011` / `#191a1b` surfaces
279- Use weight 510 as your default emphasis
280- Apply aggressive negative tracking at display sizes
281- Reserve indigo (`#5e6ad2`) for CTAs and brand only
282- Use `#f7f8f8` for primary text — never pure white
283 
284❌ **Don't**
285- Use pure white text — `#f7f8f8` prevents eye strain
286- Apply solid colored backgrounds to buttons — translucency is the system
287- Decorate with the brand indigo — it is for interaction only
288- Use positive tracking on display text
289- Add warm tones — the palette is cool gray with one violet accent
290 
291---
292 
293## Tokens
294 
295> Generated from the same source the live preview renders from.
296> Treat the values below as the contract — never substitute approximations.
297 
298### Colors
299 
300| Role      | Value |
301|-----------|-------|
302| primary   | `#f7f8f8` |
303| secondary | `#d0d6e0` |
304| tertiary  | `#7170ff` |
305| neutral   | `#08090a` |
306| surface   | `#0f1011` |
307 
308### Typography
309 
310- **Display:** Inter
311- **Body:** Inter
312- **Mono:** JetBrains Mono
313 
314| Role | size / leading / weight / tracking |
315|------|------------------------------------|
316| Hero | 4.5rem / 1 / 510 / -1.584px |
317| H1   | 3rem / 1 / 510 / -1.056px |
318| H2   | 2rem / 1.13 / 400 / -0.704px |
319| Body | 1rem / 1.5 / 400 / 0 |
320 
321### Radius
322 
323- sm: `2px`
324- md: `6px`
325- lg: `12px`
326- pill: `9999px`
327 
328### Shadows
329 
330- **card:** `rgba(255,255,255,0.08) 0 0 0 1px, rgba(0,0,0,0.4) 0 2px 4px`
331- **button:** `rgba(94,106,210,0.35) 0 0 0 1px, rgba(0,0,0,0.4) 0 4px 12px`
332 
333### Buttons
334 
335Four variants, each fully tokenized. The preview renders from these exact values.
336 
337#### Primary
338 
339| Property | Value |
340|----------|-------|
341| shape | `rounded` |
342| background | `#5E6AD2` |
343| color | `#FFFFFF` |
344| border | `none` |
345| padding | `8px 14px` |
346| fontWeight | `510` |
347| fontSize | `0.8125rem` |
348| shadow | `rgba(94,106,210,0.32) 0 0 0 1px, rgba(94,106,210,0.18) 0 4px 12px -4px` |
349 
350#### Secondary
351 
352| Property | Value |
353|----------|-------|
354| shape | `rounded` |
355| background | `rgba(255,255,255,0.06)` |
356| color | `#F7F8F8` |
357| border | `1px solid rgba(255,255,255,0.10)` |
358| padding | `8px 14px` |
359| fontWeight | `510` |
360| fontSize | `0.8125rem` |
361 
362#### Outline
363 
364| Property | Value |
365|----------|-------|
366| shape | `rounded` |
367| background | `transparent` |
368| color | `#F7F8F8` |
369| border | `1px solid rgba(255,255,255,0.14)` |
370| padding | `8px 14px` |
371| fontWeight | `510` |
372| fontSize | `0.8125rem` |
373 
374#### Ghost
375 
376| Property | Value |
377|----------|-------|
378| shape | `rounded` |
379| background | `transparent` |
380| color | `rgba(247,248,248,0.6)` |
381| border | `none` |
382| padding | `8px 10px` |
383| fontWeight | `510` |
384| fontSize | `0.8125rem` |
385 
386### Charts
387 
388| Property | Value |
389|----------|-------|
390| variant | `bars` |
391| strokeWidth | `1.5` |
392| fillOpacity | `0.25` |
393| gridlines | `true` |
394| barRadius | `2px` |
395| barGap | `8px` |
396| highlight | `all` |
397| dotMarker | `true` |
398 
399---
400 
401## Pro tokens
402 
403> Production-fidelity tokens. States, density, motion, elevation,
404> content rules and a measured WCAG contract — derived from the
405> resting tokens unless explicitly authored.
406 
407### States
408 
409#### Button
410 
411- **hover** — bg: `rgba(113, 112, 255, 0.15)`, color: `#7170ff`, border: `1px solid #7170ff`
412- **focus** — outline: `1px dashed #7170ff`, outline-offset: `2px`
413- **active** — bg: `#7170ff`, color: `#0f1011`
414- **disabled** — opacity: `0.35`
415- **loading** — opacity: `0.6`
416- **selected** — bg: `#7170ff`, color: `#0f1011`
417 
418#### Input
419 
420- **hover** — border: `1px solid rgba(113, 112, 255, 0.5)`
421- **focus** — bg: `rgba(113, 112, 255, 0.05)`, border: `1px solid #7170ff`
422- **disabled** — opacity: `0.35`
423- **error** — bg: `rgba(239,68,68,0.05)`, border: `1px solid #EF4444`
424 
425#### Card
426 
427- **hover** — border: `1px solid #7170ff`
428- **selected** — bg: `rgba(113, 112, 255, 0.05)`, border: `1px solid #7170ff`
429- **dragging** — opacity: `0.7`
430 
431#### Tab
432 
433- **hover** — color: `#7170ff`
434- **focus** — outline: `1px dashed #7170ff`, outline-offset: `1px`
435- **selected** — bg: `rgba(113, 112, 255, 0.1)`, color: `#7170ff`
436 
437### Density
438 
439| Mode | padding × | row × | body | radius × | Use for |
440|------|-----------|-------|------|----------|---------|
441| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
442| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
443| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
444 
445### Motion
446 
447**Signature — Cursor blink.** Discrete, often stepped transitions. Like a terminal cursor: on or off. Response under 120 ms.
448 
449```css
450transition: all 120ms linear;
451```
452 
453| Token | Value |
454|-------|-------|
455| duration.instant | `0ms` |
456| duration.fast | `60ms` |
457| duration.base | `120ms` |
458| duration.slow | `200ms` |
459| easing.standard | `linear` |
460| easing.decelerate | `linear` |
461| easing.accelerate | `linear` |
462| easing.spring | `steps(2, end)` |
463 
464### Elevation
465 
466Five-level scale, system-specific recipe.
467 
468| Level | Shadow | Recipe |
469|-------|--------|--------|
470| level0 | `none` | Flat — the stroke carries the hierarchy. |
471| level1 | `none` | Border tone lifts the surface. |
472| level2 | `0 0 0 1px rgba(113, 112, 255, 0.5)` | Ring outline — popover. |
473| level3 | `0 0 0 1px #7170ff, 0 12px 32px -16px rgba(113, 112, 255, 0.4)` | Sheet with accent ring + glow. |
474| level4 | `0 0 0 1px #7170ff, 0 24px 64px -20px rgba(113, 112, 255, 0.5)` | Modal with accent ring + glow. |
475 
476### Content
477 
478- **measure:** `78ch` (max line length for body prose)
479- **paragraph spacing:** `1em`
480- **list indent:** `1.25em`
481- **list gap:** `0.35em`
482- **link:** color `#7170ff`, underline `always`
483- **blockquote:** border `1px solid rgba(113, 112, 255, 0.5)`, padding `0.7em 1em`
484- **code:** background `rgba(113, 112, 255, 0.12)`, color `#7170ff`
485 
486### Accessibility (WCAG 2.1)
487 
488**Overall:** AA
489 
490| Pair | Ratio | Required | Grade | Suggested fix |
491|------|-------|----------|-------|---------------|
492| Body text on surface | 17.9:1 | AA | AAA | — |
493| Body text on canvas | 18.73:1 | AA | AAA | — |
494| Muted text on surface | 13.04:1 | AA | AAA | — |
495| Accent on surface | 4.96:1 | AA-Large | AA | — |
496| Accent on canvas | 5.18:1 | AA-Large | AA | — |
497