Moloco Brand Design System Deep Dive

1. Brand Overview

Moloco’s website has a very clear, tech-forward, and performance-driven feel. They’re not playing in lifestyle branding — this is clearly a B2B SaaS player targeting revenue managers, advertisers, and data-driven ops teams in retail and e‑commerce. Everything is confident and a bit corporate tech, but with enough brightness to avoid the “grey box enterprise” trap.

The vibe is: precise sans-serif typography, assertive blues, sharp grids. This is for someone clicking through dashboards and product features — not browsing for inspiration. The visual language is built to communicate trust, capability, and technical authority.

What I love: The primary blue #3381f3 is pure digital. It would feel at home in a graph’s highlight line or as a button on a SaaS control panel. Combined with deep navy (#000a73) and a crisp white base, they’ve got a color story that screams data you can trust.

Design philosophy? Think modular. The 8px spacing scale shows they’re disciplined with vertical rhythm. Buttons stick to flat or minimal shadows, so nothing looks bubbly or “app‑toy.” Typography hierarchy relies on Montserrat for branded headings, Arial for functional UI. This is a practical split — brand font for marketing flair, system font for stable UI rendering. No fragile typography experiments.

Moloco’s visual restraint also suggests a system intended to scale across web, product UI, and perhaps sales decks. No overload of decorative elements. Shadows are soft and functional, border radii are mostly square or slight — grainy discipline.

The brand is for enterprise retail decision makers and engineers who want clarity. Every pixel is earning its keep. If you want flashy gradients and mascot illustrations, look elsewhere. If you want clean typography, consistent spacing, and no-nonsense components — Moloco nailed it.

2. Color System

2.1 Primary Colors

Main brand color: Primary Blue (#3381f3, RGB 51 129 243). This is the core action color. It appears in primary buttons, links, outlines, and accent elements. Psychologically — blue is security, trust, and performance. In tech branding, this hue is closer to Azure / Google Drive blues than IBM blue. It’s friendly professional, not too corporate navy.

Competitor comparison: Whereas many ad-tech brands go softer with teal or gradient blues, Moloco’s primary holds a pure flat tone. No gradients. No glossy highlights. That makes it feel precise and UI ready. It’s closer to a design system token than a marketing flourish.

2.2 Complete Palette

Here’s every extracted color, with context:

2.3 Color Relationships

The palette is high contrast — white backgrounds with deep navy or black text score well for WCAG AAA in most applications. Primary blue on white is highly visible (>4.5:1 contrast). Focus states shift to aqua #1eaedb, which still maintains contrast on white.

For dark buttons (deep navy with white text), contrast is extreme — easy readability. Even purple accent #b761f2 on white is fine for large text, but could fail WCAG AA for small text — so keep it to decorative/trimmings.

No obvious dark mode palette — this is a bright, white-surface-first design. Dark elements are accents, not backgrounds.

2.4 Usage Guide

• Use Primary Blue (#3381f3) only for interactive elements (buttons, main links).
• Deep Navy (#000a73) for logo, text highlights, and secondary button backgrounds.
• Avoid putting purple #b761f2 on top of navy — low contrast.
• Keep white backgrounds for main content; dark backgrounds are rare and purposeful (like hero banners).
• For form fields, stick to neutral grays for borders — light enough to differentiate from text, dark enough to show focus change.
• Avoid mixing more than one accent color per component — the palette is minimal by intent.

3. Typography

3.1 Font Families

• Montserrat Uploaded — primary brand font, sourced from Google Fonts, likely slightly customized/uploaded. Used for headings, some links, UI labels.
• Arial — system fallback, also used intentionally for utility text and buttons in functional UI.
• Montserrat is variable — weight control from 400 to 700+ visible in headings. Arial shapes keep system UI stable.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is built on Montserrat for marketing and Arial for functional. This keeps the “brand voice” in big, public sections, while preserving UI clarity in smaller utility components. The type scale uses consistent line-height for lockstep baseline grids, making vertical rhythm predictable.

Montserrat’s heavier weight pairs well with the high-contrast blues. Arial’s lighter weights in utility text ensure the UI doesn't feel cramped.

4. Spacing & Layout

4.1 Spacing Scale

This is an 8px scale — recurring multiples everywhere.

Base multiple: 8px. Common increments: 8, 12, 16, 24, 40, 48px. In code: enforce spacing % 8 == 0.

4.2 Layout

Breakpoints list shows deliberate device targets:

• Mobile: ~400–480px
• Tablet: 767px / 896–897px
• Desktop: 992px / 1024px / 1280px

This smells like a content grid with breakpoints for small phones, tablets, small laptops, and large desktop — likely Vuetify’s defaults.

5. Visual Elements

Border Radius

Mostly squared edges. Values found:

• 0px — Default buttons, inputs (square)
• 2px — Tiny rounding for small buttons
• 10px — Tabs, slight rounding
• 20px — Switch controls
• 100% — Round dots (sliders)
• Odd one: 17px filter — likely a custom shape
• Rare 50px — pill-like search

They avoid heavy rounding. This keeps things crisp and modular.

Shadows

Soft and minimal:

• rgba(51, 51, 51, 0.1) 6px 6px 16px — default card/button shadow
• Light drop: rgba(0,0,0,0.07) 0px 2px 5px
• Dual shadows for modals: rgba(0, 0, 0, 0.1) 8px 5px 10px, etc.

All shadows are subtle, no hard offsets.

Borders

Mostly 1px solid in neutral grays or brand blue. Functional dividers in light grays. Occasional brand color border for selected state.

6. Components

6.1 Buttons

Primary (button-primary)

• Default: bg #3381f3, text white, 12px 16px padding, border: 1px solid #3381f3, no radius, subtle shadow.
• Hover: bg white, text #2285f7, opacity 0.6.
• Focus: bg #1eaedb, text white, border black, opacity 0.7.

Secondary White (button-secondary-white-new)

• Default: bg white, text navy #000a73, same padding, no border.
• Hover/focus same as primary.

Tab Link

• Default: transparent bg, white text, 9px 30px padding, 10px 10px 0px 0px radius.
• Hover/focus similar to above — unified states.

Secondary Dark Blue

• Default: bg #000a73, text white.
• Hover/focus identical to primary.

Subscribe CTA

• Default: bg #0280fb, text white, 15px 30px padding.
• Hover: bg aqua #1eaedb

Functional Flat Buttons

• Default: bg #425b76, text white, padding 12px 10px, radius 2px.
• Hover/focus: bg aqua #1eaedb.

6.2 Links

Three styles:

1. Navy underlined — hover removes underline, changes to lighter blue.
2. White text — hover changes color to lighter blue, no underline.
3. Bold light blue, underlined — hover removes underline.

Link underline toggle is consistent — remove underline on hover for clarity.

6.3 Forms

Email input:

• Default: bg white, text #333333, border #cccccc, padding 17px 12px.
• Focus: bg aqua #1eaedb, text white, border black.

6.4 Cards

No explicit extraction for "card" but given shadows and border usage, typical card would have white bg, rgba(51,51,51,0.1) shadow, square radius.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-deep-navy: #000a73;
  --color-white: #ffffff;
  --color-dark-gray: #696969;
  --color-charcoal: #222222;
  --color-medium-gray: #555555;
  --color-primary-blue: #3381f3;
  --color-purple-accent: #b761f2;
  --color-slate-blue: #425b76;
  --color-bright-blue: #0280fb;
  --color-aqua-blue: #1eaedb;
  --color-light-gray: #cccccc;
  --color-input-text: #333333;
  --color-divider-gray: #d8d8d8;
  --color-alt-border-gray: #d1d1d1;
  --color-light-gray-neutral: #bbbbbb;
  --color-alt-iframe-gray: #666666;

  /* Typography */
  --font-primary: 'Montserrat', Arial, sans-serif;
  --font-secondary: Arial, sans-serif;

  /* Spacing scale */
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-80: 80px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-default: rgba(51,51,51,0.1) 6px 6px 16px;
  --shadow-light: rgba(0,0,0,0.07) 0px 2px 5px;
}

8. AI Coding Assistant Prompt

# Moloco Design System Specification

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

## Brand Context
Moloco designs for enterprise retail and ad-tech. Emphasis on clarity, contrast, and modular grids. No decorative excess — components are functional and crisp.

## Color Palette
- Primary Blue: #3381f3 — CTAs, primary buttons, main links
- Deep Navy: #000a73 — Logo, secondary buttons, link text
- White: #ffffff — Backgrounds, inverse text
- Dark Gray: #696969 — Neutral text
- Charcoal: #222222 — Icons, subtle accent text
- Medium Gray: #555555 — Neutral icon/border color
- Purple Accent: #b761f2 — Tab highlights
- Slate Blue: #425b76 — Functional neutral buttons
- Bright Blue: #0280fb — Newsletter action
- Aqua Blue: #1eaedb — Focus state backgrounds, hovers
- Light Gray: #cccccc — Input borders
- Input Text Gray: #333333 — Form text
- Divider Gray: #d8d8d8 — Section dividers
- Alt Border Gray: #d1d1d1 — Alternative border
- Light Gray Neutral: #bbbbbb — Button borders
- Alt Iframe Gray: #666666 — Iframe borders

## Typography
Fonts:
- Headings: 'Montserrat', Arial, sans-serif
- Body/UI: Arial, sans-serif

Sizes:
| Level         | Size   | Weight | Line Height | Use For |
|---------------|--------|--------|-------------|---------|
| Hero          | 64px   | 600    | 1.20        | Main page hero |
| H2 Large      | 44.8px | 600    | 1.20        | Section hero |
| H2 Medium     | 38.4px | 600    | 1.20        | Headlines |
| H3            | 32px   | 600    | 1.20        | Subsection |
| Small Heading | 24px   | 600    | 1.35        | UI headings |
| Body          | 16px   | 400    | 1.35        | Long content |
| Nav Uppercase | 20px   | 700    | 1.35        | Navigation tabs |
| Caption       | 14px   | 400    | 1.35        | Labels |

## Spacing & Grid
Base: 8px grid
Scale: 8, 10, 12, 16, 20, 24, 40, 48, 60, 80
Use for: button padding, card spacing, section gaps.

## Border Radius
- none: 0px — default buttons, inputs
- sm: 2px — small buttons
- md: 10px — tabs
- lg: 20px — switches
- full: 100% — slider dots

## Shadows
- Default: rgba(51,51,51,0.1) 6px 6px 16px — cards, buttons
- Light: rgba(0,0,0,0.07) 0px 2px 5px — subtle elements

## Components

### Primary Button
Default: bg #3381f3, color #ffffff, padding 12px 16px, border 1px solid #3381f3, radius 0.
Hover: bg #ffffff, color #2285f7, opacity 0.6.
Focus: bg #1eaedb, color #ffffff, border 1px solid #000000.

### Secondary Button (White)
Default: bg #ffffff, color #000a73, padding 12px 16px.
Hover: bg #ffffff, color #2285f7, opacity 0.6.

### Input Field
Default: bg #ffffff, border 1px solid #cccccc, padding 17px 12px, text #333333.
Focus: bg #1eaedb, text #ffffff, border 1px solid #000000.

### Card
bg #ffffff, radius 0px, padding multiples of 8px, shadow rgba(51,51,51,0.1) 6px 6px 16px.

## Layout & Responsive Rules
Breakpoints:
- Mobile: 400–480px
- Tablet: 767–897px
- Desktop: 992–1280px

## Interaction Rules
Transitions: 150ms ease on hover/focus state changes.
Focus outline: Solid black 1px.

## DO List
- Use only colors in palette.
- Maintain 8px spacing grid.
- Use Montserrat for headings, Arial for body/UI text.
- Keep border radii consistent per component type.
- Ensure WCAG AA contrast.

## DON'T List
- Don’t invent new shadows.
- Don’t mix rounded and square corners in same component.
- Don’t use gradients — brand is flat color.
- Don’t dilute primary blue by using opacity for text.

## Code Examples

### Primary Button
```css
.btn-primary {
  background-color: #3381f3;
  color: #ffffff;
  padding: 12px 16px;
  border: 1px solid #3381f3;
  border-radius: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  box-shadow: rgba(51, 51, 51, 0.1) 6px 6px 16px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background-color: #ffffff;
  color: #2285f7;
  opacity: 0.6;
}
.btn-primary:focus {
  background-color: #1eaedb;
  color: #ffffff;
  border: 1px solid #000000;
}
```

### Card
```css
.card {
  background-color: #ffffff;
  border-radius: 0;
  padding: 16px;
  box-shadow: rgba(51, 51, 51, 0.1) 6px 6px 16px;
}
```

### Input
```css
.input {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  padding: 17px 12px;
  color: #333333;
}
.input:focus {
  background-color: #1eaedb;
  color: #ffffff;
  border-color: #000000;
}
```

9. Summary

TL;DR — Moloco’s design system is modular corporate SaaS in its purest form. Tight 8px grid, crisp Montserrat headings, flat blues and navies. Everything is high contrast, everything is functional.

Brand Keywords: tech-precise, trust-driven, modular-minimal, enterprise-clean, data-confident