Mega Brand Design System Deep Dive

1. Brand Overview

Mega’s brand design language hits you like a locked steel vault. It’s serious, dark, and engineered. There’s no fluff here—everything feels deliberate, calculated, and built for a brand that’s all about security, privacy, and tech confidence.

The primary color—almost-black #04101e—dominates the interface, giving it a weighty, secure presence. It’s offset by a high-contrast secondary #ededee that keeps the site from feeling oppressive. Pops of high-energy red (#dd1405) slice through the darkness for CTAs, warning states, and moments where they want you to act. It’s a brand that says: “We take your data seriously, but we’re not afraid to be bold.”

Typography reinforces this. Headings use Poppins—a geometric sans with enough friendliness to soften the heavy color palette—while Inter handles the functional UI copy, navigation, and buttons. It’s a clear division: Poppins for personality, Inter for precision.

Spacing is tight and grid-driven. They use an 8px scale, but aren’t afraid to break it with occasional 3px or 10px paddings. Border radii are restrained—mostly 8px—keeping buttons and cards approachable without slipping into bubbly territory. No shadows. Depth is created through borders and color layering, which fits the “trustworthy tech” vibe.

Components are minimal but interactive. Buttons slide with a subtle translateX(4px) on hover—a nice physicality without animation overload. Links change color on hover but avoid underline flicker. The whole system feels like it’s been stripped of anything unnecessary, leaving only what’s needed to communicate action.

If you’re building for Mega, you’re building for clarity, security, and a sense of control. The design is a locked environment where every pixel has a job.

2. Color System

2.1 Primary Colors

Mega’s primary color is #04101e — a deep, almost-black navy. It reads as secure, professional, and no-nonsense. In brand psychology, near-black blues convey authority and trustworthiness, perfect for a cloud storage and privacy-focused brand. Competitors like Dropbox lean into lighter blues; Mega’s darker tone sets it apart as more serious and privacy-first.

The secondary base is #ededee — a very light neutral. It keeps the UI breathable. Red (#dd1405) is the accent, used sparingly for CTAs and alerts. This is a high-saturation, high-energy choice that demands attention and adds urgency.

2.2 Complete Palette

Plus the full token set from CSS variables:

Primary Blacks:

• --color-primary-black-100: #B5B7BC — Disabled text
• --color-primary-black-200: #9C9FA4 — Muted text
• --color-primary-black-300: #8F9195 — Secondary UI
• --color-primary-black-400: #83888E — Secondary hover
• --color-primary-black-600: #515861 — Body text
• --color-grey-1000: #1A1F26 — Deep backgrounds

Primary Reds:

• --color-primary-red-50: #E08F85 — Soft red background
• --color-primary-red-100: #DC796E — Muted red
• --color-primary-red-200: #D76457 — UI red
• --color-primary-red-300: #D35040 — Accent red
• --color-primary-red-400: #CE3F2D — Alerts
• --color-primary-red-500: #DD1405 — Primary CTA red
• --color-primary-red-600: #B72C1C — Hover red
• --color-primary-red-700: #A22618 — Dark CTA red
• --color-primary-red-800: #8E2114 — Deep red
• --color-primary-red-900: #7A1C10 — Darkest red

Secondary Cobalt:

• --color-secondary-cobalt-100: #ADC1EA — Light blue
• --color-secondary-cobalt-200: #82A2DD — Link hover
• --color-secondary-cobalt-300: #5784D1 — Link blue
• --color-secondary-cobalt-400: #2B67C3 — Accent blue
• --color-secondary-cobalt-500: #004BB5 — Strong blue
• --color-secondary-cobalt-600: #003C9C — Hover state
• --color-secondary-cobalt-700: #002E82 — Dark blue
• --color-secondary-cobalt-800: #002267 — Deeper blue
• --color-secondary-cobalt-900: #00174C — Darkest blue

Secondary Ruby:

• --color-secondary-ruby-50: #FDD9D9 — Soft pink
• --color-secondary-ruby-100: #F9ADAE — Light pink
• --color-secondary-ruby-200: #F5828B — Accent pink
• --color-secondary-ruby-300: #F0576F — UI pink
• --color-secondary-ruby-400: #EB2B58 — Strong pink
• --color-secondary-ruby-600: #B70538 — Hover pink
• --color-secondary-ruby-700: #8D072B — Dark pink
• --color-secondary-ruby-800: #64081F — Darker pink
• --color-secondary-ruby-900: #3E0713 — Deep ruby

Greys:

• Ranging from --color-grey-150 (#E2E3E3) to --color-grey-1000 (#1A1F26)
• Used for dividers, muted text, borders

Functional:

• --color-system-error: #E40046 — Error states
• --color-system-info: #2490B2 — Info states
• --color-system-alert: #E09706 — Warnings
• --color-system-success: #00B256 — Success

2.3 Color Relationships

Contrast is high. Primary black #04101e on light neutral #ededee easily meets WCAG AA for text. Red #dd1405 on light backgrounds is highly legible but needs careful use to avoid overwhelming. Blue accents are used for links, creating a clear interactive signal.

Dark mode is essentially the default state here—light mode is minimal. Secondary neutrals keep elements from blending into the dark background.

2.4 Usage Guide

• Workhorse combo: #04101e text on #ededee backgrounds — safe, clear, brand-true.
• CTA combo: #dd1405 background with #f8f8f9 text — maximum punch.
• Avoid using red for non-interactive elements—it breaks their urgency hierarchy.
• Blues are for links only—don’t repurpose them as button fills.
• Greys are functional—don’t use them for branding.

3. Typography

3.1 Font Families

Two families:

• Poppins, fallback arial — Used for headings. No Google Fonts import listed, possibly self-hosted.
• Inter, fallback arial — Used for body, links, buttons.

No variable fonts. No Adobe Fonts.

3.2 Type Scale

3.3 Hierarchy

Headings scale down from 60px to 24px, keeping a clear ladder. Inter handles anything 18px or below, making UI copy consistent and readable. Uppercase styles are reserved for emphasis (navigation, buttons). They nailed the separation: Poppins for impact, Inter for utility.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, but with outliers for micro-adjustments.

4.2 Layout

Breakpoints:

• 0px
• 320px
• 768px
• 782px
• 1080px
• 1320px

Responsive approach looks mobile-first, scaling up with defined container widths.

5. Visual Elements

Border Radius

8px is the default. Full-round only for avatars/images.

Shadows

None. Flat design. Depth via borders.

Borders

Common:

• 1px solid #e2e3e3 — card borders
• 2px solid #04101e — button active/focus states
• 1px inset #808080 — HR lines

6. Components

6.1 Buttons

Menu Item Button:

• Default: transparent bg, #333333 text, padding 18px 12px, radius 0px
• Hover/Active: translateX(4px), bg var(--color-primary-black-900), color changes, 2px solid currentcolor
• Focus: bg var(--color-primary-black-900), color --color-primary-black-200

Primary Muted Button:

• Default: bg #04101e, text #f8f8f9, padding 0 24px, radius 8px
• Hover: translateX(4px), bg var(--color-bg-surface-1)
• Active: bg --color-primary-black-400
• Focus: bg #eeeeee, text #444444

Primary XL Button:

• Default: bg #dd1405, text #f8f8f9, padding 0 24px, radius 8px
• States match muted variant

Icon Button:

• Default: bg #ededee, text #1f2834, padding 10px, radius 8px
• States match others

6.2 Links

Multiple variants. Example:

• Blue link: #0000ee, underline; hover --color-secondary-cobalt-600
• Text link: #04101e, underline; hover removes underline, changes color

6.3 Forms

No extracted input styles—likely minimal, border-driven.

6.4 Cards

Border: 1px solid #e2e3e3, radius 8px. No shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-black-100: #B5B7BC;
  --color-primary-black-200: #9C9FA4;
  --color-primary-black-300: #8F9195;
  --color-primary-black-400: #83888E;
  --color-primary-black-600: #515861;
  --color-grey-550: #898C8F;
  --color-primary-red-800: #8E2114;
  --color-primary-red-200: #D76457;
  --color-secondary-ruby-200: #F5828B;
  --color-system-error: #E40046;
  --color-primary-red-50: #E08F85;
  --color-secondary-cobalt-700: #002E82;
  --color-bg-tinted-pink: #FCE8E6;
  --color-secondary-cobalt-800: #002267;
  --color-primary-red-500: #DD1405;
  --color-primary-red-300: #D35040;
  --color-link-disabled: #D4D4D4;
  --color-grey-1000: #1A1F26;
  --color-copy-primary: #333333;
  --color-primary-red-900: #7A1C10;
  --color-secondary-cobalt-100: #ADC1EA;
  --color-grey-650: #73767A;
  --color-secondary-cobalt-900: #00174C;
  --color-secondary-cobalt-500: #004BB5;
  --color-grey-800: #52555B;
  --color-grey-300: #C1C2C4;
  --color-link-hovered: #38404A;
  --color-secondary-ruby-900: #3E0713;
  --color-secondary-ruby-100: #F9ADAE;
  --color-system-info: #2490B2;
  --color-secondary-cobalt-200: #82A2DD;
  --color-secondary-ruby-600: #B70538;
  --color-grey-750: #5D6065;
  --color-grey-250: #CCCDCE;
  --color-bg-transparent: #0000000D;
  --color-primary-black-400: #83888E;
  --color-link-visited: #606060;
  --color-grey-150: #E2E3E3;
  --color-system-alert: #E09706;
  --color-grey-200: #D7D8D9;
  --color-secondary-ruby-50: #FDD9D9;
  --color-secondary-ruby-700: #8D072B;
  --color-grey-350: #B6B7B9;
  --color-grey-500: #94979A;
  --color-secondary-ruby-800: #64081F;
  --color-secondary-ruby-400: #EB2B58;
  --color-system-success: #00B256;
  --color-bg-tinted-peach: #F8D0CD;
  --color-grey-450: #9FA1A4;
  --color-grey-900: #3B4046;
  --color-primary-red-400: #CE3F2D;
  --color-grey-950: #30353B;
  --color-grey-850: #464B50;
  --color-secondary-ruby-300: #F0576F;
  --color-secondary-cobalt-300: #5784D1;
  --color-secondary-cobalt-600: #003C9C;
  --color-primary-red-600: #B72C1C;
  --color-grey-400: #AAACAF;
  --color-secondary-cobalt-400: #2B67C3;
  --color-primary-red-700: #A22618;
  --color-primary-red-100: #DC796E;

  /* Typography */
  --font-heading: 'Poppins', arial;
  --font-body: 'Inter', arial;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;
  --space-506: 506px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 100%;
}

8. AI Coding Assistant Prompt

# Mega Design System Specification

You are a Mega design expert. Build UIs matching their visual language exactly.

## Brand Context
Mega values security, clarity, and precision. The design language is dark, authoritative, and stripped of unnecessary decoration. Depth comes from borders and color contrast, not shadows.

## Color Palette
- Primary Black: #04101e — Headers, backgrounds, text buttons
- Secondary Neutral: #ededee — Light backgrounds, cards
- Action Red: #dd1405 — Primary CTAs, alerts
- Light Neutral: #f8f8f9 — Button text, surfaces
- Dark Gray: #6e6e6e — Secondary text
- Absolute Black: #000000 — Strong emphasis
- Icon Dark: #1f2834 — Icon buttons
- Greys (Functional): #E2E3E3, #C1C2C4, #9FA1A4 — Borders, dividers
- Blues: #003C9C, #004BB5, #82A2DD — Links, hover states
- System Error: #E40046 — Error text/backgrounds
- System Success: #00B256 — Success states
- System Alert: #E09706 — Warning states

## Typography
- Headings: 'Poppins', arial
- Body/UI: 'Inter', arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 60px | 700 | 1.20 | Page titles |
| H2 | 56px | 600 | 1.14 | Section headings |
| H3 | 48px | 600 | 1.17 | Subsections |
| Body | 18px | 400 | 1.56 | Readable body copy |
| Button | 16px | 600 | 1.25 | Primary/secondary actions |
| Caption | 14px | 400-700 | 1.43 | Labels, metadata |

## Spacing & Grid
Base: 8px. Scale includes 1px, 3px, 4px, 8px, 10px, 12px, 16px, 18px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px, 96px, 120px.

## Border Radius
- none: 0 — menus
- sm: 4px — small buttons
- md: 8px — cards, large buttons
- lg: 12px — modals
- xl: 16px — special containers
- full: 100% — avatars

## Shadows & Depth
Flat design—no shadows. Use 1px or 2px borders for depth.

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  background: #dd1405;
  color: #f8f8f9;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 18px;
  border: none;
  transition: transform 150ms ease;
}
.btn-primary:hover {
  transform: translateX(4px);
  background: var(--color-bg-surface-1);
  color: var(--color-copy-primary);
  border: 2px solid currentcolor;
}
.btn-primary:focus {
  background: #eeeeee;
  color: #444444;
}

Secondary Button

.btn-secondary {
  background: #04101e;
  color: #f8f8f9;
  padding: 0 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
}

Navigation Link

Default: underline if interactive. Hover: remove underline, change color to #003C9C.

Card

.card {
  background: #ededee;
  border: 1px solid #e2e3e3;
  border-radius: 8px;
  padding: 24px;
}

Layout & Responsive Rules

Max content width: 1320px.
Breakpoints:

• Mobile: < 768px
• Tablet: 768px–1080px
• Desktop: > 1080px

Interaction Rules

• 150ms ease transitions for hover/focus
• Focus indicators: 2px solid currentcolor
• Hover motion: translateX(4px) for buttons

DO List

• Use ONLY colors from palette
• Maintain 8px grid
• Use Poppins for headings, Inter for body
• Keep border radius consistent
• Use translateX hover motion for buttons

DON'T List

• Add shadows
• Mix rounded and sharp corners
• Use colors outside palette
• Overuse red—reserve for CTAs

Code Examples

Primary Button:

<button class="btn-primary">Sign Up</button>

Card:

<div class="card">Content</div>

Form Input:

<input class="input" placeholder="Email">
.input {
  border: 1px solid #E2E3E3;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
}

---

## 9. Summary

**TL;DR** — Mega’s design system is dark, secure, and precise. Heavy use of deep navy and high-contrast neutrals, no shadows, and tight typography rules keep the brand feeling authoritative. Motion is subtle but present.

**Brand Keywords**:
- security-first
- dark-minimalist
- precision-driven
- border-depth
- motion-disciplined