fal.ai — Design Reference
1. Visual Theme & Atmosphere
fal.ai presents as a next-generation AI infrastructure platform with a design language balancing technical precision and organic softness. The hero deploys Focal — a custom display face — at 120px with aggressive negative tracking (−4.8px), creating a compressed, forward-leaning energy. A sky-blue footer (rgb(153,236,255)) grounds the page in a signature color that feels both technical and approachable.
The supporting palette draws from nature-adjacent pastels — chartreuse, lavender, misty blue — distributed across content sections, giving each zone a distinct but harmonious identity. Built on Next.js + Tailwind with a meticulously defined design token system.
2. Color Palette & Roles
| Role | Value | Notes |
|---|---|---|
| Background | #ffffff |
Pure white canvas |
| Body text | rgb(27,27,29) |
Near-black, slightly warm |
| Borders | rgb(229,231,235) |
Tailwind gray-200 |
| Signature Blue | rgb(153,236,255) |
Footer, hero section, sticky nav tint |
| Chartreuse | rgb(241,255,210) |
Feature section background |
| Lavender | rgb(239,238,252) |
Feature card surface |
| Soft Purple | rgb(243,232,255) |
Secondary feature zone |
| Link / CTA accent | rgb(97,32,238) |
Purple — inline links and CTAs |
| Code text | rgb(56,58,66) |
Dark gray for code blocks |
Token system uses HSL custom properties (--neutral-50 through --neutral-1000) with semantic surface aliases.
3. Typography Rules
Two custom fonts: Focal for display, Public Sans Rounded for UI and body.
| Element | Family | Size | Weight | Notes |
|---|---|---|---|---|
| H1 | Focal | 120px | 500 | −4.8px tracking, 100px line height (compressed) |
| H4 / Feature | Focal | 80px | 500 | Large secondary display |
| H3 | Focal | 36px | 500 | −1.44px tracking |
| H2 | Focal | 24px | 500 | −0.48px tracking |
| Body | Public Sans Rounded | 16px | 400 | 24px line height |
| Para | Focal | 18px | 400 | 28px line height |
Focal dominates all display levels. Public Sans Rounded handles only UI-level body text — a clean separation between editorial display and functional prose.
4. Component Stylings
- Navbar: White surface, separates from transparent header on scroll
- Buttons: Small 4–6px border-radius — slightly rounded, not pill-shaped
- Cards: Pastel background zones, no shadows
- Code blocks: Dark gray text on light surface
- Feature sections: Each gets a unique pastel background
- Footer: Full-bleed signature blue (
rgb(153,236,255)) - Sticky nav: Semi-transparent with backdrop blur using the signature blue tint
5. Layout Principles
- Seven breakpoints: 600, 640, 768, 1024, 1280, 1440, 1920px — comprehensive coverage
- Tailwind utility classes drive spacing rhythm
- Content max-width likely ~1280px centered
- Feature sections alternate background colors — section-as-brand-zone pattern
6. Depth & Elevation
No box shadows detected. Depth is achieved through:
- Background color zoning (each section = unique pastel)
- Sticky nav with backdrop-filter blur + 50% opacity signature blue
- Token-based surface stepping (surface-50 through surface-300)
7. Do’s and Don’ts
Do:
- Use Focal at extreme scale with tight negative tracking for heroes
- Zone sections with distinct pastel backgrounds from the palette
- Use the signature blue (
rgb(153,236,255)) for the footer and nav accents - Keep border-radius small (4–6px) — not pill-shaped
- Use Public Sans Rounded only for body/UI, Focal for everything display
Don’t:
- Use shadows — this is a flat, color-zoned system
- Mix the CTA purple with pastel backgrounds in the same section
- Create pill-shaped buttons — small radius only
- Use warm tones — the palette is cool-to-neutral throughout
8. Responsive Behavior
- 7 breakpoints enable fine-grained responsive control
- Hero headline scales from 120px down through each breakpoint
- Pastel section backgrounds are preserved at all widths
- Mobile layout collapses to single column with reduced padding
9. Agent Prompt Guide
“Design in the style of fal.ai: white canvas, Focal display typeface at 120px hero scale with tight negative tracking at weight 500. Signature cyan-blue (
rgb(153,236,255)) for the footer. Section backgrounds use distinct pastels — chartreuse, lavender, misty blue — each section gets one color. Small border-radius (4–6px). Public Sans Rounded for body. No shadows. Purple (#6120EE) accent for CTAs only.”
Generated by Sparkbites — extracted from live CSS analysis
