Sara Mobiles and Electronics

Smart, Secure, Seamless

Professional, innovative, reliable, tech-driven brand identity system

Color Palette

Primary Colors

Primary Blue

#2A7FFF

Blue Dark

#1E5FCC

Blue Light

#5B9FFF

Accent Colors

Accent Yellow

#FFC107

Accent Green

#00C48C

Neutral Colors

dark

#1F1F1F

mid

#666666

light

#F5F5F5

white

#FFFFFF

Typography

H1 Hero - 48px Poppins Bold

Used for main hero sections

H2 Section - 32px Poppins SemiBold

Used for section headings

H3 Subsection - 24px Poppins SemiBold

Used for subsections

H4 Card Title - 20px Poppins Medium

Used for card titles

Body Text - 16px Roboto Regular

Used for body content and descriptions

Buttons

Primary Button

Used for primary actions and CTAs

Secondary Button

Used for secondary actions

Button Sizes

Badges

SaleSuccessInfoWarning

Used for status indicators, labels, and promotional tags

Cards

Product Card

White background with subtle shadow and 8px border radius

Feature Card

Consistent padding and spacing using 8px scale

Info Card

Hover effects for better interactivity

New

Form Elements

Text Input

Email Input

Select Dropdown

Textarea

Spacing System (8px base)

XS: 4px

SM: 8px

MD: 16px

LG: 24px

XL: 32px

2XL: 48px

3XL: 64px

4XL: 96px

Gradients

Primary Gradient

Used for buttons and CTAs

Hero Gradient

Used for hero sections

Usage Examples

Importing Brand Guidelines

import BrandGuidelines, {
  COLORS,
  getPrimaryButtonClasses,
  getCardClasses,
} from '@/lib/brandGuidelines'

// Use helper functions
<button className={getPrimaryButtonClasses()}>
  Get Started
</button>

// Or use constants directly
<div style={{ color: COLORS.primary.blue }}>
  Sara Mobiles and Electronics 
</div>

Brand Voice & Messaging

✅ Recommended CTAs

Brand Characteristics

✓ Confident: We know our technology
✓ Clear: No jargon, straightforward
✓ Modern: Forward-thinking
✓ Approachable: Friendly and helpful

Do's & Don'ts

✅ Do's

✓ Use approved fonts and colors
✓ Keep logo consistent
✓ Ensure accessibility standards
✓ Use 8px spacing scale
✓ Test on multiple devices
✓ Maintain proper hierarchy

❌ Don'ts

✗ Don't distort the logo
✗ Don't use mismatched fonts
✗ Don't create cluttered designs
✗ Don't use unapproved colors
✗ Don't ignore mobile responsiveness
✗ Don't use poor quality images