Brand Identity System

Brand Essence

What the MaishaOS Brand Represents:

Transformation through simplicity: Complex life optimization made effortless
Intelligence with warmth: AI-powered but human-centered
Balance and harmony: Three life domains working together
Voice and flow: Speak naturally, let systems organize

Brand Personality Traits:

Trait

Expression

Not This

Supportive

Encouraging guide, gentle nudges

Pushy, nagging, guilt-tripping

Scientific

Evidence-based, data-informed

Academic, jargon-heavy, cold

Modern

Contemporary design, cutting-edge AI

Trendy, flashy, overwhelming

Approachable

Conversational, human voice

Casual, unprofessional, overly informal

Empowering

You're in control, we're your tool

Controlling, dictating, prescriptive

2.17

Logo System

Primary Logo

The MaishaOS Flame

The logo consists of two elements:

The Flame Icon: Three flowing flames representing Health, Interests, and Finances
The Wordmark: "MaishaOS" in modern, rounded typography

Official MaishaOS logo with flame icon and wordmark

Symbolism:

Three Flames: The three core life domains MaishaOS helps you balance
- Left Flame (Turquoise): Health - Physical and mental wellbeing
- Center Flame (Gradient): Interests - Career, hobbies, passions
- Right Flame (Blue): Finances - Financial health and planning
Upward Movement: Growth, progress, ascending Maslow's hierarchy
Flowing Form: Voice-first interaction, natural conversation, effortless optimization
Flame Metaphor: Igniting habits, keeping motivation burning, transformation

Logo Variations

1. Primary Lockup (Full Logo)

Use when: Maximum visibility, first impressions, official materials

Flame icon + wordmark
Horizontal orientation
Full color gradient

Minimum size:

Digital: 150px width
Print: 1.5 inches width

2. Icon Only (Flame Symbol)

Use when: Space is limited, brand is already established in context

Social media profile pictures
App icon
Favicon
Watermarks

Minimum size:

Digital: 32px × 32px
Print: 0.5 inches × 0.5 inches

MaishaOS

3. Wordmark Only

Use when: Flame creates visual clutter, professional contexts

Email signatures
Document headers
Partner co-branding (when space is limited)

Minimum size:

Digital: 120px width
Print: 1.2 inches width

Logo Usage Rules

✅ DO:

Use official logo files only — Download from brand assets folder
Maintain aspect ratio — Resize proportionally, never stretch
Ensure adequate clear space — No text/graphics too close to logo
Use on appropriate backgrounds — Light backgrounds for color logo, dark for inverse
Center align when possible — Creates balance and professionalism

❌ DON'T:

Change logo colors — Breaks brand consistency, diminishes recognition
Add effects (shadows, glows, bevels) — Makes logo look dated and unprofessional
Rotate or skew the logo — Distorts intended design, reduces legibility
Place on busy backgrounds — Reduces visibility and impact
Recreate or redraw the logo — Introduces inconsistencies and errors
Outline the logo — Alters the design's visual weight
Use low-resolution files — Results in pixelated, unprofessional appearance

2.18

Color Palette

Primary Colors

These are the core brand colors derived from the flame gradient. Use them dominantly across all materials.

MaishaOS Turquoise

(Flame Left)

#14B8A6RGB(20, 184, 166)

Use Cases: Health-related content, primary CTAs, icons

MaishaOS Teal

(Flame Center Top)

#06B6D4RGB(6, 182, 212)

Use Cases: Gradients, headers, emphasis elements

MaishaOS Sky Blue

(Flame Center)

#0EA5E9RGB(14, 165, 233)

Use Cases: Primary buttons, links, interactive elements

MaishaOS Deep Blue

(Flame Right)

#3B82F6RGB(59, 130, 246)

Use Cases: Finance-related content, accents, depth

Secondary Colors

Supporting colors for variety and hierarchy. Use sparingly for accents and differentiation.

Coral Accent

#F472B6RGB(244, 114, 182)

Use Cases: Interests/hobbies content, highlights, celebration moments

Amber Accent

#FBBF24RGB(251, 191, 36)

Use Cases: Warnings (gentle), premium features, achievements

Emerald Accent

#10B981RGB(16, 185, 129)

Use Cases: Success states, completed habits, positive reinforcement

Rose Accent

#FB7185RGB(251, 113, 133)

Use Cases: Health/wellness content, emotional moments, user stories

Neutral Colors

Foundation colors for text, backgrounds, and UI structure.

Charcoal

(Primary Text)

#1F2937RGB(31, 41, 55)

Use Cases: Body text, headings, high-contrast text

Slate

(Secondary Text)

#64748BRGB(100, 116, 139)

Use Cases: Captions, metadata, secondary information

Cloud

(Borders/Dividers)

#E2E8F0RGB(226, 232, 240)

Use Cases: Borders, dividers, subtle backgrounds

Mist

(Light Backgrounds)

#F8FAFCRGB(248, 250, 252)

Use Cases: Section backgrounds, cards, alternating rows

Pure White

#FFFFFFRGB(255, 255, 255)

Use Cases: Primary backgrounds, negative space

Gradient Usage

The MaishaOS signature gradient flows from turquoise to blue, representing the journey across life domains.

Primary Gradient (Flame Flow)

linear-gradient(135deg, #14B8A6 0%, #06B6D4 50%, #0EA5E9 100%)

Use for:

Hero sections on landing pages
Primary CTA buttons (hover state)
Feature highlight backgrounds
App header bars
Premium/lifetime offering emphasis

Subtle Gradient (Background Accent)

linear-gradient(180deg, #F8FAFC 0%, rgba(224, 242, 254, 1) 100%)

Use for:

Section backgrounds
Card backgrounds
Email backgrounds
Subtle depth and interest

Color Psychology & Domain Mapping

Each primary color connects to a life domain and evokes specific emotions:

Health

Turquoise (#14B8A6)

Psychology: Calm, healing, balance, vitality

Marketing Use: Health habit posts, wellness content, meditation features

Interests

Coral (#F472B6)

Psychology: Creativity, passion, energy, joy

Marketing Use: Career content, hobby tracking, creative pursuits

Finances

Deep Blue (#3B82F6)

Psychology: Trust, stability, intelligence, confidence

Marketing Use: Financial habit posts, investment content, security messaging

2.19

Typography

Font System

MaishaOS uses a three-tier font system optimized for web, mobile, and print.

Headings

Inter

Weights: 600 (Semibold), 700 (Bold)

H1-H4, logo wordmark style, hero text

The quick brown fox jumps over the lazy dog

Body Text

Inter

Weights: 400 (Regular), 500 (Medium)

Paragraphs, captions, UI text

The quick brown fox jumps over the lazy dog. MaishaOS helps you optimize every aspect of your life through voice-first AI.

Accent/Data

JetBrains Mono

Weights: 400 (Regular), 500 (Medium)

Code snippets, data displays, timestamps

const brandColor = '#0EA5E9';
console.log('MaishaOS');

Why Inter?

Modern, clean, highly legible
Rounded characteristics echo logo's friendly nature
Excellent screen rendering at all sizes
Supports 100+ languages (future international expansion)

Typography Scale

Responsive sizing using rem units (1rem = 16px base)

H1 (Hero)

Desktop: 3.5rem (56px)

Mobile: 2.25rem (36px)

Weight: 700 Bold

Line Height: 1.1

Use: Landing page heroes, major announcements

H2 (Section)

Desktop: 2.5rem (40px)

Mobile: 1.875rem (30px)

Weight: 700 Bold

Line Height: 1.2

Use: Section headings, blog titles

H3 (Subsection)

Desktop: 1.875rem (30px)

Mobile: 1.5rem (24px)

Weight: 600 Semibold

Line Height: 1.3

Use: Subsections, card titles

Body Regular: Transform overwhelming complexity into effortless optimization. Bridge the gap between knowing what's optimal and actually doing it.

Size: 1rem (16px)

Weight: 400 Regular

Line Height: 1.7

Use: Standard paragraphs, descriptions

Size: 1rem (16px)

Weight: 600 Semibold

Line Height: 1.0

Use: Buttons, links, CTAs

Typography Usage Guidelines

Headings

✅ DO:

Use sentence case for most headings ("Build habits that stick")
Title case for major announcements ("Introducing Daily Briefings")
Keep hero headlines under 10 words
Use bold for emphasis within headings sparingly

❌ DON'T:

Use all caps (reduces legibility)
Center-align long headlines (>20 words)
Use more than 2 font weights in one headline
Justify text (creates awkward spacing)

Body Text

Optimal Readability:

Line length: 50-75 characters (about 8-12 words)
Paragraph spacing: 1.5× line height
Max width: 65ch (characters) for blog posts
Left-align for English content

Emphasis Techniques:

Bold for important terms (use sparingly)
Italics for quotes or subtle emphasis
Color for links only (Sky Blue #0EA5E9)
Avoid underlining except for links

Special Text Treatments

Pull Quotes (User Testimonials)

"MaishaOS helped me finally stick to my habits. The voice-first approach makes it so easy!"

Font: Inter Bold, 1.5rem (24px)

Color: Deep Blue (#3B82F6)

Style: Left border (4px, Turquoise #14B8A6)

Line height: 1.4

Data/Metrics Display

87%

User Retention Rate

Font: Inter Bold, 3rem (48px)

Color: Primary gradient

Supporting text: Slate (#64748B), 0.875rem

Code/Technical Text

const maisha = new MaishaOS();
maisha.trackHabit('morning_workout');

Font: JetBrains Mono Regular, 0.875rem

Background: Mist (#F8FAFC)

Border: Cloud (#E2E8F0)

Padding: 0.5rem

2.21

UI Component Styles

Buttons

Primary Button (Main CTAs)

Background: Linear gradient (Turquoise → Sky Blue)
Text: White (#FFFFFF), Inter Semibold, 1rem
Padding: 0.75rem 1.5rem (12px 24px)
Border Radius: 8px
Box Shadow: 0 4px 6px rgba(14, 165, 233, 0.2)

Secondary Button (Supporting Actions)

Background: White (#FFFFFF)
Text: Sky Blue (#0EA5E9), Inter Semibold, 1rem
Border: 2px solid Sky Blue (#0EA5E9)
Padding: 0.75rem 1.5rem
Border Radius: 8px

Tertiary Button (Subtle Actions)

Background: Transparent
Text: Slate (#64748B), Inter Medium, 1rem
Padding: 0.5rem 1rem
Border: None

Cards

Standard Content Card

Card Title

This is an example of a standard content card with typical text content and layout.

Background: White (#FFFFFF)
Border: 1px solid Cloud (#E2E8F0)
Border Radius: 12px
Padding: 1.5rem (24px)
Box Shadow: 0 1px 3px rgba(0, 0, 0, 0.1)

Featured Card (Premium/Highlight)

Premium Feature

This card highlights premium or important content with enhanced visual treatment.

Background: Subtle gradient (Mist → Sky Blue 10%)
Border: 2px solid Turquoise (#14B8A6)
Border Radius: 16px
Padding: 2rem (32px)
Box Shadow: 0 10px 20px rgba(20, 184, 166, 0.15)

Form Elements

Text Input

Background: White (#FFFFFF)
Border: 2px solid Cloud (#E2E8F0)
Border Radius: 8px
Padding: 0.75rem 1rem
Font: Inter Regular, 1rem

Focus State:
Border: 2px solid Sky Blue (#0EA5E9)
Box Shadow: 0 0 0 3px rgba(14, 165, 233, 0.1)

Checkbox/Radio

Unchecked optionChecked option

Size: 20px × 20px
Border: 2px solid Cloud (#E2E8F0)
Border Radius: 4px (checkbox) / 50% (radio)

Checked State:
Background: Sky Blue (#0EA5E9)
Border: Sky Blue (#0EA5E9)
Checkmark: White (#FFFFFF)

Badges & Tags

Status Badges

CompletedPendingIn Progress

Success (Completed):

Background: Emerald 10% (#10B98119)
Text: Emerald (#10B981), Inter Medium, 0.75rem
Padding: 0.25rem 0.75rem
Border Radius: 12px (pill shape)

Progress Bars

Habit Progress (75% Complete)

Background: Cloud (#E2E8F0)
Fill: Primary gradient (Turquoise → Sky Blue)
Height: 8px
Border Radius: 4px (fully rounded)

2.20-2.22

Visual Style System & Social Media

How Brand Traits Manifest Visually

Supportive

Visual: Soft gradients, rounded corners, gentle shadows

Example: Button corners at 8px radius, encouraging color palette

Avoid: Sharp angles, harsh contrasts, aggressive reds

Scientific

Visual: Clean data visualizations, grid layouts, precise alignment

Example: Charts with clear axes, organized information hierarchy

Avoid: Chaotic layouts, unclear data, decorative clutter

Modern

Visual: Contemporary gradients, subtle animations, generous white space

Example: Flame's 3D gradient effect, smooth transitions

Avoid: Dated effects (drop shadows, bevels), cluttered designs

Approachable

Visual: Human photography, conversational text layouts, accessible colors

Example: Real user photos, casual captions, friendly icons

Avoid: Corporate stock photos, formal compositions, intimidating imagery

Empowering

Visual: Bold typography, confident colors, clear CTAs

Example: Large headlines, primary buttons, visible progress

Avoid: Timid text, hidden actions, unclear navigation

Social Media Template Specifications

Iconography

Icon Style Attributes

Style: Rounded, outlined (not filled)
Weight: 2px stroke weight
Corners: Rounded (2px radius)
Grid: 24×24px base grid
Color: Single color (brand blue or gradient for emphasis)

Recommended Icon Libraries

Heroicons (heroicons.com)Lucide Icons (lucide.dev)Phosphor Icons (phosphoricons.com)

Important: Pick ONE library and stick with it across all materials for consistency.

Core Icon Set (Minimum Needed)

🎤 Voice/Audio - Microphone

✓ Habits - Check circle

📅 Calendar - Schedule, events

📊 Insights - Chart/Graph

⚙️ Settings - Gear/Cog

👤 User - Person outline

➕ Add/Plus - Plus circle

🔔 Notification - Bell

🔒 Privacy - Lock/Shield

Brand Compliance Quick Check

Before Publishing:

✓ Official logo files used (not recreated)
✓ Colors match brand hex codes exactly
✓ Inter font used for headings and body
✓ Text contrast meets WCAG AA standards
✓ Spacing generous (not cramped or cluttered)
✓ Overall feel aligned with brand personality (supportive, modern, scientific, approachable, empowering)

Accessibility:

✓ Alt text provided for all images
✓ Color not sole means of conveying information
✓ Interactive elements large enough (minimum 44×44px)
✓ Form labels clearly associated with inputs