# fal.ai — Marketing Site Design Spec

> Source: fal.ai (live DOM, computed styles), 2026-07-23 (desktop 1512px).
> Coverage: marketing home (hero, developer/pricing cards, enterprise section, nav). Dashboard: `needs-dashboard` (login required). Responsive: breakpoints from computed layout only, mobile not verified.

## 1. Visual Theme & Atmosphere

Playful developer-brand energy built on a bright sky-blue hero and heavy black display type — the opposite of the moody-violet look the "gen-media infra" category implies. The recognizable move is a **pixel-art shape system**: chunky dot-matrix clouds, diagonal "snowboard" bars and blocky arrows rendered in a rationed rainbow (cyan, lime, purple, pink, yellow) that floats over the flat sky-blue field. Chrome itself is near-monochrome — black ink, white surfaces, a near-black button ladder — so all the colour lives in the illustration layer, never in the controls. Geometry is deliberately **sharp** (2-4px radii, flat surfaces, borders over shadows), and the single custom display face ("focal") is pushed huge with tight negative tracking. Feels: playful, technical, blocky, confident.

## 2. Color Palette & Roles

### Ink & text
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Display headlines, logo, hero type |
| ink-900 | `#19191a` | Body text, secondary-button label |
| ink-850 | `#1d1d20` | Illustration ink, strong labels |
| ink-700 | `#383a42` | Tertiary text |
| muted | `#7a7a7e` | `--neutral-500`, captions/placeholder |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#ffffff` | Page background, cards |
| sky | `#99edff` | Signature hero band + active "Contact Sales" fill |
| surface-100 | `#f0f0f0` | Light card / inset panels |
| dark-950 | `#121216` | Inverted "Enterprise" section bg |
| dark-900 | `#161618` | Nav "Login" button |
| dark-850 | `#202022` | Primary "Get started" button |
| border | `#e5e7eb` | Hairline default |

### Accent — playful pixel-shape system (rationed to illustration)
| Token | Hex | Role / usage |
|---|---|---|
| cyan | `#14cbf3` | Dot clusters, pixel clouds |
| blue | `#115ef3` / deep `#0a4dce` | Pixel shapes, links |
| purple | `#ab77ff` / deep `#4a17b0` / `#5718c0` | Diagonal bars, blobs |
| lime | `#adff00` / `#d5f393` / tint `#f1ffd2` | Outline pixel text, clouds |
| yellow | `#ffff00` | Snowboard/bar shapes |
| pink | `#fb8db2` / tint `#ffddfa` | Pixel accents |
| mint | `#5bffec` | Rare pixel highlight |
| red | `#ec0648` | Rare pixel accent |
| deep-green | `#004012` | Shadowed pixel edge |

Rule: chrome stays black/white/near-black; the rainbow is confined to the pixel-art illustration layer, never to buttons, borders or text.
Rule: sky `#99edff` is the one big brand fill (hero band + the scroll-active Contact Sales pill).

## 3. Typography Rules

- Display: `focal` — custom grotesk (headlines, nav, buttons)
- Body: `publicSansRounded` (also `Public Sans`) — soft rounded grotesque
- Mono: `Chivo Mono` / `halMono` — code, technical labels
- Additional sans: `hal`

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | focal | 120 / 100 | 500 | -4.8px (-4%) |
| Section head | focal | ~48 / 1.0 | 500 | tight negative |
| Sub-headline | focal | 18 / 28 | 400 | normal |
| Body | publicSansRounded | 16 / 24 | 400 | normal |
| Nav / UI | focal | 13 / 500 | 500 | normal |
| Button | focal | 15-16 | 500-600 | normal |
| Mono / code | Chivo Mono | 13-14 | 400 | normal |

Patterns: display weight is only 500 — hierarchy comes from size + tight tracking, never bold. Tracking is aggressively negative on big type (-4% at 120px), normal everywhere small.

## 4. Component Stylings

### Buttons
- **Primary (hero "Get started")**: bg `#202022`, text `#fafafa`, radius `4px`, h `48px`, focal 16/600, padding `0 24px`.
- **Nav primary ("Login")**: bg `#161618`, text `#fafafa`, radius `2px`, h `36px`, focal 15/500, padding `0 26px`.
- **Secondary ("Contact Sales")**: bg `#ffffff`, text `#19191a`, thin ink outline, radius `2px`, h `36px`. On scroll the nav variant fills sky `#99edff`.
- **In-card dark ("Documentation" / "See pricing")**: near-black `#1d1d20`, white text, radius `4px`.

### Inputs
- Sharp 2-4px radius, white fill, ink text, hairline `#e5e7eb`. Focus: 3px ink outline `#19191a` (focus-visible). (Full input recipe: not heavily used on marketing.)

### Cards / panels
- bg `#ffffff` or `#f0f0f0`, radius `4px`, hairline `#e5e7eb`, largely flat. Dark section cards on `#121216` are near-black with no border, separated by the dark field.

### Nav
- Height `36px` (compact), white, black `fal` hexagon logo left, centered focal 13/500 links (Products, Documentation, Pricing, Enterprise, Resources), right actions (Contact Sales outline + Login dark). Small dot markers precede dropdown links.

### Chips / badges
- Small pill/rect chips; top announcement banner is a dark navy strip with white text ("fal Assets is now live!").

## 5. Layout Principles

- Wide full-bleed sections; content container centered ~1300-1440px.
- Hero: full-bleed sky-blue band, left-aligned 120px display headline with pixel-art shapes bleeding off both edges, sub-headline + dual CTA (dark primary + white secondary).
- Feature row: light cards side by side ("Built for developers" / pricing), each with copy + one dark button.
- Enterprise: inverted `#121216` section with lime pixel-outline display type and a row of 4 dark cards.
- Spacing on a 4px grid; generous section padding; sharp rectangular rhythm.

## 6. Depth & Elevation

- Radius scale: `2px` (nav CTAs/inputs), `4px` (primary CTA, cards — dominant), `6px`, `8px`, `12px`, plus a rare `9999px` pill. Overall sharp.
- Control heights: nav 36px, hero primary 48px.
- Elevation: essentially flat — structure comes from the sky/white/dark field steps and hairline `#e5e7eb` borders. Only one soft shadow observed: `rgba(0,0,0,.1) 0 0 4px`.

## 7. Motion

- Micro-transitions: `background-color / border-color / color / transform / opacity 0.15s cubic-bezier(.4,0,.2,1)` on interactive elements; a fast `0.075s cubic-bezier(.23,1,.32,1)` and a `0.3s cubic-bezier(.23,1,.32,1)` (ease-out-quint) for button colour swaps; `opacity 0.15s ease-out` for fades.
- The pixel-art shapes read as animated/illustrative brand moments (dot-matrix clouds, drifting bars). No heavy scroll-jacking observed.

## 8. Backgrounds, Effects & WebGL

- Flat solid fields (sky `#99edff`, white, dark `#121216`) — no CSS gradients on chrome.
- The atmosphere is entirely the **pixel-art shape layer**: chunky dot-matrix SVG clouds, diagonal capsule bars and blocky arrows in the accent rainbow, layered over the flat sky band and dark sections.
- Only shadow: `rgba(0,0,0,.1) 0 0 4px`. No backdrop-blur scrims, no background video observed on the home.

## 9. Do's and Don'ts

### Do
- Build the hero on a flat sky-blue `#99edff` band with a heavy black `focal` headline at ~120px, tracking -4%.
- Keep chrome black/white/near-black; put ALL colour in the pixel-art illustration layer.
- Use the rationed rainbow (cyan `#14cbf3`, lime `#adff00`, purple `#ab77ff`, pink `#fb8db2`, yellow `#ffff00`) only in dot-matrix / blocky shapes.
- Keep geometry sharp: 2-4px radii, flat surfaces, hairline `#e5e7eb` borders instead of shadows.
- Cap display weight at 500; get hierarchy from size + tight negative tracking.
- Use the near-black button ladder (`#202022` / `#161618` / `#1d1d20`) with white labels.

### Don't
- Don't make the site dark/violet — the marketing surface is bright and light.
- Don't colour buttons, borders or body text with the accent rainbow.
- Don't round controls into big pills — radii stay tiny (2-4px).
- Don't use bold 700+ display type or add drop shadows for depth.
- Don't introduce gradients on chrome; fields are flat solids.

## 10. Responsive Behavior

- Full-bleed sky band and cards reflow to a single column on narrow widths; nav collapses (compact 36px bar). Mobile rendering not verified — captured at 1512px.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Hero `#99edff` · Ink `#000000` / text `#19191a` · Muted `#7a7a7e` · Border `#e5e7eb` · Dark button `#202022`
- Fonts: display `focal`, body `publicSansRounded`, mono `Chivo Mono` · Body 16px · Radius 2-4px · Control height 36-48px
- Focus: 3px ink outline `#19191a` · Primary button `#202022` white text · Accent rainbow (cyan/lime/purple/pink/yellow) confined to pixel-art

<fal_design_language>
Use the fal.ai design language: a playful developer brand on a bright sky-blue hero band (#99edff) over a white canvas, with heavy black display type in the custom focal grotesk at ~120px and tight -4% tracking (weight capped at 500). Body is publicSansRounded 16/24; code is Chivo Mono. Chrome is strictly black/white/near-black — a dark button ladder #202022 / #161618 / #1d1d20 with white labels, hairline #e5e7eb borders, sharp 2-4px radii and flat surfaces (borders not shadows; the only shadow is rgba(0,0,0,.1) 0 0 4px). ALL colour lives in a pixel-art illustration layer — chunky dot-matrix clouds, diagonal bars and blocky arrows in a rationed rainbow (cyan #14cbf3, lime #adff00, purple #ab77ff, pink #fb8db2, yellow #ffff00) — never in controls, borders or text. Inverted sections use a near-black #121216 field. Motion is 0.15s cubic-bezier(.4,0,.2,1) micro-transitions. Feels: playful, technical, blocky, confident. Avoid: a dark/violet marketing surface, colouring buttons or text with the accent rainbow, large pill radii, bold 700+ type, and gradient chrome.
</fal_design_language>