CP-Framework v1.0 · Design System Hub

Celluplan UI Framework & Design Tokens

High-contrast, mathematically rigorous neobrutalist design system built for telecommunications observatory analytics.

SSOT Architecture • Zero Ad-hoc Style Sprawl • 100% Componentized & Maintainable

Design Tokens

01. Core Color Palette & Hard Drop Shadows

All UI components strictly adhere to standardized tokens without arbitrary shadows or ad-hoc border colors:

Signal Orange #ea580c · Primary

Deep Slate #020617 · Dark

Verified Emerald #059669 · Savings

Champion Gold #f59e0b · Winner

Alert Red #dc2626 · Danger

Canvas Surface #f8fafc · Neutral

.shadow-cp-sm

2px compact drop shadow for active button states and micro pills.

.shadow-cp (Standard)

4px standard drop shadow baseline for cards, tables, and notices.

.shadow-cp-lg

6px heavy hero shadow for champion spotlights and hero sections.

Cards System

Standardized container card variants powered by <CpCard variant='...'>:

Variant: default

General content wrapper with standard 2px border and 4px shadow.

Interactive card with 2px lift, orange border transition, and expanded shadow.