MimmaarAI Brand Guidelines
Official brand identity guidelines for consistent visual communication.
Brand Overview
MimmaarAI represents intelligent artifact generation with a focus on professionalism, clarity, and modern aesthetics. Our brand communicates innovation while remaining approachable and trustworthy.
Logo
Primary Logo
The MimmaarAI logo consists of the wordmark with a distinctive "AI" integration.
Usage Rules
- •Maintain minimum clear space around logo
- •Do not distort, rotate, or modify colors
- •Use approved logo files only
- •Minimum size: 120px wide for digital, 1 inch for print
Logo Variations
| Variation | Use Case |
|---|---|
| Full Color | Default usage on light backgrounds |
| Reversed | Use on dark backgrounds |
| Monochrome | Single-color applications |
| Icon Only | App icons, favicons |
Color Palette
Primary Colors
| Color | Name | Hex | RGB | Usage |
|---|---|---|---|---|
| Mimmaar Blue | #2563EB | 37, 99, 235 | Primary brand color, CTAs, links | |
| Deep Blue | #1E40AF | 30, 64, 175 | Headers, emphasis | |
| Light Blue | #DBEAFE | 219, 234, 254 | Backgrounds, highlights |
Secondary Colors
| Color | Name | Hex | RGB | Usage |
|---|---|---|---|---|
| Success Green | #10B981 | 16, 185, 129 | Success states, confirmations | |
| Warning Amber | #F59E0B | 245, 158, 11 | Warnings, attention | |
| Error Red | #EF4444 | 239, 68, 68 | Errors, destructive actions |
Neutral Colors
| Color | Name | Hex | Usage |
|---|---|---|---|
| Gray 900 | #111827 | Primary text | |
| Gray 700 | #374151 | Secondary text | |
| Gray 500 | #6B7280 | Muted text | |
| Gray 300 | #D1D5DB | Borders | |
| Gray 100 | #F3F4F6 | Backgrounds | |
| White | #FFFFFF | Cards, surfaces |
Typography
Primary Typeface
Inter - Modern, highly legible sans-serif
css
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
Display Typeface (Optional)
Space Grotesk - For headlines and marketing
css
font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
Type Scale
| Element | Size | Weight | Line Height |
|---|---|---|---|
| H1 | 48px / 3rem | 700 | 1.2 |
| H2 | 36px / 2.25rem | 700 | 1.25 |
| H3 | 24px / 1.5rem | 600 | 1.3 |
| H4 | 20px / 1.25rem | 600 | 1.4 |
| Body | 16px / 1rem | 400 | 1.6 |
| Small | 14px / 0.875rem | 400 | 1.5 |
| Caption | 12px / 0.75rem | 400 | 1.4 |
Monospace (Code)
css
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
CSS Variables
css
:root {
/* Primary Colors */
--brand-primary: #2563EB;
--brand-primary-dark: #1E40AF;
--brand-primary-light: #DBEAFE;
/* Secondary Colors */
--brand-success: #10B981;
--brand-warning: #F59E0B;
--brand-error: #EF4444;
/* Neutrals */
--color-text: #111827;
--color-text-secondary: #374151;
--color-text-muted: #6B7280;
--color-border: #D1D5DB;
--color-background: #F3F4F6;
--color-surface: #FFFFFF;
/* Typography */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: 'Space Grotesk', var(--font-sans);
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}
Voice & Tone
Brand Voice
- •Professional: Competent and reliable
- •Clear: Direct and easy to understand
- •Helpful: Focused on user success
- •Modern: Contemporary and forward-thinking
Tone Guidelines
| Context | Tone |
|---|---|
| Documentation | Clear, instructional, patient |
| Error Messages | Helpful, solution-focused, calm |
| Marketing | Confident, inspiring, approachable |
| Support | Empathetic, thorough, reassuring |
Writing Style
- •Use active voice
- •Keep sentences concise
- •Avoid jargon unless necessary
- •Be specific over vague
- •Lead with the benefit
Iconography
Style
- •Stroke-based icons preferred
- •24px base size
- •1.5px stroke weight
- •Rounded corners
Recommended Libraries
- •Lucide Icons (primary)
- •Heroicons
- •Radix Icons
Component Standards
Buttons
css
/* Primary Button */
.btn-primary {
background: var(--brand-primary);
color: white;
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
font-weight: 500;
}
.btn-primary:hover {
background: var(--brand-primary-dark);
}
/* Secondary Button */
.btn-secondary {
background: transparent;
color: var(--brand-primary);
border: 1px solid var(--brand-primary);
padding: 0.5rem 1rem;
border-radius: var(--radius-md);
}
Cards
css
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
}
Inputs
css
.input {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0.5rem 0.75rem;
font-size: 1rem;
}
.input:focus {
border-color: var(--brand-primary);
outline: none;
box-shadow: 0 0 0 3px var(--brand-primary-light);
}
Document Templates
Presentations
- •Use Mimmaar Blue as accent color
- •White backgrounds preferred
- •Inter for body text
- •Space Grotesk for headlines
Reports
- •Professional, clean layouts
- •Consistent header hierarchy
- •Brand colors for charts/graphs
- •Page numbers and headers
Emails
- •Simple, scannable format
- •Brand colors for CTAs
- •Mobile-responsive design
- •Clear hierarchy
Accessibility
Color Contrast
- •Text must meet WCAG AA (4.5:1 for normal text)
- •Large text: 3:1 minimum
- •Interactive elements: visible focus states
Typography
- •Minimum 16px for body text
- •Adequate line height (1.5+)
- •Sufficient paragraph spacing
Do's and Don'ts
DO
- •Use brand colors consistently
- •Maintain adequate whitespace
- •Follow typography guidelines
- •Ensure accessibility compliance
- •Use approved logo files
DON'T
- •Create new brand colors
- •Crowd content without spacing
- •Use non-brand fonts for headers
- •Sacrifice readability for style
- •Modify the logo
Asset Locations
code
/assets/
├── logos/
│ ├── logo-primary.svg
│ ├── logo-dark.svg
│ └── logo-icon.svg
├── fonts/
│ └── (loaded via CDN)
└── icons/
└── (use Lucide Icons)
Anthropic Integration
When creating Anthropic-branded content or artifacts, use the following secondary palette and typography options alongside MimmaarAI's primary brand identity.
Anthropic Accent Colors (Secondary Palette)
Use these colors for Anthropic-specific content, Claude.ai artifacts, or when integrating with Anthropic products.
| Color | Name | Hex | RGB | Usage |
|---|---|---|---|---|
| Orange | #d97757 | 217, 119, 87 | Primary accent for Anthropic content | |
| Blue | #6a9bcc | 106, 155, 204 | Secondary accent | |
| Green | #788c5d | 120, 140, 93 | Tertiary accent | |
| Dark | #141413 | 20, 20, 19 | Dark backgrounds, primary text | |
| Light | #faf9f5 | 250, 249, 245 | Light backgrounds, text on dark |
Anthropic Typography (Alternative Option)
Use these fonts for Anthropic-branded materials:
Headings (24pt and above)
css
font-family: 'Poppins', Arial, sans-serif;
Body Text
css
font-family: 'Lora', Georgia, serif;
Anthropic CSS Variables
css
:root {
/* Anthropic Accent Colors */
--anthropic-orange: #d97757;
--anthropic-blue: #6a9bcc;
--anthropic-green: #788c5d;
--anthropic-dark: #141413;
--anthropic-light: #faf9f5;
/* Anthropic Typography */
--font-anthropic-heading: 'Poppins', Arial, sans-serif;
--font-anthropic-body: 'Lora', Georgia, serif;
}
When to Use Anthropic Branding
Apply Anthropic colors and typography in these scenarios:
- •Claude.ai Artifacts - Interactive tools and visualizations for Claude users
- •Anthropic Product Documentation - Guides, tutorials, or references for Anthropic products
- •Claude API Examples - Code samples and implementation examples
- •Cross-brand Collaborations - Projects involving both MimmaarAI and Anthropic
- •Educational Content - Materials about Claude or Anthropic AI capabilities
Note: MimmaarAI colors and typography remain the PRIMARY brand identity. Use Anthropic styling only when specifically creating Anthropic-branded content or when requested.