--font-heading
Systems that work on Monday morning.
Space Grotesk, system-ui, sans-serif
About the system
The rules behind the Helix Stax interface.
The design system keeps the site plain, measurable, and consistent. Tokens define color, type, spacing, radius, motion, and elevation. Components consume those tokens through shared Astro and Starwind primitives.
The point is control. When a card, button, form field, or CTA changes, it should change from one source of truth, not from a dozen one-off classes.
Color tokens
Colors come from CSS variables, not local taste.
Hex values below are sRGB conversions from the OKLCH values in `src/styles/global.css`. Light theme overrides exist in the same file; this page shows the canonical dark set.
-
--color-bg
#05080B
Page background
-
--color-surface
#101419
Cards and footer surface
-
--color-surface-2
#181C21
Hover and secondary surface
-
--color-surface-3
#22272C
Active surface
-
--color-primary
#3C9D7C
Primary action fill
-
--color-primary-hover
#158262
Primary hover fill
-
--color-primary-active
#006A4B
Primary pressed fill
-
--color-primary-glow
#33977526
Low-opacity primary glow
-
--color-primary-text
#54B391
Small teal text
-
--color-secondary
#EB9431
High-intent CTA fill
-
--color-secondary-hover
#D07B00
CTA hover fill
-
--color-tertiary
#0B121A
Navy text on brand fills
-
--color-text
#EFF2F9
Primary text
-
--color-text-muted
#798898
Body support text
-
--color-text-dim
#8E9398
Eyebrows and metadata
-
--color-border
#292E34
Default border
-
--color-border-active
#33977552
Active border tint
-
--color-success
#46B250
Success state
-
--color-warning
#E37109
Warning state
-
--color-error
#EE343B
Error state
-
--color-info
#3A93E6
Info state
-
--band-critical
#B65937
Helix Score critical band
-
--band-developing
#C08D50
Helix Score developing band
-
--band-functional
#81B19B
Helix Score functional band
-
--band-strong
#55A181
Helix Score strong band
-
--band-leading
#94C4AE
Helix Score leading band
-
--band-optimal
#C0E0D1
Helix Score optimal band
Typography
Four type roles carry the site.
--font-body
Plain copy carries the page. It names the point, gives the proof, then gets out of the way.
Inter, system-ui, sans-serif
--font-editorial
The gap is between what got deployed and how people actually work.
Source Serif 4, Charter, serif
--font-mono
CTGA / 100-900 / TOKEN LOCK
ui-monospace, SFMono-Regular, Consolas, monospace
Spacing and radius
The scale is small on purpose.
Spacing
- --spacing-section 6rem
Desktop section rhythm
- --spacing-section-mobile 4rem
Mobile section rhythm
Radius
- --radius-card 1rem / Surface card
- --radius-button 0.5rem / Button
- --radius-input 0.5rem / Input and Starwind bridge
Components
Real primitives, shown in working states.
The demos use the shared Button and Starwind primitives already wired into the site. Focus rings, disabled states, overlays, and motion come from the same tokens as production pages.
Buttons
Form controls
Accordion
Starwind maps its chrome variables to Helix tokens in `src/styles/starwind.css`. Brand colors stay owned by `global.css`.
Component state changes use `--motion-state` and `--ease-snap`. Reduced motion collapses durations at the token layer.
Dialog and tooltip
Patterns
Badges and cards stay restrained.
CTGA CMMC NIST 800-171 Hampton Roads
Measure first
Score the gap before naming the fix.
Ship plainly
Use the fewest pieces that make the workflow clear.
Brand voice
Point. Evidence. Punch.
Helix Stax copy is direct because the work is practical. It names the point, backs it with a detail, and ends with a consequence.
Do
- Lead with the point.
- Use numbers: 100-900 beats vague maturity language.
- Say systems, adoption, your team, and your people.
- Show the work with CTGA, CMMC, NIST 800-171, and Hampton Roads detail.
Don't
- Do not write around the point.
- Do not call every action a transformation.
- Do not use soft filler when a number is available.
- Do not invent proof, quotes, clients, awards, or dates.