---
name: fal
description: "This site is worth including for its bold, expressive use of color and typography to create a distinct, playful developer-focused identity."
version: alpha

colors:
  background: "#99edff"
  primary: "#1b1b1d"
  tertiary: "#ffff00"
  neutral: "#4b5563"
  bg-soft: "#f3f4f6"
  line: "rgba(229,231,235,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 80px
    lineHeight: 0.875
    fontWeight: 600
    letterSpacing: "-2.4px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A bold, playful generative media platform designed for developers.

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

## Colors

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

- **Background (`#99edff`)** — uses `bg` token
- **Primary text (`#1b1b1d`)** — uses `ink` token
- **Accent (`#ffff00`)** — uses `accent` token
- **Muted (`#4b5563`)** — uses `muted` token
- **Borders (`rgba(229,231,235,1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

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

## Layout

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

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

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```