/
design.md
Back to directory
dark · neon · soft · premium · modern

Halo Soft.

Soft-glow neon dark. Deep ink canvas with one cyan accent that radiates a soft outer glow on buttons and links. Generous corners, humanist sans, restrained — warmth in the dark without going gaudy.

01 · Preview

The kitchen sink.

Halo.app
ProductPricingDocsAbout
Sign inGet started
dark · neon · soft

Build with Halo Soft.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational
01 · Color

Palette

primary
#EAEBF0
secondary
#8B92A6
tertiary
#7BE5FF
neutral
#0A0E14
surface
#10151D
02 · Typography

Type scale

display
The quick brown fox
h1
A major section heading
h2
A subsection title
body
Body copy in the system's body font.
03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →
Disabled
04 · Inputs

Form controls

Email
iris@studio.com
Password
••••••••••••
Bio
Designing for long-form publications. Based in Kyoto.
05 · Choices

Select & toggle

Plan
Starter
Free forever
Pro
$18 / month
Team
$48 / month
Toggles
Public profile
Require two-factor
Auto-accept invites
06 · Tags & badges

Labeling

NeutralAccentSolidWith dot
NEWBETAv2.0LIVE
07 · Cards

Cards

Feature
Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →
Metric
24,810
▲ +12.4% vs last week
08 · Navigation

Tabs & breadcrumb

Overview
Analytics
Members
Workspace/Projects/Heritage System
09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px
2px
5px
8px · base
10px
12px
14px
16px
18px
20px
21px
10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm
12px
md
16px
lg
20px
pill
9999px
11 · Elevation

Depth & elevation

00 · Flat
Elevation 00
01 · Low
Elevation 01
02 · Medium
Elevation 02
03 · High
Elevation 03
12 · Data

Charts

Weekly revenue
$48,210
M
T
W
T
F
S
S
Active sessions
2,184
02 · The file

DESIGN.md

markdown
1---
2name: "Halo Soft"
3description: "Soft-glow neon dark. Deep ink canvas with one cyan accent that radiates a soft outer glow on buttons and links. Generous corners, humanist sans, restrained — warmth in the dark without going gaudy."
4tags: [dark, neon, soft, premium, modern]
5colors:
6  primary:   "#EAEBF0"
7  secondary: "#8B92A6"
8  tertiary:  "#7BE5FF"
9  neutral:   "#0A0E14"
10  surface:   "#10151D"
11typography:
12  display: Sora
13  body:    Sora
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "4.5rem / 1.05 / 600 / -0.035em"
17    h1:   "2.625rem / 1.1 / 600 / -0.028em"
18    h2:   "1.5rem / 1.3 / 600 / -0.015em"
19    body: "1rem / 1.65 / 400 / -0.005em"
20radius:
21  sm: 12px
22  md: 16px
23  lg: 20px
24  pill: 9999px
25shadows:
26  card:   "0 24px 60px -28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04)"
27  button: "0 0 0 1px rgba(123, 229, 255, 0.30), 0 0 32px -4px rgba(123, 229, 255, 0.50), 0 8px 24px -10px rgba(0, 0, 0, 0.5)"
28borders:
29  card:    "1px solid rgba(255, 255, 255, 0.06)"
30  divider: "rgba(255, 255, 255, 0.08)"
31buttons:
32  primary:
33    background: #10151D
34    color: #7BE5FF
35    border: 1px solid rgba(123, 229, 255, 0.45)
36    shape: pill
37    padding: 12px 24px
38    font: 600 / 0.9375rem / -0.005em
39    shadow: 0 0 0 1px rgba(123, 229, 255, 0.30), 0 0 32px -4px rgba(123, 229, 255, 0.50), 0 8px 24px -10px rgba(0, 0, 0, 0.5)
40  secondary:
41    background: #10151D
42    color: #EAEBF0
43    border: 1px solid rgba(255, 255, 255, 0.10)
44    shape: pill
45    padding: 12px 24px
46    font: 500 / 0.9375rem / -0.005em
47  outline:
48    background: transparent
49    color: #EAEBF0
50    border: 1px solid rgba(255, 255, 255, 0.18)
51    shape: pill
52    padding: 11px 23px
53    font: 500 / 0.9375rem / -0.005em
54  ghost:
55    background: transparent
56    color: #7BE5FF
57    border: none
58    shape: pill
59    padding: 11px 6px
60    font: 500 / 0.9375rem / -0.005em
61    hover: underline
62charts:
63  variant: line
64  stroke_width: 2
65  gridlines: false
66  highlight: last
67  dot_marker: true
68  axis_color: "#8B92A6"
69  palette: ["#7BE5FF"]
70fonts_url: "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap"
71dependencies: ["lucide-react"]
72---
73 
74# Halo Soft
75 
76## AI Build Instructions
77 
78> **Read this section before writing any code.** The rules below
79> are non-negotiable. Every value used in the UI must come from this
80> file's frontmatter — never substitute, approximate, or invent new
81> colors, fonts, radii, or shadows. If a value is missing, ask the
82> user before adding one.
83 
84### 1 · Your role
85 
86You are building UI for a project that has adopted **Halo Soft** as its
87design system. Treat `DESIGN.md` as the single source of truth.
88Your job is to translate the user's product requirements into
89components and pages that look like they were designed by the same
90person who authored this file.
91 
92### 2 · Token compliance
93 
94- Pull every color, font family, radius, shadow, and spacing value
95  from the frontmatter at the top of this file.
96- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
97  hard-code hex values that bypass the system.
98- When a token can be expressed as a CSS variable, declare it once
99  in your global stylesheet and reference it everywhere downstream.
100- The Google Fonts `<link>` is provided in the Typography section.
101  Add it to `<head>` before any component renders.
102 
103### 3 · Component recipes
104 
105Use these recipes verbatim when building the corresponding component.
106 
107#### Buttons
108 
109Four variants are defined. Pick one — never blend variants or invent a fifth.
110 
111- **Primary** — pill shape, bg `#10151D`, text `#7BE5FF`, border `1px solid rgba(123, 229, 255, 0.45)`, padding `12px 24px`, weight `600`, shadow `0 0 0 1px rgba(123, 229, 255, 0.30), 0 0 32px -4px rgba(123, 229, 255, 0.50), 0 8px 24px -10px rgba(0, 0, 0, 0.5)`.
112- **Secondary** — pill shape, bg `#10151D`, text `#EAEBF0`, border `1px solid rgba(255, 255, 255, 0.10)`, padding `12px 24px`, weight `500`.
113- **Outline** — pill shape, text `#EAEBF0`, border `1px solid rgba(255, 255, 255, 0.18)`, padding `11px 23px`, weight `500`.
114- **Ghost** — pill shape, text `#7BE5FF`, padding `11px 6px`, weight `500`.
115 
116Reach for **primary** as the single dominant CTA per screen.
117**Secondary** for the supporting action. **Outline** for tertiary
118actions in toolbars. **Ghost** for inline links and table actions.
119 
120#### Cards
121 
122- Background: `#10151D`
123- Border: `1px solid rgba(255, 255, 255, 0.06)`
124- Shadow: `0 24px 60px -28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04)`
125- Radius: `radius.lg` (`20px`)
126- Internal padding: `20px` for compact cards, `24–28px` for content cards.
127 
128#### Charts
129 
130- Bar/line variant: `line`
131- No gridlines — let the bars/lines carry the data.
132- Highlight strategy: `last` — emphasize a single bar/point per chart.
133- Use the declared palette in order: `#7BE5FF`.
134 
135#### Typography pairings
136 
137- **Display (`Sora`)** — h1, h2, hero headlines, brand wordmarks.
138- **Body (`Sora`)** — paragraphs, labels, button text, form inputs.
139- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
140 
141### 4 · Hard constraints
142 
143Never do any of the following without explicit instruction from the user:
144 
145- Introduce a new color, font, radius, or shadow that isn't declared above.
146- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
147- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
148- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
149- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
150 
151### 5 · Before you finish — verify
152 
153Run through this checklist for every screen you produce:
154 
155- [ ] Every color used appears in the Colors table above.
156- [ ] Headlines use the display font; body copy uses the body font.
157- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
158- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
159- [ ] Cards and dividers use the declared border + shadow tokens.
160- [ ] No values were invented; if you needed something missing, you stopped and asked.
161 
162---
163 
164## Overview
165Halo Soft is soft-glow neon — the warm middle ground between hairline-precise dev tools and loud maximalist neon. The page sits on a deep ink canvas; one halo-cyan accent appears on the primary CTA, ghost links, and chart line, and that accent radiates a soft outer glow that reads as ambient light.
166 
167The glow is the entire system. Built for AI assistants with personality, music players, premium creator tools, anything that wants warmth in the dark without going gaudy.
168 
169## The Halo Recipe
170The button glow is the system's signature. It layers four shadows:
171 
172```css
173.halo-button {
174  background: #10151D;
175  color: #7BE5FF;
176  border: 1px solid rgba(123, 229, 255, 0.45);
177  border-radius: 9999px;
178  box-shadow:
179    0 0 0 1px rgba(123, 229, 255, 0.30),    /* inner outline */
180    0 0 32px -4px rgba(123, 229, 255, 0.50), /* soft outer halo */
181    0 8px 24px -10px rgba(0, 0, 0, 0.5);     /* ambient drop */
182}
183```
184 
185The 32px halo at 50% alpha is the magic. Lower opacity dies; higher gets gaudy. 50% is the sweet spot.
186 
187## Color
188- **Moonlight #EAEBF0** — primary text.
189- **Blue-grey #8B92A6** — secondary text, axis labels.
190- **Halo Cyan #7BE5FF** — the only chromatic accent. Primary CTA, ghost link, chart line.
191- **Ink #0A0E14** — page canvas. Near-black with a faint cool bias.
192- **Surface #10151D** — card and button base, one notch above the canvas.
193 
194One chromatic accent. Period.
195 
196## Typography
197**One family — Sora.** Humanist sans with personality, softer than Inter Tight, more interesting than Inter.
198 
199| Role | Size | Weight | Tracking |
200|------|------|--------|----------|
201| Hero | 4.5rem | 600 | -0.035em |
202| H1 | 2.625rem | 600 | -0.028em |
203| H2 | 1.5rem | 600 | -0.015em |
204| Body | 1rem | 400 | -0.005em / 1.65 |
205 
206The single-family decision keeps the page calm so the halo can be the loudest thing.
207 
208## Geometry
209- **Radii: 12 / 16 / 20, plus pill.** Generous and soft throughout. The system is rounded.
210- **Section gap: 120px** desktop, 72px mobile.
211- **12-column grid** with 28px gutters.
212 
213## Buttons
214- **Primary** — surface fill, cyan label, **the halo glow**. Pill shape. The glow IS the button.
215- **Secondary** — surface pill with a hairline. No glow.
216- **Outline** — bare hairline pill at 18% white.
217- **Ghost** — bare cyan label, hover underline.
218 
219The halo appears on primary only. Adding it to secondary kills the hierarchy.
220 
221## Cards
222Surface cards on the ink canvas, 1px white hairline at 6% opacity, soft 16px corners, low ambient shadow. Padding 28-32px. Cards never glow — only buttons and links carry chroma.
223 
224## Charts & Data
225Single-color line in halo cyan, 2px stroke, end-of-line dot marker, no gridlines. The line itself can carry a soft cyan glow via SVG filter (`drop-shadow(0 0 8px rgba(123,229,255,0.4))`) so the chart matches the button's signature.
226 
227## Do's and Don'ts
228- ✅ The halo glow is the system's signature. Without it, this is just another dark theme.
229- ✅ Glow on primary CTA only. Secondary stays quiet.
230- ✅ One chromatic accent — halo cyan. Everything else is moonlight/blue-grey.
231- ✅ Generous 16-20px radii. Soft throughout.
232- ❌ No second chromatic accent. The cyan stands alone.
233- ❌ No glow on cards or surfaces. Glow is for actions, not containers.
234- ❌ No sharp corners. The system is soft from button to card.
235- ❌ No bright/saturated cyan above #7BE5FF. The halo depends on a slightly muted hue to feel premium rather than loud.
236 
237---
238 
239## Tokens
240 
241> Generated from the same source the live preview renders from.
242> Treat the values below as the contract — never substitute approximations.
243 
244### Colors
245 
246| Role      | Value |
247|-----------|-------|
248| primary   | `#EAEBF0` |
249| secondary | `#8B92A6` |
250| tertiary  | `#7BE5FF` |
251| neutral   | `#0A0E14` |
252| surface   | `#10151D` |
253 
254### Typography
255 
256- **Display:** Sora
257- **Body:** Sora
258- **Mono:** JetBrains Mono
259 
260| Role | size / leading / weight / tracking |
261|------|------------------------------------|
262| Hero | 4.5rem / 1.05 / 600 / -0.035em |
263| H1   | 2.625rem / 1.1 / 600 / -0.028em |
264| H2   | 1.5rem / 1.3 / 600 / -0.015em |
265| Body | 1rem / 1.65 / 400 / -0.005em |
266 
267### Radius
268 
269- sm: `12px`
270- md: `16px`
271- lg: `20px`
272- pill: `9999px`
273 
274### Shadows
275 
276- **card:** `0 24px 60px -28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04)`
277- **button:** `0 0 0 1px rgba(123, 229, 255, 0.30), 0 0 32px -4px rgba(123, 229, 255, 0.50), 0 8px 24px -10px rgba(0, 0, 0, 0.5)`
278 
279### Borders
280 
281- **card:** `1px solid rgba(255, 255, 255, 0.06)`
282- **divider:** `rgba(255, 255, 255, 0.08)`
283 
284### Buttons
285 
286Four variants, each fully tokenized. The preview renders from these exact values.
287 
288#### Primary
289 
290| Property | Value |
291|----------|-------|
292| shape | `pill` |
293| background | `#10151D` |
294| color | `#7BE5FF` |
295| border | `1px solid rgba(123, 229, 255, 0.45)` |
296| padding | `12px 24px` |
297| fontWeight | `600` |
298| fontSize | `0.9375rem` |
299| tracking | `-0.005em` |
300| shadow | `0 0 0 1px rgba(123, 229, 255, 0.30), 0 0 32px -4px rgba(123, 229, 255, 0.50), 0 8px 24px -10px rgba(0, 0, 0, 0.5)` |
301 
302#### Secondary
303 
304| Property | Value |
305|----------|-------|
306| shape | `pill` |
307| background | `#10151D` |
308| color | `#EAEBF0` |
309| border | `1px solid rgba(255, 255, 255, 0.10)` |
310| padding | `12px 24px` |
311| fontWeight | `500` |
312| fontSize | `0.9375rem` |
313| tracking | `-0.005em` |
314 
315#### Outline
316 
317| Property | Value |
318|----------|-------|
319| shape | `pill` |
320| background | `transparent` |
321| color | `#EAEBF0` |
322| border | `1px solid rgba(255, 255, 255, 0.18)` |
323| padding | `11px 23px` |
324| fontWeight | `500` |
325| fontSize | `0.9375rem` |
326| tracking | `-0.005em` |
327 
328#### Ghost
329 
330| Property | Value |
331|----------|-------|
332| shape | `pill` |
333| background | `transparent` |
334| color | `#7BE5FF` |
335| border | `none` |
336| padding | `11px 6px` |
337| fontWeight | `500` |
338| fontSize | `0.9375rem` |
339| tracking | `-0.005em` |
340| hoverHint | `underline` |
341 
342### Charts
343 
344| Property | Value |
345|----------|-------|
346| variant | `line` |
347| strokeWidth | `2` |
348| gridlines | `false` |
349| highlight | `last` |
350| dotMarker | `true` |
351| axisColor | `#8B92A6` |
352| palette | `#7BE5FF` |
353
03 · How to use it

Wire it into your agent.

markdown
# 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.
04 · Required setup

Three snippets.

Google Fonts link

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap" />

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Sora"', 'serif'],
        sans:    ['"Sora"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#EAEBF0',
        secondary: '#8B92A6',
        accent:    '#7BE5FF',
        neutral:   '#0A0E14',
        surface:   '#10151D',
      },
      borderRadius: {
        sm: '12px',
        md: '16px',
        lg: '20px',
      },
    },
  },
};
05 · Keep browsing

Try another system.

Obsidian Rail

A precision dark dev-tool surface. Near-black background, every divider a single 1px hairline at 8% white, Inter Display for headings and Geist Mono for IDs and timestamps with tabular-nums, a single electric mint accent reserved for active status pills and the primary CTA. Built for infrastructure dashboards, observability tools, and developer-platform marketing pages where the chrome itself reads as a precision instrument.

darkmodernminimalsaaspremium
Obsidian.app
ProductPricingDocsAbout
Sign inGet started
dark · modern · minimal

Build with Obsidian Rail.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational

Quartz Monochrome

No chromatic color at all. Five steps of grey on a paper-white canvas, generous 16px radii, oversized whitespace, one humanist sans for everything. The discipline is the brand.

minimalmonochromelightpremiummodern
Quartz.app
ProductPricingDocsAbout
Sign inGet started
minimal · monochrome · light

Build with Quartz Monochrome.

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.

Start building →View on GitHub
Featured
Tokens that travel with your prompts.
Active users
12,840
Status
All systems operational