---
name: Weights & Biases
description: "This site is a prime example of balancing enterprise-grade seriousness with developer-friendly personality through its playful annotations and robust dark-mode design."
version: alpha

colors:
  background: "#202226"
  primary: "#FFFFFF"
  secondary: "#ADAFB5"
  tertiary: "#FCBC32"
  neutral: "#C5C7CC"
  bg-soft: "#282A2F"
  bg-quiet: "#2B303B"
  muted-soft: "#CCCECC"
  line: "rgba(43, 48, 59, 1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

An enterprise AI platform that uses dark themes and playful handwritten annotations to humanize complex technical tooling.

*A high-performance engineering dashboard with a touch of personality*

## Colors

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

- **Background (`#202226`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#ADAFB5`)** — uses `ink-soft` token
- **Accent (`#FCBC32`)** — uses `accent` token
- **Muted (`#C5C7CC`)** — uses `muted` token
- **Borders (`rgba(43, 48, 59, 1.0)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Standard 4px grid with generous whitespace to emphasize scale and importance

## Elevation & Depth

- 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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Primary buttons are solid amber with dark text; secondary buttons are cyan with dark text. Outlined buttons are used for navigation links.
- **card:** Dark, slightly elevated containers for code blocks and feature modules, featuring rounded corners and subtle shadows.
- **chip:** Small badges with border-radius: 50% for status indicators or decorative dots.
- **input:** Styled as terminal-like windows with line numbers, featuring a dark background and monospace font.
- **hero:** A large-scale centered headline with a playful handwritten annotation overlay, supported by a clear value proposition and prominent CTAs.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```