Frame.io
Cinematic and technically precise. Pitch-black surfaces provide a disciplined stage for high-density creative software interfaces, accented by luminous violet glass optics and razor-sharp typographic hierarchy.
Visit siteColour
Typefaces
- Display
- FrameGothic
- Body
- FrameGothic
- Mono
- NeueMachinaInktrap
- Source
- self_hosted
- Scale
- 10 · 11 · 12 · 13 · 14 · 15
Layout
- Grid
- 16 columns
- Container
- 1220px
- Spacing base
- 4px
- Radius
- 8px · 24px · 9999px
Capture
- Category
- saas
- Sections
- 7
- Captured
- 2026-08-29
- Rhythm
- dark x7
Type rules
- display headings set tight at negative tracking with sentence case
- category eyebrow labels formatted in uppercase NeueMachinaInktrap above headlines
- body text measures to approximately 62 characters per line with 1.45 line-height
Colour rules
- pure black backgrounds run continuously across all sections without light surface interruptions
- violet and cyan gradients reserved for ambient backdrops and luminous optic graphics
- primary conversion elements use high-contrast white fills against the dark base
Voice rules
- lead with creative workflow outcomes before naming technical features
- pair concise benefit statements with exact operational metrics
Holds it together
- precede major section headlines with a small uppercase eyebrow identifier
- use fully rounded pill buttons with solid white fill for primary actions and translucent dark fills for secondary actions
- immerse UI cards and 3D visual assets in subtle violet and deep blue radial glows rather than sharp drop shadows
Contrast
Type, measured
- Body
- 18px / 1.45
- Measure
- 62 characters
- Display
- 80px / 1.04
- Tracking
- -0.045em display
- Scale ratio
- 1.45
Voice
- Tone
- declarative, authoritative, engineered
- Sentences
- medium
- Person
- second
- Vocabulary
- plain
- Calls to action
- start, take, manage, unlock, discover
Built with
- Builder
- —
- Framework
- next
- Motion
- —
- WebGL
- —
- Nav
- top_bar, 52 items
- Length
- 13.2 screens
Sections in page order
3 marked strong · 7- 00
hero
A polished, cinematic dark hero pairing bold headline typography with an intricate, glowing creative workflow interface.
- Mood
- bold + clinical
- Layout
- 16 col · split · balanced
- 01
statement
A sleek, dark typographic statement with subtle cool lighting that delivers a clear value proposition with confident restraint.
- Mood
- bold + clinical
- Layout
- 12 col · stacked · airy
- 02
feature grid
Sparse four-column feature overview sitting above a dark frame with understated blue line iconography and technical clarity.
- Mood
- clinical + quiet
- Layout
- 16 col · grid · airy
- 03
feature
StrongLuminous 3D glass discs hover on deep black, creating an atmospheric, high-tech optic aesthetic.
- Mood
- dreamy + clinical
- Layout
- 13 col · centered · airy
- 04
feature
StrongEthereal translucent glass optics glow in luminous shades of violet and cyan against a pitch-black backdrop.
- Mood
- dreamy + quiet
- Layout
- 6 col · grid · airy
- 05
feature
StrongA sleek dark product showcase framed by deep violet atmospheric glow and clean typography.
- Mood
- dreamy + bold
- Layout
- 16 col · asymmetric · airy
- 06
footer
Quiet, minimal dark footer with clean typographic columns and a structured Adobe sub-navigation bar.
- Mood
- quiet + clinical
- Layout
- 13 col · grid · airy
