MEE6

Overview

MEE6 is a comprehensive Discord bot platform that blends playful, character-driven design with technical sophistication to serve millions of server administrators. The brand aesthetic is 'Approachable Technicality'—combining a dark, professional interface (surface #17181e, on-surface #f2f4fb) with vibrant accent colors (primary #3994ff, secondary #06caec, tertiary #ffc34f) and whimsical mascot illustrations. The UI evokes trust and capability while maintaining a friendly, community-focused personality. Users feel empowered to manage complex Discord server operations without friction.

The MEE6 voice is conversational, direct, and action-oriented. Tone patterns: 'Add to Discord' (imperative, clear), 'Build Your Own Unique Discord Bot' (aspirational, user-centric), 'MEE6 is a complete Discord bot, easy-to-use, that millions of Discord servers worldwide trust' (credibility through scale). The brand avoids corporate jargon; instead, it speaks in the language of Discord communities—casual, inclusive, and outcome-focused. Example sentence in brand voice: 'Level up your server with moderation, welcome messages, and custom commands—all in one bot.'

Colors

The MEE6 color system is built on a dark-first philosophy with strategic accent deployment. The surface stack anchors the interface in deep navy-blacks (#17181e for base surface, #0a0b11 for container-lowest, #2e303a for container-highest), creating a professional, focused canvas that reduces eye strain during extended moderation sessions. Text defaults to a soft off-white (#f2f4fb for on-surface, #d0d0d0 for on-surface-variant), ensuring legibility without harsh contrast.

Primary (#3994ff) is the signature Discord-aligned blue used exclusively for high-priority CTAs ('Add to Discord', 'Login with Discord'), interactive focus states, and brand-critical links. It appears in 51 instances across the site, establishing visual hierarchy and guiding user intent. Secondary (#06caec), a vibrant c

Typography

The type system uses Proxima Nova as the primary typeface (loaded via Adobe Typekit), with Inter as a fallback for web robustness. The hierarchy is built on a 56px display size (700 weight, -0.02em letter-spacing) for hero headlines, scaling down through headline-lg (40px, 600 weight), headline-md (28px, 600 weight), and body-md (16px, 400 weight) for standard content. Label-md (14px, 600 weight, 0.01em letter-spacing) is used for UI labels and button text, maintaining crisp legibility at small sizes. Line-height is set generously (1.5–1.75x font size) to improve readability in the dark interface; for example, body-md uses 24px line-height on 16px text. On small labels over busy backgrounds (e.g., badges on feature cards), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to enhance contrast

Layout

The page layout uses a 12-column grid system with a max-width of 1280px, centered on the viewport. The hero section spans full-width with 40px (lg spacing) padding on desktop, collapsing to 24px (md spacing) on tablet and 12px (sm spacing) on mobile. Content sections are organized with consistent 64px (xl spacing) vertical separation, creating a rhythmic, breathing composition. The gutter width is 24px between grid columns, maintaining visual cohesion. Container max-width of 1280px ensures readability on ultra-wide displays while preventing line lengths from exceeding 75 characters. White-space is used strategically: the hero copy sits in a 2-column span on desktop, leaving the right half for the mascot illustration, creating visual balance. Spacing tokens are applied consistently: md (24p

Elevation & Depth

Depth in MEE6 is conveyed through a three-tier shadow system and subtle background layering. Level 1 (Base): the surface (#17181e) provides the foundation with no shadow. Level 2 (Standard Cards/Buttons): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) lifts elements 4dp above the base, used for primary CTAs ('Add to Discord', 'Login with Discord') and standard cards. Level 3 (Elevated/Modals): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) creates pronounced separation for modals, dropdowns, and hover states. On hover, cards transition from Level 2 to Level 3 shadow over 200ms (cubic-bezier(0.4, 0, 0.2

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used to soften the interface's functional rigor without sacrificing clarity. Buttons and primary CTAs use rounded.lg (1rem / 16px border-radius), creating a friendly, approachable feel while maintaining clear tap targets. Cards and containers use rounded.xl (1.5rem / 24px), adding visual warmth to content blocks. Input fields and smaller interactive elements use rounded.DEFAULT (0.5rem / 8px), balancing softness with precision. Badges and chips use rounded.full (9999px), creating pill-shaped elements that feel playful and aligned wit

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor: {colors.primary} (#3994ff), textColor: {colors.on-primary} (#f2f4fb), padding: 12px 24px, height: 48px, and rounded: {rounded.lg}. On hover, the button-primary-hover variant shifts to backgroundColor: {colors.primary-container} (#1863dc) with a 200ms transition (cubic-bezier(0.4, 0, 0.2, 1)), providing clear feedback. The button-secondary variant uses a transparent background with a 1px border (rgba(255, 255, 255, 0.12)) and on-surface text, allowing secondary actions to coexist without visual dominance. Button-ghost is used for tertiary actions, with no background and primary text; on hover, it gains a subtle background (rgba(57, 148, 255, 0.12)).

Containers & Surface

Do's and Don'ts

**Do**

• Do use primary (#3994ff) exclusively for high-intent CTAs and focus states—it's the brand's signature accent and must remain visually distinct.
• Do apply the full surface-container stack (lowest through highest) to create depth without shadows; this maintains the clean, technical aesthetic.
• Do maintain 1.5–1.75x line-height in body text over the dark surface to ensure readability and reduce eye strain during extended use.
• Do use rounded.xl (24px) for cards and rounded.lg (16px) for buttons to reinforce the soft-technical brand personality.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions on hover states to signal interactivity without feeling sluggish.

**Don't**

• Don't use secondary (#06caec) or tertiary (#ffc34f) as primary CTAs—they are supporting accents and will dilute the primary's visual authority.
• Don't apply shadows deeper than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.25)); the design favors clarity and color separation over depth illusion.
• Don't reduce line-height below 1.5x on body text; the dark surface demands generous spacing to maintain legibility.
• Don't mix rounded corner sizes arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't animate transitions longer than 300ms or use easing functions outside cubic-bezier(0.4, 0, 0.2, 1); the brand values responsiveness and technical precision.