Section-zoned developer-database landing that turns its brand colour into the design statement. Petrol-green #2c6d4c drenches entire sections as ground (not accent), Geist Mono carries code-voice authority, Inter handles marketing copy. Wide 1856px canvas, zero shadow system — depth lives in section colour contrast.
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 Neon’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Section-zoned developer-database canvas. White #ffffff text dominates because brand-green #2c6d4c is the primary section ground (not accent), with #000000 as the alternate section ground. Slate descender scale (#94979e / #797d86 / #c9cbcf) for de-emphasis. Geist Mono carries code-voice technical credibility (16px tables and code), Inter handles marketing reading layer (13-18px UI/body). Wide 1600-1856px canvas — section width is the design move. Expressive motion via Framer Motion. Single gradient catalogued — atmospheric only.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (section-zoned with petrol-green #2c6d4c as primary section ground + #000000 as alternate section ground + #ffffff primary text + slate descender scale for de-emphasis — the brand colour is the ground, never an accent or button fill), typographic duet (Geist Mono for code-voice 16px tables and technical labels + Inter for marketing reading 13-18px UI/body), 4px-base spacing scale heavy at 4/6/8/10/12/14, wide 1600-1856px canvas with section zoning by brand colour, expressive Framer Motion vocabulary, custom 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
Section-zoned wide canvas — petrol-green and #000 sections alternate as the design rhythm, each holding a full content block.
Content width
960-1600px content rail inside 1856px hero canvas; sections break to full width.
Strong 12-column grid at desktop, section-coloured backgrounds carry the rhythm.
Petrol-green #2c6d4c + #000000 alternate as section grounds; #ffffff primary text + slate descender scale; brand colour is the ground, never an accent.
Mode strategySection-zoned (green ↔ black) — neither pure light nor pure dark.
#2c6d4c petrol-green: primary section ground (drenched, not accent)
Surface styleCards float on section ground via 1px #61646b hairline; zero shadow variants catalogued — depth comes from section colour contrast, not elevation.
Zero shadow variants — depth lives in section colour
Hover state: brightness shift on hover, no lift
Focus rings: white 2px + 2px offset on green ground
Techniques
Brand-zoned section
Full-width section with #2c6d4c background, #ffffff text, 80-160px vertical padding — the brand colour does the work.
Hairline-only card
1px #61646b border + transparent background; depth from section colour contrast, not shadow.
Hover brightens elements without lift (depth lives in section colour)
Focus rings: white 2px + 2px offset on brand sections, black 2px on white sections
Active state: button bg shifts darker by 8%
Approachdesktop-first
Custom enterprise ladder (320/960/1600/1856) — wide canvas as the design statement.
<960: 16px gutter, single column, sections retain brand colour
960-1600: 960px content rail, basic 2-col grid
≥1600: full 1600 rail + 1856 hero break-outs, full 12-col data tables
WCAG AA on white text on petrol-green (#ffffff on #2c6d4c is 7.4:1)
WCAG AAA on white text on black (#ffffff on #000 is 21:1)
Data tables use proper th/td semantics + caption
Next.js or similarFramer Motion for section revealsGeist Mono + Inter variable fonts
Brand-coloured section zoning + typography + product UI screenshots are the visual identity.
Geist Mono and Inter loaded as woff2 with font-display: swap
Framer Motion section reveals scoped to scroll-triggered
Brand-coloured sections as CSS background-color, never images
Use petrol-green as section ground — drenched, full-width, the design statement
Use Geist Mono for code-voice technical labels, Inter for everything else
Keep the canvas wide (1600+) — confidence is the design move
Use section colour to zone, not shadows or borders
Don't use petrol-green as accent or button fill — it is ground only
Don't add box-shadows to cards — depth lives in section colour contrast
Don't shrink the canvas below 1600 on desktop — the wide layout is the brand
Don't introduce a third type family
Section-zoned (green ↔ black) — no pure light or pure dark mode
Geist Mono + Inter only
Petrol-green is ground only, never accent
Zero shadow system — depth from section colour
Font-family grep: only `Geist Mono` and `Inter` appear
Background colour grep: `#2c6d4c` for primary sections, `#000000` for alternate
Accent colour usage: petrol-green appears only as background-color, never as color/border/fill
Shadow variants total: 0 (zero) — verify no box-shadow declarations
Section width: max-w never below 1600px at desktop
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. 13 nodes across 6 levels, shallow to deep by color.
body2
a
div (×2)3
Header1
div1
div1
Nav
Main3
Section
div1
Section (×5)
Section (×3)
Footer
Accessibility
Contrast matrix
192 combinations - 76 pass AA - 44 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
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
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 fox18.08
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#E4F1EB
APCA Lc
+96
Use
foreground on background
AaThe quick brown fox18.08
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#E4F1EB
bg
#000000
APCA Lc
-97
Use
background on foreground
AaThe quick brown fox17.59
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#18191B
APCA Lc
-107
Use
background on foreground
AaThe quick brown fox17.59
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#18191B
bg
#FFFFFF
APCA Lc
+104
Use
foreground on background
AaThe quick brown fox16.66
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#E4E5E7
APCA Lc
+91
Use
foreground on foreground
AaThe quick brown fox16.66
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#E4E5E7
bg
#000000
APCA Lc
-91
Use
foreground on foreground
AaThe quick brown fox15.15
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#18191B
bg
#E4F1EB
APCA Lc
+94
Use
foreground on background
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
