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

# Flim · Design System

> A cinematic library, framed with clarity and play.

**Theme:** light · **Industry:** ai · **Source:** https://flim.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._

Flim presents an AI-powered visual-reference search product through a spacious, editorial homepage built around film imagery and a restrained monochrome palette. Fine grid lines, oversized typography, and occasional vivid geometric accents make the product feel both cinematic and creatively hands-on.

## North star

Keep the page predominantly white and editorial, using oversized Swizzy type, fine grid details, cinematic stills, and vivid color only as deliberate accents.

## Overview

The page uses white as its main canvas, with near-black typography and occasional full-width dark bands to create a calm but deliberate editorial rhythm. Light gray panels and a subtle technical grid give product previews a workspace-like frame without competing with the film stills. Orange, green, and yellow appear sparingly as bright geometric interruptions, metric chips, or small marks; they are accents rather than a broad interface palette. Swizzy carries the large, tightly tracked display and heading styles, while PP Neue Montreal Mono sets uppercase navigation, labels, and supporting UI text. The layout alternates oversized open compositions with compact product details, split feature panels, and image-led demonstrations. Generous whitespace separates sections, while the imagery itself supplies most of the color and cinematic atmosphere. Rounded media and pill-shaped metric treatments soften the otherwise crisp, flat structure.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Film Ink | `#141414` | `--color-film-ink` | brand | Primary text, navigation, dark CTA surfaces, footer, and alternating dark feature bands. |
| Projection White | `#ffffff` | `--color-projection-white` | neutral | Main page canvas and inverse text on dark surfaces and accent chips. |
| Studio Mist | `#f5f5f5` | `--color-studio-mist` | surface | Pale section and card surface, especially behind product previews and interface imagery. |
| Grid Silver | `#e7e7e7` | `--color-grid-silver` | semantic | Subtle grid and interface details; gradient measurements also include this gray, so avoid treating it as a major brand block. |
| Frame Orange | `#ff8400` | `--color-frame-orange` | accent | Bright geometric feature-panel field and the still-count chip; a selective visual accent. |
| Signal Green | `#30a81d` | `--color-signal-green` | accent | Geometric feature-panel field and small graphic marks, not a general interface color. |
| Reel Yellow | `#fecc33` | `--color-reel-yellow` | accent | Small expressive marks and graphic details, including colored elements around imagery. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Projection White) · `--color-surface` → `#f5f5f5` (Studio Mist) · `--color-surface-2` → `#141414` (Film Ink) · `--color-text` → `#141414` (Film Ink) · `--color-text-muted` → `#ffffff` (Projection White) · `--color-accent` → `#ff8400` (Frame Orange) · `--color-accent-2` → `#30a81d` (Signal Green) · `--color-accent-3` → `#fecc33` (Reel Yellow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#141414` | `#ffffff` | 18.42:1 | AAA |
| `#141414` | `#f5f5f5` | 16.9:1 | AAA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffffff` | `#141414` | 18.42:1 | AAA |
| `#ff8400` | `#ffffff` | 2.46:1 | fail |
| `#ff8400` | `#f5f5f5` | 2.25:1 | fail |
| `#ff8400` | `#141414` | 7.5:1 | AAA |

### Gradients

- `linear-gradient(0deg, rgba(20, 20, 20, 0.1) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(20, 20, 20, 0.1) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(rgba(20, 20, 20, 0.1), rgba(20, 20, 20, 0.1))`
- `linear-gradient(rgba(20, 20, 20, 0.1), rgba(20, 20, 20, 0.1)), linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Swizzy | `--font-display` | webfont | 500 | Display headlines, section headings, prominent statements, and large links. | Manrope |
| PP Neue Montreal Mono | `--font-mono` | webfont | 400, 500 | Navigation, eyebrows, captions, search labels, and compact interface copy. | Space Mono |

- **Swizzy:** Medium weight for headings, close negative tracking, and sentence case; scale display text dramatically.
- **PP Neue Montreal Mono:** Regular weight, uppercase, visibly tracked labels; use sparingly for small UI and metadata.

### Type scale — Custom (ratio ≈ 1.714, base 14.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 125px | 500 | 0.86 | -0.02em | — | Swizzy | Oversized Flim wordmark and dominant display moments. |
| h1 | 47px | 500 | 1.1 | -0.02em | — | Swizzy | Primary hero and major section headlines. |
| h2 | 27px | 500 | 1 | -0.02em | — | Swizzy | Feature and section-level headings. |
| h3 | 20.5px | 500 | 1.1 | -0.02em | — | Swizzy | Smaller feature titles and supporting headings. |
| body | 14.5px | 400 | 1 | 0.06em | uppercase | PP Neue Montreal Mono | Uppercase mono supporting copy and interface labels. |
| caption | 12px | 400 | 1 | 0.06em | uppercase | PP Neue Montreal Mono | Compact metadata, section eyebrows, and small labels. |
| nav | 12px | 400 | 1 | 0.06em | uppercase | PP Neue Montreal Mono | Uppercase mono navigation items. |
| link | 20.5px | 500 | 1.1 | -0.02em | — | Swizzy | Prominent Swizzy text links within feature content. |
| eyebrow | 12px | 400 | 1 | 0.06em | uppercase | PP Neue Montreal Mono | Small uppercase section identifiers such as DATABASE and AI TOOLS. |
| code | 12px | 400 | 1 | 0.06em | uppercase | PP Neue Montreal Mono | Compact mono-style interface or utility text. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 6, 8, 9, 10, 12, 16, 20, 24, 25, 30, 32, 52, 100 px.
- Section rhythm 98px · element gap 24px · card padding 24px · max content width 1392px.

Use a spacious, fluid editorial composition within the measured 1392px page maximum. The measured layout uses a 4px base unit, a 98px section gap, and a 24px element gap; preserve the generous rhythm rather than filling every area. The hero places an enormous wordmark opposite concise copy and a compact signup CTA. Later sections alternate full-width dark split bands, open white feature areas, and multi-column content. Align headings to the start, let product imagery occupy broad areas, and keep navigation and labels visually light.

## Shape & elevation

- Radius: button `4px` · card `9999px` · media `16px` · nav `4px` · xs `4px` · sm `8px` · md `16px` · lg `25px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The visual language is predominantly flat: rely on white space, background shifts, and thin grid lines rather than drop shadows. Separate white and dark sections with clean, hard transitions. Layer film frames and preview panels over the grid only where needed to suggest a working canvas; use rounded media and restrained pills for softer details.

## Imagery

Use cinematic film and series stills as the main source of visual richness, presented in scattered floating frames or dense search-result mosaics. Product previews show pale grid-based workspaces and image boards, with restrained interface chrome. Add simple geometric shapes in vivid brand accents as deliberate graphic motifs. Keep image frames soft-cornered and let the imagery retain its natural colors.

## Components

### Top navigation

Light, low-profile navigation with uppercase tracked mono labels, widely distributed links, and a compact dark signup control.

### Hero wordmark

Oversized near-black Flim lettering anchors the white hero, balanced by a concise stacked proposition and dark signup CTA.

### Search canvas

Pale fine-grid workspace with floating cinematic stills and a long pill-like search field; keep the search action visually distinct.

### Metric chips

Large rounded statistic pills use dark ink or Frame Orange (#ff8400) with white text for library counts.

### Feature bands

Full-width split panels pair a near-black (#141414) text field with a vivid orange or green geometric image field.

### Product preview

Light, grid-backed board or search interface imagery sits within otherwise open white feature sections.

### Footer and newsletter

A spacious multi-column footer combines a short brand statement, compact link groups, newsletter input, and an oversized wordmark.

### Measured component styles

- **Primary button** (“SIGN-UP”): background #141414 · text #ffffff · radius 4px · padding 6px · 400 16px Swizzy
- **Link** (“LEARN ABOUT PRICING”): transparent background · text #0000ee · radius 0px · padding 0px · 400 16px Swizzy
- **Input**: transparent background · text #141414 · radius 0px · padding 0px · 400 14.5px PP Neue Montreal Mono · uppercase
- **Card** (“400K videos”): background #141414 · text #ffffff · radius 160px · padding 24px · 400 16px Arial
- **Navigation item** (“HOME PRODUCT PRICING FLIM FOR TEAMS BLOG”): transparent background · text #141414 · radius 0px · padding 0px · 400 16px Arial

## Do

- Use #ffffff as the dominant canvas.
- Set large headlines in Swizzy or a close geometric sans.
- Reserve the mono face for navigation, labels, and metadata.
- Use #141414 for primary text and dark CTA surfaces.
- Add fine grid lines to product-preview canvases.
- Use orange, green, and yellow as selective graphic accents.
- Preserve generous whitespace between major sections.

## Don't

- Do not fill the page with accent colors.
- Do not use heavy shadows to create depth.
- Do not make navigation large or visually dominant.
- Do not crowd headings, imagery, and supporting copy together.
- Do not present film stills as generic stock photography.
- Do not apply uppercase mono styling to prominent headlines.
- Do not add decorative gradients without a measured visual purpose.

## Agent prompt

Build a new page in Flim’s editorial visual language. Use #ffffff Projection White as the primary canvas and #141414 Film Ink for headlines, navigation, and CTA surfaces. Set expressive, tightly tracked headlines in Swizzy or Manrope; use a tracked uppercase mono such as Space Mono for navigation, eyebrows, captions, and utility copy. Keep the composition spacious, with broad open sections, clean alignment, and fine grid details behind product previews. Feature cinematic stills in rounded frames or board-like mosaics. Introduce #ff8400 Frame Orange, #30a81d Signal Green, and #fecc33 Reel Yellow only as occasional geometric or metric accents. Alternate white content areas with confident full-width dark bands. Favor flat surfaces and crisp boundaries over shadows, and make the product imagery—not ornamental UI—the main source of visual texture.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White two-column hero with an oversized wordmark on the left and concise pitch plus CTA on the right. | primary signup CTA | oversized wordmark, compact dark button, minimal navigation |
| 2 | other | Grid-backed search canvas with a central horizontal search bar and scattered stills. | visual query entry, search shortcut | fine grid, floating image frames, pill search field |
| 3 | gallery | Open white section with centered statement above a large visual-results montage. | platform overview | centered headline, image mosaic, sparse eyebrow |
| 4 | stats | White, image-led composition with a large heading, scattered colored shapes, and count chips. | library scale proof, discovery link | rounded statistic pills, geometric accents, large heading |
| 5 | feature-split | Full-width split band: vivid green graphic panel beside a near-black text panel. | feature introduction | large circular graphic, white headline, dark field |
| 6 | product-showcase | Open white feature section with text to one side and floating grid-based product previews. | feature exploration link | board previews, grid canvas, small geometric accents |
| 7 | feature-split | Full-width split band with dark text panel beside an orange graphic panel. | workflow feature introduction | black circular graphic, dark panel, orange field |
| 8 | product-showcase | White two-column introduction followed by multiple board previews distributed across the section. | learn-more link, board collaboration | large heading, grid previews, floating accent shapes |
| 9 | footer | White footer with brand statement, newsletter field, grouped link columns, and oversized closing wordmark. | newsletter signup, grouped site navigation | multi-column links, email input, large wordmark |

## Source CSS custom properties (selected)

```css
--_theme---background: white;
--_theme---foreground: #141414;
--_theme---foreground-inverse: white;
--_theme---brand-4: #fecc33;
--_typography---heading--jumbo--font-family: Swizzy,Arial,sans-serif;
--_typography---heading--jumbo--font-size: min(380px,max(164px,calc(164px + 216*( (min(100vw,100vh*(16/9)) - 320px)/1600 ))));
--_typography---heading--jumbo--font-weight: 500;
--_typography---heading--jumbo--letter-spacing: -.02em;
--_typography---heading--h1--font-family: Swizzy,Arial,sans-serif;
--_typography---heading--h1--font-size: min(160px,max(49px,calc(49px + 111*( (min(100vw,100vh*(16/9)) - 390px)/1530 ))));
--_typography---heading--h1--font-weight: 500;
--_typography---heading--h1--letter-spacing: -.02em;
--_typography---body--l--font-family: Swizzy,Arial,sans-serif;
--_typography---body--l--font-size: min(58px,max(22px,calc(22px + 36*( (min(100vw,100vh*(16/9)) - 320px)/1600 ))));
--_typography---body--l--font-weight: 500;
--_typography---body--l--letter-spacing: -.02em;
--_typography---body--m--font-family: Swizzy,Arial,sans-serif;
--_typography---body--m--font-size: min(32px,max(16px,calc(16px + 16*( (min(100vw,100vh*(16/9)) - 320px)/1600 ))));
--_typography---body--m--font-weight: 500;
--_typography---body--m--letter-spacing: -.02em;
--_typography---body--s--font-family: Swizzy,Arial,sans-serif;
--_typography---body--s--font-size: min(24px,max(13px,calc(13px + 11*( (min(100vw,100vh*(16/9)) - 320px)/1600 ))));
--_typography---body--s--font-weight: 500;
--_typography---body--s--letter-spacing: -.02em;
--_typography---ui--sans--s--font-size: min(18px,max(13px,calc(13px + 5*( (min(100vw,100vh*(16/9)) - 320px)/1600 ))));
--_typography---ui--mono--s--font-family: "PP Neue Montreal Mono",Arial,sans-serif;
--_typography---ui--mono--s--font-size: .75rem;
--_typography---ui--mono--s--font-weight: 400;
--_typography---ui--mono--s--letter-spacing: .06em;
--_theme---nav-secondary: #141414;
--_typography---ui--mono--xs--font-family: "PP Neue Montreal Mono",Arial,sans-serif;
--_typography---ui--mono--xs--font-size: .5625rem;
--_typography---ui--mono--xs--font-weight: 400;
--_typography---ui--mono--xs--letter-spacing: .06em;
--_typography---ui--sans--s--font-family: Swizzy,Arial,sans-serif;
--_typography---ui--sans--s--font-weight: 500;
--_typography---ui--sans--s--letter-spacing: -.02em;
--_typography---ui--sans--xs--font-family: Swizzy,Arial,sans-serif;
--_typography---ui--sans--xs--font-size: .875rem;
--_typography---ui--sans--xs--font-weight: 500;
```

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