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, white
HELiiX wordmark, white
HELiiX primary mark, white
HELiiX primary mark, white
HELiiX wordmark, black
HELiiX wordmark, black
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

Future excellence

--heliix-display
HELiiX UI

SYSTEM STATUS

--heliix-ui
HELiiX body

Calm, fast, reliable internal operations.

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

Buttons / badges / chips / cards / tables
Buttons
Badges and chips
NewPublishedChampionshipFootballTennisChampionship sports
Search input
Open Deadlines7

3 due this week

Championship Manuals12

Gold stays earned

NameRoleStatus
Conference OfficeOperationsActive
ChampionshipsManualsPinned