Skip to content

DESIGN_SYSTEM_AND_BRANDING.md

Latest commit

 

History

History
386 lines (316 loc) · 16.6 KB

DESIGN_SYSTEM_AND_BRANDING.md

File metadata and controls

386 lines (316 loc) · 16.6 KB

MentoLoop Design System & Branding Guidelines

SVG Logo Paths

Logo Component

File Location: components/logo.tsx

The MentoLoop logo is a custom SVG component with two variants:

  1. Main Logo (<Logo />) - Full text logo with gradient effect
  2. Icon Only (<LogoIcon />) - Compact icon version
  3. Stroke Variant (<LogoStroke />) - Outline style for special applications

Logo SVG Inline:

<svg viewBox="0 0 78 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- Geometric icon (left side) -->
  <path d="M3 0H5V18H3V0ZM13 0H15V18H13V0ZM18 3V5H0V3H18ZM0 15V13H18V15H0Z"
    fill="url(#logo-gradient)" />
  
  <!-- "MentoLoop" text (right side) -->
  <path d="M27.06 7.054V12.239C27.06 12.5903 27.1393 12.8453 27.298 13.004C27.468 13.1513 27.7513 13.225 28.148 13.225H29.338V14.84H27.808C26.9353 14.84 26.2667 14.636 25.802 14.228C25.3373 13.82 25.105 13.157 25.105 12.239V7.054H24V5.473H25.105V3.144H27.06V5.473H29.338V7.054H27.06ZM30.4782 10.114C30.4782 9.17333 30.6709 8.34033 31.0562 7.615C31.4529 6.88967 31.9855 6.32867 32.6542 5.932C33.3342 5.524 34.0822 5.32 34.8982 5.32C35.6349 5.32 36.2752 5.46733 36.8192 5.762C37.3745 6.04533 37.8165 6.40233 38.1452 6.833V5.473H40.1002V14.84H38.1452V13.446C37.8165 13.888 37.3689 14.2563 36.8022 14.551C36.2355 14.8457 35.5895 14.993 34.8642 14.993C34.0595 14.993 33.3229 14.789 32.6542 14.381C31.9855 13.9617 31.4529 13.3837 31.0562 12.647C30.6709 11.899 30.4782 11.0547 30.4782 10.114ZM38.1452 10.148C38.1452 9.502 38.0092 8.941 37.7372 8.465C37.4765 7.989 37.1309 7.62633 36.7002 7.377C36.2695 7.12767 35.8049 7.003 35.3062 7.003C34.8075 7.003 34.3429 7.12767 33.9122 7.377C33.4815 7.615 33.1302 7.972 32.8582 8.448C32.5975 8.91267 32.4672 9.468 32.4672 10.114C32.4672 10.76 32.5975 11.3267 32.8582 11.814C33.1302 12.3013 33.4815 12.6753 33.9122 12.936C34.3542 13.1853 34.8189 13.31 35.3062 13.31C35.8049 13.31 36.2695 13.1853 36.7002 12.936C37.1309 12.6867 37.4765 12.324 37.7372 11.848C38.0092 11.3607 38.1452 10.794 38.1452 10.148ZM43.6317 4.232C43.2803 4.232 42.9857 4.113 42.7477 3.875C42.5097 3.637 42.3907 3.34233 42.3907 2.991C42.3907 2.63967 42.5097 2.345 42.7477 2.107C42.9857 1.869 43.2803 1.75 43.6317 1.75C43.9717 1.75 44.2607 1.869 44.4987 2.107C44.7367 2.345 44.8557 2.63967 44.8557 2.991C44.8557 3.34233 44.7367 3.637 44.4987 3.875C44.2607 4.113 43.9717 4.232 43.6317 4.232ZM44.5837 5.473V14.84H42.6457V5.473H44.5837ZM49.0661 2.26V14.84H47.1281V2.26H49.0661ZM50.9645 10.114C50.9645 9.17333 51.1572 8.34033 51.5425 7.615C51.9392 6.88967 52.4719 6.32867 53.1405 5.932C53.8205 5.524 54.5685 5.32 55.3845 5.32C56.1212 5.32 56.7615 5.46733 57.3055 5.762C57.8609 6.04533 58.3029 6.40233 58.6315 6.833V5.473H60.5865V14.84H58.6315V13.446C58.3029 13.888 57.8552 14.2563 57.2885 14.551C56.7219 14.8457 56.0759 14.993 55.3505 14.993C54.5459 14.993 53.8092 14.789 53.1405 14.381C52.4719 13.9617 51.9392 13.3837 51.5425 12.647C51.1572 11.899 50.9645 11.0547 50.9645 10.114ZM58.6315 10.148C58.6315 9.502 58.4955 8.941 58.2235 8.465C57.9629 7.989 57.6172 7.62633 57.1865 7.377C56.7559 7.12767 56.2912 7.003 55.7925 7.003C55.2939 7.003 54.8292 7.12767 54.3985 7.377C53.9679 7.615 53.6165 7.972 53.3445 8.448C53.0839 8.91267 52.9535 9.468 52.9535 10.114C52.9535 10.76 53.0839 11.3267 53.3445 11.814C53.6165 12.3013 53.9679 12.6753 54.3985 12.936C54.8405 13.1853 55.3052 13.31 55.7925 13.31C56.2912 13.31 56.7559 13.1853 57.1865 12.936C57.6172 12.6867 57.9629 12.324 58.2235 11.848C58.4955 11.3607 58.6315 10.794 58.6315 10.148ZM65.07 6.833C65.3533 6.357 65.7273 5.98867 66.192 5.728C66.668 5.456 67.229 5.32 67.875 5.32V7.326H67.382C66.6227 7.326 66.0447 7.51867 65.648 7.904C65.2627 8.28933 65.07 8.958 65.07 9.91V14.84H63.132V5.473H65.07V6.833ZM73.3624 10.165L77.6804 14.84H75.0624L71.5944 10.811V14.84H69.6564V2.26H71.5944V9.57L74.9944 5.473H77.6804L73.3624 10.165Z"
    fill="currentColor" />
  
  <!-- Gradient Definition -->
  <defs>
    <linearGradient id="logo-gradient" x1="10" y1="0" x2="10" y2="20" gradientUnits="userSpaceOnUse">
      <stop stopColor="#9B99FE" />
      <stop offset="1" stopColor="#2BC8B7" />
    </linearGradient>
  </defs>
</svg>

Logo Icon SVG Inline:

<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M3 0H5V18H3V0ZM13 0H15V18H13V0ZM18 3V5H0V3H18ZM0 15V13H18V15H0Z"
    fill="url(#logo-gradient)" />
  <defs>
    <linearGradient id="logo-gradient" x1="10" y1="0" x2="10" y2="20" gradientUnits="userSpaceOnUse">
      <stop stopColor="#9B99FE" />
      <stop offset="1" stopColor="#2BC8B7" />
    </linearGradient>
  </defs>
</svg>

Logo Stroke SVG Inline:

<svg viewBox="0 0 71 25" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M61.25 1.625L70.75 1.5625C70.75 4.77083 70.25 7.79167 69.25 10.625C68.2917 13.4583 66.8958 15.9583 65.0625 18.125C63.2708 20.25 61.125 21.9375 58.625 23.1875C56.1667 24.3958 53.4583 25 50.5 25C46.875 25 43.6667 24.2708 40.875 22.8125C38.125 21.3542 35.125 19.2083 31.875 16.375C29.75 14.4167 27.7917 12.8958 26 11.8125C24.2083 10.7292 22.2708 10.1875 20.1875 10.1875C18.0625 10.1875 16.25 10.7083 14.75 11.75C13.25 12.75 12.0833 14.1875 11.25 16.0625C10.4583 17.9375 10.0625 20.1875 10.0625 22.8125L0 22.9375C0 19.6875 0.479167 16.6667 1.4375 13.875C2.4375 11.0833 3.83333 8.64583 5.625 6.5625C7.41667 4.47917 9.54167 2.875 12 1.75C14.5 0.583333 17.2292 0 20.1875 0C23.8542 0 27.1042 0.770833 29.9375 2.3125C32.8125 3.85417 35.7708 5.97917 38.8125 8.6875C41.1042 10.7708 43.1042 12.3333 44.8125 13.375C46.5625 14.375 48.4583 14.875 50.5 14.875C52.6667 14.875 54.5417 14.3125 56.125 13.1875C57.75 12.0625 59 10.5 59.875 8.5C60.7917 6.5 61.25 4.20833 61.25 1.625Z"
    fill="none" strokeWidth="0.5" stroke="currentColor" />
</svg>

Complete Color Palette

Brand Primary Colors

Token CSS Value Hex Code HSL Usage
Navy #001656 #001656 216 100% 8% Main background, dark surfaces
Primary Blue (Medium) #338BFF #338BFF 214 100% 60% Primary CTA, interactive elements
Secondary Blue (Dark) #003D99 #003D99 216 100% 30% Secondary elements, badges
Accent Teal #34D399 #34D399 158 64% 52% Success states, accents, highlights

Extended Color System (Tailwind CSS)

Dark Mode (Default)

--background: 221 39% 14%;              /* #1F2C47 - Main background */
--foreground: 220 13% 91%;              /* #E8EBF0 - Text */
--card: 222 47% 16%;                    /* #1E2D45 - Card backgrounds */
--card-foreground: 220 13% 91%;         /* #E8EBF0 - Card text */
--primary: 214 100% 60%;                /* #338BFF - Primary button color */
--primary-foreground: 0 0% 100%;        /* #FFFFFF - Text on primary */
--secondary: 216 100% 30%;              /* #003D99 - Secondary actions */
--secondary-foreground: 0 0% 100%;      /* #FFFFFF - Text on secondary */
--muted: 215 28% 20%;                   /* #2B3E56 - Disabled/muted elements */
--muted-foreground: 220 13% 75%;        /* #C0C8D4 - Muted text (WCAG AA) */
--accent: 158 64% 52%;                  /* #34D399 - Accent highlight */
--accent-foreground: 221 39% 11%;       /* #1A2436 - Text on accent */
--border: 215 28% 20%;                  /* #2B3E56 - Border color */
--input: 215 28% 20%;                   /* #2B3E56 - Input background */
--ring: 214 100% 60%;                   /* #338BFF - Focus ring */
--destructive: 0 84% 65%;               /* #FF6366 - Error/danger states (WCAG AA) */
--destructive-foreground: 0 0% 100%;    /* #FFFFFF - Text on destructive */
--success: 146 72% 42%;                 /* #15803D - Success states */
--success-foreground: 0 0% 100%;        /* #FFFFFF - Text on success */
--warning: 37 92% 50%;                  /* #FBBF24 - Warning states */
--warning-foreground: 22 14% 12%;       /* #1E1A0E - Text on warning */
--info: 217 91% 60%;                    /* #3B82F6 - Informational states */
--info-foreground: 0 0% 100%;           /* #FFFFFF - Text on info */
--sidebar: 222 47% 14%;                 /* #1D2C42 - Sidebar background */
--sidebar-foreground: 220 13% 91%;      /* #E8EBF0 - Sidebar text */
--sidebar-primary: 214 100% 60%;        /* #338BFF - Sidebar primary */
--sidebar-primary-foreground: 0 0% 100%; /* #FFFFFF - Sidebar primary text */
--sidebar-accent: 210 100% 12%;         /* #00246B - Sidebar accent */
--sidebar-accent-foreground: 220 13% 91%; /* #E8EBF0 - Sidebar accent text */
--sidebar-border: 215 28% 20%;          /* #2B3E56 - Sidebar border */
--sidebar-ring: 214 100% 60%;           /* #338BFF - Sidebar focus ring */

Light Mode

--background: 0 0% 100%;                /* #FFFFFF - Main background */
--foreground: 222 14% 12%;              /* #1A1A24 - Text */
--card: 0 0% 100%;                      /* #FFFFFF - Card backgrounds */
--card-foreground: 222 14% 12%;         /* #1A1A24 - Card text */
--primary: 214 100% 43%;                /* #1B69E6 - Primary button (darker) */
--primary-foreground: 0 0% 100%;        /* #FFFFFF - Text on primary */
--secondary: 215 72% 56%;               /* #4A90E2 - Secondary actions */
--secondary-foreground: 0 0% 100%;      /* #FFFFFF - Text on secondary */
--muted: 215 23% 90%;                   /* #E8EBF0 - Disabled/muted elements */
--muted-foreground: 222 14% 35%;        /* #5A5E6E - Muted text (WCAG AA) */
--accent: 158 64% 52%;                  /* #34D399 - Accent highlight */
--accent-foreground: 222 14% 12%;       /* #1A1A24 - Text on accent */
--border: 214 32% 84%;                  /* #D1D5DB - Border color */
--input: 214 32% 84%;                   /* #D1D5DB - Input background */
--ring: 214 100% 43%;                   /* #1B69E6 - Focus ring */
--destructive: 0 84% 40%;               /* #DC2626 - Error/danger states (WCAG AA) */
--destructive-foreground: 0 0% 100%;    /* #FFFFFF - Text on destructive */
--success: 142 71% 45%;                 /* #22C55E - Success states */
--success-foreground: 0 0% 100%;        /* #FFFFFF - Text on success */
--warning: 38 92% 50%;                  /* #F59E0B - Warning states */
--warning-foreground: 22 14% 12%;       /* #1E1A0E - Text on warning */
--info: 213 94% 68%;                    /* #60A5FA - Informational states */
--info-foreground: 0 0% 100%;           /* #FFFFFF - Text on info */
--sidebar: 215 72% 94%;                 /* #F3F8FF - Sidebar background */
--sidebar-foreground: 222 14% 12%;      /* #1A1A24 - Sidebar text */
--sidebar-primary: 214 100% 43%;        /* #1B69E6 - Sidebar primary */
--sidebar-primary-foreground: 0 0% 100%; /* #FFFFFF - Sidebar primary text */
--sidebar-accent: 158 64% 90%;          /* #D1F5EA - Sidebar accent */
--sidebar-accent-foreground: 222 14% 12%; /* #1A1A24 - Sidebar accent text */
--sidebar-border: 214 32% 84%;          /* #D1D5DB - Sidebar border */
--sidebar-ring: 214 100% 43%;           /* #1B69E6 - Sidebar focus ring */

Semantic Color Tokens (Chart & Additional)

--chart-1: 214 100% 60%;                /* #338BFF - Primary blue */
--chart-2: 216 100% 70%;                /* #5BA3FF - Light blue */
--chart-3: 158 64% 52%;                 /* #34D399 - Teal/green */
--chart-4: 19 86% 50%;                  /* #FF5020 - Orange (warning) */
--chart-5: 50 98% 64%;                  /* #FDE047 - Yellow */

--surface-subtle: 215 33% 16%;          /* #1E2D44 - Subtle background */
--surface-muted: 215 28% 19%;           /* #232F42 - Muted surface */
--surface-accent: 214 58% 18%;          /* #1F2E48 - Accent surface */

--purple: 262 83% 70%;                  /* #C7B0FF - Accent purple */
--pink: 330 81% 60%;                    /* #FF6EC7 - Accent pink */
--emerald: 160 84% 39%;                 /* #10B981 - Accent emerald */

MentoLoop-Specific Brand Colors (Tailwind)

mentoloop: {
  navy: '216 100% 8%',          // #001656
  blue: {
    dark: '216 100% 30%',       // #003D99
    medium: '214 100% 60%',     // #338BFF
    light: '213 100% 90%',      // #CCE0FF
  },
  teal: '158 64% 52%',          // #34D399
  green: {
    light: '153 69% 75%',       // #93E9BE
  },
  mint: '158 87% 94%',          // #E1FEF4
  gray: {
    DEFAULT: '220 13% 46%',     // #6B7280
    dark: '220 29% 10%',        // #111827
    light: '220 13% 84%',       // #D1D5DB
  },
  slate: {
    DEFAULT: '215 16% 29%',     // #374151
    dark: '218 21% 18%',        // #1F2937
  },
  orange: '16 91% 50%',         // #EB5812
  yellow: '54 97% 64%',         // #FDE047
  cream: '34 100% 91%',         // #FFEDD5
  black: '0 0% 0%',             // #000000
  white: '0 0% 100%',           // #FFFFFF
}

Logo Usage Guidelines

Use Cases

  1. Main Logo (<Logo />) - Use in:

    • Navigation bars
    • Landing page hero sections
    • Footers
    • Email headers
    • Marketing materials

  2. Icon Only (<LogoIcon />) - Use in:

    • Favicon (16x16, 32x32)
    • Mobile navigation
    • App shortcuts
    • Bookmarks

  3. Stroke Variant (<LogoStroke />) - Use in:

    • Premium/Hero sections
    • Light backgrounds
    • Large display formats
    • Wireframes

Implementation

import { Logo, LogoIcon, LogoStroke } from '@/components/logo'

// Full logo with gradient
<Logo className="h-6 w-auto" />

// Icon only
<LogoIcon className="h-8 w-8" />

// Monochrome version
<Logo uniColor className="h-6 w-auto" />

// Stroke variant
<LogoStroke className="h-8 w-8" />

Gradient Definitions

Logo Gradient

From: #9B99FE (Purple) → To: #2BC8B7 (Teal)
Angle: Vertical (top to bottom)

Primary Brand Gradient

From: #338BFF (Primary Blue) → To: #34D399 (Accent Teal)
Angle: 120° (diagonal)

Secondary Brand Gradient

From: #003D99 (Navy Blue) → To: #003D99 (Dark Blue)
Mixed with: #338BFF (Primary Blue)
Angle: 135° (diagonal)

Typography

  • Font Family: Inter, system-ui, sans-serif
  • Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)
  • Line Height: 1.5 (body), 1.2 (headings)

Glassmorphism Effects

Glass Card

background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 12px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);

Glass Strong

background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
backdrop-filter: blur(30px) saturate(200%);
-webkit-backdrop-filter: blur(30px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
border-radius: 12px;

Spacing & Sizing

  • Base Unit: 4px (Tailwind default)
  • Padding: 4px, 8px, 12px, 16px, 20px, 24px, 32px
  • Border Radius: 8px (md), 10px (lg), 12px (xl), 16px (2xl)

Shadow System

--shadow-sm: 0 1px 3px 0px rgb(from var(--shadow-color) r g b / 0.1);
--shadow-md: 0 4px 6px -1px rgb(from var(--shadow-color) r g b / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(from var(--shadow-color) r g b / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(from var(--shadow-color) r g b / 0.1);
--shadow-2xl: 0 25px 50px -12px rgb(from var(--shadow-color) r g b / 0.25);

Animation Utilities

Available Animations

  • Aurora Gradient - 10s ease infinite
  • Float - 6s ease-in-out infinite
  • Scroll Left - 25s linear infinite
  • Scroll Right - 30s linear infinite
  • Wave Move - 8s/12s/6s ease-in-out infinite
  • Pulse Ring - 2s ease-out infinite
  • Shimmer - 1.5s ease-in-out infinite

Usage

.animate-aurora-gradient
.animate-float
.animate-scroll-left
.animate-scroll-right
.animate-pulse-ring

File Organization

MentoLoop/
├── public/
│   ├── next.svg
│   ├── vercel.svg
│   ├── globe.svg
│   ├── window.svg
│   └── file.svg
├── components/
│   ├── logo.tsx (← Logo components here)
│   └── ui/ (← Reusable UI components)
├── app/
│   ├── globals.css (← Color tokens + animations)
│   └── page.tsx
└── tailwind.config.ts (← Color palette config)

Accessibility Notes

  • All color contrasts meet WCAG AA standards (4.5:1 minimum)
  • Focus states use --ring color (Primary Blue)
  • Dark mode respects prefers-color-scheme: dark
  • Reduced motion support with @media (prefers-reduced-motion: reduce)

Quick Reference

Primary Actions

  • Background: Primary Blue (#338BFF)
  • Text: White (#FFFFFF)
  • Hover: Darker shade of Primary Blue

Success States

  • Background: Teal/Accent (#34D399)
  • Text: Navy (#001656)
  • Icon: Teal

Error States

  • Background: Red (#FF6366)
  • Text: White (#FFFFFF)
  • Icon: Red

Disabled States

  • Background: Muted (#2B3E56)
  • Text: Muted Foreground (#C0C8D4)
  • Opacity: 50-60%