35mm — Talent Makers

35mm — Talent Makers mockup preview
Click to expand

Cinematic editorial design system for Spain's largest audiovisual school. The aesthetic borrows the visual language of film production — high-contrast monochrome surfaces punctuated by a single coral accent...

Primary#FF5A1F
Text Secondary#525252
Surface#FFFFFF
Primary Hover#E64A12
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Display XLbold geometric sans-serif · 96px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Display Lbold geometric sans-serif · 72px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Headlinebold geometric sans-serif · 48px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Titlebold geometric sans-serif · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Subheadbold geometric sans-serif · 24px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Leadneutral humanist sans-serif · 20px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Bodyneutral humanist sans-serif · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Smallneutral humanist sans-serif · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Captionneutral humanist sans-serif · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Overlineneutral humanist sans-serif · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px
128px

Cinematic editorial design system for Spain's largest audiovisual school. The aesthetic borrows the visual language of film production — high-contrast monochrome surfaces punctuated by a single coral accent...

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Elevation & Depth

Hover
Modal
Focus

Do's & Don'ts

Do

Reserve coral for interactive intent only
Maintain 4px spacing grid

Don't

Don't use pure black for large surfaces
Imagery & Motion

Photography is the heaviest brand asset. All hero and card imagery is treated like cinematic stills — warm-leaning color grade, soft directional lighting, shallow depth of field, and a clear human subject (student, alum, instructor) in production context. No stock-feeling compositions. Avoid heavy filters; rely on natural grading. Video is muted, looped, and plays under a darkening scrim so headlines remain readable.

Motion is restrained and purposeful: 150–250ms ease-out for hover transitions, 400–600ms for entrance reveals on scroll, no parallax. Coral arrows nudge +4px on card hover to suggest forward momentum. Carousel transitions cross-fade at 400ms rather than slide.

Download .md

License MIT
Uploaded 1 weeks ago
Version v1
File size 10.3 KB
Downloads 13
Copies 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/juanBL/35mm-talent-makers and implement it in my code

Don't have the MCP? Install it here