Siena

# Siena — Style Reference
> midnight canvas, stark light

**Theme:** dark

Siena's visual system evokes a raw, cinematic grit, operating in a deep dark mode with sparse, high-contrast typography. The design relies on angular forms and a stark white accent color that punctuates the darkness. Components are minimal, often borderless, and prioritize functionality over decorative embellishment. The overall experience is one of understated intensity, allowing textual content and motion to drive narrative.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight Screen | `#000000` | `--color-midnight-screen` | Page background, primary card surfaces, foundational dark tones for content |
| Graphite Canvas | `#1f1f1f` | `--color-graphite-canvas` | Secondary card backgrounds, slightly elevated surfaces offering subtle visual depth on a dark canvas |
| Ghost Ivory | `#faf7ef` | `--color-ghost-ivory` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color |

## Tokens — Typography

### NB International — Body copy and interactive elements like buttons. Its moderate letter spacing provides breathing room within a dark, compact design. · `--font-nb-international`
- **Substitute:** Inter
- **Weights:** 400
- **Sizes:** 10px, 20px
- **Line height:** 1.00, 1.30, 2.60
- **Letter spacing:** 0.080em
- **Role:** Body copy and interactive elements like buttons. Its moderate letter spacing provides breathing room within a dark, compact design.

### Neue Brucke — Used for small, high-impact text such as icons and badges. The generous letter spacing enhances legibility at small sizes and adds to a distinct, technical feel. · `--font-neue-brucke`
- **Substitute:** Space Mono
- **Weights:** 400
- **Sizes:** 10px, 12px
- **Line height:** 0.90, 2.71
- **Letter spacing:** 0.150em
- **Role:** Used for small, high-impact text such as icons and badges. The generous letter spacing enhances legibility at small sizes and adds to a distinct, technical feel.

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** compact

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 6 | 6px | `--spacing-6` |
| 48 | 48px | `--spacing-48` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 14px |
| elements | 0px |

### Layout

- **Section gap:** 48px
- **Card padding:** 6px
- **Element gap:** 1px

## Components

### Ghost Button
**Role:** Primary action button

Transparent background with a Ghost Ivory border and text. Uses NB International font at 10px, weight 400, with 0.08em letter spacing. Padding is 1px vertical, 6px horizontal. Corners are sharp at 0px radius.

### Film Thumbnail Card
**Role:** Decorative content display

A square card with a Graphite Canvas (#1f1f1f) background and 14px border radius. Contains internal padding of 6.4px on all sides, suitable for displaying film stills or related content.

### Circular Dark Overlay
**Role:** Interactive indicator or avatar

A perfectly circular element with a Midnight Screen (#000000) background and 100% border radius. Used for minimalist UI elements where shape implies interaction or status.

### Ghost Text Badge
**Role:** Informational tag

A badge with a transparent background and Ghost Ivory (#faf7ef) text. Uses Neue Brucke font, transparent background, no padding or border radius, making it blend seamlessly with text.

## Do's and Don'ts

### Do
- Prioritize Midnight Screen (#000000) for all main backgrounds and primary content containers for a true dark mode experience.
- Use Ghost Ivory (#faf7ef) exclusively for all readable text, interactive element borders, and essential icons to maintain high contrast and visual focus.
- Apply NB International at 400 weight with 0.08em letter spacing for general body text and functional UI copy.
- Employ Neue Brucke at 400 weight with 0.15em letter spacing for small label text, ensuring legibility and a distinctive style in compact spaces.
- Maintain a compact element layout using 1px gaps between tightly related elements and 6px padding for internal component spacing.
- Keep all interactive elements, like buttons, with 0px border-radius, emphasizing sharp, angular lines.
- Reserve the 14px border-radius specifically for content cards, distinguishing them from interactive controls.

### Don't
- Avoid using saturated or chromatic colors for backgrounds or primary textual content; color should be reserved for subtle accents or functional indicators only.
- Do not introduce unnecessary shadows; the design relies on flat surfaces and high contrast for hierarchy, not elevation.
- Refrain from using rounded corners on interactive elements; they should remain sharp and angular.
- Do not deviate from NB International and Neue Brucke for typography; these fonts define the brand's voice.
- Avoid large, airy padding or gaps between elements and sections; the design embraces a compact, dense arrangement.
- Do not use gradients; the visual system is anchored in flat, high-contrast color blocks.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Midnight Screen | `#000000` | Dominant page background and base-level surfaces. |
| 1 | Graphite Canvas | `#1f1f1f` | Slightly elevated card and content backgrounds, subtly distinguishing content blocks. |

## Imagery

This design system is image-centric, showcasing full-bleed hero visuals and contained film stills within cards. All imagery is treated naturally, focusing on the cinematic quality of the content. There are no stylistic overlays or effects. Icons, when present, are minimalistic, outlined, and monochromatic (Ghost Ivory), serving as functional cues rather than decorative elements. The density is image-heavy, with visuals occupying significant screen real estate, letting the film content speak for itself.

## Layout

The page primarily uses a full-bleed layout, allowing hero sections and visual content to extend to the edges. Content sections tend to be centered, often featuring a single, strong headline or visual. The rhythm is established by distinct, self-contained blocks. There are no visible grid structures for content layout beyond implicit alignment. The design feels dense but deliberate, with minimal negative space, creating an immersive, focused experience. Navigation is likely a sticky top navigation or a minimalist hamburger menu to preserve screen space for content.

## Agent Prompt Guide

Quick Color Reference:
text: #faf7ef
background: #000000
border: #faf7ef
accent: no distinct accent color
primary action: no distinct CTA color

Example Component Prompts:
1. Create a hero section: full-bleed Midnight Screen background, centered, with a large film still. Overlay a headline 'CINEMATIC STORIES' in NB International, 20px, 400 weight, #faf7ef, with 0.08em letter spacing. Below it, a ghost button with 'VIEW FILMS' in NB International, 10px, 400 weight, #faf7ef text and #faf7ef border, 0px radius, 1px vertical, 6px horizontal padding.
2. Design a feature card: Graphite Canvas background (#1f1f1f), 14px border radius, 6.4px internal padding. Inside, display a square content image with no border radius. Below the image, include a 'CLOSE' badge using Neue Brucke 10px, 400 weight, #faf7ef, transparent background, 0px radius.
3. Implement a detail section: Midnight Screen background. A centered subheading 'ABOUT US' in NB International, 20px, 400 weight, #faf7ef, 0.08em letter spacing. Followed by body text in NB International, 10px, 400 weight, #faf7ef. Ensure all elements are contained within the same section, with minimal vertical 1px spacing between text lines.

## Similar Brands

- **A24 Films** — Dark UI with cinematic, text-focused presentation and stark, high-contrast typography.
- **Netflix (dark theme)** — Dominant dark background, high-contrast text, and a focus on visual content display.
- **MUBI** — Minimalist dark aesthetic focused on film art, with custom typography and subdued UI elements.
- **Letterboxd** — Emphasis on dark mode, clear typography for film-related content, and functional but minimal UI.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-screen: #000000;
  --color-graphite-canvas: #1f1f1f;
  --color-ghost-ivory: #faf7ef;

  /* Typography — Font Families */
  --font-nb-international: 'NB International', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neue-brucke: 'Neue Brucke', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-xs: 10px;
  --leading-xs: 2.6;
  --text-xs-2: 12px;
  --leading-xs-2: 0.9;
  --text-xl: 20px;
  --leading-xl: 1.3;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-6: 6px;
  --spacing-48: 48px;

  /* Layout */
  --section-gap: 48px;
  --card-padding: 6px;
  --element-gap: 1px;

  /* Border Radius */
  --radius-xl: 14px;

  /* Named Radii */
  --radius-cards: 14px;
  --radius-elements: 0px;

  /* Surfaces */
  --surface-midnight-screen: #000000;
  --surface-graphite-canvas: #1f1f1f;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-screen: #000000;
  --color-graphite-canvas: #1f1f1f;
  --color-ghost-ivory: #faf7ef;

  /* Typography */
  --font-nb-international: 'NB International', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neue-brucke: 'Neue Brucke', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-xs: 10px;
  --leading-xs: 2.6;
  --text-xs-2: 12px;
  --leading-xs-2: 0.9;
  --text-xl: 20px;
  --leading-xl: 1.3;

  /* Spacing */
  --spacing-6: 6px;
  --spacing-48: 48px;

  /* Border Radius */
  --radius-xl: 14px;
}
```