🛡️ ADMIN ACCESS ONLY • GOOGLE OAUTH PROTECTED • LIGHT & DARK MODE READY

UI Kit & Design System Workbench

Authoritative isomorphic component catalog across @cinderclub/ui-kit. Zero-build TypeScript, WCAG-compliant contrast ratios, and dual-mode tokenized surfaces.

← Back to Admin Console

SECTION 01 / BRAND & LOGO SYSTEM

Brand Logos & Wordmarks (CinderLogo)

Primary brand lockup for Cinderhouse ecosystems. The text after CINDER renders in signature flame orange (#f97316) for flexible sub-branding.

Sub-Brand Lockup Variations

CINDER CLUB

CINDER HOUSE

CINDER SHOP

CINDER BBQ

<CinderLogo prefix="CINDER" suffix="CLUB" size="lg" glow />

Cinder Emblem

Scalable SVG vector with ambient glow filter

User Avatar

Deterministic monogram initials generation

SECTION 02 / FOUNDATIONS

Design Tokens & Color Palette

Core CSS custom properties supporting both dark (#0a0a0c) and light (#fafafa) theme roots.

Primary Ember

--cinder-primary (#f97316)

Background

--cinder-bg (#0a0a0c)

Card Surface

--cinder-card (#121216)

Gold / Warning

--cinder-gold (#fbbf24)

Success

--cinder-success (#22c55e)

Danger

--cinder-danger (#ef4444)

SECTION 03 / ACTION PRIMITIVES

Button Variants

Primary, secondary, outline, ghost, and danger variants with size scaling (sm, md, lg) and loading spinners.

<Button variant="primary" size="md">Label</Button>

SECTION 04 / STATUS & TIERS

Badge & Status Indicators

Tier indicators, membership tags, and transaction status pills.

Ember Accent Gold Tier Silver Tier Bronze Tier Founding Member Pass Active Danger

<Badge variant="gold" size="md">Label</Badge>