Design Tokens

CheerKeeper's design system tokens ensure consistency across admin dashboard and mobile app.

Colors

Primary Colors

Token	Hex	Usage
Primary Dark	#2D1E58	Headers, buttons, footer
Primary Purple	#6811CB	Links, accents, CTAs
Primary Light	#9B7BC7	Hover states, secondary accents

Mobile App Colors

Token	Hex	Usage
Primary Purple	#6B4E9E	Primary actions
Deep Purple	#3D2963	Headers, emphasis
Light Purple	#9B7BC7	Backgrounds, highlights

Accent Colors

Token	Hex	Usage
Orange	#F5A623	Warnings, highlights
Blue	#4A90D9	Info, links
Coral	#E85A5A	Errors, destructive

Neutrals

Token	Hex	Usage
White	#FFFFFF	Backgrounds, text on dark
Light Gray	#F5F5F5	Page backgrounds
Medium Gray	#424242	Secondary text
Dark Gray	#4A4A4A	Primary text

Semantic Colors

Token	Hex	Usage
Success	#4CAF50	Success states
Error	#E85A5A	Error states
Warning	#F5A623	Warning states

Typography

Font Family

Montserrat is the primary font across all platforms.

font-family: 'Montserrat', system-ui, -apple-system, sans-serif;

Font Weights

Weight	Value	Usage
Light	300	Subtle text
Regular	400	Body text
Medium	500	Emphasis
Semibold	600	Headings, buttons
Bold	700	Strong emphasis

Font Sizes (Mobile)

Token	Size	Usage
xs	10px	Captions, labels
sm	12px	Secondary text
md	14px	Body text
lg	16px	Emphasis
xl	18px	Subheadings
xxl	20px	Section headers
xxxl	24px	Page titles
title	32px	Hero text

Spacing

Scale (Mobile)

Token	Size	Usage
xs	4px	Tight spacing
sm	8px	Component padding
md	12px	Standard spacing
lg	16px	Section spacing
xl	24px	Large gaps
xxl	32px	Page margins

Border Radius

Token	Size	Usage
sm	4px	Small elements
md	8px	Buttons, inputs
lg	12px	Cards
xl	16px	Modals
full	9999px	Pills, avatars

Admin Default: 0.625rem (10px)

Shadows

Admin Dashboard

/* Card shadow */
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

/* Card hover */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

/* Modal */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

Z-Index Scale

Layer	Value	Usage
Base	0	Default content
Dropdown	10	Dropdowns, tooltips
Sticky	20	Sticky headers
Modal	30	Modal overlays
Toast	40	Notifications

Breakpoints

Name	Width	Usage
sm	640px	Mobile landscape
md	768px	Tablet
lg	1024px	Desktop
xl	1280px	Large desktop
2xl	1536px	Wide screens

CSS Variables (Admin)

:root {
  /* Colors */
  --ck-primary-dark: #2D1E58;
  --ck-primary-purple: #6811CB;
  --ck-primary-light: #9B7BC7;

  /* Typography */
  --ifm-font-family-base: 'Montserrat', system-ui, sans-serif;

  /* Spacing */
  --ifm-global-radius: 0.625rem;
}

React Native Constants

// cheerkeeper-app/src/utils/constants.ts

export const colors = {
  primaryPurple: '#6B4E9E',
  deepPurple: '#3D2963',
  lightPurple: '#9B7BC7',
  orange: '#F5A623',
  blue: '#4A90D9',
  coral: '#E85A5A',
  white: '#FFFFFF',
  lightGray: '#F5F5F5',
  mediumGray: '#424242',
  darkGray: '#4A4A4A',
  success: '#4CAF50',
  error: '#E85A5A',
  warning: '#F5A623',
};

export const spacing = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 24,
  xxl: 32,
};

export const borderRadius = {
  sm: 4,
  md: 8,
  lg: 12,
  xl: 16,
  full: 9999,
};

Usage Examples

Admin Button

<button className="bg-[#6811CB] hover:bg-[#2D1E58] text-white rounded-[0.625rem] px-4 py-2 font-semibold">
  Save Changes
</button>

Mobile Card

<View style={{
  backgroundColor: colors.white,
  borderRadius: borderRadius.lg,
  padding: spacing.lg,
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.1,
  shadowRadius: 4,
}}>
  {/* content */}
</View>

Related Docs

• Architecture - System overview
• Contribution Guide - Style guidelines