Branch Design System Deep Dive

1. Brand Overview

Branch’s site hits you with confidence. It’s unapologetically tech-forward — bright cyan accents, deep navy foundations, and clean typography that isn’t trying to be “quirky.” They know their audience: product managers, marketers, and developers who care about growth metrics, not whimsical design experiments. Everything feels engineered. There’s a precision to the spacing, the typography stack, and even the button radii.

The vibe is “growth infrastructure” — the visual language says: we’re serious about scale, but we want you to feel empowered. The brand’s primary blue (rgb(77, 212, 255) / #4dd4ff) is electric, bordering on neon, but it’s balanced by heavy anchor colors like #1f2852 (deep navy) and #050e3c (almost black-blue). This balance keeps them from sliding into startup playfulness. The palette is functional, not decorative.

Typography is all Raleway, all the time. No secondary typeface, no system font fallback beyond Arial. This makes the design system extremely consistent — headings, buttons, labels all feel like they belong to the same voice. They use weights smartly: heavy for CTAs and headlines, lighter for body copy and captions. It’s a high-contrast type hierarchy that works on both light and dark backgrounds.

The layout structure is strict: an 8px grid scale, predictable breakpoints (down to the pixel), and very deliberate use of full-width vs. contained sections. Border radii are either micro (1–2px) or massive (99999px pills). No middle ground fluff — it’s a binary design language: sharp or fully rounded.

This brand system is built for clarity in execution. A developer can read the tokens and replicate the feel without guessing. That’s rare. Even the hover states are consistent across components, whether it’s a link or a pill button.

2. Color System

2.1 Primary Colors

Primary: rgb(77, 212, 255) / #4dd4ff
This is the hero color. Used for primary CTAs, highlight links, and interactive focus. It’s bright, high-energy, and instantly catches the eye. On dark navy, it screams “click me” without feeling cheap. Psychologically, it’s optimistic and forward-looking — perfect for a growth platform.

Secondary: rgb(0, 223, 219) / #00dfdb
This is the supporting accent. More teal than cyan, slightly calmer. Often paired with navy or white backgrounds. It’s used to differentiate secondary actions from primary without dropping visual energy.

Compared to competitors (think Firebase’s yellow or Mixpanel’s purple), Branch’s primaries are sharper and cooler — leaning into tech and trust rather than friendliness.

2.2 Complete Palette

2.3 Color Relationships

Branch uses high-contrast pairs:

• Primary Cyan (#4dd4ff) on Deep Navy (#1f2852) — WCAG AAA contrast.
• White (#ffffff) on Dark Blue (#050e3c) — AAA
• Teal (#00dfdb) on Navy — strong visual pop.

No obvious dark mode — the navy foundation serves as the “dark” style, and white backgrounds as “light” style. Accessibility is strong; most text-on-background combinations hit AAA.

2.4 Usage Guide

• Do: Pair primary cyan with deep navy for CTAs.
• Do: Use teal for secondary CTAs or alternate highlights.
• Avoid: Cyan on white — too little contrast for body text.
• Avoid: Mixing teal and cyan in the same component — they fight for attention.
• Do: Use gray (#696969) for muted labels, not body text.

3. Typography

3.1 Font Families

All Raleway, fallback to Arial. No Google Fonts connection noted — likely self-hosted.

Stack:
Raleway, Raleway-fallback, Arial

Single-family systems are rare in modern branding — here it works because weights and sizes are varied enough to create hierarchy without changing typeface.

3.2 Type Scale

(…full table derived from dataset — all sizes present)

3.3 Hierarchy

Large jumps between headline sizes (96px → 72px → 68px) create strong page anchors. Smaller text sizes stay in tight increments (16px, 14px, 13px) for UI consistency. All caps? Not here — they rely purely on weight and size, which keeps text readable.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px — confirmed by repeated values.

4.2 Layout

Breakpoints (exact pixel values):
400, 425, 426, 476, 530, 550, 600, 750, 766, 769, 781, 782, 890, 896, 897, 1023, 1024, 1140, 1280px.

They’re not using “rounded” breakpoints — these are tuned to component behavior. Expect pixel-perfect responsive adjustments.

5. Visual Elements

Border Radius

Branch is binary: micro or macro.

No random 5px or 12px — it’s intentional.

Shadows

Minimal. Mostly flat design. A few soft shadows:
rgba(0,0,0,0.2) 0px 4px 8px — rare, likely for modals.
Other shadows are subtle enough to be negligible in the overall feel.

Borders

Functional:

• 1px solid #bcc0d4 for inputs
• 1px solid #1371c3 for buttons
• Navy borders for dividers.

No decorative borders.

6. Components

6.1 Buttons

Primary Small (button-primary-small)
Default: bg: #4dd4ff, white text, padding 11.2px 16px 11.2px 14.4px, radius 99999px, no border.
Hover: white bg, text #2285f7, inset shadow, 1px border #447f19.
Active: bg #75ae4c, text #0c084d, outline white 2px.
Focus: bg #1eaedb, text white, border #447f19.

Tertiary Large
Default: bg #6700e2, white text, padding 24px 28px, radius 99999px.
States mirror primary but with purple base.

Secondary Large
Default: bg #00dfdb, text #1f2852, padding 24px 28px, radius 99999px.
Hover/active/focus same pattern.

Outlined Small Buttons
Default: white bg, text #1371c3, border 1px solid #1371c3, radius 2px.
Hover: bg #1eaedb, text white, border #f60042.

6.2 Links

Always text-decoration: none.
Colors vary: black, navy, white, logo blue, gray, cyan.
Hover: always #3860be — consistent across all link types.

6.3 Forms

Inputs (email/select):
Default: white bg, text #050e3c, border 1px solid #bcc0d4, radius 8px, padding 10px 16px.
Focus: bg #1eaedb, text white (email), bg #e6e6e6 (select), border removed.

Checkbox:
Default: transparent bg, no border.
Focus: bg #1eaedb, white text, 1px black border.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #4dd4ff;
  --color-secondary: #00dfdb;
  --color-deep-navy: #1f2852;
  --color-dark-blue-black: #050e3c;
  --color-logo-blue: #0074df;
  --color-white: #ffffff;
  --color-medium-gray: #696969;
  --color-black: #000000;
  --color-royal-blue: #00318d;
  --color-dark-gray: #555555;
  --color-light-grayish-blue: #f4f6fa;
  --color-blue-midtone: #1371c3;

  /* Typography */
  --font-family-primary: "Raleway", "Raleway-fallback", Arial;
  --font-size-h1: 96px;
  --font-size-h1-alt: 72px;
  --font-size-h1-alt2: 68px;
  --font-size-body-lg: 24px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --font-size-button-xs: 13.008px;
  --line-height-tight: 1.1;
  --line-height-body: 1.5;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-96: 96px;

  /* Border Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-8: 8px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-pill: 99999px;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
}

8. AI Coding Assistant Prompt

# Branch Design System Specification

This design system is extracted from Branch’s official website. All values here match their production styling exactly.

## System Prompt
You are a Branch design expert. Build UIs matching their visual language exactly.

## Brand Context
Branch is a growth infrastructure platform. Their design is precise, tech-forward, and built on high-contrast color pairs with strict typography hierarchy. They balance bright cyan CTAs with deep navy foundations.

## Color Palette
- Primary Cyan: #4dd4ff — Primary buttons, key CTAs
- Secondary Teal: #00dfdb — Secondary buttons, accents
- Deep Navy: #1f2852 — Headers, containers
- Dark Blue-Black: #050e3c — Text, backgrounds
- Logo Blue: #0074df — Logo, icons
- White: #ffffff — Text on dark, backgrounds
- Medium Gray: #696969 — Category headers
- Black: #000000 — Hamburger icon, text
- Royal Blue: #00318d — Accent backgrounds
- Dark Gray: #555555 — Icon buttons
- Light Grayish Blue: #f4f6fa — Background fills
- Blue Midtone: #1371c3 — Outlines, secondary buttons

## Typography
Font: Raleway, Raleway-fallback, Arial

| Level      | Size   | Weight | Line Height | Use For        |
|------------|--------|--------|-------------|----------------|
| H1         | 96px   | 700    | 1.10        | Page titles    |
| H1-alt     | 72px   | 700    | 1.20        | Hero headings  |
| H1-alt2    | 68px   | 700    | 1.20        | Sub-hero       |
| Body-lg    | 24px   | 400    | 1.00        | Large labels   |
| Body       | 16px   | 400    | 1.00        | Paragraph text |
| Caption    | 14px   | 400    | 1.50        | Annotations    |
| Button-xs  | 13.008px| 600   | 1.20        | Small buttons  |

## Spacing & Grid
Base: 8px  
Scale: 4, 8, 10, 12, 16, 24, 32, 40, 64, 96px  
Use multiples for all padding/margins.

## Border Radius
- 1px — spans
- 2px — buttons
- 8px — inputs
- 18px — div blocks
- 20px — toggles
- 99999px — pill buttons

## Shadows & Depth
Minimal: rgba(0,0,0,0.2) 0px 4px 8px used rarely.

## Components

### Primary Button
Default: bg #4dd4ff, text #ffffff, padding 11.2px 16px 11.2px 14.4px, radius 99999px, no border  
Hover: bg #ffffff, text #2285f7, border 1px solid #447f19  
Active: bg #75ae4c, text #0c084d, outline #ffffff solid 2px  
Focus: bg #1eaedb, text #ffffff, border 1px solid #447f19

### Secondary Button
Default: bg #00dfdb, text #1f2852, padding 24px 28px, radius 99999px  
States mirror primary style.

### Link
Default: no underline, color varies by context  
Hover: color #3860be

### Input Field
Default: bg #ffffff, text #050e3c, border 1px solid #bcc0d4, radius 8px, padding 10px 16px  
Focus: bg #1eaedb, text #ffffff, border 1px solid #000000

## Layout & Responsive Rules
Breakpoints: 400, 425, 426, 476, 530, 550, 600, 750, 766, 769, 781, 782, 890, 896, 897, 1023, 1024, 1140, 1280px.

## Interaction Rules
Transitions: 150ms ease for hover/focus/active  
Focus indicators: 2px solid outlines in brand colors

## DO
- Use only palette colors
- Maintain 8px grid
- Use Raleway for all text
- Keep button radii consistent (pill or sharp)
- Respect breakpoints exactly

## DON'T
- Add drop shadows to buttons
- Mix teal and cyan in same component
- Use non-palette colors
- Add underlines to links unless required

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #4dd4ff;
  color: #ffffff;
  padding: 11.2px 16px 11.2px 14.4px;
  border-radius: 99999px;
  font-weight: 700;
  font-size: 15px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #2285f7;
  border: 1px solid #447f19;
}

Input

.input {
  background: #ffffff;
  color: #050e3c;
  border: 1px solid #bcc0d4;
  border-radius: 8px;
  padding: 10px 16px;
}
.input:focus {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000000;
}

---

## 9. Summary

**TL;DR** — Branch’s design system is a disciplined, cyan-forward UI language built on a strict 8px grid, all-Raleway typography, and binary corner radii (sharp or pill). It’s technical, confident, and easy to replicate if you stick to the tokens.

**Brand Keywords**:  
- tech-confident  
- cyan-driven  
- grid-disciplined  
- binary-radii  
- high-contrast