Weights & Biases — design system & UI screens
AI developer-platform landing (by CoreWeave); a handwritten hard-to-easy headline swap over paired dark code panels for Weave and Models. Yellow accent, dense proof.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/weights-biases.
Decoded design system
Weights & Biases's decoded design system: background #1A1C1F, text #ECECEE, accent #FCBC32, link #FCBC32, primary #00AFC2; type scale h1 72px / h2 38px / body 20px; 4px spacing base; 4px base radius. The single interactive/action color is #1A1C1F — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #1A1C1F |
| surface | #26282B |
| border | #393B3E |
| text | #ECECEE |
| text_muted | #9C9C9F |
| primary | #00AFC2 |
| accent | #FCBC32 |
| link | #FCBC32 |
| secondary | #FFCC33 |
| button_bg | #1A1C1F |
| button_text | #FFFFFF |
Using these colors
- Action color
#1A1C1F— the single interactive color; only on things you click or must notice, never large fills. accent,linkare all#FCBC32— one role, not several (the action color).- accent
#FCBC32— accent for emphasis — keep it rare on the page. - primary
#00AFC2— a brand color — but the call-to-action uses #1A1C1F, not this. - secondary
#FFCC33— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Source Serif 4
- Body: Source Sans 3
- h1: 72px
- h2: 38px
- body: 20px
Spacing
- base unit: 4px
- scale: 5px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 32px
Radii
- base: 4px
- button: 0px
Shadows (elevation)
- subtle:
rgba(0, 0, 0, 0.2) 0px 2px 0px 0px - card:
rgba(10, 14, 21, 0.5) 0px 16px 16px 0px
Motion
Micro-interactions run at 300ms (dominant) with ease.
- durations: 300ms · 400ms · 100ms
- easings:
ease·ease-in-out - animated properties: transform, background, border, box-shadow
Native design tokens
| Token | Value |
|---|---|
--wp--preset--color--black | #000000 |
--wp--preset--color--cyan-bluish-gray | #abb8c3 |
--wp--preset--color--white | #ffffff |
--wp--preset--color--pale-pink | #f78da7 |
--wp--preset--color--vivid-red | #cf2e2e |
--wp--preset--color--luminous-vivid-orange | #ff6900 |
--wp--preset--color--luminous-vivid-amber | #fcb900 |
--wp--preset--color--light-green-cyan | #7bdcb5 |
--wp--preset--color--vivid-green-cyan | #00d084 |
--wp--preset--color--pale-cyan-blue | #8ed1fc |
…and 21 more measured on the page.
Button states (measured)
- primary focus: outline
1px solid rgb(255, 255, 255)
Layout (measured)
- container max-width:
950px - nav: 96px
Motion choreography (measured)
Load order: button.e-n-tab-title×10 → svg×4 → svg×5 → svg×40 → button.cookie-setting-link → button.cookie-setting-link
Stagger: svg ×4 — 300ms apart.
Responsive (measured)
- breakpoints: 576px · 600px · 768px · 992px · 1000px · 1280px
- mobile (390px): hero 43px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →