Remixes of siena.film
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Siena
description: |
Siena Film Foundation's design system embodies a bold, contemporary aesthetic
rooted in cinematic tradition. The visual language is defined by dramatic
color blocking—stark blacks against cream surfaces and striking primary
red—combined with refined, all-caps typography in Neue Brucke. The system
prioritizes impact over ornamentation: sharp corners, minimal shadows, and
deliberate negative space create a gallery-like quality that positions film
narratives as the central focus. This is a design system for storytellers,
where restraint and contrast serve the content.
source:
url: "https://siena.film/"
pagesAnalyzed: 6
extractedAt: 2026-11-08
tokensMeasured: true
colors:
primary: "#FF0F00"
canvas: "#000000"
surface-alt: "#FAF7EF"
ink: "#FAF7EF"
accent-1: "#FFC700"
typography:
display-xxl:
fontFamily: "Neue Brucke"
fontSize: 100.8px
fontWeight: 400
lineHeight: 0.7
letterSpacing: 0px
display-xl:
fontFamily: "Neue Brucke"
fontSize: 97.6px
fontWeight: 400
lineHeight: 0.7
letterSpacing: -2.93px
textTransform: uppercase
display-lg:
fontFamily: "Neue Brucke"
fontSize: 89.6px
fontWeight: 400
lineHeight: 1
letterSpacing: -2.69px
display-lg-tight:
fontFamily: "Neue Brucke"
fontSize: 89.6px
fontWeight: 400
lineHeight: 0.74
letterSpacing: -3.58px
display-md:
fontFamily: "Neue Brucke"
fontSize: 51.2px
fontWeight: 400
lineHeight: 0.8
letterSpacing: 0px
textTransform: uppercase
display-sm:
fontFamily: "Neue Brucke"
fontSize: 48px
fontWeight: 400
lineHeight: 0.8
letterSpacing: 0px
textTransform: uppercase
heading-md:
fontFamily: "Neue Brucke"
fontSize: 32px
fontWeight: 400
lineHeight: 0.9
letterSpacing: 0px
textTransform: uppercase
heading-md-tight:
fontFamily: "Neue Brucke"
fontSize: 32px
fontWeight: 400
lineHeight: 1.2
letterSpacing: -0.96px
textTransform: uppercase
heading-md-2:
fontFamily: "Neue Brucke"
fontSize: 32px
fontWeight: 400
lineHeight: 0.75
letterSpacing: 0px
textTransform: uppercase
heading-md-loose:
fontFamily: "Neue Brucke"
fontSize: 32px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
textTransform: uppercase
heading-sm:
fontFamily: "Neue Brucke"
fontSize: 21px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
textTransform: uppercase
heading-xs:
fontFamily: "Neue Brucke"
fontSize: 16px
fontWeight: 400
lineHeight: 1
letterSpacing: 1.6px
textTransform: uppercase
body-xl:
fontFamily: "Neue Brucke"
fontSize: 25.2px
fontWeight: 400
lineHeight: 0.8
letterSpacing: -0.5px
body-lg:
fontFamily: "Neue Brucke"
fontSize: 22px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
body-md:
fontFamily: "Neue Brucke"
fontSize: 20px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
textTransform: uppercase
body-md-tight:
fontFamily: "Neue Brucke"
fontSize: 20px
fontWeight: 400
lineHeight: 0.9
letterSpacing: 0px
textTransform: uppercase
body-sm:
fontFamily: "Neue Brucke"
fontSize: 16px
fontWeight: 400
lineHeight: 1
letterSpacing: 3.2px
textTransform: uppercase
body-xs:
fontFamily: "Neue Brucke"
fontSize: 13px
fontWeight: 400
lineHeight: 1.2
letterSpacing: 0px
textTransform: uppercase
button-sm:
fontFamily: "Neue Brucke"
fontSize: 12.8px
fontWeight: 400
lineHeight: 0.9
letterSpacing: 0px
textTransform: uppercase
button-xs:
fontFamily: "Neue Brucke"
fontSize: 12px
fontWeight: 400
lineHeight: 0.9
letterSpacing: 1.8px
label:
fontFamily: "Neue Brucke"
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 1.4px
caption-xl:
fontFamily: "Neue Brucke"
fontSize: 12px
fontWeight: 400
lineHeight: 0.9
letterSpacing: 1.2px
caption-xl-uppercase:
fontFamily: "Neue Brucke"
fontSize: 12px
fontWeight: 400
lineHeight: 2.17
letterSpacing: 1.12px
textTransform: uppercase
caption-lg:
fontFamily: "Neue Brucke"
fontSize: 10px
fontWeight: 400
lineHeight: 0.9
letterSpacing: 1.5px
caption-md:
fontFamily: "Neue Brucke"
fontSize: 9px
fontWeight: 400
lineHeight: 0.8
letterSpacing: 1.89px
caption-sm:
fontFamily: "Neue Brucke"
fontSize: 8px
fontWeight: 400
lineHeight: 1
letterSpacing: 1.6px
caption-xs:
fontFamily: "Neue Brucke"
fontSize: 7.2px
fontWeight: 400
lineHeight: 1
letterSpacing: 2px
textTransform: uppercase
rounded:
none: 0px
xs: 6px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 32px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FFF8F7"
surface: "#F5EEED"
surfaceRaised: "#EDE7E6"
text: "#1D1110"
textMuted: "#716867"
border: "#DBD5D4"
accent: "#D60D00"
accentFg: "#FFFFFF"
focusRing: "#FF0F00"
elevation: shadow
dark:
bg: "#000000"
surface: "#FAF7EF"
surfaceRaised: "#FAF8F0"
text: "#FAF7EF"
textMuted: "#A3A19B"
border: "#1E1E1D"
accent: "#FF0F00"
accentFg: "#0B0B0C"
focusRing: "#FF0F00"
elevation: "border+surface"
contrastFailures:
- "dark: text on surface = 1:1 (needs 4.5:1)"
components:
button-text:
textColor: "{colors.ink}"
height: 44px
padding: "1px 6px 1px 6px"
fontSize: 20px
fontFamily: "NB International"
fontWeight: 400
lineHeight: 1.3
button-secondary:
textColor: "{colors.canvas}"
height: 36px
padding: "0px 16px 0px 16px"
fontSize: 21px
fontFamily: "NB International"
fontWeight: 400
lineHeight: 1.24
rounded: "{rounded.xs}"
backgroundColor: "{colors.surface-alt}"
button-text-2:
textColor: "{colors.canvas}"
height: 44px
padding: "1px 6px 1px 6px"
fontSize: 20px
fontFamily: "NB International"
fontWeight: 400
lineHeight: 1.3
button-outline:
textColor: "{colors.canvas}"
border: "1px dashed rgba(0, 0, 0, 0.3)"
height: 40px
padding: "0px 14px 0px 14px"
fontSize: 8px
fontFamily: "NB International"
fontWeight: 400
lineHeight: 1.95
button-icon:
textColor: "{colors.accent-1}"
height: 46.5469px
padding: "6.4px 6.4px 6.4px 6.4px"
fontSize: 12.8px
fontFamily: "NB International"
fontWeight: 400
lineHeight: 0.9
rounded: "{rounded.xs}"
backgroundColor: "rgba(14, 14, 14, 0)"
card:
textColor: "{colors.ink}"
padding: "48px 33.6px 48px 33.6px"
fontSize: 20px
fontFamily: "NB International"
fontWeight: 400
lineHeight: 1.3
footer:
textColor: "{colors.ink}"
padding: "16px 0px 0px 0px"
fontSize: 20px
fontFamily: "NB International"
fontWeight: 400
lineHeight: 1.3
backgroundColor: "{colors.canvas}"
footer-2:
textColor: "{colors.canvas}"
padding: "16px 0px 0px 0px"
fontSize: 20px
fontFamily: "NB International"
fontWeight: 400
lineHeight: 1.3
backgroundColor: "{colors.surface-alt}"
link:
typography: "{typography.heading-md}"
textColor: "{colors.canvas}"
padding: "6.4px 0px 1.6px 21.6px"
link-sm:
typography: "{typography.caption-xl-uppercase}"
textColor: "{colors.canvas}"
badge-text:
typography: "{typography.body-xs}"
textColor: "{colors.canvas}"
height: 46.7812px
badge-text-sm:
textColor: "{colors.canvas}"
height: 19.375px
padding: "9.6px 0px 3.2px 0px"
fontSize: 6px
fontFamily: "NB International"
fontWeight: 400
lineHeight: 1.1
states:
other-focus:
target: other
state: focus
outline: none
other-hover:
target: other
state: hover
borderColor: "rgba(255, 255, 255, 0.6)"
borderWidth: 1px
other-active:
target: other
state: active
opacity: 0.75
input-disabled:
target: input
state: disabled
opacity: 1
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 768
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 20
sectionPaddingX: 0
- width: 1024
containerWidth: 1024
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 20
sectionPaddingX: 0
- width: 1280
containerWidth: 1280
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 20
sectionPaddingX: 0
- width: 1440
containerWidth: 1440
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: false
headingPx: 0
bodyPx: 20
sectionPaddingX: 0
coverage:
statesFound: 9
gradientsFound: 0
rolesUnassigned: 1
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Siena Film Foundation's design system embodies a bold, contemporary aesthetic rooted in cinematic tradition. The visual language is defined by dramatic color blocking—stark blacks against cream surfaces and striking primary red—combined with refined, all-caps typography in Neue Brucke. The system prioritizes impact over ornamentation: sharp corners, minimal shadows, and deliberate negative space create a gallery-like quality that positions film narratives as the central focus. This is a design system for storytellers, where restraint and contrast serve the content.
Key Characteristics
{colors.primary} — #FF0F00): Primary call-to-action fills, brand accent, active states, and hero section backgrounds. Used to signal energy and cinematic urgency.{colors.accent-1} — #FFC700): Decorative accent with no assigned semantic role; appears in isolated icon contexts and button states.{colors.canvas} — #000000): Default page background; primary neutral anchor.{colors.surface-alt} — #FAF7EF): Alternating section band background; heading and primary text color for contrast against dark canvas.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Neue Brucke | 97.6px | 400 | 0.7 | -2.93px | Uppercase hero headlines |
| Display XXL | Neue Brucke | 100.8px | 400 | 0.7 | 0px | Uppercase large hero |
| Display LG | Neue Brucke | 89.6px | 400 | 1 | -2.69px | Uppercase major display |
| Display LG Tight | Neue Brucke | 89.6px | 400 | 0.74 | -3.58px | Uppercase compressed |
| Display MD | Neue Brucke | 51.2px | 400 | 0.8 | 0px | Uppercase mid-level display |
| Display SM | Neue Brucke | 48px | 400 | 0.8 | 0px | Uppercase smaller display |
| Heading MD | Neue Brucke | 32px | 400 | 0.9 | 0px | Uppercase section headlines |
| Heading MD Tight | Neue Brucke | 32px | 400 | 1.2 | -0.96px | Uppercase tight spacing |
| Heading MD 2 | Neue Brucke | 32px | 400 | 0.75 | 0px | Uppercase variant |
| Heading MD Loose | Neue Brucke | 32px | 400 | 1 | 0px | Uppercase with airiness |
| Heading SM | Neue Brucke | 21px | 400 | 1.43 | 0px | Uppercase smaller section head |
| Heading XS | Neue Brucke | 16px | 400 | 1 | 1.6px | Uppercase minimal heading |
| Body XL | Neue Brucke | 25.2px | 400 | 0.8 | -0.5px | Large body text, tight |
| Body LG | Neue Brucke | 22px | 400 | 1 | 0px or -0.88px | Large body with tracked options |
| Body MD | Neue Brucke | 20px | 400 | 1.3 | 0px | Uppercase body; main content |
| Body MD Tight | Neue Brucke | 20px | 400 | 0.9 | 0px | Uppercase compressed body |
| Body SM | Neue Brucke | 16px | 400 | 1 | 3.2px | Uppercase spaced small body |
| Body XS | Neue Brucke | 13px | 400 | 1.2 | 0px | Uppercase tiny body |
| Button SM | NB International | 12.8px | 400 | 0.9 | 0px | Uppercase button text |
| Button XS | NB International | 12px | 400 | 0.9 | 1.8px | Uppercase minimal button |
| Label | NB International | 14px | 400 | 1.43 | 1.4px | Form label text |
| Caption XL Uppercase | Neue Brucke | 12px | 400 | 2.17 | 1.12px | Uppercase wide-spaced caption |
| Caption XL | Neue Brucke | 12px | 400 | 0.9 | 1.2px | Uppercase tight caption |
| Caption LG | Neue Brucke | 10px | 400 | 0.9 | 1.5px | Uppercase small caption |
| Caption MD | Neue Brucke | 9px | 400 | 0.8 | 1.89px | Uppercase micro caption |
| Caption SM | Neue Brucke | 8px | 400 | 1 | 1.6px | Uppercase tiny caption |
| Caption XS | Neue Brucke | 7.2px | 400 | 1 | 2px | Uppercase smallest caption |
text-transform; only specific body and caption roles use regular casePrimary Button
rgba(0, 0, 0, 0) (transparent)rgb(250, 247, 239) ({colors.surface-alt}){rounded.none} (0px)Secondary Button
rgb(250, 247, 239) ({colors.surface-alt})rgb(0, 0, 0) ({colors.canvas}){rounded.xs} (6px)Ghost / Text Button
rgba(0, 0, 0, 0) (transparent)rgb(0, 0, 0) ({colors.canvas}){rounded.none} (0px)Outline Button
rgba(0, 0, 0, 0) (transparent)rgb(0, 0, 0) ({colors.canvas}){rounded.none} (0px)rgba(0, 0, 0, 0.3)Icon Button
rgba(14, 14, 14, 0) (transparent)rgb(255, 199, 0) ({colors.accent-1}){rounded.xs} (6px)Button Focus State
inset 0 0 0 1px var(--focus-color)Button Active State
Default Card
rgba(0, 0, 0, 0) (transparent)rgb(250, 247, 239) ({colors.surface-alt}){rounded.none} (0px)Input Focus State
inset 0 0 0 1px var(--focus-color)Input Disabled State
Label
Link (Large)
rgb(0, 0, 0) ({colors.canvas}){rounded.none} (0px)rgba(0, 0, 0, 0) (transparent)Link (Small)
rgb(0, 0, 0) ({colors.canvas}){rounded.none} (0px)rgba(0, 0, 0, 0) (transparent)Link Focus State
var(--focus-color)Link Hover State
Badge Text
rgb(0, 0, 0) ({colors.canvas}){rounded.none} (0px)rgba(0, 0, 0, 0) (transparent)Badge Text Small
rgb(0, 0, 0) ({colors.canvas}){rounded.none} (0px)rgba(0, 0, 0, 0) (transparent)Footer Default (Dark)
rgb(0, 0, 0) ({colors.canvas})rgb(250, 247, 239) ({colors.surface-alt}){rounded.none} (0px)Footer Default Alt (Light)
rgb(250, 247, 239) ({colors.surface-alt})rgb(0, 0, 0) ({colors.canvas}){rounded.none} (0px)Generic Hover State (Other Elements)
rgba(255, 255, 255, 0.6)var(--widget-border-radius)Generic Focus State (Other Elements)
Generic Active State
Base unit: {spacing.md} = 16px
Scale:
{spacing.xxs} = 4px (micro adjustments, badge padding){spacing.xs} = 8px (tight spacing between elements){spacing.sm} = 12px (small gaps, button padding refinements){spacing.md} = 16px (standard margin and padding throughout){spacing.lg} = 32px (large section margins, card padding)Usage Context:
{spacing.lg} (32px){spacing.xs} to {spacing.sm} (8–12px){spacing.xxs} to {spacing.xs} (4–8px){spacing.md} to {spacing.lg} (16–32px)Negative space is deliberate and structural. Large sections of solid color (black, cream, red) serve as breathing room between content blocks. Vertical spacing dominates; headlines are tightly spaced (0.7–0.9 line-height) and isolated by substantial section margins. This creates a gallery aesthetic where content feels curated and cinematic rather than crowded.
{rounded.none} = 0px — buttons, links, badges, cards, navigation; sharp, geometric default{rounded.xs} = 6px — secondary buttons, icon buttons, selected form elements; minimal softening for interactive focus statesColor-Blocking Depth: Siena's design system achieves depth exclusively through surface color changes, not shadows. No measurable box-shadow values were detected across components. Depth hierarchy is communicated by background color contrast:
#000000) recedes#FAF7EF) advances#FF0F00) signals action and urgencyElevation is visual (color shift) not geometric (shadow lift).
| Opacity | Use |
|---|---|
| 100% (1.0) | Default, full-strength elements |
| 85% (0.85) | Hover state (links, generic interactive) |
| 75% (0.75) | Active / pressed state |
| 70% (0.70) | Reduced emphasis (measured in system) |
| 60% (0.60) | Measured in system; likely secondary text or disabled variant |
| 50% (0.50) | Significant reduction; overlay or disabled text |
| 30% (0.30) | Light reduction; subtle borders or accents |
| 20% (0.20) | Very subtle; hairline or ghost elements |
| 5% (0.05) | Barely perceptible; background tint or divider |
| Layer | Z-index | Use |
|---|---|---|
| Base | 1–6 | Default content, cards, sections |
| Dropdown | 10 | Menu overlays, select menus |
| Dropdown (Higher) | 20 | Modal-level dropdowns, highest priority overlays |
0px border-radius) as the default for buttons, cards, and navigation{spacing.lg} (32px) for major sections, {spacing.md} (16px) for standard rhythminset 0 0 0 1px var(--focus-color)) on inputs and buttons#FFC700) as a primary action fill; it is decorative only| Viewport Width | Grid Columns | Content Width | Font Size (Body) | Padding X | Key Changes |
|---|---|---|---|---|---|
| 375px | 1 | 375px | 16px | 0px | Single-column mobile; minimal horizontal padding |
| 768px | 1 | 768px | 20px | 0px | Tablet; wider container, body text increased |
| 1024px | 1 | 1024px | 20px | 0px | Large tablet; consistent column count |
| 1280px | 1 | 1280px | 20px | 0px | Desktop; full-width sections at 1280px |
| 1440px | 1 | 1440px | 20px | 0px | Max desktop; container maxes at 1440px |
No visible breakpoint in navigation visibility or layout restructuring was observed; the site maintains single-column layout across all measured viewports with full-width color blocks and flush edges.
Minimum touch target size not explicitly measured in extraction data; however, button heights of 36–44px and icon button dimensions of 46.5469px × 46.5469px align with accessible touch sizing conventions.
The site does not employ a hamburger menu or navigation collapse across breakpoints. Layout remains single-column and full-width at all viewports. Content blocks (hero, cards, footer) scale proportionally with viewport width but do not restructure. Horizontal padding remains 0px, keeping sections edge-to-edge.
#FF0F00)#000000)#FAF7EF)#FFC700)text-transform: uppercase to all type roles unless explicitly overridden for body/caption roles marked as regular case in the hierarchy table.box-shadow to create elevation. Use background color contrast instead.{spacing.lg}) and 0px horizontal; content is full-width or flush to edges.inset 0 0 0 1px var(--focus-color) for inputs/buttons and underline for links.rgba(0, 0, 0, 0) (transparent background) for text buttons, ghost buttons, and badges; they are content-first, not containers.box-shadow, and keyboard navigation patterns are not documented.{colors.accent-1} (#FFC700) has no semantic role and appears only in isolated icon contexts; its intended purpose and priority are unclear.