---
version: alpha
name: Flim
description: Cinematic editorial darkness — a near-black gallery canvas where film stills are the only color, set in a clean geometric sans with tight tracking, generous whitespace, hairline borders, and a single warm-white ink that reads like subtitles over a movie frame.
colors:
  # Canvas + ink
  background: "#0a0a0b"
  surface: "#141416"
  surface-soft: "#1c1c1f"
  ink: "#f4f4f5"
  ink-secondary: "#a1a1a8"
  ink-muted: "#6c6c74"

  # Accent — restrained warm signal
  primary: "#ededed"        # near-white primary action on dark
  accent: "#e5533c"         # cinematic warm orange-red, used sparingly
  accent-soft: "#3a2723"    # flattened accent tint over the canvas

  # Borders / hairlines
  border: "#262629"
  border-strong: "#3a3a3f"

  # On-color
  on-primary: "#0a0a0b"
  on-accent: "#ffffff"

  # Overlays
  overlay-scrim: "#050506"  # was rgba(0,0,0,.72) over canvas — opaque approx
  selection: "#2a2a2e"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.08px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.48px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.18px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.2px
  label-mono:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.6px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
    borderColor: "{colors.border}"

  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 16px
    borderColor: "{colors.border}"

  card-still:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.md}"
    padding: 0px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  search-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
    borderColor: "{colors.border}"

  tag-pill:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Flim Design System

## Overview

Flim is a cinematic image search and moodboarding tool for filmmakers, and its website behaves like the product it sells: a darkened theater where film stills are projected against near-black. The canvas (`{colors.background}`) is an almost-pure black with the faintest blue-warm cast, chosen so that the saturated color of a movie frame reads true without competing with chrome. Every surface is a darker-than-dark gray, every border a hairline, and the only text is a warm off-white (`{colors.ink}`) that sits over the page like subtitles over a frame.

The system is editorial in the strictest sense: it gets out of the way. There is no decorative color in the UI itself — the accent (`{colors.accent}`), a cinematic orange-red pulled from the warm grade of celluloid, appears only on a single primary action or an active state, never as ornament. The interface trusts whitespace and image density to do the talking. Stills are laid edge to edge in tight grids and masonry walls, framed only by the thinnest `{colors.border}` line, so the experience feels like scrubbing a contact sheet rather than browsing a SaaS dashboard.

Typography is a clean geometric-leaning grotesque (Inter as the closest Google match) with mild negative tracking at display sizes — confident and quiet, never shouting. Headlines compress slightly; body copy relaxes to neutral tracking for long-form readability. A monospace voice (`{typography.label-mono}`) handles technical labels, filter tags, and metadata, lending a subtle "tool for professionals" register that connects the marketing page to the app.

**Key Characteristics:**
- Near-black cinematic canvas (`{colors.background}`) so film stills carry all the color
- Warm off-white ink (`{colors.ink}`) — subtitle-like legibility on dark
- Single restrained accent (`{colors.accent}`) for primary action and active states only
- Hairline borders (`{colors.border}`) instead of fills to separate surfaces
- Inter-style grotesque with mild negative tracking on display sizes
- Monospace labels for tags, filters, and metadata
- Image-first, gallery-density layouts framed by thin lines
- Generous whitespace and large vertical rhythm between sections

## Colors

### Canvas & Ink
- **Cinema Black** (`{colors.background}`): The theater canvas. Almost pure black with a faint cool-warm cast.
- **Surface** (`{colors.surface}`): Cards, inputs, search bar — one step up from the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Tag pills, hovered rows, raised chips.
- **Warm White** (`{colors.ink}`): Primary text, headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Descriptions, metadata, secondary copy.
- **Ink Muted** (`{colors.ink-muted}`): Placeholders, disabled labels, timestamps.

### Accent
- **Cinema Orange-Red** (`{colors.accent}`): The single warm signal — primary CTA, active filter, selected still. Never decorative.
- **Accent Soft** (`{colors.accent-soft}`): Flattened accent tint for active backgrounds over the canvas.

### Primary Action
- **Primary White** (`{colors.primary}`): The default high-contrast button on dark.
- **On Primary** (`{colors.on-primary}`): Canvas-black text on the white primary button.

### Borders & Overlays
- **Border** (`{colors.border}`): The hairline that frames every still and surface.
- **Border Strong** (`{colors.border-strong}`): Focus and hover emphasis.
- **Overlay Scrim** (`{colors.overlay-scrim}`): Modal/lightbox backdrop behind an enlarged still.
- **Selection** (`{colors.selection}`): Text selection highlight.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a clean geometric grotesque standing in for Flim's quiet, confident sans.
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — technical labels and tags.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero — cinematic statement headline |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card group headings |
| `card-title` | Still group titles, feature card headings |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text |
| `body-small` | Compact UI text, captions under stills |
| `button-ui` | Buttons, nav links |
| `caption` | Metadata, badges |
| `label-mono` | Filter tags, technical labels, metadata |

### Principles
- **Quiet confidence**: Mild negative tracking (-1.68px at 56px) compresses headlines without aggression; body copy returns to neutral tracking.
- **Two weights for chrome**: 400 (reading) and 500 (UI/interactive); 600 reserved for headings.
- **Mono as professional register**: Monospace uppercase-ish labels mark filters and metadata, signalling a tool built for craft.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a 4px micro-step for tight chip padding. The scale jumps from `{spacing.xl}` (24px) to `{spacing.2xl}` (40px) to open up section rhythm.

### Grid & Container
- Max content width: approximately 1280px for marketing, edge-to-edge for still walls
- Hero: large left- or center-aligned headline over a dim still backdrop
- Still grids: tight masonry / contact-sheet density framed by 1px `{colors.border}`
- Feature sections: 2–3 column grids with generous gutters

### Whitespace Philosophy
- **Theater darkness**: Vast negative space is black, not white — the void frames the image.
- **Image density inside calm**: Tightly packed still walls sit within generously spaced sections.
- **Hairline separation**: Surfaces divide by 1px borders, never by heavy fills or shadows.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | Canvas, text blocks | Page background |
| Hairline (Level 1) | `1px solid {colors.border}` | Cards, stills, inputs |
| Raised (Level 2) | `{colors.surface}` fill + hairline | Search bar, menus |
| Lightbox (Level 3) | `{colors.overlay-scrim}` backdrop + enlarged still | Still detail / modal |
| Focus | `1px {colors.border-strong}` + subtle inner glow | Keyboard / hover focus |

**Depth Philosophy**: Flim avoids drop shadows almost entirely — depth comes from value steps in the gray scale (`{colors.background}` → `{colors.surface}` → `{colors.surface-soft}`) and hairline borders. On a dark canvas, a shadow reads as nothing; a one-value lift reads as everything.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Edge-to-edge still walls |
| `xs` | 4px | Tight chips |
| `sm` | 6px | Small controls |
| `md` | 8px | Inputs, individual stills |
| `lg` | 12px | Cards, panels |
| `xl` | 20px | Large containers |
| `pill` | 9999px | Buttons, tags, search bar, badges |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — High-contrast white pill, canvas-black text. The default CTA.
- **`button-secondary`** — Surface fill with hairline border, warm-white text.
- **`button-accent`** — Cinema orange-red, used only for the single most important action.

### Pills & Badges
- **`badge`** — Surface-soft pill with secondary ink, for status and counts.
- **`tag-pill`** — Monospace label chip for filters and metadata.

### Cards
- **`card`** — Surface fill, 12px radius, hairline border.
- **`card-still`** — A film still framed only by a thin border, zero padding, image edge to edge.

### Inputs
- **`input`** — Surface fill, hairline border; focus deepens to `{colors.border-strong}`.
- **`search-bar`** — Full-pill search field, the hero interaction of the product.

### Navigation
- **`nav-bar`** — Transparent-over-canvas sticky header, hairline bottom border, white pill CTA on the right.

## Do's and Don'ts

### Do
- Keep the canvas near-black so film stills carry the color
- Use warm off-white (`{colors.ink}`) for text, not pure white — it reads softer over images
- Separate surfaces with hairline borders, not shadows
- Reserve the accent (`{colors.accent}`) for a single primary action or active state
- Use monospace labels for filters, tags, and metadata
- Let still walls go edge to edge framed only by 1px lines

### Don't
- Don't introduce decorative color into chrome — the images are the color
- Don't use heavy drop shadows on the dark canvas — use value steps instead
- Don't use pure white (`#ffffff`) for body text — it glares over stills
- Don't apply the accent as ornament or to multiple competing CTAs
- Don't crowd the sections — section rhythm stays generous even when grids are dense

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column still feed, stacked nav in drawer |
| Tablet | 600–1024px | 2-column still grid, condensed filters |
| Desktop | 1024–1280px | Full masonry walls, sidebar filters |
| Large | >1280px | Centered content, wider still walls |

### Touch Targets
- Buttons use 10px vertical padding for comfortable taps
- Tag pills get 10px horizontal padding
- Search bar is full-width and tall on mobile

### Collapsing Strategy
- Hero: 56px headline scales down, retains negative tracking proportionally
- Navigation: links collapse into a drawer; pill CTA persists
- Still grids: masonry → 2-column → single column feed
- Filters: inline row → collapsible sheet

### Image Behavior
- Stills maintain their hairline frame at all sizes
- Lightbox enlarges a still over the scrim, preserving aspect ratio
- Hero backdrop still dims further on mobile for headline legibility

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Cinema Black `{colors.background}`
- Heading text: Warm White `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Border (hairline): `1px solid {colors.border}`
- Primary CTA: Primary White `{colors.primary}` with `{colors.on-primary}` text
- Accent action: Cinema Orange-Red `{colors.accent}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline 56px Inter weight 600, line-height 1.05, letter-spacing -1.68px, color `{colors.ink}`. Subtitle 18px weight 400, color `{colors.ink-secondary}`. White pill CTA (`{colors.primary}`, `{colors.on-primary}` text, 9999px radius, 10px 20px padding)."
- "Design a still card: `{colors.background}` fill, 1px solid `{colors.border}`, 8px radius, zero padding, image edge to edge. Caption below at 14px Inter weight 400 in `{colors.ink-secondary}`."
- "Build a search bar: `{colors.surface}` fill, 1px `{colors.border}`, full pill, 12px 20px padding, 16px Inter body text, `{colors.ink-muted}` placeholder."
- "Create a filter tag: `{colors.surface-soft}` background, `{colors.ink-secondary}` text, JetBrains Mono 11px, 9999px radius, 4px 10px padding."

### Iteration Guide
1. The canvas is near-black so stills are the only color — keep chrome monochrome
2. Use hairline borders and gray value steps for depth, never shadows
3. Accent appears once — primary action or active state, never decoration
4. Warm off-white ink, not pure white, for legibility over images
5. Monospace labels signal a professional craft tool
6. Negative tracking on display, neutral on body

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Flim. Brand names and trademarks belong to their respective owners.