Pages

Fully realized views - templates populated with real or mock data. Pages are the final level of Atomic Design.

Active
Scaffold
Planned
Dashboard
Active
Main user dashboard with ScoreDisplay, AuraRing, and MetricCards
View Live

Template

DashboardLayout

Data Points

  • •Total Aura Score (0-700)
  • •Individual Rainbow metric values
  • •Trend percentages
  • •Quick stats (connections, impressions, engagement)

Components

ScoreDisplayAuraRingMetricCardMetricCardGrid
/dashboard
Analytics
Scaffold
Deep dive into Rainbow Framework metrics with charts and trends
View Live

Template

DashboardLayout

Data Points

  • •Metric time series data
  • •Comparison benchmarks
  • •Historical trends

Components

RainbowPillGroup
/dashboard/analytics
Creator Profile
Scaffold
Individual creator view with full Rainbow breakdown
View Live

Template

DashboardLayout

Data Points

  • •Creator identity
  • •AuraRing visualization
  • •Connection graph
  • •Historical score changes

Components

AuraRingMetricCard
/dashboard/creator/[id]
Settings
Active
User preferences, notifications, security, and account management
View Live

Template

DashboardLayout

Data Points

  • •User preferences
  • •Notification settings
  • •Connected accounts
  • •Security options

Components

ThemeToggleGroupSwitchButton
/dashboard/settings
Landing
Active
Public marketing landing page with Atomic Design navigation
View Live

Template

MarketingLayout

Data Points

  • •Static marketing content
  • •Design system navigation

Components

Static content only

/

📐 Pages in Atomic Design

Pages are the final level of Atomic Design. They are specific instances of templates with real content and data. Pages demonstrate how the design system works with actual use cases and are what users ultimately interact with.

Atoms→Molecules→Organisms→Templates→Pages