Dark-first editorial-typography canvas for the AI experimentation platform. Six-font museum — Inter + Berkeley Mono + Heldane Text + Redaction + Departure Mono — each one assigned exactly one register. Six-accent spectrum (yellow, green, blue, pink, purple, royal blue) breaks up the dark like a tasting menu. Twelve atmospheric Framer Motion gradients hold ambient depth without ever becoming fills.
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 Interfere’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Light-first editorial-typography canvas. Warm #ffffff ground, #000000 primary ink, slate descender scale for de-emphasis. Six-font typographic museum: Inter Variable as workhorse (UI/body 13-15px), Berkeley Mono as data voice (12-13px tables/code), Heldane Text as editorial serif (28px+ display), Redaction as display headlines (44px+), Departure Mono as accent (12px metadata). Six-accent spectrum: yellow #ffb300, green #00713f, blue #0086f0, pink #e93d82, purple #a144af, royal blue #3e63dd — each one used at <2% surface as emphasis colour, never as fill. Twelve atmospheric gradients exist as ambient light leaks. Wide 1244px reading rail.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (light-first #ffffff canvas + #000000 primary ink + six-accent spectrum yellow/green/blue/pink/purple/royal-blue each at <2% surface as emphasis only — never as fill, never combined in one component), six-font typographic museum (Inter Variable for UI/body, Berkeley Mono for data, Heldane Text as editorial serif for display, Redaction for headlines, Departure Mono for accent metadata — each family owns exactly one register), 4px-base spacing scale heavy at 2/4/6/8/10/12, wide 1244px reading rail, Framer Motion for atmospheric gradient animations (12 gradients as ambient light leaks only), expressive motion vocabulary, 640/768/1024/1280/1536 breakpoint ladder. Treat this as my project's constitution. Apply the language, not the source brand. When I ask you to build a page or component, enforce these rules by default and call out any deviation.
Layout
Editorial single-column with break-out moments to wider canvas for display headlines and ambient gradient backdrops.
Content width
640-768px reading rail centred inside 1244px hero canvas; display headlines may break out to 1244 full width.
Framing
Midnight broadsheet — dark canvas alive with typography and saturated accent constellation.
Grid strength
Editorial baseline grid governs vertical rhythm; horizontal grid loose because of the multi-family typography ladder.
Pure #000 ground + #ffffff text hold the page; six-accent spectrum (yellow/green/blue/pink/purple/royal-blue) creates a constellation of emphasis without combining or fighting.
Mode strategyDark-only — light mode plausible but absent in capture.
#000000 only ground; no charcoal, no off-black
#ffffff for primary text, slate descender for secondary copy
#ffb300 yellow: hero accents, brand voice moments
#00713f green: success states, code highlights
#0086f0 blue: links, info badges
#e93d82 pink: error states, attention chips
#a144af purple: special-context tags
#3e63dd royal blue: secondary links, technical labels
Each accent ≤2% of surface; never two in one component; never as fill
Gradients (paste-ready)
12 atmospheric gradients catalogued — Framer Motion-animated light leaks at section edges, never as fills or button backgrounds
Inter Variable for all UI, body, captions (13-15px range)
Berkeley Mono for data tables, code blocks (12-13px)
Heldane Text as editorial serif for display (28px+)
Redaction as headline display (44px+) — never below 36px
Departure Mono for accent metadata (12px) — used very sparingly
Weights: Inter 400/500, Berkeley Mono 400, Heldane Text 400/500, Redaction 400, Departure Mono 400
Line-height 1.4-1.5 body, 1.05-1.15 display
Letter-spacing 0 for body; -0.01em for Redaction headlines
4px base unit, heaviest use at 2/4/6/8/10/12px
Section vertical rhythm: 96-144px between major content blocks (broadsheet pacing)
Framer Motion gradients lazily mounted after first interaction
Variable font subsetting for Inter and Heldane
Use each of the six families in its designated register — never overlap
Reserve accent spectrum for emphasis only — never fills
Let typography carry the brand voice — illustration is absent on purpose
Keep the canvas wide (1244) — typographic museum needs room
Don't paint surfaces in any accent — they are emphasis colours only
Don't combine two accents in one component — six accents are siblings, not collaborators
Don't introduce a seventh font — six families is already at the edge of discipline
Don't autoplay motion before viewport entry — Framer gradients are scroll-triggered
Dark-only — no light variant
Six-font system (Inter + Berkeley Mono + Heldane Text + Redaction + Departure Mono) — no seventh
Each accent ≤2% of surface — measure before shipping
Font-family grep: exactly six families appear, no more, no less
Background colour grep: only `#000000` for ground
Accent colour count: each of six accents ≤2% per viewport
Gradient usage: only as atmospheric ambient backdrops, never as button or card fills
Display headline minimum: 36px (Redaction) or 28px (Heldane) — no display below threshold
Design tokens
Observed token system
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. 12 nodes across 6 levels, shallow to deep by color.
body7
Header1
div1
div1
div1
Nav
Section (×5)
div
Section
div
Section
[+93 more]
Accessibility
Contrast matrix
40 combinations - 14 pass AA - 4 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 fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox11.70
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFB300
APCA Lc
+71
Use
foreground on brand
AaThe quick brown fox11.70
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFB300
bg
#000000
APCA Lc
-70
Use
brand on foreground
AaThe quick brown fox6.12
NormalAANormal text passes AALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#00713F
APCA Lc
-85
Use
background on accent
AaThe quick brown fox6.12
NormalAANormal text passes AALargeAAALarge text passes AAA
fg
#00713F
bg
#FFFFFF
APCA Lc
+80
Use
accent on background
AaThe quick brown fox5.67
NormalAANormal text passes AALargeAAALarge text passes AAA
fg
#000000
bg
#0086F0
APCA Lc
+40
Use
foreground on accent
AaThe quick brown fox5.67
NormalAANormal text passes AALargeAAALarge text passes AAA
fg
#0086F0
bg
#000000
APCA Lc
-38
Use
accent on foreground
AaThe quick brown fox5.45
NormalAANormal text passes AALargeAAALarge text passes AAA
fg
#000000
bg
#E93D82
APCA Lc
+39
Use
foreground on accent
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
