An AI IDE marketing page built on dramatic restraint — a near-empty hero canvas, monospace-influenced typography, a single hero screenshot. The lodestar of the confidence-by-absence playbook in an AI gold rush of gradients and particles.
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 Cursor’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Cursor's design language is confidence through deletion. A near-empty light canvas, monospace-influenced typography, and a single hero screenshot that does the entire pitch. The marketing page does not perform — it presents. Motion is reserved for the IDE preview itself; the surrounding chrome stays still. Every element on the page earns its pixel cost by carrying load the headline alone cannot.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (off-white #ffffff ground + #666666 secondary text + #000000 primary text; no decorative accents on the marketing surface — accent colour lives inside the product IDE preview), monospace-adjacent UI typography (ui-monospace + system fallback at 12-16px body, dramatic serif or grotesque display at 56-96px headlines), generous editorial spacing (4px base, but section gaps 160-240px), single-column reading flow with one product screenshot as the sole visual anchor, and Tailwind-standard 640/768/1024/1280 breakpoints. Treat absence as a design tool — every element must justify its existence. Apply the language, not the source brand's copy. When I ask you to build a page or component, enforce these rules by default.
Layout
Single-column reading flow with one hero screenshot anchoring the page; each section is a statement, not a feature list.
Content width
768-896px editorial rail; the hero screenshot breaks out to ~1280px maximum.
Framing
Empty stage — the page is a frame for the IDE, not a presentation of features.
Grid strength
Implicit — 4px base unit governs spacing, but the page's rhythm comes from typography size jumps and white space, not column lines.
Off-white ground (#ffffff) with restrained greyscale type (#666666 secondary, #000000 primary). The marketing canvas has no decorative accent — chromatic life is inside the product preview.
Mode strategyLight marketing surface with dark IDE preview embedded — the contrast itself becomes a feature.
#ffffff dominant ground — the page floats
#666666 for secondary text and metadata
#000000 reserved for primary text and the wordmark
Brand accents (neon green, gradient) appear only inside the IDE screenshot, never on marketing chrome
Gradients (paste-ready)
No gradients on the marketing surface; product preview internals may carry them
ui-monospace + system fallback as the entire UI stack — terminal-adjacent without being affected
Display headlines large and quiet (56-96px), letter-spaced tight (-0.02em)
Body 14-16px with generous 1.6 line-height
Weight ladder is binary — 400 body, 500-600 emphasis; no decorative weight middle ground
All-caps tracking 0.18em for the few kicker labels that exist
4px base unit
Section vertical rhythm: 160-240px between major sections (extreme breathing)
Card internal padding rare — most surfaces are flat
Hero-to-content transition: 120px minimum
Surface styleFlat. The marketing page has effectively no elevation system — surfaces sit on the ground plane. The IDE screenshot itself carries the only visible depth (subtle drop shadow).
0 shadow on marketing chrome
Subtle 0 24px 64px rgba(0,0,0,0.08) drop-shadow on the hero product screenshot only
No hover lift on marketing surfaces — buttons change colour, never elevate
Techniques
Hero screenshot mount
Single 18px corner radius + 1px hairline border + soft drop shadow. No bezel, no frame, no caption underneath.
HoverButton background colour shift only — no scale, no lift, Link underline appears with 150ms ease, Image hover not used on marketing surface
Scroll patterns
Subtle fade-in on section entry (300ms, 12px upward translate)
Hero product screenshot stays fixed weight — no parallax
No idle loops, no decorative scroll animation
Marketing chrome stays still — motion belongs to the IDE preview
Respect prefers-reduced-motion — collapse all reveals to instant
Never autoplay video on the marketing page itself
Hover changes colour, never position
Focus rings: 2px black ring with 2px offset on light surfaces
Active state: 95% opacity, no scale change
Approachmobile-first
Tailwind defaults (640/768/1024/1280/1536) — no custom ladder.
<768: hero headline scales down to 48px, screenshot full-bleed minus 16px gutters
768-1024: 720px content rail, screenshot constrained to 96vw
≥1024: 896px editorial rail, screenshot breakout to 1280px max
Body text passes WCAG AAA (#000000 on #ffffff is 21:1)
Secondary text #666666 on white passes AA at 16px (5.7:1)
Focus visible state always present — never display: none on :focus-visible
Respect prefers-reduced-motion globally
Next.js (assumed from typical stack)next/image for hero screenshot prioritySystem font fallback chain (ui-monospace, Menlo, Consolas)
Typography + a single product still are the entire visual identity. No illustration, no 3D, no Lottie.
Hero screenshot served as next/image priority, 1280px source
System monospace stack — no webfont weight cost
Negligible JS budget on marketing routes
Trust whitespace — let sections breathe at 160-240px
Use one hero product still per page maximum
Keep all marketing chrome flat — elevation belongs to the product screenshot
Anchor typography in a monospace ladder for technical credibility
Don't add decorative gradients to the marketing surface
Don't use a 5-frame product carousel — pick one frame and trust it
Don't introduce a secondary serif or display family
Don't autoplay product video on page load
Marketing surface is flat — no elevation system
Section vertical rhythm minimum 160px
Headlines monospace-anchored, body monospace-anchored — no humanist sans
Font-family grep: only ui-monospace and system fallbacks appear
Background colour: only #ffffff for marketing chrome
Section padding: minimum 160px between major blocks
Hero screenshot count per page: exactly one
No gradient declarations on marketing routes
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. 4 nodes across 3 levels, shallow to deep by color.
body1
div2
Main
Footer
Accessibility
Contrast matrix
6 combinations - 4 pass AA - 2 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 fox5.74
NormalAANormal text passes AALargeAAALarge text passes AAA
fg
#666666
bg
#FFFFFF
APCA Lc
+79
Use
foreground on background
AaThe quick brown fox5.74
NormalAANormal text passes AALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#666666
APCA Lc
-84
Use
background on foreground
AaThe quick brown fox3.66
NormalFailNormal text fails minimum WCAG contrastLargeAALarge text passes AA
fg
#666666
bg
#000000
APCA Lc
-23
Use
foreground on foreground
AaThe quick brown fox3.66
NormalFailNormal text fails minimum WCAG contrastLargeAALarge text passes AA
