---
title: "bunny.net design system"
variant: extended
source: https://bunny.net/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/bunny-net)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# bunny.net · Design System

> A bright blue edge platform with a playful, illustrated edge

**Theme:** light · **Industry:** devtools · **Source:** https://bunny.net/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

bunny.net’s homepage pairs pale-blue content sections and deep-navy feature panels with bold, characterful 3D illustrations. Friendly rounded typography, clear product groupings, and vivid orange calls to action make a technical platform feel approachable.

## North star

Pair a calm pale-blue product canvas and deep-blue panels with friendly 3D bunny artwork, using orange to make the next action unmistakable.

## Overview

The page establishes a distinctive contrast between an immersive, dark indigo hero and a long, airy pale-blue canvas. White surfaces give the service cards and footer room to stand apart, while deep blue carries headings, body copy, and dark promotional panels. Orange is the strongest functional signal: it marks trial and sales actions and appears vividly in the character artwork. Rubik is used throughout, with bold, large headings and readable regular-weight copy; rounded forms keep the technical subject friendly. The layout alternates centered introductions, paired feature content, compact metric groups, and broad promotional panels rather than relying on a rigid repeated template. Highly polished 3D bunny illustrations provide the page’s personality and anchor otherwise text-heavy sections. Cards are white and gently elevated, while most of the pale-blue page remains flat and open, with consistent generous section spacing.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | White hero and footer surfaces, service cards, navigation text on dark panels, and occasional light borders. |
| Bunny Navy | `#183d6d` | `--color-bunny-navy` | brand | Primary text and headings across pale sections, dark-footer content, and blue links or card details. |
| Hopper Sky | `#e1f2ff` | `--color-hopper-sky` | brand | Dominant pale-blue canvas for the main feature, metrics, testimonial, CTA, and support sections. |
| Deep Current | `#032340` | `--color-deep-current` | semantic | Very dark blue used in a minor button and footer detail; not a main page-wide background. |
| Carrot Orange | `#fd8d32` | `--color-carrot-orange` | accent | Orange text or button detail and warm accents in illustrations; the hero CTA uses a vivid orange gradient. |
| Midnight Panel | `#051e38` | `--color-midnight-panel` | surface | Dark promotional section and compact feature panel, contrasting with the pale-blue page canvas. |
| Harbor Blue | `#022e57` | `--color-harbor-blue` | surface | Dark card and footer panel color, used to distinguish inset promotional content. |
| Racing Pink | `#ff2a64` | `--color-racing-pink` | accent | A small contribution to the measured pink-to-orange gradient; secondary to the page’s blue palette. |
| Sunlit Orange | `#ffaf48` | `--color-sunlit-orange` | accent | Warm endpoint in the measured pink-orange gradient and an occasional illustration or CTA highlight. |
| Indigo Night | `#121343` | `--color-indigo-night` | surface | Dark indigo in the hero and navigation area; screenshots show it chiefly as part of the hero’s artwork and background treatment. |
| Quiet Gray | `#666666` | `--color-quiet-gray` | neutral | Minor muted copy color; secondary to the white and blue text system. |
| Air Blue | `#8bb3da` | `--color-air-blue` | accent | Subtle blue text accent against the light canvas, used sparingly. |

### Semantic aliases

`--color-canvas` → `#e1f2ff` (Hopper Sky) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#051e38` (Midnight Panel) · `--color-surface-3` → `#022e57` (Harbor Blue) · `--color-surface-4` → `#183d6d` (Bunny Navy) · `--color-text` → `#183d6d` (Bunny Navy) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#ffffff` (Gallery White) · `--color-accent` → `#183d6d` (Bunny Navy) · `--color-accent-2` → `#8bb3da` (Air Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#183d6d` | `#e1f2ff` | 9.52:1 | AAA |
| `#183d6d` | `#ffffff` | 10.9:1 | AAA |
| `#183d6d` | `#051e38` | 1.54:1 | fail |
| `#183d6d` | `#022e57` | 1.26:1 | fail |
| `#ffffff` | `#e1f2ff` | 1.14:1 | fail |
| `#ffffff` | `#051e38` | 16.81:1 | AAA |
| `#ffffff` | `#022e57` | 13.72:1 | AAA |
| `#183d6d` | `#e1f2ff` | 9.52:1 | AAA |
| `#183d6d` | `#ffffff` | 10.9:1 | AAA |
| `#183d6d` | `#051e38` | 1.54:1 | fail |

### Gradients

- `linear-gradient(rgb(225, 242, 255), rgb(229, 244, 255) 41.32%, rgb(255, 255, 255))`
- `linear-gradient(0deg, rgb(225, 242, 255), rgb(229, 244, 255) 41.32%, rgb(255, 255, 255))`
- `linear-gradient(85.19deg, rgb(255, 42, 100) -133.27%, rgb(255, 175, 72) 105.93%)`
- `linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.1))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Rubik | `--font-body` | webfont | 400, 700, 200, 500, 600 | Site-wide headings, body copy, navigation, links, and buttons. | Nunito Sans |

- **Rubik:** Use rounded, friendly sans-serif forms, clear bold headings, and regular-weight sentence-case copy; tracking is neutral.

### Type scale — Major Third (ratio ≈ 1.257, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 45px | 700 | 1.2 | 0 | — | Rubik | Large, bold hero headline, set flush left. |
| h2 | 30px | 700 | 1.27 | 0 | — | Rubik | Bold section headings for feature and network introductions. |
| h3 | 29px | 500 | 1.2 | 0 | — | Rubik | Medium-weight card or subsection headings. |
| h4 | 24px | 400 | 1.58 | 0 | — | Rubik | Regular-weight supporting headings and longer callouts. |
| body | 18px | 400 | 1.61 | 0 | — | Rubik | Readable descriptive copy beneath headings and within feature panels. |
| caption | 14.5px | 400 | 1.75 | 0 | — | Rubik | Compact helper text, notes, and small supporting labels. |
| button | 0px | 400 | 29 | 0 | — | Rubik | CTA text; measured button font size is unavailable, so do not infer it. |
| nav | 16px | 400 | 1.19 | 0 | — | Rubik | Regular-weight top navigation links. |
| link | 20px | 500 | 1.2 | 0 | — | Rubik | Medium-weight text links and prominent trial actions. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 3, 4, 5, 6, 10, 15, 18, 20, 21, 23, 24, 30, 32, 34, 38 px.
- Section rhythm 60px · element gap 3px · card padding 22px · max content width 1140px.

Use a centered content frame with a measured maximum width of 1140px and a comfortable, vertically paced rhythm. The hero is a two-column composition with left-aligned copy and full-bleed illustrative media; the header sits within the dark hero. Most lower sections share the pale-blue canvas, alternating centered headings, two-column features, cards, statistics, and wide CTAs. Keep text blocks compact beside artwork, and use clear open space between section groups. Measured card padding is 22px and section gap is 60px.

## Shape & elevation

- Radius: button `10px` · card `10px` · media `50%` · nav `6px` · link `6px` · xs `6px` · sm `10px` · md `20px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.04) 0px 6px 40px 0px`
- Shadow `md` (card): `rgb(212, 211, 221) 0px 4px 11px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Keep most pale-blue sections flat and uncluttered. White service cards use a 10px radius and subtle measured shadows, rather than heavy outlines. Dark navy panels create contrast through color, not elaborate borders. The header and large CTA panels sit cleanly over backgrounds, while the hero artwork supplies most of the visual depth.

## Imagery

Make polished, colorful 3D bunny characters and technology props the defining imagery, not generic stock photography. The hero pairs a large character-and-globe scene with left-side copy; later illustrations sit beside feature explanations or overlap dark promotional panels. Treat artwork as high-contrast focal points against simple pale-blue or navy fields. A video appears in the network section; reserve a clear, broad media area for it.

## Components

### Hero and navigation

Dark illustrated two-column hero with a compact horizontal header, white navigation text, an outlined Login control, and a warm gradient primary CTA.

### Service cards

Eight measured white cards on the pale-blue canvas, with 10px corners, 22px measured padding, blue text, and subtle shadowing.

### Trial CTA

Prominent orange-gradient trial action paired with concise reassurance such as no credit card required; preserve clear contrast on light or dark panels.

### Dark promotional panel

A rounded #051e38 or #022e57 inset panel containing white copy, a trial action, and character artwork.

### Network metrics

A compact row of prominent performance figures with blue labels; reserve orange emphasis for selected large values.

### Feature illustration split

Pair concise explanatory copy and short benefit lists with large 3D bunny or technology artwork on the opposite side.

### Footer

White, multi-column link area with blue headings and copy, contact and social details, then a full-width deep-blue legal strip.

### Measured component styles

- **Primary button** (“bunny.net on Facebook”): background #032340 · text #183d6d · radius 10px · padding 0px · 400 0px Rubik
- **Secondary button** (“Login”): transparent background · text #ffffff · border 1px solid #ffffff · radius 6px · padding 9px 20px 8px 20px · 400 16px Rubik
- **Link** (“4.8 on G2”): transparent background · text #183d6d · radius 0px · padding 0px · 400 18px Rubik
- **Card** (“CDN Supercharge your content at a truly ”): background #ffffff · text #183d6d · radius 10px · padding 18px 20px 18px 32px · 400 18px Rubik · shadow rgba(0, 0, 0, 0.04) 0px 6px 40px 0px
- **Navigation item** (“Network”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Rubik

## Do

- Use Hopper Sky as the main content canvas.
- Reserve dark navy for the hero and inset promotional panels.
- Use orange gradient actions for trials and sales prompts.
- Pair feature explanations with distinctive bunny illustrations.
- Set headings and navigation in Rubik or a close rounded sans.
- Keep cards white, rounded, and gently elevated.
- Create varied section layouts while keeping the overall page airy.

## Don't

- Do not turn the entire page into a dark interface.
- Do not use orange as a large continuous background.
- Do not replace the character illustrations with generic stock imagery.
- Do not crowd copy and artwork into one dense block.
- Do not apply strong shadows to every section.
- Do not add unmeasured spacing, sizes, or corner radii.
- Do not treat illustration-only palette noise as a core interface color.

## Agent prompt

Build a new page in the bunny.net visual style: use Hopper Sky (#e1f2ff) as the primary content canvas, Gallery White (#ffffff) for cards and light sections, and Bunny Navy (#183d6d) for headings and copy. Use Rubik throughout, with bold, friendly headings and readable regular body text. Make the top section a dark, immersive hero with a horizontal navigation bar, left-aligned message, prominent bunny-themed 3D artwork, and an orange gradient CTA using Carrot Orange (#fd8d32) and Sunlit Orange (#ffaf48). Organize the remaining content into spacious centered introductions, feature splits, white rounded cards, metric rows, and inset dark panels using Midnight Panel (#051e38) or Harbor Blue (#022e57). Let vivid, polished character illustrations provide personality. Keep interactions obvious and the layout varied but orderly; avoid inventing unmeasured dimensions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark full-bleed two-column hero; navigation above left-aligned copy and right-side 3D artwork. | Primary trial CTA, Login access, Social proof | Dark indigo field, White nav, Orange gradient button, Large 3D character |
| 2 | other | Centered heading and supporting line on the pale-blue canvas. | Transition into product benefits | Centered blue heading, Open background |
| 3 | feature-grid | Two-column arrangement of service cards around a central character illustration. | Scan product categories, Follow service links | White cards, Small icons, Central 3D character |
| 4 | cta | Single wide dark panel inset within the pale-blue page. | Start free trial, Reassuring setup note | Navy panel, Orange CTA, White heading |
| 5 | other | Centered title and supporting copy above the next feature section. | Explain platform value | Centered typography, Pale-blue canvas |
| 6 | feature-split | Text-led feature content with illustration and a compact multi-column benefit list. | Review benefits, Scan included features | Illustrated feature split, Orange bullet accents |
| 7 | stats | Centered heading and explanatory copy above a row of large performance figures. | Compare network metrics | Orange numeric emphasis, Blue labels |
| 8 | video | Single broad media block following the network metrics. | Watch product video | Video media area, Pale-blue surround |
| 9 | cta | Wide horizontal callout with copy, character illustration, and right-side action. | Start a trial, No-card reassurance | Dark blue strip, Orange button, Small 3D artwork |
| 10 | feature-split | Large rounded navy feature panel with copy on the left and bunny support artwork on the right. | Review support promise, Scan response metrics | Dark panel, White copy, Character illustration |
| 11 | testimonials | Customer proof centered around a featured case-study card and customer attribution. | Read case study, Review customer proof | White card, Customer identity, Case-study artwork |
| 12 | stats | Four concise outcomes arranged in a horizontal row. | Scan reported outcomes | Divided columns, Compact labels |
| 13 | cta | Two-column dark-blue feature CTA with copy and artwork. | Start trial, Talk to an expert | Paired buttons, Large character illustration, Rounded panel |
| 14 | footer | White multi-column link directory followed by contact, social, and brand content. | Browse site links, Contact sales, Follow social channels | Four link columns, Blue headings, Character artwork |
| 15 | footer | Full-width deep-blue legal bar beneath the main footer. | Access legal policies | Dark blue background, Compact light links |

## Source CSS custom properties (selected)

```css
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-primary-rgb: 13,110,253;
--bs-secondary-rgb: 108,117,125;
--bs-primary-text-emphasis: #052c65;
--bs-secondary-text-emphasis: #2b2f32;
--bs-success-text-emphasis: #0a3622;
--bs-info-text-emphasis: #055160;
--bs-warning-text-emphasis: #664d03;
--bs-danger-text-emphasis: #58151c;
--bs-light-text-emphasis: #495057;
--bs-dark-text-emphasis: #495057;
--bs-primary-bg-subtle: #cfe2ff;
--bs-secondary-bg-subtle: #e2e3e5;
--bs-success-bg-subtle: #d1e7dd;
--bs-info-bg-subtle: #cff4fc;
--bs-warning-bg-subtle: #fff3cd;
--bs-danger-bg-subtle: #f8d7da;
--bs-light-bg-subtle: #fcfcfd;
--bs-dark-bg-subtle: #ced4da;
--bs-primary-border-subtle: #9ec5fe;
--bs-secondary-border-subtle: #c4c8cb;
--bs-success-border-subtle: #a3cfbb;
--bs-info-border-subtle: #9eeaf9;
--bs-warning-border-subtle: #ffe69c;
--bs-danger-border-subtle: #f1aeb5;
--bs-light-border-subtle: #e9ecef;
--bs-dark-border-subtle: #adb5bd;
--bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-color: #212529;
--bs-body-color-rgb: 33,37,41;
--bs-body-bg: #fff;
--bs-body-bg-rgb: 255,255,255;
--bs-emphasis-color: #000;
--bs-emphasis-color-rgb: 0,0,0;
--bs-secondary-color: rgba(33,37,41,.75);
--bs-secondary-color-rgb: 33,37,41;
--bs-secondary-bg: #e9ecef;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/bunny-net