Component Specification & Tokens

Hybrid Cinematic Corporate

Unified design language for high-performance public marketing, client enterprise platforms, and administrative interfaces.

1. Brand Color Tokens

Deterministic hex tokens. No arbitrary gradients or unapproved color variations.

#102D50

Primary Navy

--brand-navy

#1769AA

Corporate Blue

--brand-corporate

#32A9E8

Electric Blue

--brand-electric

#F4F8FC

Light Background

--brand-light-bg

#172B43

Dark Text

--brand-dark-text

#64748B

Muted Text

--brand-muted

#16866A

Success

--brand-success

#D69B35

Warning

--brand-warning

#DC5454

Danger

--brand-danger

#DDE7F0

Border Token

--brand-border

#0F2038

Dark Surface

--brand-dark-surface

#19375E

Dark Border

--brand-dark-border

2. Typography Scale & Bilingual Foundation

Inter for International English & Noto Sans Devanagari for Hindi localization.

English — InterPrimary

Display (4.5rem)

Architectural AI

H1 (3.25rem)

Enterprise Systems

H2 (2.25rem)

Cinematic Digital Engineering

H3 (1.625rem)

Bespoke Solutions & Integration

Body (1rem / 16px)

StarX Alpha Labs architects mission-critical digital infrastructure for forward-looking enterprises globally.

Hindi — Noto Sans DevanagariLocalization Ready

Display (देवनागरी)

स्टारएक्स लैब्स

H1 (शीर्षक १)

उन्नत डिजिटल वास्तुकला

H2 (शीर्षक २)

उच्च प्रदर्शन सॉफ्टवेयर समाधान

H3 (शीर्षक ३)

सिनेमैटिक तकनीक और नवाचार

Body (मूल पाठ)

स्टारएक्स लैब्स वैश्विक स्तर पर अग्रणी उद्यमों के लिए उच्च स्तरीय सॉफ्टवेयर और आधुनिक डिजिटल समाधान तैयार करता है।

3. Reusable UI Components

Buttons, Badges, Cards, and Form controls across variants and responsive states.

Buttons & Links

Variants

Sizes & Icons

Badges

Electric IndicatorCorporate StatusNavy TagOperationalAudit ReviewAction RequiredOutline Neutral

Cinematic Dark

Autonomous Platform Engineering

Designed for the public web presence and mission-critical client interfaces.

Deep navy `#0F2038` surface token with `#19375E` structural border and dynamic `#32A9E8` focus elevation.

Token: card-cinematic

Corporate Light

Enterprise Governance & Reporting

Designed for customer portal sections, data grids, and administrative surfaces.

Pure `#FFFFFF` surface on `#F4F8FC` background with `#DDE7F0` border and `#1769AA` accents.

Token: card-corporate

Form Components & Validation States

Full Name*

Enter your official business contact name

Corporate Email*

We send project proposals only to verified domains

Division of Interest*

Select the primary capability your project requires

Project Timeline

Estimated target commencement

Project Scope Brief

Brief summary of requirements, technical objectives, and constraints

4. Motion Primitives

Hardware-accelerated Motion for React components with built-in prefers-reduced-motion safety.

Reveal Primitive (Directional & Bounded)

Reveal from bottom

Smooth cubic-bezier easing with viewport trigger.

Reveal from left with delay

Guarantees zero cumulative layout shift (CLS).

StaggerContainer & StaggerItem

Phase 1: Architecture FoundationVerified

Phase 2: Design System ExecutionVerified

Phase 3: Cinematic HomepageCurrent

5. Three.js Client Boundary Test

Isolated R3F Canvas with WebGL detection, dynamic loading state, and static fallback.

R3F / Three.js Boundary Active

DPR [1, 2] • High Performance

Initializing Canvas

Boundary Contract

Server-Safe 3D Isolation

Dynamic client-side import with ssr: false prevents Node.js hydration crashes.
WebGL context check verifies canvas rendering capabilities before mounting R3F.
Primary text and CTAs are never blocked while the 3D canvas initializes.

Phase 3 Target: Interactive StarX 3D Emblem & Hero Scene