imajeure
Design System
The Rainbow Framework component library for the Social Networking Activity Index. Built with Atomic Design principles.
Atomic Design Hierarchy
Level 1
Tokens
Design foundations: colors, typography, spacing, radii, animations
Rainbow ColorsFont FamiliesSpacing Scale
Level 2
Atoms
Basic building blocks: buttons, badges, inputs, switches
ButtonBadgeSwitchProgress
Level 3
Molecules
Simple component groups: pills, cards with specific purposes
RainbowPillMetricCardRainbowPillGroup
Level 4
Organisms
Complex, standalone UI sections with rich functionality
AuraRingScoreDisplayDashboardSidebar
Level 5
Templates
Page layouts that compose organisms into structures
DashboardLayoutMarketingLayoutShowcaseLayout
Level 6
Pages
Fully realized views with real data and interactions
DashboardAnalyticsSettings