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