CURATED · OPEN · FREE

Weights & Biases

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

01

Identity DNA

A high-performance engineering dashboard with a touch of personality

02

Color

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

03

Typography

transitional-serif · humanist-sans · monospace

• display80px · 400
• h148px · 400
• body20px · 400

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

04

Spacing

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

05

Surfaces

Solid 1px borders using rgba(43, 48, 59, 1.0) for subtle container delineation

rgba(10, 14, 21, 0.5) 0px -1px 16px 0px · rgba(10, 14, 21, 0.5) 0px 16px 16px 0px

06

Layout

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

07

Motion & Interaction

Hover states for buttons and interactive elements · Subtle background color transitions on hover · Transformations for interactive card elements

Background color darkens or lightens slightly; cursor changes to pointer. · Immediate visual feedback with slight scale or color shift.

08

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.

09

Voice & Don'ts

• Tone Expert yet approachable, blending technical precision with playful confidence.
• Headlines Bold, declarative statements with occasional playful corrections (e.g., crossing out 'hard' for 'easy').
• CTAs Direct and action-oriented, using uppercase for emphasis (e.g., 'GET STARTED WITH WEAVE').

• 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
• Avoid: Avoid overly corporate or dry language
• Avoid: Avoid a cluttered or chaotic layout
• Avoid: Avoid using a purely minimalist, stark aesthetic
• Avoid: Avoid complex jargon without visual support

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko