Moe Brand Design System Deep Dive

1. Brand Overview

Moe’s visual language is unapologetically digital. The moment you land on moe.video, you get hit with saturated blues and cyans that scream “tech product” — but not in the sterile, corporate way. This is built for people who live in video, motion, and immediacy. The palette feels energetic, glassy, and confident.

The typography choice — Geologica — reinforces that vibe. It’s geometric but with subtle humanist curves, giving it a modern, approachable edge. There’s no serif nostalgia here. Moe wants you to know it’s forward-looking. Every heading is set in bold weights, often oversized, and the line heights are tight enough to feel strong without choking readability. This isn’t “airy minimalism.” It’s punchy, controlled density.

From the data, Moe uses Tailwind CSS with arbitrary values, which tells me they’re comfortable bending utility classes to fit exact pixel needs. This is a team that cares about precision and is willing to break convention if it makes the design tighter.

Buttons are bold and high-contrast. The primary CTA uses a neon cyan (#00ecff) against a deep blue (#0050b7) in text — it’s almost arcade-like. That’s intentional. It demands clicks. The secondary actions are more subdued but still hold the geometric precision.

Spacing is built on an 8px scale, but not dogmatically — there are 6px and 15px values in the mix, which means they’re willing to break the rhythm for micro-adjustments in UI components. Rounded corners are used consistently at 8px for most interactive elements, which makes the brand feel cohesive and modern. There’s no overuse of pill shapes — even though they have some absurd “full” radius values in the data, that looks like overflow from Tailwind’s rounded-full for avatars.

The brand is not shadow-heavy. They only apply soft shadows in rare cases, preferring solid borders for depth. That keeps the interface crisp and flat — good for a video-centric product where media should pop, not the UI.

Overall: Moe’s design system is tech-optimist, precision-driven, and bold in color. It’s for a product that wants to capture attention fast and keep the user in a focused, high-energy environment.

2. Color System

2.1 Primary Colors

The main brand driver is blue — specifically a bright, saturated cyan (#00ecff) paired with darker blues (#0050b7, #00a6fa). This combination is high-energy, high-contrast, and instantly reads as digital. The cyan is the primary action color. It’s neon enough to stand out against both light and dark backgrounds. The darker blues anchor the palette and provide legibility for text on cyan buttons.

Compared to competitors in streaming/video (think Twitch’s purple or YouTube’s red), Moe’s cyan differentiates strongly. It’s less “content platform” and more “tool for creators.” The psychology here: cyan is associated with clarity, tech, and speed.

2.2 Complete Palette

2.3 Color Relationships

The cyan #00ecff against deep blue #0050b7 has excellent contrast for WCAG — well above 4.5:1 for large text. White on deep blue is also solid for accessibility. The darker gray text (#353535) on white background is fine for body text.

The bright blue (#00a6fa) on white has slightly lower contrast but still passes for large text. It’s fine for links but might need a darker shade for small UI labels.

Dark mode isn’t explicitly present in the data, but the palette’s range from white to slate values suggests they could flip to dark easily.

2.4 Usage Guide

• Use cyan (#00ecff) ONLY for actionable elements (buttons, important links).
• Pair cyan backgrounds with deep blue text for maximum legibility.
• Avoid using cyan for large text on white — it can be low contrast.
• Use #00a6fa for secondary accents or link text.
• Neutral grays handle body copy — don't mix with bluish grays.
• Semantic colors (reds, greens, amber) are reserved for state indicators (errors, success).

3. Typography

3.1 Font Families

Moe uses Geologica everywhere — headings, buttons, links, captions. No fallbacks listed, no Google/Adobe sources in the data (likely self-hosted or imported). This is a clean sans-serif with geometric roots.

3.2 Type Scale

3.3 Hierarchy

Headings jump from 52px down to 48px for hero sections, then to 30.4px for subheads. The tight line height (1.33–1.45) keeps them compact. Buttons use large sizes (20px–24px), making them visually strong. Captions and small labels drop to 14px and 12px — still readable due to the geometric font.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px. Common values:

4.2 Layout

No explicit breakpoints in the data, but Tailwind usage suggests mobile-first scaling. Containers likely adjust via max-w classes. Section padding uses 36px–80px — comfortable for desktop.

5. Visual Elements

• Border Radius: Mostly 8px for interactive elements (buttons, inputs, cards). Small buttons use 4px. full values (huge numeric) are for pills/avatars.
• Shadows: Minimal use. One soft shadow (rgba(0,0,0,0.25) 0px 25px 50px -12px) for depth, one smaller (rgba(0,0,0,0.1) 0px 10px 15px -3px).
• Borders: Strong use of 2px borders in cyan or white for buttons and inputs. Some 1px borders for dividers.

6. Components

6.1 Buttons

Primary CTA:

• Background: #00ecff
• Text: #0050b7
• Padding: 12px 64px
• Border: 2px solid #00ecff
• Radius: 8px
• Font: Geologica, 24px, weight 600

Secondary:

• Background: oklch(0.546 0.245 262.881) (blue-600)
• Text: #ffffff
• Padding: 6px 12px
• Border: none
• Radius: 4px
• Font: Geologica, 14px, weight 500

6.2 Links

Variants:

• Black text, weight 400
• White text, weight 600
• Deep blue text #0050b7, weight 600
• Dark gray #353535, weight 600
• Bright blue #00a6fa, weight 600
• Cyan #00ecff, weight 400

No underline by default. Hover states not explicit.

6.3 Forms

Email input:

• Background: white
• Text: deep blue #0050b7
• Border: 2px solid #ffffff
• Radius: 8px
• Padding-left: 56px

No focus styles in data.

6.4 Cards

No explicit card data, but likely 8px radius, white background, 32px–36px padding.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-dark-gray: #353535;
  --color-bright-blue: #00a6fa;
  --color-cyan-primary: #00ecff;
  --color-deep-blue: #0050b7;
  --color-hover-cyan-1: #2eefff;
  --color-hover-cyan-2: #2ff0ff;
  --color-hover-cyan-3: #39f0ff;
  --color-hover-cyan-4: #2defff;
  --color-hover-blue-1: #0072c7;
  --color-hover-blue-2: #005dca;
  --color-hover-blue-3: #0073c7;
  --color-hover-blue-4: #0c8dce;
  --color-brand-blue-contrast: #1d4dfa;
  --color-livewire-progress-bar: #2299dd;
  --color-black: #000000;

  /* Typography */
  --font-family-geologica: "Geologica", sans-serif;

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-42: 42px;
  --space-48: 48px;
  --space-52: 52px;
  --space-54: 54px;
  --space-64: 64px;
  --space-70: 70px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 33554400px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  --shadow-md: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}

8. AI Coding Assistant Prompt

# Moe Design System Specification

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

## Brand Context
Moe’s design is high-energy, tech-forward, and precision-driven. It uses bold cyan and deep blues for action elements, geometric sans-serif type, and an 8px-based spacing system. Corners are consistently rounded at 8px for interactive elements, with minimal shadow use.

## Color Palette
- White: #ffffff — Backgrounds, text on dark
- Dark Gray: #353535 — Body text
- Bright Blue: #00a6fa — Links, secondary accents
- Cyan Primary: #00ecff — Main CTAs, borders
- Deep Blue: #0050b7 — Text on cyan buttons
- Hover Cyan 1: #2eefff — Button hover
- Hover Cyan 2: #2ff0ff — Button hover
- Hover Cyan 3: #39f0ff — Button hover
- Hover Cyan 4: #2defff — Button hover
- Hover Blue 1: #0072c7 — Hover states
- Hover Blue 2: #005dca — Hover states
- Hover Blue 3: #0073c7 — Hover states
- Hover Blue 4: #0c8dce — Hover states
- Brand Blue Contrast: #1d4dfa — High-contrast accents
- Livewire Progress Bar: #2299dd — Progress indicators
- Black: #000000 — Text, icons

## Typography
Font Family: "Geologica", sans-serif

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 52px | 600 | 1.38 | Page titles |
| H1-alt | 48px | 600 | 1.33 | Hero headings |
| H2 | 30.4px | 600 | 1.45 | Section headings |
| Btn-lg | 24px | 600 | 1.33 | Primary buttons |
| Body-lg | 24px | 400 | 1.33 | Large body |
| Link-lg | 24px | 600 | 1.38 | Navigation links |
| Body-md | 20px | 400 | 1.40 | Body text |
| Btn-md | 20px | 600 | 1.40 | Medium buttons |
| Caption | 14px | 400–600 | 1.43 | Labels, captions |
| Small | 12px | 400 | 1.33 | Fine print |

## Spacing & Grid
Base: 8px
Scale: 4, 6, 12, 15, 16, 20, 22, 24, 32, 36, 40, 42, 48, 52, 54, 64, 70, 80, 96, 120
Map:
- Buttons: Vertical 12px, horizontal 64px (primary)
- Cards: 32px–36px padding
- Sections: 36px–80px gaps

## Border Radius
- sm: 4px — small buttons
- md: 8px — buttons, inputs, cards
- full: 33554400px — pills, avatars

## Shadows & Depth
Minimal shadows:
- Large: rgba(0,0,0,0.25) 0px 25px 50px -12px
- Medium: rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px

## Components

### Primary Button
```css
.btn-primary {
  background: #00ecff;
  color: #0050b7;
  padding: 12px 64px;
  border-radius: 8px;
  font-family: "Geologica", sans-serif;
  font-weight: 600;
  font-size: 24px;
  border: 2px solid #00ecff;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #2eefff; }
.btn-primary:focus { outline: 2px solid #0050b7; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Secondary Button
```css
.btn-secondary {
  background: oklch(0.546 0.245 262.881);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: "Geologica", sans-serif;
  font-weight: 500;
  font-size: 14px;
}
```

### Input Field
```css
.input-email {
  background: #ffffff;
  color: #0050b7;
  border: 2px solid #ffffff;
  border-radius: 8px;
  padding-left: 56px;
  font-family: "Geologica", sans-serif;
}
.input-email:focus { border-color: #00ecff; outline: none; }
```

## Layout & Responsive Rules
- Mobile-first
- Section padding: 36px–80px
- Use Tailwind responsive modifiers (`sm:`, `md:`) for breakpoints

## Interaction Rules
- Transitions: 150ms ease for state changes
- Focus: 2px solid outline in deep blue or cyan
- No motion-heavy animations — keep snappy

## DO List
- Use only palette colors
- Maintain 8px grid in spacing
- Use Geologica for all text
- Keep corners consistent with defined radius
- Apply cyan only for actions
- Keep shadows minimal

## DON'T List
- Don’t introduce new colors
- Don’t mix sharp and rounded corners
- Don’t use heavy shadows
- Don’t reduce button text below 14px

## Code Examples

Primary Button (Tailwind):
```html
<button class="bg-[#00ecff] text-[#0050b7] px-16 py-3 rounded-md font-geologica font-semibold text-2xl border-2 border-[#00ecff] hover:bg-[#2eefff]">
  Get Started
</button>
```

Secondary Button:
```html
<button class="bg-blue-600 text-white px-3 py-1.5 rounded-sm font-geologica font-medium text-sm">
  Learn More
</button>
```

Email Input:
```html
<input type="email" class="bg-white text-[#0050b7] border-2 border-white rounded-md pl-14 font-geologica" placeholder="Your email">
```

9. Summary

TL;DR — Moe’s design system is built for speed, clarity, and bold presence. Cyan and deep blues dominate actions, Geologica keeps the type tight and modern, and spacing rides on an 8px rhythm with occasional micro-adjustments.

Brand Keywords:

• tech-optimist
• bold-cyan
• precision-grid
• geometric-modern
• flat-depth