# Films53 12 · Design system migration spec

> Source: https://www.films53-12.com  ·  Curated by OpenDesign  ·  en

> A masterclass in using extreme scale and light font weights to create a powerful, editorial feel with zero decorative elements.

## 1. Identity DNA

Films53 operates like a cinematic monolith: a stark black canvas where light-weight typography serves as the sole architectural material. Every element is stripped to its essential form, presenting a filmography as a modernist exhibition where text itself becomes the protagonist.

**One-liner:** A minimalist filmography site using bold typography on a stark black canvas.
**Keywords:** cinema · minimalism · filmography · editorial
**Analogy:** A cinematic filmography presented with stark, modernist typography.

## 2. Color

The palette is a binary system of pure black and a light, desaturated pinkish-white, engineered for maximum cinematic contrast. This strict monochrome approach ensures that typographic scale and spacing—not color—carry all visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#ECE5EA` | body text |
| `--line` | `rgba(236,229,234,0.1)` | divider |

**Color principle:** Stark, high-contrast monochrome for maximum cinematic impact.

The principle is one of absolute restraint: no gradients, no accents, no chromatic deviation from the established binary.

## 3. Typography

The typographic voice is set in a light-weight (300) grotesque sans-serif, used exclusively in uppercase. This creates a formal, archival tone where film titles are treated as monumental inscriptions rather than mere text, with scale doing the work that weight would normally handle.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 200px | 0.85 | 300 | -2px | Hero logotype |
| headline | 68px | 1.0 | 300 | 0px | Film titles |
| body | 14px | 1.4 | 300 | 0px | Dates and metadata |

**Type rules:**
- All text is uppercase
- Primary font weight is light (300)
- Film titles are large and visually dominant

## 4. Spacing

Rhythm is established through asymmetric, airy spacing that treats whitespace as a primary design element.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetric and airy, using generous whitespace to separate typographic elements.

## 5. Surfaces

Surfaces are rendered as pure typographic space, with no shadows, borders, or material depth cues. The interface exists as a flat, high-contrast plane where spatial relationships alone define structure.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** None visible; relies on pure spatial contrast.

## 6. Layout

The layout skeleton is a free-flowing typographic grid that rejects rigid columns for a dynamic, asymmetric arrangement. Titles are scattered across the viewport like film posters in a gallery, with generous whitespace acting as the connective tissue between elements.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Free-flowing typographic grid with scattered titles.

## 7. Motion & Interaction

Motion philosophy favors subtlety over spectacle, with smooth transitions that emphasize refinement rather than draw attention to themselves. The system uses only opacity and transform changes on hover, maintaining the site's quiet, deliberate aesthetic.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle opacity or transform transitions on hover.

- **Hover:** Cursor changes to pointer; likely a subtle color or opacity shift.
- **Click:** Immediate navigation to film detail.
- **Transition:** Smooth, all-encompassing transitions.
- **Keyboard:** Standard link focus states.

## 8. Voice & Don'ts

The editorial voice is formal and archival, with headlines set in uppercase, light-weight, and highly letter-spaced. Calls-to-action are minimalist text links that avoid traditional button styling, reinforcing the cinematic, museum-like presentation.

- **Tone:** Formal, archival, and cinematic.
- **Headline style:** Uppercase, light-weight, and highly spaced.
- **CTA style:** Minimalist text links without traditional button styling.
- **Avoid:** Do not use bold weights / Do not add decorative borders or shadows / Do not use multiple colors or gradients

### Don'ts
- ❌ Don't use bold font weights — the screenshot shows exclusively light (300) typography.
- ❌ Don't add drop shadows or 3D effects — the screenshot shows a flat, high-contrast design.
- ❌ Don't use bright accent colors — the screenshot shows a strictly monochrome black and light-pinkish-white palette.
- ❌ Don't use rounded corners or card-based layouts — the screenshot shows sharp, edge-to-edge text elements.
- ❌ Don't use justified text alignment — the screenshot shows a mix of left and right alignments for a dynamic feel.
- ❌ Don't clutter the interface with icons — the screenshot shows almost purely typographic navigation.

The system deliberately avoids bold weights, drop shadows, bright colors, rounded corners, and iconography—committing fully to its identity as a purely typographic filmography.

## System Prompt (paste into AI tool)

```
This is a minimalist filmography portfolio using stark, high-contrast typography. The primary colors are a pure black background (#000000) and an off-white/light-pinkish ink (#ECE5EA). The typography is exclusively a light-weight (300) grotesque sans-serif, used in massive scales for film titles and hero logotypes. All text is uppercase. Critical donts: never use bold weights, never add shadows or rounded corners, and never introduce multiple colors. The layout is airy and uses generous whitespace to separate elements. Position the brand as a formal, archival cinema portfolio.
```