B-cdn (bunny.net) Design System Deep Dive

1. Brand Overview

B-cdn (bunny.net) is very much a performance brand. Everything about their design language says “fast, efficient, no fluff.” The vibe is clear: they want you to think speed, reliability, and technical confidence — but without slipping into soulless corporate aesthetics.

The website is aimed squarely at developers, tech companies, and digital businesses who care about delivering content fast. That means the design has to talk to both the engineering mind (clarity, precision, minimal distraction) and the business mind (trustworthiness, professional polish).

The philosophy here: functional minimalism with controlled personality. You’ll notice that they don’t overload the interface with gradients, complex textures, or ornamental flourishes. Instead, they lean into a strong typographic hierarchy and a restrained color palette, punctuated by orange accents for calls to action. This is a smart move — too much visual noise would undercut their “fast CDN” story.

Typography is unified: one family (Rubik) across headings, body, links, and UI labels. That’s rare. Most brands split headings and body fonts, but bunny.net keeps it consistent, which tightens the visual rhythm.

Their layout choices enforce discipline: a clear spacing scale (8px base), predictable breakpoints, and consistent border-radius patterns. This makes the UI feel cohesive across devices.

In short: bunny.net’s design system is lean, developer-friendly, and built for speed. It’s not trying to “wow” you with visuals — it’s trying to make you trust the product and get you acting quickly. They’ve nailed the “tech-optimist” tone without going cold or sterile.

2. Color System

2.1 Primary Colors

The core brand color is a deep navy: #183d6d (rgb(24, 61, 109)). This is the anchor. It’s used for navbar CTAs, key interactive elements, and as the main text color on white backgrounds.

Deep navy works here because it has a psychological association with professionalism, trust, and stability — all qualities you want in a CDN. It’s less aggressive than black, but stronger than a mid-tone blue.

The secondary “primary” is actually white (#ffffff), serving as both the base background and the inverse text color on dark navy.

They avoid mid-tone grays as primary UI colors — instead, grays show up in bootstrap variables for emphasis or subtle backgrounds.

Orange does appear in a border color (rgb(253, 141, 50)) for certain buttons, adding a high-energy accent. But it’s not part of the core palette — it’s a functional highlight.

Competitors often lean on bright blues or greens for tech products. Bunny.net’s deep navy feels more stable and less “startup flashy.”

2.2 Complete Palette

2.3 Color Relationships

Deep navy (#183d6d) on white (#ffffff) has excellent contrast — WCAG AAA compliance for normal text. White text on deep navy also passes easily.

Orange (#fd8d32) is used sparingly — mostly on borders — so contrast isn’t a core concern here, but on white it is highly visible.

Bootstrap functional colors are all well-separated from the primary navy, which prevents clashes. The subtle backgrounds (e.g., #fff3cd for warnings) have enough softness that white text would fail, so they’re paired with dark text emphasis colors (#664d03 for warnings).

There’s no evidence of a dark mode variant in the extracted palette — the “dark” colors are functional, not theme-level.

2.4 Usage Guide

Works well:

• Navy (#183d6d) text on white backgrounds for clarity.
• White text on navy buttons — high contrast, bold presence.
• Orange borders against navy — strong visual cue.

Avoid:

• Navy text on dark gray subtle backgrounds — contrast drops.
• White text on yellow warning backgrounds — fails WCAG contrast.
• Mixing more than one functional background in the same section — dilutes hierarchy.

3. Typography

3.1 Font Families

Everything is Rubik. No secondary font.

Rubik is a geometric sans with rounded corners — friendly but precise. It’s loaded from an unspecified source (no Google/Adobe font detection here), possibly self-hosted.

Fallbacks aren’t explicitly listed — likely default sans-serif.

3.2 Type Scale

3.3 Hierarchy

Rubik’s consistent family keeps hierarchy fully dependent on size and weight. The jump from 78px H1 to 54px feels big — good for hero titles. The smaller heading sizes (24px–30px) are flexible for subheads and product features.

Line heights vary heavily. Some headings are tight (0.65), others generous (1.58). This likely depends on visual grouping — tight for hero headlines, loose for multi-line blocks.

Uppercase is used sparingly (13.5px captions, 18px headings in some cases). That’s good — uppercase all-caps can look harsh.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid.

Common values:

4.2 Layout

Breakpoints: 98px, 440px, 576px, 768px, 991px, 992px, 1200px.

They use typical Bootstrap-like breakpoints with a minor quirk: both 991px and 992px are present. Possibly due to mixed Bootstrap/Tailwind usage.

Tailwind CSS is detected — they use arbitrary values and responsive modifiers.

5. Visual Elements

Border Radius

All values:

• 0px 10px 10px 0px — side-rounded lists
• 0px 0px 10px 10px — bottom-rounded list items
• 0px 0px 20px 20px — bottom-rounded sections/images
• 1px — rare div
• 5px — rare div
• 6px — buttons, list items, divs
• 8px — rare div
• 10px — most common: ul, links, divs
• 15px — rare div
• 20px — divs, buttons (pill-ish)
• 40px — card
• 100% — image (circle)

Pattern: controlled rounding. No ultra-pill buttons except the 20px radius buttons. They reserve 100% for avatars/images.

Shadows

Shadows appear but are subtle:

• rgba(0, 0, 0, 0.04) 0px 6px 40px — soft drop, used in cards
• rgba(1, 38, 74, 0.3) 0px 0px 30px — colored shadow (navy tint)
• rgb(255, 255, 255) inset — white inset
• rgb(212, 211, 221) — light gray shadow
• rgba(0, 0, 0, 0.1) 0px 24px 35px — deeper drop

Borders

• 1px solid white (#ffffff) — buttons
• 1px solid rgba(255, 255, 255, 0.09) — subtle div
• 1px solid orange (#fd8d32) — buttons
• 2px solid light blue (#e1f2ff) — div

6. Components

6.1 Buttons

Primary (btn btn--primary tile__cta)

• Default: bg white (#ffffff), text navy (#183d6d), padding 10px top/bottom, 12.5px left, radius 20px, no border.
• Hover: text white (#ffffff), transform translate(0.5rem).
• Active/Focus: text white.

Font: Rubik 12px, weight 400.

Secondary (bunny-button bunny-button--arrow bunny-button--pri)

• Default: transparent bg, text white, padding 24px top, 80px right, 23px bottom, 32px left, radius 6px, border 1px solid orange (#fd8d32).
• Hover: scale(1.1), boxShadow inset 0 0 0 .1rem var(--backgroundHover).
• Active: bg rgba(228, 228, 231, 0.5), text white, opacity 0.8.
• Focus: text white, boxShadow ring.

Font: Rubik 20px, weight 500.

6.2 Links

Two styles:

1. White text, no underline.

   • Hover: stays white, no underline.

2. Navy text, underline default.

   • Hover: white text, no underline.

6.3 Forms

No text inputs, checkboxes, radios, selects in extracted data — likely styled via external CSS.

6.4 Cards

Cards use shadows (rgba(0, 0, 0, 0.04) 0px 6px 40px) and border-radius (10px or 40px). Padding aligns to spacing scale (26px–32px).

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #183d6d;
  --color-white: #ffffff;
  --color-warning-bg-subtle: #fff3cd;
  --color-danger-text-emphasis: #58151c;
  --color-info-text-emphasis: #055160;
  --color-code: #d63384;
  --color-link-hover: #0a58ca;
  --color-dark-text-emphasis: #495057;
  --color-primary-text-emphasis: #052c65;
  --color-primary-bg-subtle: #cfe2ff;
  --color-success-text-emphasis: #0a3622;
  --color-success-bg-subtle: #d1e7dd;
  --color-secondary-bg-subtle: #e2e3e5;
  --color-secondary-text-emphasis: #2b2f32;
  --color-border: #dee2e6;
  --color-info-bg-subtle: #cff4fc;
  --color-warning-text-emphasis: #664d03;
  --color-dark-bg-subtle: #ced4da;
  --color-danger-bg-subtle: #f8d7da;
  --color-secondary-bg: #e9ecef;
  --color-border-translucent: rgba(0,0,0,.175);
  --color-border-white-09: rgba(255,255,255,0.09);
  --color-accent-orange: #fd8d32;
  --color-border-light-blue: #e1f2ff;

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

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-21_25: 21.25px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-30: 30px;
  --space-32: 32px;
  --space-34: 34px;
  --space-38: 38px;
  --space-60: 60px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-1: 1px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-15: 15px;
  --radius-20: 20px;
  --radius-40: 40px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.04) 0px 6px 40px 0px;
  --shadow-navy: rgba(1, 38, 74, 0.3) 0px 0px 30px 0px;
  --shadow-inset-white: rgb(255, 255, 255) 0px 0px 0px 3px inset;
  --shadow-light-gray: rgb(212, 211, 221) 0px 4px 11px 0px;
  --shadow-deep: rgba(0, 0, 0, 0.1) 0px 24px 35px 0px;
}

8. AI Coding Assistant Prompt

# B-cdn (bunny.net) Design System Specification

System Prompt:
You are a bunny.net design expert. Build UIs matching their visual language exactly.

Brand Context:
Bunny.net’s design is functional minimalism for tech-savvy audiences. It values speed, clarity, and trust, with a restrained palette and consistent typography. Every element should feel precise and efficient.

Color Palette:
- Primary Deep Navy: #183d6d — Navbar CTAs, primary text, brand anchor
- White: #ffffff — Page background, text on dark backgrounds
- Accent Orange: #fd8d32 — Button borders, accents
- Warning Bg Subtle: #fff3cd — Warning backgrounds
- Danger Text Emphasis: #58151c — Error text
- Info Text Emphasis: #055160 — Informational text
- Code Color: #d63384 — Inline code
- Link Hover: #0a58ca — Link hover states
- Dark Text Emphasis: #495057 — Dark mode text emphasis
- Primary Text Emphasis: #052c65 — Emphasis text
- Primary Bg Subtle: #cfe2ff — Subtle primary background
- Success Text Emphasis: #0a3622 — Success text
- Success Bg Subtle: #d1e7dd — Success background
- Secondary Bg Subtle: #e2e3e5 — Secondary background
- Secondary Text Emphasis: #2b2f32 — Secondary text
- Border Color: #dee2e6 — Component borders
- Info Bg Subtle: #cff4fc — Info background
- Warning Text Emphasis: #664d03 — Warning text
- Dark Bg Subtle: #ced4da — Dark subtle background
- Danger Bg Subtle: #f8d7da — Error background
- Secondary Bg: #e9ecef — Secondary background
- Border Translucent: rgba(0,0,0,.175) — Light borders
- Border White 9%: rgba(255,255,255,0.09) — Subtle white borders
- Border Light Blue: #e1f2ff — Light borders

Typography:
Font Family: "Rubik", sans-serif
Sizes/Weights/Line Heights:
| Level | Size | Weight | Line Height | Use For |
| H1 Hero | 78px | 700 | 0.65 | Main hero titles |
| H1 Large | 54px | 700 | 1.20 | Page titles |
| ... (include all extracted sizes as table) |

Spacing & Grid:
Base: 8px
Scale: 1px, 2px, 4px, 5px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 21.25px, 22px, 24px, 26px, 30px, 32px, 34px, 38px, 60px
Use multiples for padding and margins. Example: 12px for button padding, 26px for card inner spacing.

Border Radius:
- none: 0px — Tables, code blocks
- sm: 6px — Small buttons, list items
- md: 10px — Cards, containers
- lg: 20px — Pill buttons
- xl: 40px — Hero cards
- full: 100% — Avatars/images

Shadows & Depth:
- Soft: rgba(0,0,0,0.04) 0px 6px 40px — Cards
- Navy: rgba(1,38,74,0.3) 0px 0px 30px — Emphasis
- Inset White: rgb(255,255,255) 0px 0px 0px 3px inset — Focus states
- Light Gray: rgb(212,211,221) 0px 4px 11px — Subtle containers
- Deep: rgba(0,0,0,0.1) 0px 24px 35px — Large modals

Component Specifications:
Primary Button:
Default: bg #ffffff, color #183d6d, padding 10px top/bottom, 12.5px left, radius 20px, no border
Hover: color #ffffff, transform translate(0.5rem)
Active/Focus: color #ffffff

Secondary Button:
Default: transparent bg, color #ffffff, padding 24px 80px 23px 32px, radius 6px, border 1px solid #fd8d32
Hover: scale(1.1), boxShadow inset 0 0 0 .1rem var(--backgroundHover)
Active: bg rgba(228,228,231,0.5), color #ffffff, opacity 0.8
Focus: color #ffffff, ring shadow

Navigation Links:
White style: white text, no underline
Navy style: navy text, underline default — hover to white/no underline

Layout & Responsive Rules:
Breakpoints: 98px, 440px, 576px, 768px, 991px, 992px, 1200px
Mobile padding: 12px; Desktop padding: 26px–32px
Grid gap: multiples of 8px

Interaction Rules:
Transitions: 150ms ease
Focus: visible outline or ring shadow
Hover: scale or translate for interactive elements

DO List:
- Use ONLY colors from the palette
- Maintain 8px grid spacing
- Use Rubik for all text
- Keep border-radius consistent per component type
- Reserve orange for accents and borders
- Apply shadows only as listed

DON’T List:
- Add new colors
- Mix sharp and rounded corners in the same element
- Overuse uppercase — only for captions
- Use shadows heavier than deep spec
- Break spacing scale

Code Examples:
Primary Button:
```css
.btn-primary {
  background: #ffffff;
  color: #183d6d;
  padding: 10px 12.5px;
  border-radius: 20px;
  font-weight: 400;
  font-size: 12px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover { color: #ffffff; transform: translate(0.5rem); }
```
Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #ffffff;
  padding: 24px 80px 23px 32px;
  border-radius: 6px;
  border: 1px solid #fd8d32;
}
.btn-secondary:hover { transform: scale(1.1); }
```
Card:
```css
.card {
  background: #ffffff;
  border-radius: 10px;
  padding: 26px;
  box-shadow: rgba(0,0,0,0.04) 0px 6px 40px;
}
```

9. Summary

TL;DR: Bunny.net’s design is all about precision, speed, and trust. Deep navy and white dominate, Rubik runs everywhere, and spacing is disciplined. Buttons are clear, links are minimal, and shadows are soft.

Brand Keywords:

• tech-optimist
• functional-minimalist
• speed-driven
• developer-friendly