Bitly Design System Deep Dive

1. Brand Overview

Bitly’s design system is built for speed, clarity, and trust. You feel it as soon as you land on their site — clean typography, strong color hits, and no visual fluff. This isn’t a brand that’s trying to charm you with ornamental design. It’s direct. Action-focused. You’re here to shorten links, track clicks, generate QR codes — the interface makes sure nothing slows you down.

The brand philosophy leans toward functional minimalism with bold accents. The palette is restrained but punchy — deep navy and crisp whites set the stage, with vivid blues and oranges for action. This contrast keeps the interface lively without sacrificing usability. They’re balancing a utilitarian SaaS look with just enough warmth to feel human. The orange (#ff950a, #f36600) is not overused; it’s strategically placed to catch your eye only where it matters.

Typography is custom — "Bitly Display" — with weights from 400 to 900. It’s geometric and modern, but with rounded warmth. It’s paired with classic Helvetica Neue / Arial fallbacks for safety. The type scale is tight, and they’re not afraid of large, bold headlines. This works because their product is relatively simple — they can afford to hit you with big type without overwhelming.

Spacing runs on an 8px grid system. It’s consistent everywhere — from button padding to card margins. Border radii are varied, but consistently rounded — 8px, 16px, 24px — nothing sharp except for some functional dividers. Shadows exist but are subtle — soft, low-opacity drops that add depth without screaming “material design.”

Bitly’s design system is for users who value efficiency and clarity. Marketers, social media managers, campaign runners — people who need to process a lot of information quickly. The system reflects that: strong hierarchy, high-contrast CTAs, minimal distractions.

2. Color System

2.1 Primary Colors

The main brand color is blue — specifically #0058dd (rgb(0, 88, 221)). It appears in primary buttons, key links, and focus states. It’s a confident, saturated blue — not a corporate navy, not a playful sky blue. This works because it sits between trustworthiness and action. Against the deep navy (#031f39) background, it pops hard.

Competitor comparison: Compared to TinyURL (which leans toward softer blues), Bitly’s blue is more intense. It’s closer to SaaS brands like Slack’s accent colors, but without the purple undertone.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally high — deep navy text on off-white backgrounds is well above WCAG AA. Primary blue on off-white is strong; primary blue on deep navy is acceptable but needs white text for accessibility. Accent orange is warm and attention-grabbing but needs dark text for contrast.

Dark mode? Not explicitly implemented here — palette is tuned for light backgrounds with dark text.

2.4 Usage Guide

• Best combinations: #0058dd text or buttons on #fffdf8 background — crisp, accessible. #f36600 (orange) on #fffdf8 for urgency.
• Avoid: Blue text on orange — poor contrast, clashes.
• Borders: Use #bab7b0 for dividers; avoid using pure black for borders — feels too heavy.
• Hover states: Slight shifts in blue (#2a5bd7) work well — subtle but noticeable.

3. Typography

3.1 Font Families

• Primary: Bitly Display (custom)
• Fallbacks: Helvetica Neue, Helvetica, Arial
• Source: No Google Fonts or Adobe Fonts detected — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

The scale is aggressive — H1s jump from 70px down to 48px, then to 32px. This creates clear section breaks. Body text sits around 16px–20px; captions drop to 12px or smaller. The line heights are tuned tightly for large headlines (1.0–1.2) and looser for body text (1.4–1.6). This keeps headlines impactful and paragraphs readable.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Values are all multiples or fractions of 8px:

4.2 Layout

Responsive breakpoints (px): 400, 425, 426, 500, 515, 530, 550, 560, 599, 600, 639, 767, 768, 769, 890, 896, 897, 1023, 1024, 1100, 1131, 1280, 1400.

They’re covering a lot of micro-breakpoints — probably to handle specific layout quirks.

5. Visual Elements

Border Radius

Values range from 0px (square corners) to 50% (full circle buttons). Common: 8px (cards, menu items), 16px (buttons), 24px (cards/images). Special shapes: "0px 0px 24px 24px" for cards with only bottom corners rounded.

Shadow System

Mostly subtle:

• rgba(146, 144, 138, 0.25) 0px 4px 16px — soft, neutral shadow for depth.
• rgba(0, 0, 0, 0.05) 0px 4px 10px — ultra-light.
• Some multi-layer shadows for elevation.

Borders

Functional, thin: 1px solid #bab7b0 for dividers. Primary blue borders for interactive states. No heavy outlines except in focus states.

6. Components

6.1 Buttons

Primary (.btn-primary):

• Default: bg rgba(0, 88, 221, 0.3), color #fffdf8, padding 11px 12px, radius 16px, border 8px solid #fffdf8.
• Hover: bg #f7f4ee, color #ffffff.
• Focus: outline 1px solid black, bg #fffdf8, color #ffffff, border 1px solid black, box-shadow #0058dd inset.

Secondary (.btn-secondary):

• Default: transparent bg, color #0058dd, padding 14px 50px 14px 20px, radius 18px, border 2px solid #0058dd.
• Hover: color #2285f7, opacity 0.6.
• Focus: outline 1px solid black, bg transparent, color white.

Other variants: orange CTA (#f36600), light blue (#d6e7ff), solid blue (#2a5bd7).

6.2 Links

All links are non-underlined by default. Hover shifts color to slightly different blue (#3860be). Text weights vary 400–500.

6.3 Forms

URL input: bg #fffdf8, border 1px solid #777570, radius 8px, padding 8px 16px. Focus: border 1px solid black, border-color #0058dd.

6.4 Cards

Cards use radius 24px or 0px 0px 24px 24px. Shadows are soft. Borders are 1px solid #bab7b0.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-deep-navy: #031f39;
  --color-off-white: #fffdf8;
  --color-near-black: #0a0a0a;
  --color-cool-gray: #828387;
  --color-warm-gray: #777570;
  --color-charcoal-gray: #56575b;
  --color-primary-blue: #0058dd;
  --color-accent-orange: #ff950a;
  --color-black: #000000;
  --color-light-warm-gray: #bab7b0;
  --color-mid-warm-gray: #6c6965;
  --color-warm-light: #eeeae3;
  --color-secondary-blue: #2a5bd7;
  --color-dark-gray: #252628;
  --color-deep-indigo: #13285e;

  /* Typography */
  --font-primary: 'Bitly Display', 'Helvetica Neue', Helvetica, Arial;
  --font-size-h1-xl: 70px;
  --font-size-h1-lg: 64px;
  --font-size-h1-md: 48px;
  --font-size-h1-sm: 40px;
  --font-size-h1-xs: 32px;
  --font-size-body-lg: 20px;
  --font-size-body-md: 16px;
  --font-size-body-sm: 14px;
  --font-size-caption: 12px;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11-2: 11.2px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-45: 45px;
  --space-48: 48px;
  --space-50: 50px;
  --space-80: 80px;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(146, 144, 138, 0.25) 0px 4px 16px;
  --shadow-light: rgba(0, 0, 0, 0.05) 0px 4px 10px;
}

8. AI Coding Assistant Prompt

# Bitly Design System Specification

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

## Brand Context
Bitly values functional minimalism and clarity. Interfaces are built for speed: high-contrast CTAs, clean typography, consistent 8px grid spacing. The visual language uses deep navy and off-white as base, with vivid blues and oranges for interactive elements.

## Color Palette
- Deep Navy: #031f39 — Primary text, dark backgrounds
- Off-White: #fffdf8 — Page backgrounds
- Near-Black: #0a0a0a — Text on light backgrounds
- Cool Gray: #828387 — Secondary text
- Warm Gray: #777570 — Secondary text, inputs
- Charcoal Gray: #56575b — UI text
- Primary Blue: #0058dd — Primary buttons, links, focus outlines
- Accent Orange: #ff950a — CTA highlights
- Black: #000000 — Icons, functional text
- Light Warm Gray: #bab7b0 — Dividers, borders
- Mid Warm Gray: #6c6965 — Secondary text
- Warm Light: #eeeae3 — Card backgrounds
- Secondary Blue: #2a5bd7 — Hover accents, secondary CTAs
- Dark Gray: #252628 — Section backgrounds
- Deep Indigo: #13285e — Hover/focus states

## Typography
Font: 'Bitly Display', 'Helvetica Neue', Helvetica, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 XL | 70px | 900 | 1.00 | Hero titles |
| H1 LG | 64px | 700 | 1.10 | Page titles |
| H1 MD | 48px | 700 | 1.20 | Section headings |
| H1 SM | 40px | 700 | 1.20 | Smaller headings |
| Body LG | 20px | 400–600 | 1.40–1.60 | Paragraphs |
| Body MD | 16px | 400–600 | 1.40–1.60 | UI text |
| Caption | 12px | 400–600 | 1.00–1.22 | Labels |

## Spacing & Grid
Base: 8px grid. Scale: 1, 2, 4, 5, 6, 8, 9, 10, 11.2, 12, 14, 15, 16, 20, 24, 30, 45, 48, 50, 80px.

## Border Radius
- none: 0 — square elements
- sm: 4px — icons, small inputs
- md: 8px — cards, menu items
- lg: 16px — buttons
- xl: 24px — large cards/images
- full: 50% — circular buttons/icons

## Shadows & Depth
- Soft: rgba(146, 144, 138, 0.25) 0px 4px 16px
- Light: rgba(0, 0, 0, 0.05) 0px 4px 10px

## Components

### Primary Button
Default: bg rgba(0, 88, 221, 0.3); color #fffdf8; padding 11px 12px; radius 16px; border 8px solid #fffdf8.
Hover: bg #f7f4ee; color #ffffff.
Focus: outline 1px solid #000000; box-shadow inset #0058dd 0px 0px 0px 2px.

### Secondary Button
Default: transparent bg; color #0058dd; padding 14px 50px 14px 20px; radius 18px; border 2px solid #0058dd.
Hover: color #2285f7; opacity 0.6.
Focus: outline 1px solid #000000.

### Input Field
Default: bg #fffdf8; border 1px solid #777570; radius 8px; padding 8px 16px.
Focus: border 1px solid #000000; border-color #0058dd; box-shadow inset #0058dd 0px 0px 0px 2px.

### Card
bg #fffdf8; radius 24px; border 1px solid #bab7b0; shadow soft.

## Layout & Responsive Rules
Breakpoints: 400, 425, 426, 500, 515, 530, 550, 560, 599, 600, 639, 767, 768, 769, 890, 896, 897, 1023, 1024, 1100, 1131, 1280, 1400px.

## Interaction Rules
Transition: 150ms ease for hover/focus.
Focus indicators: 1px solid #000000 or inset blue shadow.
Disabled: opacity 0.5, no hover.

## DO List
- Use only palette colors
- Maintain 8px grid
- Keep button radii consistent (16px for most)
- Use Bitly Display for all text
- Maintain high contrast in text/background combos

## DON'T List
- Use unapproved colors
- Mix sharp and rounded corners
- Use heavy shadows
- Remove focus indicators

## Code Examples
```css
.btn-primary {
  background: rgba(0, 88, 221, 0.3);
  color: #fffdf8;
  padding: 11px 12px;
  border-radius: 16px;
  border: 8px solid #fffdf8;
  font-weight: 500;
  font-size: 18px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #f7f4ee; color: #ffffff; }
.btn-primary:focus { outline: 1px solid #000; box-shadow: #0058dd 0 0 0 2px inset; }

.input-url {
  background: #fffdf8;
  border: 1px solid #777570;
  border-radius: 8px;
  padding: 8px 16px;
}
.input-url:focus {
  border: 1px solid #000;
  border-color: #0058dd;
  box-shadow: #0058dd 0 0 0 2px inset;
}

.card {
  background: #fffdf8;
  border-radius: 24px;
  border: 1px solid #bab7b0;
  box-shadow: rgba(146, 144, 138, 0.25) 0px 4px 16px;
  padding: 24px;
}
```

9. Summary

TL;DR — Bitly’s design system is minimal, bold, and efficient. Deep navy and off-white form the base, vivid blues and oranges drive interaction. Custom typography and strict 8px spacing keep everything consistent.

Brand Keywords:

• functional-minimalist
• high-contrast
• action-focused
• trust-driven