Color Foundations

The GateFlow color system is built on institutional OKLCH foundations, emphasizing depth, serious professionalism, and high contrast.

Perceptual Uniformity

Using OKLCH, we maintain consistent lightness (L) across all hues. This ensures that Kimchi, Cobalt, and Emerald feel equally bright and readable.

Satin-Charcoal Depth

We use a warm-charcoal base (Hue 250) for all dark mode surfaces. Lightness tiers (8-22%) create "Satin" depth without the harshness of pure black.

Semantic Mapping

All UI is built using semantic --ds- tokens. If you change a profile, every component updates instantly without a build step.

Accent Profile Lab

Switch between enterprise accent profiles to see how the system adapts. All components using --ds-primary-accent will update instantly.

Live Preview

Satin-Charcoal Neutrals

The backbone of the design system. These tier-based ramps provide the deep institutional depth characteristic of GateFlow.

Neutral-10--gf-color-neutral-10Canvas / Deep

Neutral-20--gf-color-neutral-20Sidebar / Nav

Neutral-30--gf-color-neutral-30Surface / Card

Neutral-40--gf-color-neutral-40Raised / Hover

Neutral-50--gf-color-neutral-50Overlay / Modal

Semantic Surface Layer

Every component is built using these semantic mappings. This ensures theme-shifting works automatically across light/dark and accent profiles.

Background--ds-background-defaultInstitutional Base

Surface Subtle--ds-surface-subtleInset / Sidebar

Surface Raised--ds-surface-raisedComponent Base

Surface Overlay--ds-surface-overlayElevated UI

Surface Glass--ds-surface-glassGlassmorphism

Institutional Typography

Semantic text tones ensure that readability is prioritized, with dedicated inverse and accent variants for brand expression.

Text Primary--ds-text-primaryHigh contrast

Text Subtle--ds-text-subtleSecondary body

Text Inverse--ds-text-inverseOn light bg

Text Accent--ds-text-accentPrimary brand links

Active Accent Mapping

These tokens reflect the currently active accent profile (Kimchi, Cobalt, or Emerald). Switch the lab above to see them in action.

Kimchi Core--ds-primary-accentEnergy / Brand

Accent Bold--ds-accent-boldInteractive Base

Accent Hover--ds-accent-hoverPressed State

Accent Subtle--ds-accent-subtleTranslucent fill

Phase 2 GF Tokens

The newly mapped tokens from Phase 2 for direct reference.

Brand 50--gf-color-brand-50

Brand 300--gf-color-brand-300

Brand 500 (Kimchi)--gf-color-brand-500

Brand 700--gf-color-brand-700

BG Page--gf-color-bg-page

BG Subtle--gf-color-bg-subtle

BG Default (Card)--gf-color-bg-default

BG Raised--gf-color-bg-raised

BG Overlay--gf-color-bg-overlay

Text--gf-color-text

Text Subtle--gf-color-text-subtle

Border--gf-color-border

Success--gf-color-success

Warning--gf-color-warning

Danger--gf-color-danger

Info--gf-color-info

Institutional OKLCH Protocol

We leverage OKLCH for institutional stability. By locking Chrome (C) and Hue (H) while strictly managing Lightness (L), we generate accessible palettes that look identical in contrast across different browser engines. This prevents the "flickering" contrast issues common in traditional HEX/HSL systems.