Dark-first cinema-tooling landing for the Adobe-acquired video collaboration platform. FrameGothic carries the entire brand voice in three weights; a single cobalt accent appears only where the page wants you to click. Restraint as identity — the product UI screenshots are the spectacle, the page is the calm before the cut.
This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Frame’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Dark-first cinema-tooling canvas. Pure #000 ground for product UI screenshots, off-white #fcfcfc primary text, slate #eaeaff alpha for de-emphasised reading layers. Typography carries the entire personality: FrameGothic Variable (400/500/600) handles UI + body, NeueMachinaInktrap as a display-only voice for marketing headlines. Cobalt #6199f6 is the sole functional accent — CTAs, active states, focus rings — kept under 2% of surface. Elevation is restrained: 4 shadow variants total, mostly subtle inset/drop combos that feel like product chrome. Motion is expressive but never decorative — 10 transitions calibrated for product-feel scrub interactions.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (dark-first #000 canvas + #fcfcfc primary text + #eaeaff alpha descender + single cobalt #6199f6 accent at <2% surface), single-family typography discipline (FrameGothic Variable in weights 400/500/600 for everything, NeueMachinaInktrap reserved for display moments only), 4px-base spacing scale with heavy use at 4/6/8/10/12/16, 1068px content rail inside 1440px hero canvas, restrained 4-variant shadow system, expressive but disciplined motion (10 transitions, weighted easings, no decorative animation), and 389/768/897/1158/1500 breakpoint ladder. Treat this as my project's constitution — every new component should pass as if engineered in the same studio. Apply the language, not the source brand's copy or identity. When I ask you to build a page or component, enforce these rules by default and call out any deviation.
Layout
Single-column reading flow on a dark canvas, with product UI screenshots breaking out of the content rail for cinematic full-bleed moments.
Content width
1068px content rail centred inside 1440px hero canvas; screenshots may break out to 1440 for emphasis.
Framing
Dark-room cinema with restrained typography setting the tone before any UI screenshot loads.
Grid strength
Light grid — 4px base unit governs spacing but is invisible to the eye; reading rhythm comes from typography size jumps rather than grid lines.
Pure #000 ground holds the page; #fcfcfc primary text + #eaeaff alpha descender carry reading; single cobalt #6199f6 accent earns attention by scarcity.
Mode strategyDark-only — no light-mode variant inferred. Theme toggle would betray the brand.
#000000 is the only background colour — no charcoal, no near-black, no off-shades
#fcfcfc primary text 60% of the type surface, #eaeaff alpha for secondary copy and metadata
#6199f6 cobalt accent exclusively on CTAs, focus rings and active nav states (under 2% total surface)
#0d0d18 used sparingly for elevated surfaces (cards, hover states) — visible only by contrast
Gradients (paste-ready)
10 gradients catalogued, all atmospheric — soft cobalt light leaks at hero edges, never as fill
FrameGothic Variable is the sole interface family — UI labels, body copy, navigation, captions, all 400/500/600 weights only
NeueMachinaInktrap appears only in display headlines (32px+) and brand mark — never below 24px
Reading copy sits at 13-15px, optical adjustments preserved at small sizes
Line-height 1.4-1.5 for body, 1.05-1.15 for display — tight stack respects the small reading size
Letter-spacing left at 0 for body; -0.01em to -0.02em for display headlines only
4px base unit, heaviest use at 4/6/8/10/12/16px increments
Section vertical rhythm: 80-120px between major content blocks
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 11 nodes across 7 levels, shallow to deep by color.
body2
Header1
div1
Nav
div (×3)2
Main1
div (×5)1
Section1
div1
Article (×4)
Footer
Accessibility
Contrast matrix
22 combinations - 16 pass AA - 14 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox20.47
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FCFCFC
bg
#000000
APCA Lc
-106
Use
background on foreground
AaThe quick brown fox20.47
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FCFCFC
APCA Lc
+104
Use
foreground on background
AaThe quick brown fox19.30
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#F5F5F8
APCA Lc
+100
Use
foreground on background
AaThe quick brown fox19.30
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F5F5F8
bg
#000000
APCA Lc
-101
Use
background on foreground
AaThe quick brown fox18.82
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FCFCFC
bg
#0D0D18
APCA Lc
-106
Use
background on background
AaThe quick brown fox18.82
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#0D0D18
bg
#FCFCFC
APCA Lc
+104
Use
background on background
AaThe quick brown fox17.74
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#0D0D18
bg
#F5F5F8
APCA Lc
+100
Use
background on background
AaThe quick brown fox17.74
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F5F5F8
bg
#0D0D18
APCA Lc
-101
Use
background on background
AaThe quick brown fox17.71
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#EAEAFF
bg
#000000
APCA Lc
-95
Use
background on foreground
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
