Future Excellence · v1.0 · HELiiX foundations

DESIGN SYSTEM

Four pillars define every HELiiX surface, accent, and signal: Deep Space, Cyber Cyan, Athletic Gold, and Glass. This page uses the same token behavior as the standalone handoff files, translated into the canonical --heliix-* namespace.

Logos

HELiiX active assets only
HELiiX wordmark
HELiiX wordmark
HELiiX primary mark
HELiiX primary mark
HELiiX wordmark
HELiiX wordmark
HELiiX primary mark
HELiiX primary mark

Color System

Deep Space / Cyan / Gold / Glass

Four pillars, one token namespace.

The latest sheet keeps the palette tight: navy elevation, cyan interaction, gold achievement, and glass surfaces. Semantic warnings reuse gold so the system does not drift into extra decorative color families.

Deep Space / Text
Void
--heliix-space-void
#05070D
Deepest HELiiX backdrop and modal scrim
Space navy
--heliix-space-navy
#0A0E17
Primary HELiiX chrome substrate
Raised navy
--heliix-space-navy-2
#111726
Panels, cards, and elevated tool surfaces
Tertiary navy
--heliix-space-navy-3
#1A2238
Inset rows, hover fills, and nested chrome
Primary text
--heliix-text
#F0F6FF
High-contrast text on HELiiX deep space
Muted text
--heliix-text-muted
#8BA3C7
Secondary information, labels, metadata
Dim text
--heliix-text-dim
#5A7399
Tertiary data, timestamps, decorative copy
Cyber Cyan / Athletic Gold
Cyber cyan
--heliix-cyber-cyan
#00BFFF
Primary action, focus, active data
Cyan 80
--heliix-cyber-cyan-80
alpha .80
Pressed CTA and strong hover fill
Cyan 60
--heliix-cyber-cyan-60
alpha .60
Active state and strong emphasis
Cyan 40
--heliix-cyber-cyan-40
alpha .40
Hot borders and active dividers
Cyan 20
--heliix-cyber-cyan-20
alpha .20
Loader track and soft tint
Cyan 12
--heliix-cyber-cyan-12
alpha .12
Ghost fills and soft active backgrounds
Cyan 08
--heliix-cyber-cyan-08
alpha .08
Faint tint and background data wash
Athletic gold
--heliix-golden-hour
#FFA500
Achievement, championship, pinned work
Gold 80
--heliix-golden-hour-80
alpha .80
Pressed gold and strong achievement fill
Gold 40
--heliix-golden-hour-40
alpha .40
Gold borders and achievement accents
Gold 20
--heliix-golden-hour-20
alpha .20
Subtle milestone and warning fills
Gold 12
--heliix-golden-hour-12
alpha .12
Badge backgrounds and championship chips
Semantic Signals
Live signal
--heliix-signal-live
#00FF87
Ready, complete, confirmed, live
Warn signal
--heliix-signal-warn
#FFA500
Warning state; intentionally reuses gold
Critical signal
--heliix-signal-error
#EF3B24
Blocked, overdue, needs attention

Prestige Glass Gallery

Glass tiers / strokes / live KPI surfaces

04

Glass Surfaces

Translucent surfaces float between layers. Structure comes from measured alpha, top-edge light, and two stroke states: cool by default, hot for active focus.

--heliix-glass-1

Glass 1°

Alpha
surface alpha .08
Stroke
--heliix-glass-stroke / alpha .10
Recipe
--heliix-card-glass

Primary cards, panels, command surfaces, and hero metric containers.

--heliix-glass-2

Glass 2°

Alpha
surface alpha .04
Stroke
--heliix-glass-stroke / alpha .10
Recipe
--heliix-card-glass-soft

Secondary panels, nested rows, footers, and quiet list groupings.

--heliix-glass-3

Glass 3°

Alpha
surface alpha .02
Stroke
optional hairline only
Recipe
--heliix-card-glass-whisper

Whisper layers, tooltips, inactive empty states, and atmospheric insets.

--heliix-glass-hot

Glass Hot

Alpha
cyan fill alpha .10
Stroke
hot stroke / selected focus
Recipe
--heliix-ring-cyan

Active focus, live panels, selected rows, and high-confidence interaction states.

Glass 1 KPI98.4%

Live readiness surfaced on the primary glass recipe.

Metallic Prestige12

Gold is reserved for prestige, caution, and earned operational moments.

Typography

Orbitron / Rajdhani / Exo 2
HELiiX display

HELIIX AI

--heliix-display
HELiiX UI

Your Deadlines

--heliix-ui
HELiiX body

Operational platform for conference office staff.

--heliix-body
56pxDisplay XL

HELIIX AI

Orbitron 700 / 0.02em letter spacing
36pxDisplay L

CHAMPIONSHIP

Orbitron 700 / 0.04em letter spacing / gold
24pxDisplay M

Tournament Schedule

Orbitron 700 / 0.02em letter spacing
18pxUI Heading

Your Deadlines

Rajdhani 700 / uppercase
13pxUI Label

Export CSV

Rajdhani 700 / 0.12em letter spacing
15pxBody

Operational platform for conference office staff.

Exo 2 400 / 1.55 line height
10pxEyebrow / Meta

CHAMPIONSHIP MANUAL / V1.2

Rajdhani 700 / 0.24em letter spacing

Spacing, Radius, Glow

4px grid / sharp radii / light as depth
--heliix-space-14px

Icon gap, tight inline spacing

--heliix-space-28px

Button inner gap, chip padding

--heliix-space-312px

Form element padding, list gap

--heliix-space-416px

Section gap, compact card padding

--heliix-space-524px

Panel padding, component margin

--heliix-space-632px

Section gap, grid column gap

--heliix-space-748px

Page padding, hero spacing

--heliix-space-864px

Page section breaks

--heliix-space-980px

Footer padding, large breaks

--heliix-space-10128px

Hero and championship moments

--heliix-radius-0

0px / Flat

--heliix-radius-1

2px / Buttons, badges

--heliix-radius-2

4px / Chips, inputs

--heliix-radius-3

6px / Cards, panels, glass

--heliix-radius-4

8px / Popovers, drawers

--heliix-radius-pill

999px / Avatars, loaders

--heliix-glow-cyan

Focus, CTAs, active state

--heliix-glow-cyan-soft

Ambient cyan glow

--heliix-glow-gold

Achievement and championship emphasis

--heliix-glow-gold-soft

Pinned and ambient gold

--heliix-ring-cyan

Keyboard focus ring

--heliix-dur-fast120ms

Hover, focus, micro-states

--heliix-dur-base220ms

Panel slides and tab switches

--heliix-dur-slow420ms

Page entries and hero reveal

--heliix-easecubic-bezier(.22, 1, .36, 1)

Quick out, soft land

Components

Controls / state / data display
Command surface
Buttons and global search
State tokens
Badges and chips
NewPublishedChampionshipFootballTennisChampionship sports
Metric cards
Dense status summaries
Open Deadlines7

3 due this week

Championship Manuals12

Gold stays earned

Table row
Operational list pattern
NameRoleStatus
Conference OfficeOperationsActive
ChampionshipsManualsPinned
Theme