CURATED · OPEN · FREE

fal

A bold, playful generative media platform designed for developers.

aidev

↓ Download design system (12 MB)Open in OpenDesign

Visit: https://fal.ai

📦 Browse pack contents →

Identity DNA

generativedeveloperplatformboldplayful

A bold, expressive developer playground with a playful retro-digital aesthetic.

Color

#ffff00Accent

#1b1b1dInk

#99edffBG

#f3f4f6BG soft

#4b5563Muted

rgba(229,231,235,1)Line

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

Typography

geometric-sans · humanist-sans · monospace

display80px · 600
body16px · 400

Use tight letter spacing and tight line heights for large display text. · Use bold weights for emphasis and hierarchy.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Consistent base-4 spacing scale with generous padding in hero sections.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(229,231,235,1) for subtle definition on cards and containers.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

400mssmall

700msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth transitions for basic state changes (color, border, opacity). · Longer, smoother opacity transitions for decorative elements.

Subtle changes in background color or border color for interactive elements. · Immediate visual feedback with slight scale or opacity changes.

Components

button Solid dark buttons with white text and light outline buttons with dark text.
card White or dark background cards with subtle borders and rounded corners.
chip Simple, rounded text elements with minimal styling.
input Standard text inputs with subtle borders.
hero Large, full-width hero section with bold typography, expressive pixel-art graphics, and high-contrast colors.

Voice & Don'ts

Tone Direct, technical, and confident.
Headlines Short, punchy, and highly descriptive statements.
CTAs Action-oriented verbs like 'Get started' and 'See pricing'.

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.
Avoid: Avoid overly marketing-heavy or fluffy language.
Avoid: Avoid long, complex sentences in headlines.

Inside the pack — real screenshots

fal — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko