Skip to content

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.

Values below come from the OKLCH tokens in `src/styles/global.css`. Light theme overrides exist in the same file; this page shows the canonical dark set.

  • --color-bg

    oklch(0.13 0.01 250)

    Page background

  • --color-surface

    oklch(0.19 0.012 250)

    Cards and footer surface

  • --color-surface-2

    oklch(0.225 0.012 250)

    Hover and secondary surface

  • --color-surface-3

    oklch(0.27 0.012 250)

    Active surface

  • --color-primary

    oklch(0.63 0.105 167)

    Primary action fill

  • --color-primary-hover

    oklch(0.54 0.105 167)

    Primary hover fill

  • --color-primary-active

    oklch(0.46 0.105 167)

    Primary pressed fill

  • --color-primary-glow

    oklch(0.60 0.105 167 / 0.15)

    Low-opacity primary glow

  • --color-primary-text

    oklch(0.70 0.105 167)

    Small teal text

  • --color-secondary

    oklch(0.74 0.15 64)

    High-intent CTA fill

  • --color-secondary-hover

    oklch(0.66 0.15 64)

    CTA hover fill

  • --color-secondary-active

    oklch(0.59 0.15 64)

    CTA pressed fill

  • --color-tertiary

    oklch(0.18 0.02 250)

    Navy text on brand fills

  • --color-text

    oklch(0.96 0.01 270)

    Primary text

  • --color-text-muted

    oklch(0.62 0.03 250)

    Body support text

  • --color-text-dim

    oklch(0.66 0.01 250)

    Eyebrows and metadata

  • --color-border

    oklch(0.30 0.012 250)

    Default border

  • --color-border-active

    oklch(0.60 0.105 167 / 0.32)

    Active border tint

  • --color-success

    oklch(0.68 0.17 145)

    Success state

  • --color-warning

    oklch(0.67 0.17 52)

    Warning state

  • --color-error

    oklch(0.62 0.22 25)

    Error state

  • --color-info

    oklch(0.65 0.15 250)

    Info state

  • --band-critical

    oklch(0.57 0.13 40)

    Helix Score critical band

  • --band-developing

    oklch(0.68 0.10 70)

    Helix Score developing band

  • --band-functional

    oklch(0.72 0.06 165)

    Helix Score functional band

  • --band-strong

    oklch(0.65 0.09 165)

    Helix Score strong band

  • --band-leading

    oklch(0.78 0.06 165)

    Helix Score leading band

  • --band-optimal

    oklch(0.88 0.04 165)

    Helix Score optimal band

Typography

Four type roles carry the site.

--font-heading

Systems that work on Monday morning.

Space Grotesk, system-ui, sans-serif

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

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

Audit note

The dialog uses the native dialog element, a token-backed overlay, and the shared focus treatment.

Use dialogs for decisions that need attention, not for page content that should be visible by default.

Contact

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.