---
title: "fal design system"
variant: extended
source: https://fal.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/fal-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# fal · Design System

> Playful media art meets high-performance infrastructure.

**Theme:** light · **Industry:** ai · **Source:** https://fal.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

fal pairs oversized, confident typography with vivid cyan fields and playful generative-media artwork. A long-form product story alternates open white sections, compact feature cards, a dark enterprise band, testimonials, and a bright conversion-focused footer.

## North star

Let oversized black type and vivid cyan brand fields lead, while keeping product information modular, legible, and mostly flat.

## Overview

The page builds its identity around a vivid cyan hero and closing footer, balanced by broad white content sections and a near-black enterprise band. Black display text stays exceptionally prominent against these fields; the Focal sans face uses tight tracking and heavy visual scale for the headline, while body copy remains compact and readable. Purple, lime, and other bright hues appear mainly in generative-art motifs and product-card illustrations, rather than as a competing interface palette. Content alternates between spacious editorial introductions and denser card groups, with a centered product showcase and testimonial layout breaking up the long scroll. Thin pale-gray borders and subtle neutral card surfaces define structure without pronounced shadows. Repeated dark buttons provide clear conversion anchors, while small monospace typography gives technical details a restrained developer-tool cue.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, open content sections, and light button faces. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Hero headline, section headings, and high-contrast card text. |
| Electric Cyan | `#99ecff` | `--color-electric-cyan` | brand | Hero background, enterprise-ready CTA band, and footer field. |
| Soft Cyan Edge | `#85ccdc` | `--color-soft-cyan-edge` | accent | Measured button border color; a subtle cyan edge, not a dominant page color. |
| Mist Hairline | `#e5e7eb` | `--color-mist-hairline` | neutral | Fine card and interface borders against white or pale surfaces. |
| Cloud Gray | `#f4f4f5` | `--color-cloud-gray` | surface | Feature cards and understated neutral panels. |
| Slate Teal | `#304146` | `--color-slate-teal` | semantic | Muted supporting text, especially footer and secondary headings. |
| Graphite Fade | `#333333` | `--color-graphite-fade` | neutral | Measured dark-to-gray gradient stops in media treatments, not a core flat fill. |
| Silver Fade | `#b2b2b2` | `--color-silver-fade` | neutral | Measured light gradient stop in media treatment, not a primary interface color. |
| Night Charcoal | `#121216` | `--color-night-charcoal` | brand | Full-width enterprise section and dark interface surfaces. |
| Deep Slate | `#101828` | `--color-deep-slate` | semantic | Muted body copy and secondary informational text. |
| Soft Black | `#19191a` | `--color-soft-black` | neutral | Inline links, headings, and dark button or text details. |
| Vivid Violet | `#4a17b0` | `--color-vivid-violet` | accent | Purple product-card accents and occasional illustrated media elements. |
| Carbon Surface | `#1e1e22` | `--color-carbon-surface` | neutral | Dark button and interface details on light backgrounds. |
| Lilac Mist | `#f3e8ff` | `--color-lilac-mist` | surface | Pale violet background within product-card artwork. |
| Lime Tint | `#f1ffd2` | `--color-lime-tint` | surface | Pale lime product-card panel, primarily a supporting illustration surface. |
| Leaf Green | `#50a14f` | `--color-leaf-green` | accent | Green text accent in product illustrations and technical media. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#99ecff` (Electric Cyan) · `--color-surface-2` → `#121216` (Night Charcoal) · `--color-surface-3` → `#f4f4f5` (Cloud Gray) · `--color-surface-4` → `#f3e8ff` (Lilac Mist) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#304146` (Slate Teal) · `--color-text-subtle` → `#101828` (Deep Slate) · `--color-border` → `#e5e7eb` (Mist Hairline) · `--color-accent` → `#99ecff` (Electric Cyan) · `--color-accent-2` → `#4a17b0` (Vivid Violet) · `--color-accent-3` → `#50a14f` (Leaf Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#99ecff` | 15.8:1 | AAA |
| `#000000` | `#121216` | 1.12:1 | fail |
| `#000000` | `#f4f4f5` | 19.11:1 | AAA |
| `#304146` | `#ffffff` | 10.66:1 | AAA |
| `#304146` | `#99ecff` | 8.02:1 | AAA |
| `#304146` | `#121216` | 1.75:1 | fail |
| `#304146` | `#f4f4f5` | 9.7:1 | AAA |
| `#101828` | `#ffffff` | 17.75:1 | AAA |
| `#101828` | `#99ecff` | 13.35:1 | AAA |

### Gradients

- `linear-gradient(to top, oklab(0 0 0 / 0.8) 0%, oklab(0 0 0 / 0.3) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| focal | `--font-body` | webfont | 400, 500, 700, 600 | Primary display, headings, body copy, navigation, and links. | DM Sans |
| chivoMono | `--font-mono` | webfont | 400 | Code samples and developer-oriented technical details. | IBM Plex Mono |
| publicSansRounded | `--font-publicsansrounded` | webfont | 600 | Prominent CTA button labels. | Nunito Sans |

- **focal:** Sans-serif with expressive large headlines, generally medium weight, tight display tracking, and mixed-case copy.
- **chivoMono:** Regular monospace for code and compact technical snippets; keep it distinct from prose.
- **publicSansRounded:** Semibold, slightly rounded button voice; use sentence case rather than all caps.

### Type scale — Perfect Fifth (ratio ≈ 1.496, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 500 | 0.83 | -0.04em | — | focal | Oversized hero display lettering and high-impact promotional headings. |
| h1 | 80px | 500 | 0.9 | -0.05em | — | focal | Primary hero headline and major page-level titles. |
| h2 | 60px | 500 | 1 | 0 | — | focal | Section titles across product, enterprise, and testimonials. |
| h3 | 48px | 500 | 1 | 0 | — | focal | Feature-card and product-group headings. |
| h4 | 40px | 500 | 0.9 | -0.04em | — | focal | Smaller feature and supporting panel headings. |
| body | 16px | 400 | 1.5 | 0 | — | focal | Introductory copy, product explanations, and testimonials. |
| caption | 14px | 400 | 1.4 | -0.143em | — | focal | Compact labels and small supporting annotations. |
| button | 16px | 600 | 1.5 | -0.01em | — | publicSansRounded | Primary and secondary CTA labels. |
| nav | 13px | 500 | 1 | 0 | — | focal | Compact top-level navigation links. |
| link | 16px | 500 | 1.6 | -0.025em | — | focal | Inline product and documentation links. |
| code | 14px | 400 | 1.5 | 0 | — | chivoMono | Code samples and API-focused snippets. |

OpenType features in use: `"ss01"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 6, 8, 12, 16, 20, 24, 26, 32, 40, 112 px.
- Section rhythm 40px · element gap 8px · card padding 32px · max content width 1280px.

A long, vertically sequenced landing page uses a measured 1280px maximum content width and an 8px-based spacing system. The hero is a full-bleed cyan canvas with left-aligned headline and copy; later sections return to white, pairing editorial text with four-column model cards or feature grids. The enterprise band reverses to charcoal, followed by centered testimonials and conversion panels. Footer links form multiple compact columns. Overall density is compact within cards but generous between major storytelling blocks.

## Shape & elevation

- Radius: button `4px` · card `6px` · media `6px` · nav `4px` · link `6px` · xs `2px` · sm `4px` · md `6px` · lg `8px` · xl `12px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94)` on interactive elements.

The interface is mostly flat: rely on strong color fields, pale card fills, and thin measured hairlines rather than drop shadows. Product and testimonial cards use simple rounded corners and restrained borders. Dark enterprise cards sit directly on the charcoal section, while illustrations can overlap section edges to add depth without implying elevated UI.

## Imagery

Generative-media thumbnails and abstract pixel, geometric, and ribbon-like illustrations establish the visual character. Media appears as small card previews, oversized edge-cropped decorative motifs, and product-panel graphics; it is not uniformly photographic. Keep the hero artwork colorful and graphic, preserve clear headline contrast, and treat the measured violet, lime, and green hues as illustration accents rather than a general UI palette.

## Components

### Navigation bar

Compact links across the top, with a light Contact Sales action and dark Login button over the cyan hero.

### Hero

Full-bleed cyan field, oversized black multiline headline, concise supporting copy, and paired dark and light CTAs.

### Model gallery cards

Four-column preview cards pair generative-media thumbnails with bold white overlay titles.

### Product feature panels

Pale gray, lavender, cyan, and lime surfaces organize platform, serverless, and compute information.

### Enterprise band

Near-black full-width section combines a large heading, customer marks, and bright pastel capability cards.

### Testimonial blocks

Light neutral quote cards and customer attribution sit around a centered, prominent heading.

### Footer

Cyan closing area combines a compact sales CTA, dense link columns, and a large black fal wordmark.

### Measured component styles

- **Primary button** (“Explore models”): background #202022 · text #fafafa · border 1px solid · radius 4px · padding 0px 20px · 600 16px publicSansRounded
- **Secondary button** (“Login”): background #161618 · text #fafafa · radius 2px · padding 0px 26px · 500 15px focal
- **Link** (“MiniMax H3 Max Text to Video”): transparent background · text #000000 · radius 6px · padding 0px · 400 14px focal
- **Card** (“Fastest inference engine for diffusion m”): background #f4f4f5 · text #000000 · radius 4px · padding 32px · 400 16px focal
- **Navigation item** (“Products”): transparent background · text #0d0b00 · radius 0px · padding 0px · 500 13px focal

## Do

- Use Electric Cyan #99ecff as a defining full-width brand field.
- Keep major headlines black, large, and visually dominant.
- Use white space to separate the page's editorial story blocks.
- Reserve Night Charcoal #121216 for a deliberate contrast section.
- Group product details in compact, plainly structured cards.
- Keep vivid violet and lime accents tied to media or product illustrations.

## Don't

- Do not turn the page into a uniform dark interface.
- Do not use saturated illustration colors as the main text palette.
- Do not add decorative shadows to otherwise flat cards.
- Do not compress the hero headline into small conventional SaaS typography.
- Do not make every section a centered card grid.
- Do not use all-caps labels as the primary typographic voice.

## Agent prompt

Build a new developer-facing page in fal's visual style. Use Electric Cyan #99ecff for a prominent brand field, Gallery White #ffffff for open content, and Ink Black #000000 for bold, high-contrast headlines. Organize the page as an editorial sequence: an expressive hero, concise product explanation, modular feature cards, an optional Night Charcoal #121216 contrast band, and a clear closing CTA. Use a Focal-like sans such as DM Sans for headings and body, with large tightly tracked display type and compact, readable supporting copy. Keep cards mostly flat with Cloud Gray #f4f4f5 surfaces and Mist Hairline #e5e7eb borders. Use Vivid Violet #4a17b0 and Lime Tint #f1ffd2 as restrained illustration accents. Favor generative-media imagery, crisp CTAs, and clean responsive grouping over ornamental effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed cyan hero with top navigation, left-aligned headline, copy, paired CTAs, and decorative media. | Primary and secondary CTA, Top-level navigation | Cyan canvas, Oversized black heading, Abstract generative artwork |
| 2 | logo-cloud | Narrow horizontal customer-logo strip between the hero and main product content. | Social proof, Enterprise credibility | Monochrome wordmarks, White background |
| 3 | product-grid | White editorial sections combine model previews, a feature-card grid, and a later benefits card layout. | Browse models, Explore platform capabilities | Media preview cards, Pale feature panels, Illustrated accents |
| 4 | feature-grid | Full-width charcoal band with left-side heading and customer marks beside a row of pastel feature cards. | Enterprise proof points, Learn-more link | Dark contrast field, Pastel capability cards, Decorative edge artwork |
| 5 | testimonials | White section with a centered heading and testimonial cards arranged above and below it. | Customer testimonials, Attribution and role | Light quote cards, Centered title, Decorative pixel motif |
| 6 | footer | Promotional CTA precedes a cyan footer with sales action, dense multi-column links, and oversized wordmark. | Get started and contact sales, Grouped navigation links | Prominent CTA panel, Cyan footer field, Large logo |

## Source CSS custom properties (selected)

```css
--copy-text-shimmer-dur: .4s;
--copy-text-shimmer-highlight: hsl(240 6% 90%);
--copy-text-shimmer-band: 200%;
--surface-alpha-rgb: 18 18 22;
--surface-raised: 255 255 255;
--nav-credit-foreground: #82d14d;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/fal-ai