# Fireworks AI · Design system migration spec

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

> Excellent example of developer-focused SaaS design with premium typography and restrained color usage.

## 1. Identity DNA

Fireworks AI’s design system is built like a server rack: structural clarity over decoration, every component purpose-driven. The system anchors on a high-contrast monochrome base with a single vibrant purple accent, a palette that reflects the platform's industrial-grade cloud infrastructure for AI models.

**One-liner:** High-performance AI inference platform designed for developers to train and run models at scale.
**Keywords:** AI inference · developer platform · PyTorch creators · serverless · model lifecycle
**Analogy:** Industrial-grade cloud infrastructure for AI models

## 2. Color

The palette is a deliberate study in restraint: a stark black-and-white foundation where a single vibrant purple commands all primary actions. This high-contrast monochrome base ensures clarity, while the accent color provides unmistakable interactive affordance.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `rgba(0,0,0,0.6)` | secondary text |
| `--muted` | `#888888` | placeholder |
| `--muted-soft` | `rgba(0,0,0,0.4)` | weak hint |
| `--accent` | `#6720ff` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochrome base with vibrant purple accent for primary actions

The principle is singular: one accent color for primary intent, with no decorative gradients or secondary hues to dilute the hierarchy.

## 3. Typography

Typography is bifurcated for role: bold grotesque-sans with tight tracking asserts capability in headlines, while humanist-sans provides quiet readability for body text. Overlines and navigation are set in uppercase, creating a consistent, authoritative cadence across the interface.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 128px | 1.0 | 550 | -5px | Main hero headline |
| h1 | 48px | 1.1 | 550 | -1px | Section headers |
| body | 16px | 1.5 | 400 | 0 | Body text |
| label | 12px | 1.6 | 400 | 1px | Overlines and navigation labels |

**Type rules:**
- Use uppercase for labels and navigation links
- Maintain tight tracking for display headlines
- Use system-ui fallback chain for body text

## 4. Spacing

Spacing follows a consistent 4px grid, creating a predictable rhythm that scales from micro-components to generous section padding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid with generous section padding

## 5. Surfaces

Surfaces are flat and immediate, with no box shadows to imply depth. The sole delineation is a consistent 1px solid border at a low opacity, maintaining the clean, uncluttered field.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** 1px solid rgba(0,0,0,0.1)

## 6. Layout

The layout skeleton is a full-width hero section, its content constrained for readability, followed by a two-column grid for feature exposition. This structure prioritizes generous whitespace and a clear, top-down content hierarchy.

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

**Skeleton:** Full-width hero with constrained content, two-column feature layout

## 7. Motion & Interaction

Motion is functional and restrained, confined to state changes: color transitions on hover, transform shifts for interactive feedback, and opacity fades for toggled states. All interactions use consistent, subtle timing curves to maintain a sense of immediate, controlled response.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Color and background transitions on hover
  - Transform transitions for interactive elements
  - Opacity fades for state changes

- **Hover:** Color transitions on text and background
- **Click:** Immediate response with visual feedback
- **Transition:** All interactive elements have smooth 0.15s-0.2s transitions
- **Keyboard:** Standard focus management with visible focus states

## 8. Voice & Don'ts

The editorial voice is professional and technical, delivering bold, declarative statements about capability. It avoids marketing fluff and excessive jargon, opting for direct, action-oriented language with directional indicators.

- **Tone:** Professional, technical, confident
- **Headline style:** Bold, declarative statements about capability and transformation
- **CTA style:** Direct, action-oriented with directional indicators
- **Avoid:** Marketing fluff / Excessive jargon / Overly casual language

### Don'ts
- ❌ Don't use decorative gradients — screenshot shows clean white background with purple accent
- ❌ Don't add excessive shadows — screenshot shows flat surfaces with no box shadows
- ❌ Don't use serif fonts — screenshot uses sans-serif throughout for display and body text
- ❌ Don't clutter the interface — screenshot shows generous whitespace and clear hierarchy
- ❌ Don't use multiple accent colors — screenshot uses single purple accent consistently
- ❌ Don't use lowercase navigation — screenshot shows all-caps labels and navigation items

The system deliberately excludes decorative gradients, excessive shadows, serif fonts, and multiple accent colors to preserve its clean, developer-focused aesthetic.

## System Prompt (paste into AI tool)

```
Fireworks AI is a premium developer-focused AI inference platform with a clean, professional aesthetic. The design uses a stark white background with deep black text and a vibrant purple (#6720ff) accent for primary actions. Typography combines grotesque-sans for bold headlines (tight tracking, weight 550) with humanist-sans for readable body text. Navigation uses uppercase labels with generous spacing. Layout emphasizes whitespace and clear content hierarchy across full-width sections. Critical constraints: Never use decorative gradients or shadows, maintain monochrome base with single purple accent only, always use uppercase for labels and navigation, keep interface uncluttered with generous padding, use sans-serif fonts exclusively, ensure bold typography for impact without compromising readability.
```