Nutri-E Style Guide¶

Comprehensive design and branding guidelines for the Nutri-E ecosystem across all platforms.

Table of Contents¶

Brand Identity
Color Palette
Typography
Mascots
Website Style
iOS App Style
Android App Style
Component Guidelines

Brand Identity¶

Brand Values¶

Friendly & Approachable: Health tracking should be fun and engaging
Trustworthy: Accurate data with NIH DSLD integration
Privacy-First: User data stays on device
AI-Powered: Intelligent features with GPT-4 Vision

Brand Voice¶

Warm and supportive (like a helpful friend)
Clear and informative (no medical jargon)
Encouraging and positive
Professional yet playful

Color Palette¶

Primary Colors¶

--primary-color: #007AFF;      /* iOS Blue - Primary actions, links */
--secondary-color: #34C759;    /* Success Green - Positive actions */
--orange-accent: #FF9500;      /* Accent Orange - Highlights, warnings */

Text Colors¶

--text-dark: #1D1D1F;          /* Primary text */
--text-light: #5E5E62;         /* Secondary text (WCAG AA compliant) */

Background Colors¶

--bg-white: #FFFFFF;           /* Primary background */
--bg-light: #F5F5F7;           /* Secondary background */
--bg-card: #FFFFFF;            /* Card backgrounds */

Border & Shadow¶

--border-color: #D2D2D7;       /* Borders, dividers */
--shadow: 0 2px 8px rgba(0, 0, 0, 0.08);      /* Card shadow */
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);  /* Elevated shadow */

Mascot Colors¶

--nutri-e-purple: #8B7BD1;     /* Nutri-E body color */
--cuti-e-pink: #FF6B9D;        /* Cuti-E body color */
--codi-e-teal: #4ECDC4;        /* Codi-E body color */

Color Usage Guidelines¶

Primary Blue (#007AFF) - Call-to-action buttons - Active navigation items - Links and interactive elements - Focus states

Success Green (#34C759) - Success messages - Positive confirmations - "Add" actions - RDA progress indicators (when met)

Orange Accent (#FF9500) - Important highlights - Warning states (not errors) - Featured content - Under RDA warnings

Red (System) - Error states - Destructive actions (delete) - Exceeding Max Intake warnings

Typography¶

Font Family¶

Primary Font: Inter - Clean, modern sans-serif - Excellent readability at all sizes - Variable font support

Fallback Stack:

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

Font Weights¶

Light (300): Large headings, decorative text
Regular (400): Body text, descriptions
Semi-Bold (600): Section headings, emphasis
Bold (700): Primary headings, call-to-actions

Type Scale¶

Website

h1: 48px / 300 weight  /* Hero titles */
h2: 36px / 600 weight  /* Section titles */
h3: 24px / 600 weight  /* Card titles */
h4: 20px / 600 weight  /* Subsection titles */
body: 16px / 400 weight /* Body text */
small: 14px / 400 weight /* Secondary text */

iOS/Android - Follow platform conventions (Dynamic Type on iOS, sp units on Android) - Scale with system font size settings - Maintain hierarchy across sizes

Line Height¶

Headings: 1.2x font size
Body text: 1.6x font size
UI elements: 1.4x font size

Mascots¶

Design Principles¶

All mascots follow a consistent cute/kawaii style:

Body Shape: Simple egg/bean shape (no clothing)
Eyes: Extra big with large highlights (kawaii style)
Proportions: Baby-like with large head-to-body ratio
Cheeks: Soft light pink blush (subtle, not bright)
Expression: Sweet, innocent smile
Background: Pure white (#FFFFFF)
Rendering: Soft 3D with gentle lighting

Mascot Characters¶

Nutri-E (Health Expert)¶

Color: Purple/Lavender (#8B7BD1)
Role: Primary brand mascot, nutrition guide
Personality: Knowledgeable, helpful, friendly
Accessories: None (simple egg body)

Cuti-E (Support Specialist)¶

Color: Pink/Coral (#FF6B9D)
Role: User support and encouragement
Personality: Caring, playful, supportive
Accessories: None (simple egg body)

Codi-E (Tech Wizard)¶

Color: Teal/Cyan (#4ECDC4)
Role: AI features representative
Personality: Smart, clever, innovative
Accessories: Round glasses (only accessory)

Mascot Usage¶

✅ DO: - Use in team sections, about pages - Display in circular containers (200px diameter) - Maintain 20px padding inside circles - Use pure white backgrounds - Keep aspect ratio 1:1 (square images)

❌ DON'T: - Stretch or distort mascots - Add filters or effects - Use on colored backgrounds - Crop or partially show mascots - Add additional accessories

Verified Mascot Assets¶

All mascot images validated with scripts/validate-mascot-images.sh:

✅ Production Mascots (Verified) - website/images/nutri-e-mascot.png - 1024x1536px (non-square, original artwork) - website/images/cuti-e-mascot.png - 1024x1536px (non-square, original artwork) - website/images/codi-e-mascot.png - 1024x1024px ✓ Square

Note: nutri-e-mascot.png and cuti-e-mascot.png are currently 1024x1536px (non-square) due to original artwork proportions. These are intentional exceptions to the 1:1 aspect ratio guideline. All new mascot images should follow the 1:1 (square) format unless otherwise specified.

✅ Brand Reference (Verified - marked with green badges) - website/brand-reference/cuti-e-vitamin-celebration-800.png - ✓ Verified - website/brand-reference/codi-e-developer-800.png - ✓ Verified

Note: Verified images in the brand reference are marked with green "✓ Verified" badges at https://www.nutrieapp.com/brand-reference/

Website Style¶

Layout Principles¶

Container Width: Max 1200px for readability
Spacing: 20px between sections, 16px between elements
Grid: CSS Grid for complex layouts, Flexbox for simple rows/columns
Responsive: Mobile-first approach

Card Design¶

.card {
    background: var(--bg-card);
    padding: 24px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

Button Styles¶

Primary Button

background: var(--primary-color);
color: white;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;

Secondary Button

background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
padding: 12px 24px;
border-radius: 8px;

Fixed header with backdrop blur
5 main sections: Features, Team, Pricing, FAQ, Download
Active state: Blue underline
Mobile: Hamburger menu at < 768px

Team Section¶

3-column grid (1 column on mobile)
Circular mascot images (200px diameter)
White background circles
Card-based layout with hover effects

iOS App Style¶

Design System¶

Framework: SwiftUI + iOS 16+ Human Interface Guidelines

Color Scheme¶

Light Mode - Background: System background (white) - Secondary background: System grouped background - Cards: White with shadows

Dark Mode - Background: System background (black) - Secondary background: System grouped background - Cards: Dark gray with elevated appearance

Navigation¶

Tab Bar (5 tabs maximum) 1. Today - Dashboard view 2. Supplements - List view 3. Schedule - Time-based view 4. Nutrients - Analytics view 5. More - Settings & extras

Navigation Bar - Large title style for main views - Inline style for detail views - iOS system blue for interactive elements

Card Design Pattern¶

All views use consistent card-based layout:

ScrollView {
    VStack(spacing: 20) {
        // Section cards
        VStack(alignment: .leading, spacing: 12) {
            Text("Section Header")
                .font(.headline)

            // Card content
        }
        .padding()
        .background(Color(.secondarySystemBackground))
        .cornerRadius(10)
    }
    .padding(.vertical)
}
.background(Color(.systemBackground))

Typography¶

Title: .largeTitle or .title
Headers: .headline
Body: .body
Secondary: .subheadline
Captions: .caption

All typography supports Dynamic Type for accessibility.

List Patterns¶

SwiftUI Lists - Grouped style for settings - Inset grouped for cards - Context menus for actions (long-press) - Swipe actions avoided in favor of context menus

Interaction Patterns¶

✅ DO: - Use context menus (long-press) for delete/edit - Support Dynamic Type - Follow iOS Human Interface Guidelines - Use native iOS components - Implement haptic feedback

❌ DON'T: - Use custom navigation patterns - Override system colors without dark mode support - Ignore safe area insets - Use Android-style patterns

Android App Style¶

Design System¶

Framework: Jetpack Compose + Material Design 3

Color Scheme¶

Light Theme - Primary: #007AFF (matching iOS) - Secondary: #34C759 - Background: #FFFFFF - Surface: #F5F5F7

Dark Theme - Primary: #0A84FF (lighter for dark mode) - Secondary: #30D158 - Background: #000000 - Surface: #1C1C1E

Navigation¶

Bottom Navigation (5 items maximum) 1. Today 2. Supplements 3. Schedule 4. Nutrients 5. More

Material Design 3 Components - Navigation bar with pill-shaped indicators - Floating Action Button for primary actions - Top app bar with Material elevation

Card Design¶

Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp),
    elevation = CardDefaults.cardElevation(
        defaultElevation = 2.dp
    ),
    shape = RoundedCornerShape(12.dp)
) {
    // Card content
}

Typography¶

Material Design 3 Type Scale - Display Large: 57sp - Headline Large: 32sp - Title Large: 22sp - Body Large: 16sp - Label Large: 14sp

Interaction Patterns¶

✅ DO: - Use Material ripple effects - Implement floating action buttons - Follow Material Design guidelines - Support system font scaling - Use Material icons

❌ DON'T: - Use iOS-specific patterns - Ignore Material elevation - Use custom navigation drawer (use bottom nav) - Override Material theme without proper theming

Component Guidelines¶

Progress Indicators¶

RDA Progress Bars - Green: >= 100% RDA - Orange: 0-99% RDA - Red: > 100% Max Intake - Height: 8px on web, adaptive on mobile - Border radius: 4px - Show percentage text above bar

Input Fields¶

Form Fields - 16px font size (minimum for mobile) - 44px minimum height (iOS) / 48dp (Android) - Clear focus states - Validation on blur - Error messages below field

Icons¶

Icon Set: Use platform-native icons - Web: SVG icons, 24px size - iOS: SF Symbols - Android: Material Icons

Spacing System¶

8px Base Unit - XS: 8px - SM: 16px - MD: 24px - LG: 32px - XL: 48px

Use multiples of 8 for consistent spacing throughout the app.

Accessibility¶

Color Contrast - Text on background: Minimum 4.5:1 (WCAG AA) - Large text: Minimum 3:1 - Interactive elements: Minimum 3:1

Touch Targets - Minimum: 44x44px (iOS) / 48x48dp (Android) - Spacing between targets: 8px minimum

Screen Readers - Provide meaningful labels - Use semantic HTML/native components - Test with VoiceOver (iOS) and TalkBack (Android)

Asset Export Guidelines¶

Mascot Images¶

Format: PNG with transparency Dimensions: 1024x1024px (square) preferred File Size: 500KB - 2MB optimal Background: Pure white (#FFFFFF)

Web Export - 1x: 200px (for circles) - 2x: 400px (for retina displays)

iOS Export - 1x: @1x - 2x: @2x - 3x: @3x

Android Export - mdpi: 1x - hdpi: 1.5x - xhdpi: 2x - xxhdpi: 3x - xxxhdpi: 4x

Icon Export¶

Web: SVG preferred, PNG fallback iOS: SF Symbols (vector), PDF for custom icons Android: Vector drawables (XML), PNG for photos

Validation & Quality Control¶

Automated Checks¶

Mascot Validation Run before committing mascot changes:

./scripts/validate-mascot-images.sh

Checks: - File existence - PNG format - Square dimensions (1:1 ratio) - Reasonable file size - HTML references

Manual Review Checklist¶

Before Deployment - [ ] Colors match brand palette - [ ] Typography hierarchy is clear - [ ] Spacing follows 8px grid - [ ] Responsive on all screen sizes - [ ] Accessible (WCAG AA minimum) - [ ] Mascots are consistent style - [ ] Dark mode works correctly (if applicable) - [ ] Touch targets meet minimum sizes

Resources¶

Design Files¶

Brand mascots: website/brand-reference/
Color palette: See Color Palette
Typography: Inter font from Google Fonts

Documentation¶

Website styles: website/styles.css
iOS patterns: CLAUDE.md (Views section)
Validation script: scripts/validate-mascot-images.sh

External Guidelines¶

Changelog¶

2025-10-25 - Initial style guide creation - Documented mascot design principles - Added website, iOS, and Android style guidelines - Included validation and quality control processes

Maintained by: Nutri-E Development Team Last Updated: October 25, 2025 Version: 1.0.0