How Mani looks

0. Logo & Mascot

The 5-layer breathing mascot is the brand mark. Comes in three sizes: nav 32px, inline 64px, hero 240px. Reduced-motion preference disables the breathing animation.

Mascot · three sizes

Brand Lockup · light theme + dark theme

The wordmark is Plus Jakarta Sans 800 with the i in Fraunces italic 400. The italic i inherits --grad-2 on light theme and --grad-3 on dark theme.

import Mascot from '@/components/Mascot.astro';
import BrandLockup from '@/components/BrandLockup.astro';

<!-- Mascot variants -->
<Mascot size={32} variant="nav" />     <!-- nav bar, footer -->
<Mascot size={64} variant="inline" />  <!-- cards, badges -->
<Mascot size={300} variant="hero" />   <!-- hero, auth pages -->

<!-- Lockup -->
<BrandLockup theme="light" />  <!-- on light backgrounds -->
<BrandLockup theme="dark" />   <!-- on dark backgrounds -->

1. Typography

Type scale

2. Color

Brand

/* Canonical 3-stop brand gradient (var(--gradient-brand)) */
--grad-1: #6E5CFF;  /* violet */
--grad-2: #B05CD8;  /* mid */
--grad-3: #FF6B5C;  /* coral */
background: linear-gradient(135deg, var(--grad-1), var(--grad-2), var(--grad-3));

Neutrals

Semantic

/* Tailwind config */
colors: {
  'brand-violet': '#6E5CFF',
  'brand-violet-light': '#a78bfa',
  'ink': '#1a1a2e',
  'ink-2': '#64748b',
  'ink-3': '#94a3b8',
  'bg': '#f8f7ff',
  'bg-elevated': '#ffffff',
  'bg-warm': '#f5f3ff',
  'success': '#22c55e',
  'warning': '#f59e0b',
  'error': '#ef4444',
}

3. Spacing

4px base scale. Multiply by the token number.

spacing: {
  '1': '4px',   '2': '8px',   '3': '12px',
  '4': '16px',  '6': '24px',  '8': '32px',
  '12': '48px', '16': '64px', '24': '96px',
  '32': '128px'
}

4. Components

Buttons

<!-- Primary -->
<button style="background: linear-gradient(135deg, #6E5CFF, #a78bfa);
  color: white; border-radius: 9999px; padding: 12px 24px;">
  Primary action
</button>

<!-- Secondary -->
<button style="border: 1.5px solid #6E5CFF; color: #6E5CFF;
  border-radius: 9999px; padding: 12px 24px;">
  Secondary action
</button>

<!-- Ghost -->
<button style="color: #6E5CFF; background: transparent;
  border-radius: 9999px; padding: 12px 24px;">
  Ghost action
</button>

Cards

<!-- Elevated -->
<div style="background: #fff; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);">...</div>

<!-- Warm -->
<div style="background: #f5f3ff; border-radius: 16px;">...</div>

<!-- Bordered -->
<div style="border: 1.5px solid #e8e6f0;
  border-radius: 16px;">...</div>

Form fields

<input type="text"
  style="border: 1.5px solid #e8e6f0; border-radius: 8px;
    padding: 10px 16px; font-family: 'Inter', sans-serif;
    color: #1a1a2e; background: #fff;"
  placeholder="Enter your brand URL" />

5. Iconography

Lucide icons as base set. 24px default, 1.5px stroke.

import { Sparkles, Palette, Wand2 } from 'lucide-react';

<Sparkles size={24} strokeWidth={1.5} />

6. Motion

Hover behavior

/* Cards */
.card { transition: transform 200ms ease-out; }
.card:hover { transform: scale(1.02); }

/* Links */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

7. Tone of Voice

Full brand voice guidelines: Read the brand voice guide

8. Brand DNA Cards

Live preview of the Brand DNA result card component. This is what users see after Mani scans their URL.

<!-- Brand DNA Card -->
<div style="border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(110, 92, 255, 0.12);">
  <!-- Header -->
  <div style="background: linear-gradient(135deg, #6E5CFF, #a78bfa);
    padding: 20px 24px;">
    <p style="color: rgba(255,255,255,0.7);">Brand DNA</p>
    <p style="color: white; font-weight: 700;">Your Brand Name</p>
  </div>
  <!-- Dimensions: Voice, Palette, Typography,
       Imagery, Audience, Consistency -->
  <div style="padding: 20px 24px;">...</div>
</div>