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

# Buddy — Homepage · Design System

> A bright, precise canvas for complex DevOps

**Theme:** light · **Industry:** devtools · **Source:** https://buddy.works/ · **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._

Buddy’s homepage pairs an almost-white canvas and bold black typography with finely layered product-interface imagery. A restrained lime CTA and colorful product illustrations bring energy to a long, modular feature narrative.

## North star

Keep the canvas quiet and the typography decisive; let product UI carry the detail, with vivid color reserved for focused accents.

## Overview

The visual system is anchored by a near-white canvas (#fcfcfd), with deep ink text and pale, cool-gray hairlines keeping the page bright and legible. Lime (#bfff5a) is reserved for the primary cloud CTA, while stronger greens and other vivid hues appear sparingly in product graphics and promotional bands rather than defining the base palette. IBM Plex Sans gives headings and body copy a compact, confident technical voice; IBM Plex Mono supplies small uppercase eyebrow labels. The page uses a centered, constrained content area and repeats a clear feature rhythm: concise heading and copy, overlapping screenshots of Buddy’s interface, then short capability statements in a multi-column arrangement. Generous vertical breathing room separates these feature chapters. UI imagery is treated as a key proof point, framed in light panels with subtle borders and layered shadows. Rounded pills, small colored corner accents, a testimonial card, and gradient CTA bands add variety without disrupting the restrained core.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cloud Canvas | `#fcfcfd` | `--color-cloud-canvas` | surface | Near-white page canvas and the continuous background behind the homepage’s feature sections. |
| Soft Ink | `#151720` | `--color-soft-ink` | neutral | Primary interface and supporting text, including feature-card descriptions. |
| Frost Line | `#ebeef7` | `--color-frost-line` | neutral | Fine borders and the pale grid treatment visible around the hero and content. |
| Signal Lime | `#bfff5a` | `--color-signal-lime` | accent | Primary “Get Started on Cloud” button fill; keep this bright green accent focused. |
| Midnight Type | `#0a0d16` | `--color-midnight-type` | brand | Strong headings and prominent text against the light canvas. |
| Graphite Ink | `#1d2130` | `--color-graphite-ink` | brand | Navigation, button labels, muted content text, and outlined control borders. |
| Quiet Edge | `#d5d9e8` | `--color-quiet-edge` | neutral | Subtle card outlines and inset UI edges, especially around layered product imagery. |
| Slate Copy | `#46494f` | `--color-slate-copy` | neutral | Secondary body text; use for supporting copy rather than headline emphasis. |
| Forest Accent | `#0b3d28` | `--color-forest-accent` | accent | Occasional green heading or text accent; distinct from the lime CTA fill. |
| Muted Slate | `#6b6d72` | `--color-muted-slate` | semantic | Low-emphasis heading and body copy where hierarchy calls for softer contrast. |

### Semantic aliases

`--color-canvas` → `#fcfcfd` (Cloud Canvas) · `--color-text` → `#0a0d16` (Midnight Type) · `--color-text-muted` → `#1d2130` (Graphite Ink) · `--color-border` → `#ebeef7` (Frost Line) · `--color-accent` → `#bfff5a` (Signal Lime) · `--color-accent-2` → `#0b3d28` (Forest Accent) · `--color-on-accent` → `#1d2130` (Graphite Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a0d16` | `#fcfcfd` | 18.93:1 | AAA |
| `#1d2130` | `#fcfcfd` | 15.61:1 | AAA |
| `#bfff5a` | `#fcfcfd` | 1.16:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(235, 238, 247) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(rgb(235, 238, 247) 1px, rgba(0, 0, 0, 0) 1px), url("https://buddy.works/assets/images/new/main/noise.jpg")`
- `radial-gradient(82.48% 82.48% at 50% -6.01%, rgb(93, 247, 182) 0%, rgb(70, 216, 255) 100%)`
- `radial-gradient(100% 100% at 50% 0px, rgb(255, 216, 136) 0%, rgb(255, 198, 80) 100%)`
- `radial-gradient(100% 100% at 50% 0px, rgb(255, 181, 241) 0%, rgb(255, 157, 236) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| IBM Plex Sans | `--font-body` | webfont | 600, 400, 500, 700 | Display and headings, navigation, body copy, captions, and buttons. | Inter |
| IBM Plex Mono | `--font-mono` | webfont | 500 | Small eyebrow and code-style labels. | IBM Plex Mono |

- **IBM Plex Sans:** Use bold, tightly tracked large headings; body and navigation stay clean and compact, with sentence case.
- **IBM Plex Mono:** Use uppercase micro-labels with visibly expanded tracking; keep this treatment occasional.

### Type scale — Golden Ratio (ratio ≈ 1.644, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 700 | 0.9 | -0.012em | — | IBM Plex Sans | Large, bold hero headline. |
| h1 | 48px | 700 | 1 | -0.021em | — | IBM Plex Sans | Main section headlines and prominent calls to action. |
| h2 | 22px | 500 | 1.45 | -0.045em | — | IBM Plex Sans | Supporting introductory or section-level copy. |
| body | 18px | 600 | 1.33 | 0 | — | IBM Plex Sans | Feature descriptions and emphasized explanatory copy. |
| caption | 13px | 400 | 1.85 | 0 | — | IBM Plex Sans | Fine print, metadata, and secondary labels. |
| button | 14px | 600 | 2.29 | 0 | — | IBM Plex Sans | CTA labels in pill-shaped controls. |
| nav | 13px | 600 | 1.85 | 0 | — | IBM Plex Sans | Compact top navigation and menu labels. |
| eyebrow | 12px | 500 | 2 | 0.167em | uppercase | IBM Plex Mono | Uppercase mono labels, including the trust-strip heading. |
| code | 12px | 500 | 2 | 0.167em | uppercase | IBM Plex Mono | Small uppercase technical or code-oriented labels. |

OpenType features in use: `"liga" 0`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 4, 6, 8, 12, 16, 24, 32, 48, 96 px.
- Section rhythm 72px · element gap 24px · card padding 24px · max content width 1200px.

Use a centered content container capped at the measured 1200px maximum, with comfortable spacing and clear vertical separation between chapters. The homepage alternates centered hero content with left-aligned feature introductions and three-column capability groupings. Large product screenshots overlap or sit side by side as focal points, followed by concise text. The page is long but modular; preserve generous section gaps, consistent alignment, and a relatively airy density rather than compressing content.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `8px` · nav `9999px` · xs `8px` · sm `14px` · md `24px` · pill `9999px`
- Shadow `xl` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(29, 33, 48, 0.04) 0px 3px 3px -1px, rgba(29, 33, 48, 0.04) 0px 6px 6px -3px, rgba(29, 33, 48, 0.04) 0px 12px 12px -6px, rgba(29`
- Shadow `inset` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.72) 0px 1px 0px 0px inset, rgba(29, 33, 48, 0.12) 0px -2px 0px 0px inset, rgba(29, 33, 48, 0.04) 0px 1px 1px -`
- Shadow `inset-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.72) 0px 0px 0px 1px inset, rgb(213, 217, 232) 0px 0px 0px 1px, rgba(29, 33, 48, 0.03) 0px 1px 1px -1px, rgba(2`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(29, 33, 48, 0.08) 0px 0px 0px 1px, rgba(29, 33, 48, 0.04) 0px 1px 1px -1px, rgba(29, 33, 48, 0.04) 0px 2px 2px -1px, rgba(29, 3`
- Shadow `inset-3` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(213, 217, 232, 0.88) 0px 0px 0px 1px, rgba(70, 216, 255, 0.08) 0px 3px 3px -1.5px, rg`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(29, 33, 48, 0.08) 0px 0px 0px 1px, rgba(29, 33, 48, 0.04) 0px 1px 1px -1px, rgba(29, 33, 48, 0.04) 0px 2px 2px -1px, rgba(29, 3`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most content sits on the flat canvas with pale, fine borders rather than heavy card fills. Product media gains depth through layered screenshot panels and subtle, diffuse shadows; controls use crisp inset edging. Preserve the distinction between quiet feature layouts and the more colorful testimonial and CTA bands.

## Imagery

Product UI screenshots are the primary imagery: clean, bright interface captures arranged in overlapping panels or broad multi-screen compositions. The hero uses an illustrated fan of feature cards, while small colorful corner marks and customer logos add supporting detail. Keep screenshots light and legible with restrained framing; do not introduce lifestyle photography. Some vivid gradients and multicolor shapes belong to illustrations or promotional blocks, not the default page canvas.

## Components

### Primary CTA

A lime-filled, dark-outlined pill with a compact bold label; use for the main cloud-start action.

### Top navigation

Brand mark at left, compact text links across the top, and sign-in plus a prominent pill CTA at right.

### Feature showcase

Left-aligned heading and short introduction above layered product screenshots, followed by concise capability items in three columns.

### Trust strip

Centered uppercase mono introduction above a multi-row band of customer logos.

### Testimonial card

Bright, warm-colored card placed among customer marks, with quote, author details, and layered decorative edges.

### Pricing banner

High-contrast green gradient strip with a short pricing message and an outlined pill link.

### Signup panel

Wide cyan-to-green gradient CTA with centered headline and stacked provider sign-up buttons.

### Measured component styles

- **Primary button** (“Get Started on Cloud”): background #bfff5a · text #1d2130 · border 2px solid #1d2130 · radius 56px · padding 4px 24px · 600 14px IBM Plex Sans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 25
- **Secondary button** (“View our pricing”): transparent background · text #1d2130 · border 2px solid #1d2130 · radius 56px · padding 8px 34px · 600 17px IBM Plex Sans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 25
- **Link** (“Remote Deployments”): transparent background · text #0a0d16 · radius 0px · padding 24px · 400 16px IBM Plex Sans
- **Card** (“Remote deployments DXed Mix clouds, VPS,”): transparent background · text #151720 · border 1px solid #ebeef7 · radius 0px · padding 24px · 400 16px IBM Plex Sans
- **Navigation item** (“Docs”): transparent background · text #1a67fd · radius 0px · padding 0px · 400 14px IBM Plex Sans

## Do

- Keep the page canvas near-white and visually quiet.
- Use bold, tightly tracked headings for strong hierarchy.
- Show real product-interface compositions as feature proof.
- Reserve lime for prominent actions and small accents.
- Separate feature chapters with generous vertical breathing room.
- Use pale borders and subtle shadows to frame layered media.

## Don't

- Do not turn every section into a colored background band.
- Do not use heavy shadows on ordinary text and content blocks.
- Do not let decorative gradients overpower the product UI.
- Do not crowd feature descriptions or screenshots together.
- Do not use the accent lime as a broad page background.
- Do not add lifestyle photography that conflicts with the interface-led presentation.

## Agent prompt

Build a new Buddy-style page with a bright, technical, product-led visual system. Use Cloud Canvas (#fcfcfd) as the base and Midnight Type (#0a0d16) or Soft Ink (#151720) for crisp text. Set headings and interface copy in IBM Plex Sans, with IBM Plex Mono reserved for occasional uppercase eyebrows. Use Signal Lime (#bfff5a) selectively on the primary CTA, with a dark outline and pill form. Structure content in a centered, constrained container with generous vertical separation, concise left-aligned feature introductions, and three-column capability groups. Make layered, light product screenshots the main visual evidence; frame them with Frost Line (#ebeef7) or Quiet Edge (#d5d9e8) and restrained shadows. Keep the ordinary sections mostly white, adding vivid gradients only to deliberate promotional or signup panels.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | logo-cloud | Centered eyebrow above a multi-row customer logo band. | Social proof | Uppercase mono label, Monochrome logos |
| 2 | other | Left-aligned intro, layered product views, then a three-column capability grid. | Feature explanation, Capability scan | Overlapping screenshots, Short feature tiles |
| 3 | other | Section heading and copy above wide UI imagery and a three-column list. | Feature explanation, Workflow overview | Layered UI panels, Compact benefit grid |
| 4 | testimonials | Centered testimonial card layered over a wide customer-logo arrangement. | Customer validation | Warm card, Logo field, Decorative layered edge |
| 5 | other | Feature introduction, product-interface collage, three-column benefits, then trust badges. | Feature explanation, Trust reinforcement | Overlapping screenshots, Award badges |
| 6 | integrations | Compact five-column strip of small icon-led items. | Capability discovery | Small icon marks, Evenly spaced columns |
| 7 | other | Left-aligned intro above layered product screenshots and a three-column benefit grid. | Feature explanation, Tool compatibility | Product UI collage, Small corner accents |
| 8 | pricing | Wide horizontal promotional band with copy on the left and an outlined action on the right. | Pricing discovery, Direct action | Bright gradient panel, Outlined pill button |
| 9 | other | Feature intro, multi-panel product imagery, and a three-column list of capabilities. | Feature explanation, Security reassurance | Layered screenshots, Compact benefit tiles |
| 10 | other | Left-aligned introduction above layered UI imagery and three-column capability text. | Feature explanation, Capability scan | Product screenshot collage, Colored corner accents |
| 11 | other | Feature intro, layered deployment interface, then a three-column benefits grid. | Feature explanation, Deployment overview | UI and terminal imagery, Compact feature tiles |
| 12 | cta | Wide gradient signup panel with introductory copy and vertically stacked provider buttons. | Account creation, Social sign-up | Cyan-green gradient, Provider buttons |
| 13 | footer | Multi-column resource and company links above copyright and operational status. | Resource navigation, Trust information | Compact link columns, Status indicator |

## Source CSS custom properties (selected)

```css
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
```

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