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.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
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: Inter13 body: Inter14 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: 2px22 md: 6px23 lg: 12px24 pill: 9999px25shadows: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: #5E6AD231 color: #FFFFFF32 border: none33 shape: rounded34 padding: 8px 14px35 font: 510 / 0.8125rem36 shadow: rgba(94,106,210,0.32) 0 0 0 1px, rgba(94,106,210,0.18) 0 4px 12px -4px37 secondary:38 background: rgba(255,255,255,0.06)39 color: #F7F8F840 border: 1px solid rgba(255,255,255,0.10)41 shape: rounded42 padding: 8px 14px43 font: 510 / 0.8125rem44 outline:45 background: transparent46 color: #F7F8F847 border: 1px solid rgba(255,255,255,0.14)48 shape: rounded49 padding: 8px 14px50 font: 510 / 0.8125rem51 ghost:52 background: transparent53 color: rgba(247,248,248,0.6)54 border: none55 shape: rounded56 padding: 8px 10px57 font: 510 / 0.8125rem58charts:59 variant: bars60 stroke_width: 1.561 fill_opacity: 0.2562 gridlines: true63 bar_radius: 2px64 bar_gap: 8px65 highlight: all66 dot_marker: true67fonts_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 Editor72 73## AI Build Instructions74 75> **Read this section before writing any code.** The rules below76> are non-negotiable. Every value used in the UI must come from this77> file's frontmatter — never substitute, approximate, or invent new78> colors, fonts, radii, or shadows. If a value is missing, ask the79> user before adding one.80 81### 1 · Your role82 83You are building UI for a project that has adopted **Halogen Editor** as its84design system. Treat `DESIGN.md` as the single source of truth.85Your job is to translate the user's product requirements into86components and pages that look like they were designed by the same87person who authored this file.88 89### 2 · Token compliance90 91- Pull every color, font family, radius, shadow, and spacing value92 from the frontmatter at the top of this file.93- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never94 hard-code hex values that bypass the system.95- When a token can be expressed as a CSS variable, declare it once96 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 recipes101 102Use these recipes verbatim when building the corresponding component.103 104#### Buttons105 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 tertiary115actions in toolbars. **Ghost** for inline links and table actions.116 117#### Cards118 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#### Charts125 126- Bar/line variant: `bars`127- Bar radius: `2px`128- Highlight strategy: `all` — emphasize a single bar/point per chart.129 130#### Typography pairings131 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 constraints137 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 — verify147 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. Atmosphere160 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 surfaces169- Variable sans with weight 510 as the workhorse170- Aggressive display tracking: -1.584px at 72px, -1.056px at 48px171- Single chromatic accent: `#5e6ad2` / `#7170ff` / `#828fff` — used only for CTAs and brand172- 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 dark175 176## 2. Palette177 178### Surfaces179- Marketing `#08090a` — deepest canvas180- Panel `#0f1011` — sidebars, panels181- Level 3 `#191a1b` — elevated surfaces, cards182- Secondary `#28282c` — hover states183 184### Text185- Primary `#f7f8f8` — barely-warm near-white (never `#ffffff` — too harsh)186- Secondary `#d0d6e0` — silver-gray body187- Tertiary `#8a8f98` — placeholders, metadata188- Quaternary `#62666d` — timestamps, disabled189 190### Brand191- Indigo `#5e6ad2` — primary CTA background192- Violet `#7170ff` — interactive accent193- Hover `#828fff` — lighter saturated variant194 195### Status196- Green `#27a644` — in-progress197- Emerald `#10b981` — completion pills198 199### Borders200- Subtle `rgba(255,255,255,0.05)` — default201- Standard `rgba(255,255,255,0.08)` — cards, inputs202- Solid Primary `#23252a` — prominent separations203 204## 3. Typography205 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. Buttons221 222### Brand Indigo (Primary)223```css224background: #5e6ad2;225color: #ffffff;226padding: 8px 16px;227border-radius: 6px;228```229Hover shifts to `#828fff`.230 231### Ghost232- Background `rgba(255,255,255,0.02)`233- Text `#e2e4e7`234- Border `1px solid rgb(36, 40, 44)`, radius 6px235- Focus: `rgba(0,0,0,0.1) 0 4px 12px`236 237### Subtle / Toolbar238- Background `rgba(255,255,255,0.04)` or `rgba(255,255,255,0.05)`239- 12px text at weight 510, radius 2–6px240 241### Pill / Filter242- Transparent background, `#d0d6e0` text243- `1px solid rgb(35,37,42)`, radius 9999px244 245## 5. Cards246 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 panels250- Hover: subtle background opacity bump251 252## 6. Spacing253 254- Base: 8px255- Scale: `1, 4, 7, 8, 11, 12, 16, 19, 20, 22, 24, 28, 32, 35`256- 7px and 11px exist for optical alignment257- Section vertical: 80px+258 259## 7. Radius scale260 261`2 / 4 / 6 / 8 / 12 / 22 / 9999 / 50%` — circle for icon buttons, pill for chips, 6px for buttons.262 263## 8. Depth & elevation264 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'ts276 277✅ **Do**278- Build on `#08090a` / `#0f1011` / `#191a1b` surfaces279- Use weight 510 as your default emphasis280- Apply aggressive negative tracking at display sizes281- Reserve indigo (`#5e6ad2`) for CTAs and brand only282- Use `#f7f8f8` for primary text — never pure white283 284❌ **Don't**285- Use pure white text — `#f7f8f8` prevents eye strain286- Apply solid colored backgrounds to buttons — translucency is the system287- Decorate with the brand indigo — it is for interaction only288- Use positive tracking on display text289- Add warm tones — the palette is cool gray with one violet accent290 291---292 293## Tokens294 295> Generated from the same source the live preview renders from.296> Treat the values below as the contract — never substitute approximations.297 298### Colors299 300| Role | Value |301|-----------|-------|302| primary | `#f7f8f8` |303| secondary | `#d0d6e0` |304| tertiary | `#7170ff` |305| neutral | `#08090a` |306| surface | `#0f1011` |307 308### Typography309 310- **Display:** Inter311- **Body:** Inter312- **Mono:** JetBrains Mono313 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### Radius322 323- sm: `2px`324- md: `6px`325- lg: `12px`326- pill: `9999px`327 328### Shadows329 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### Buttons334 335Four variants, each fully tokenized. The preview renders from these exact values.336 337#### Primary338 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#### Secondary351 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#### Outline363 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#### Ghost375 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### Charts387 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 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Inter"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#f7f8f8', secondary: '#d0d6e0', accent: '#7170ff', neutral: '#08090a', surface: '#0f1011', }, borderRadius: { sm: '2px', md: '6px', lg: '12px', }, }, },};Warm grainy aurora applied with restraint — amber bleeds into coral and softens into violet, with real fractal-noise grain layered on top. Inter throughout, generous bone-white surfaces, and the gradient appears in exactly two places: the primary CTA and the featured hero tile. Everything else stays calm so the bloom carries.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.