Not the moody-violet look the gen-media-infra category implies: a playful developer brand on a bright sky-blue #99edff hero band over white, with heavy black display in the custom focal grotesk at ~120px and tight -4% tracking (weight capped at 500). Chrome stays 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). 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 with lime pixel-outline type. Body is publicSansRounded, code is Chivo Mono, and motion is 0.15s cubic-bezier(.4,0,.2,1) micro-transitions.
Browse fal.ai in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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).
focal — custom grotesk (headlines, nav, buttons)publicSansRounded (also Public Sans) — soft rounded grotesqueChivo Mono / halMono — code, technical labelshal| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.