Token System Master Guide

The unified source of truth for GateFlow's visual grammar. Every component, from AI surfaces to data tables, is governed by these semantic tokens.

AI Prompting Guide

To achieve the best results with Cursor, Claude, or Antigravity, use these specific semantic keywords in your prompts. This ensures the AI uses our tokens instead of hardcoded values.

Standard Prompting

"Build a card with a light grey border..."

"Build a card using .ds-card-premium and var(--ds-surface) background..."

AI & Premium Prompting

"Make this sidebar look futuristic and purple..."

"Apply the AI Surface tokens with a mesh gradient using var(--gf-surface-mesh)..."

Recommended System Prompt Addition:

"Always use @gateflow/tokens. Prefer var(--ds-*) for standard UI and var(--gf-*) for core foundations. 
Avoid hardcoded HSL/Tailwind colors. For dark mode, use the satin-charcoal surfaces (bg-page/subtle/default/raised/overlay). 
For AI, use Orchid accents and Mesh surfaces. Buttons should use rounded-[var(--ds-border-radius-200)]."

AI Surfaces & Virtual Lab

Premium orchid-tinted surfaces for Artificial Intelligence. Uses mesh gradients and interactive glows.

Virtual Laboratory

Welcome to the predictive engine. All intelligence layers are governed by the Orchid palette to denote artificial intervention.

Analytics & Charts

The analytics palette is optimized for data clarity. Use chart-1 (Kimchi) for primary data tracks.

Chart 1

Chart 2

Chart 3

Chart 4

Chart 5

Total Scans Trend+12.5%

Enterprise Data Tables

High-density tables use subpixel alignment and semantic surface tokens for header-page contrast.

Status	Subject	Last Activity
success	Gate Access Restored	2 mins ago
warning	Late Departure: Unit 402	14 mins ago
info	Maintenance Ticket #4021	1 hour ago

Message Boxes & Status

Unified status trackers for Information, Success, Warning, and Danger. Uses semantic subtle backgrounds.

Operation Complete

The resident pass has been successfully issued.

Delayed Sync

Offline cache is waiting for network restoration.

Unauthorized Access

The attempt was logged and reported to authorities.

Universal UI: Dropdowns & Modals

Standardizing the 'Raised' surface hierarchy for floating components. Always use high corner radii (rounded-xl or above) for premium depth.

Account Settings

View Profile

Organization Info

Pro

Sign Out

Analytics

Permissions

Best UI/UX Refinement Checklist

Achieve the GateFlow 'Signature Premium Look' by following these constraints on every new feature.

Corner Radii

Never use standard rounded-md. Prefer rounded-xl for small items, rounded-2xl for cards, and rounded-[3rem] for sections.

Depth & Shadow

Use var(--gf-shadow-lg) for floating items. Add var(--ds-glow-premium) on hover to communicate importance.

Motion & Springs

Transitions should be 300ms. Use the expressive easing token for smooth, cinematic component interactions.

Typography Contrast

Headings must be font-black and uppercase. Body text should use font-medium with increased leading (relaxed).

Satin Dark Mode

Avoid grey-800. Always use the satin-charcoal hierarchy (12-22% lightness) for a deep, non-stark background.

Logical Properties

Ensure RTL support by using margin-inline and padding-inline instead of left/right values.