# Weights & Biases · Design system migration spec

> Source: https://wandb.ai  ·  Curated by OpenDesign  ·  en

> This site is a prime example of balancing enterprise-grade seriousness with developer-friendly personality through its playful annotations and robust dark-mode design.

## 1. Identity DNA

Weights & Biases presents itself as a high-performance engineering dashboard, where the density of enterprise tooling meets a deliberate touch of personality. The system is built on a foundation of technical robustness, yet it refuses to sacrifice approachability for the sake of sheer authority.

**One-liner:** An enterprise AI platform that uses dark themes and playful handwritten annotations to humanize complex technical tooling.
**Keywords:** technical · robust · playful · confident · enterprise
**Analogy:** A high-performance engineering dashboard with a touch of personality

## 2. Color

The palette is anchored by a deep charcoal field, a high-contrast foundation that allows content to recede and interface elements to command attention. A vibrant amber serves as the signature warmth for primary actions, while a secondary cyan provides a clear, cool counterpoint.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#202226` | main background |
| `--bg-soft` | `#282A2F` | card background |
| `--bg-quiet` | `#2B303B` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#ADAFB5` | secondary text |
| `--muted` | `#C5C7CC` | placeholder |
| `--muted-soft` | `#CCCECC` | weak hint |
| `--accent` | `#FCBC32` | single accent |
| `--line` | `rgba(43, 48, 59, 1.0)` | divider |

**Color principle:** High-contrast dark theme with a vibrant amber accent for warmth and a signature cyan for secondary CTAs

The principle is clear: dark backgrounds are non-negotiable, and the accent colors exist to guide, not to decorate.

## 3. Typography

Type is deployed in a deliberate hierarchy, using a transitional-serif for display type to convey authority and a humanist-sans for body copy to ensure readability. Monospace is reserved for the literal language of the platform—code blocks and terminal interfaces—maintaining a clear distinction between narrative and command.

- **Display:** transitional-serif
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -1px | Hero headline |
| h1 | 48px | 1.1 | 400 | 0px | Section titles |
| body | 20px | 1.5 | 400 | 0px | General text |

**Type rules:**
- Use transitional-serif for large display type and authoritative headings
- Use humanist-sans for body copy and UI elements
- Use monospace for code blocks and terminal-like interfaces
- Handwritten annotations (e.g., 'easy') are treated as a special decorative layer over standard type

## 4. Spacing

A standard 4px grid provides the underlying rhythm, but the system employs generous whitespace to articulate the scale and importance of major components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid with generous whitespace to emphasize scale and importance

## 5. Surfaces

Depth is communicated through carefully calibrated shadows and subtle 1px borders, which delineate containers without harsh division. These elements create a layered environment where cards and modules feel elevated, yet firmly rooted in the dark surface.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(10, 14, 21, 0.5) 0px -1px 16px 0px
  - rgba(10, 14, 21, 0.5) 0px 16px 16px 0px
- **Borders:** Solid 1px borders using rgba(43, 48, 59, 1.0) for subtle container delineation

## 6. Layout

The layout skeleton is a centered, wide-format composition that prioritizes clear section breaks. Within this structure, a two-column grid emerges specifically to juxtapose explanatory text with rendered code examples.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A centered, wide-format layout with clear section breaks, utilizing a two-column grid for code examples

## 7. Motion & Interaction

Motion is treated as functional feedback rather than spectacle. The system favors standard, smooth transitions for hover states and interactive feedback, ensuring that movement always clarifies the interface's response.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Hover states for buttons and interactive elements
  - Subtle background color transitions on hover
  - Transformations for interactive card elements

- **Hover:** Background color darkens or lightens slightly; cursor changes to pointer.
- **Click:** Immediate visual feedback with slight scale or color shift.
- **Transition:** Smooth background, border, and transform transitions over 0.3s to 0.4s.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The voice is expert yet approachable, blending technical precision with a confident, playful tone. It speaks in declarative statements and direct calls to action, deliberately avoiding the dryness of corporate jargon.

- **Tone:** Expert yet approachable, blending technical precision with playful confidence.
- **Headline style:** Bold, declarative statements with occasional playful corrections (e.g., crossing out 'hard' for 'easy').
- **CTA style:** Direct and action-oriented, using uppercase for emphasis (e.g., 'GET STARTED WITH WEAVE').
- **Avoid:** Avoid overly corporate or dry language / Avoid a cluttered or chaotic layout / Avoid using a purely minimalist, stark aesthetic / Avoid complex jargon without visual support

### Don'ts
- ❌ don't use light backgrounds — screenshot shows a dark theme with a main background of #202226
- ❌ don't use sans-serif for large display headings — screenshot shows a transitional-serif font for the main headline
- ❌ don't use red for primary CTAs — screenshot shows amber (#FCBC32) as the dominant accent color
- ❌ don't use a strict, purely utilitarian layout — screenshot shows playful, handwritten-style annotations over standard type
- ❌ don't use tiny, dense containers — screenshot shows generous padding and spacing for major components
- ❌ don't use complex gradients for backgrounds — screenshot shows solid dark colors with occasional subtle gradients in decorative elements

The system deliberately avoids light themes, purely utilitarian layouts, and complex gradients, trusting instead in solid color, generous spacing, and purposeful typographic play.

## System Prompt (paste into AI tool)

```
This is a dark-themed developer platform for AI and machine learning, balancing enterprise credibility with technical playfulness. The design centers on a deep charcoal background (#202226) with a vibrant amber accent (#FCBC32) for primary actions and a secondary cyan for other CTAs. Typography uses a transitional-serif for bold, authoritative display headings and a humanist-sans for readable body copy, supplemented by monospace for code-focused areas. A signature element is the playful use of handwritten annotations that modify the main headline, injecting personality into a high-tech product. Critical design constraints include: never use light backgrounds, avoid red as a primary accent, and do not omit the generous spacing required for the large-scale elements. The layout is structured but allows for expressive, non-grid-aligned decorative touches like the crossed-out 'hard' in the hero section.
```