# 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*