Design System

Theme Support

CalorieBeat supports three theme modes for comfortable viewing in any environment.

Theme Modes

Light Mode

Clean, bright interface
High contrast for daylight
Reduced eye strain in bright environments
Professional appearance

Dark Mode

Eye-friendly dark interface
Reduces blue light exposure
Perfect for nighttime use
Saves battery on OLED screens

System Mode

Automatically matches device settings
Switches with OS theme
Respects user preferences
Seamless experience

Theme Switching

How to Change:

Go to Settings
Tap Appearance
Select theme preference
Instant application

Features:

Smooth transitions
Persists across app restarts
All components theme-aware
No page reload required

Color Palette

Primary Colors

// Brand Colors
brandBlue: '#007AFF'      // Primary actions, links
accentGreen: '#34C759'    // Success, positive actions
warningOrange: '#FF9500'  // Warnings, caution
errorRed: '#FF3B30'       // Errors, destructive actions

Neutral Colors

Light Theme:

background: '#FFFFFF'     // Main background
surface: '#F2F2F7'        // Cards, elevated elements
border: '#E5E5EA'         // Borders, dividers
text: '#000000'           // Primary text
textSecondary: '#8E8E93'  // Secondary text

Dark Theme:

background: '#000000'     // Main background
surface: '#1C1C1E'        // Cards, elevated elements
border: '#38383A'         // Borders, dividers
text: '#FFFFFF'           // Primary text
textSecondary: '#8E8E93'  // Secondary text

Semantic Colors

// Status Colors
success: '#34C759'
warning: '#FF9500'
error: '#FF3B30'
info: '#007AFF'
 
// Chart Colors
chart1: '#007AFF'
chart2: '#34C759'
chart3: '#FF9500'
chart4: '#FF3B30'
chart5: '#AF52DE'

Typography

Font Families

iOS:

Headers: SF Pro Display
Body: SF Pro Text
Monospace: SF Mono

Android:

Headers: Roboto
Body: Roboto
Monospace: Roboto Mono

Font Sizes

// Headings
h1: 32px / 2rem
h2: 28px / 1.75rem
h3: 24px / 1.5rem
h4: 20px / 1.25rem
h5: 18px / 1.125rem
h6: 16px / 1rem
 
// Body
body: 16px / 1rem
bodySmall: 14px / 0.875rem
caption: 12px / 0.75rem
tiny: 10px / 0.625rem

Font Weights

thin: 100
light: 300
regular: 400
medium: 500
semibold: 600
bold: 700
heavy: 800
black: 900

Line Heights

tight: 1.25
normal: 1.5
relaxed: 1.75
loose: 2

Spacing System

Consistent spacing scale (8px base unit):

xs: 4px    // 0.5 × base
sm: 8px    // 1 × base
md: 16px   // 2 × base
lg: 24px   // 3 × base
xl: 32px   // 4 × base
2xl: 48px  // 6 × base
3xl: 64px  // 8 × base

Component Styles

Buttons

Primary Button:

Background: brandBlue
Text: white
Padding: 12px 24px
Border radius: 8px
Font: semibold

Secondary Button:

Background: transparent
Text: brandBlue
Border: 1px solid brandBlue
Padding: 12px 24px
Border radius: 8px

Destructive Button:

Background: errorRed
Text: white
Padding: 12px 24px
Border radius: 8px

Cards

{
  backgroundColor: colors.surface,
  borderRadius: 12,
  padding: 16,
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.1,
  shadowRadius: 4,
  elevation: 3 // Android
}

Input Fields

{
  backgroundColor: colors.surface,
  borderColor: colors.border,
  borderWidth: 1,
  borderRadius: 8,
  padding: 12,
  fontSize: 16,
  color: colors.text
}

Icons

Using Lucide React Native icons:

import { Home, Plus, User, Settings } from 'lucide-react-native';
 
<Home size={24} color={colors.text} />

Standard Sizes:

Small: 16px
Medium: 24px
Large: 32px
Extra Large: 48px

Animations

Transitions

// Fade in/out
duration: 200ms
easing: ease-in-out
 
// Slide
duration: 300ms
easing: ease-out
 
// Scale
duration: 150ms
easing: ease-in-out

Micro-interactions

Button press: Scale 0.95
Like animation: Heart pop
Success: Checkmark appear
Error: Shake animation

Accessibility

Touch Targets

Minimum touch target size: 44px × 44px (iOS) / 48px × 48px (Android)

Color Contrast

All text meets WCAG AA standards:

Normal text: 4.5:1 contrast ratio
Large text: 3:1 contrast ratio
Interactive elements: 3:1 contrast ratio

Semantic HTML elements
ARIA labels where needed
Focus indicators
Keyboard navigation

🏗️ Architecture Patterns 📱 Screens & Navigation