# fal · Design system migration spec

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

> This site is worth including for its bold, expressive use of color and typography to create a distinct, playful developer-focused identity.

## 1. Identity DNA

The design system for fal.ai is built as a bold, expressive developer playground, grounded in a playful retro-digital aesthetic. It treats a high-chroma color field and tight typography not as decoration, but as structural material for a generative media platform.

**One-liner:** A bold, playful generative media platform designed for developers.
**Keywords:** generative · developer · platform · bold · playful
**Analogy:** A bold, expressive developer playground with a playful retro-digital aesthetic.

## 2. Color

The palette is anchored by a high-chroma cyan background, punctuated by a bold yellow accent and grounded by deep, near-black ink. This creates a vibrant, high-contrast field where content is defined by saturated color rather than subtle gradation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#99edff` | main background |
| `--bg-soft` | `#f3f4f6` | card background |
| `--ink` | `#1b1b1d` | body text |
| `--muted` | `#4b5563` | placeholder |
| `--accent` | `#ffff00` | single accent |
| `--line` | `rgba(229,231,235,1)` | divider |

**Color principle:** High-chroma cyan background with bold, saturated accents and deep, near-black text for maximum contrast.

The principle is clarity through contrast, where every hue is chosen for maximum vibrancy and legibility against the dominant background.

## 3. Typography

Typography is split between a bold, geometric sans-serif for display and a humanist sans-serif for body copy, creating a clear hierarchy through category contrast. Display text is set with tight letter spacing and low line heights to reinforce the system's bold, condensed character.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 0.875 | 600 | -2.4px | Primary hero headlines |
| body | 16px | 1.5 | 400 | normal | General body copy and navigation |

**Type rules:**
- Use tight letter spacing and tight line heights for large display text.
- Use bold weights for emphasis and hierarchy.

## 4. Spacing

The spacing system follows a consistent base-4 rhythm, providing a predictable foundation for component layout and vertical flow.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent base-4 spacing scale with generous padding in hero sections.

## 5. Surfaces

Surfaces are flat and defined primarily by background contrast or subtle, 1px borders for card containers. The system avoids depth cues like drop shadows, relying instead on the inherent weight of color and typography.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** 1px solid rgba(229,231,235,1) for subtle definition on cards and containers.

## 6. Layout

The layout skeleton begins with a bold, full-bleed hero section designed for high-impact visual statements. This transitions into a standard responsive grid that provides structure for the platform's technical content.

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

**Skeleton:** Standard responsive grid with a bold, full-bleed hero section.

## 7. Motion & Interaction

Motion is functional and restrained, using smooth, 150ms transitions for standard UI state changes like hover and focus. Longer, slower opacity transitions are reserved for decorative elements, allowing them to animate without disrupting core interaction.

- **Durations:** micro 150ms · small 400ms · medium 700ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for basic state changes (color, border, opacity).
  - Longer, smoother opacity transitions for decorative elements.

- **Hover:** Subtle changes in background color or border color for interactive elements.
- **Click:** Immediate visual feedback with slight scale or opacity changes.
- **Transition:** Smooth, 150ms transitions for standard UI elements.
- **Keyboard:** Standard focusable elements with visible outlines.

## 8. Voice & Don'ts

The editorial voice is direct, technical, and confident, matching the platform's developer-focused purpose. Headlines are short and punchy, using action-oriented verbs that avoid marketing-heavy or fluffy language.

- **Tone:** Direct, technical, and confident.
- **Headline style:** Short, punchy, and highly descriptive statements.
- **CTA style:** Action-oriented verbs like 'Get started' and 'See pricing'.
- **Avoid:** Avoid overly marketing-heavy or fluffy language. / Avoid long, complex sentences in headlines.

### Don'ts
- ❌ Don't use soft, pastel colors — the screenshot shows high-chroma, vibrant cyan and yellow accents.
- ❌ Don't use serif fonts — the typography is strictly geometric or humanist sans-serif.
- ❌ Don't use heavy drop shadows — the surfaces are flat and defined by borders or background contrast.
- ❌ Don't use wide letter spacing in large headlines — the screenshot shows very tight, negative tracking.
- ❌ Don't use thin, delicate lines — the design uses bold shapes and solid fills.
- ❌ Don't use muted, low-contrast text — the ink color is a very deep, near-black gray.

The system deliberately excludes serif typography, soft pastels, heavy drop shadows, and muted text, defining itself as much by what it rejects as by what it includes.

## System Prompt (paste into AI tool)

```
fal.ai is a generative media platform for developers, positioning itself with a bold, playful, and technical identity. The design features a high-chroma cyan (#99edff) background with expressive pixel-art graphics and a dominant yellow (#ffff00) accent. Typography uses a bold, geometric sans-serif for display (focal) and a humanist sans-serif (publicSansRounded) for body text, with tight letter spacing and low line heights for headlines. Critical constraints include: never use serif fonts, avoid soft pastel colors, maintain high contrast with near-black ink (#1b1b1d), and ensure all typography is tightly tracked. The layout is a standard responsive grid with a full-bleed hero, and interactions use smooth, 150ms transitions.
```
