# Siena Film — Design Language

## 1. Visual Theme & Atmosphere
Siena Film inhabits the cinematic end of the design spectrum. A pure black background with warm ivory text (`rgb(250, 247, 239)`) — not white but antique paper — creates an atmosphere of dark theatres and film reels. The extreme type scale (89.6px display) paired with uppercase and dramatic letter-spacing variants (from -2.688px to +3.36px) creates the tension of film title cards. Three proprietary typefaces — Neue Brucke, NB International, and P22 Parrish Roman — signal institutional quality and visual research.

## 2. Color Palette & Roles
- **Background** — `rgb(0, 0, 0)` (pure black): the cinema screen
- **Primary text** — `rgb(250, 247, 239)` (warm ivory): antique paper white — warmer and more filmic than pure white
- **Button/form** — transparent fill on button, near-transparent input: minimal UI chrome
- **Interactive elements** — inherit the ivory; no accent colour detected

The entire palette is binary: black and ivory. Any colour lives in photography and film content.

## 3. Typography Rules
- **Neue Brucke**: primary display typeface — likely a geometric or grotesque with strong character
- **NB International**: body/supporting text — a humanist grotesque
- **P22 Parrish Roman**: accent serif — historical, classical resonance
- Display at 89.6px (5.6rem) — cinematic title-card scale
- Sub-display at 25.6px, body at 20px, captions at 9.6px — a steep, dramatic hierarchy
- Uppercase with tight negative tracking (`−2.688px`) for compressed title cards
- Positive letter-spacing (`+3.36px`) applied selectively — sparse, airy spaced type for labels
- Single weight (400) — the typefaces carry all authority

## 4. Component Stylings
- **2px radius**: near-square — almost no corner softening; sharp, cinematic
- **1600px radius**: full pill for specific elements (tags or timeline indicators)
- No shadows
- Buttons: `rgba(239, 239, 239, 0)` — near-invisible background, pure text button style
- Inputs: transparent fill, black border — architectural form elements

## 5. Layout Principles
- Full-viewport hero sections typical for film sites
- Content alternates between dense type moments and full-bleed photography
- Generous vertical spacing — type breathes on the dark canvas
- Navigation sparse and horizontal, ivory text on black

## 6. Depth & Elevation
- Flat — no shadows
- Depth entirely through photography and video content within sections
- The ivory-on-black contrast provides all the visual hierarchy needed

## 7. Do's and Don'ts
**Do:** Use `rgb(250, 247, 239)` (warm ivory) instead of pure white — the warmth is essential.
**Do:** Apply the full 89.6px display scale for hero moments — restraint kills the cinematic impact.
**Do:** Alternate between tight negative tracking (−2.688px) and open positive tracking (+3.36px) for typographic contrast.
**Don't:** Introduce colour — the binary black/ivory is the film.
**Don't:** Add shadows or gradients — pure surfaces only.
**Don't:** Use more than three typefaces or introduce weights beyond 400.

## 8. Responsive Behavior
- 89.6px display reduces to ~40–48px on mobile while maintaining uppercase + tracking
- Full-bleed black sections maintained on all viewports
- Three-typeface hierarchy maintained but role assignments may simplify
- Navigation collapses to minimal icon set on mobile

## 9. Agent Prompt Guide
> Design like Siena Film: pure black background, warm ivory text (`rgb(250,247,239)`). Neue Brucke for display (89.6px, uppercase), NB International for body, P22 Parrish Roman for classical accents. Alternate tight (-2.688px) and open (+3.36px) letter-spacing. 2px near-square radius. No shadows, no colour. Pure cinema black — antique ivory aesthetic.

*Generated by Sparkbites — extracted from live CSS analysis*