A clean, professional help desk interface for a SaaS platform
02
Color
#D1F470Accent
#000000Ink
#FFFFFFBG
#11110DMuted
rgba(0,0,0,0.1)Line
High-contrast black and white with a single vibrant chartreuse accent for primary actions.
03
Typography
humanist-sans
display68px · 600
displaySmall42px · 600
displaySmall32px · 500
body16px · 400
caption14px · 400
Primary headline uses a bold, humanist sans-serif with tight line height and negative letter spacing. · Body text maintains a comfortable 1.5 line height for readability. · Buttons use a slightly heavier weight (500-600) for emphasis. · Footer text uses a smaller scale (14px) for dense information.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
88px
96px
Consistent 8px grid with generous white space between sections.
05
Surfaces
sm · 4px
md · 8px
lg · 16px
pill · 40px
1px solid rgba(0,0,0,0.1)
rgba(0,0,0,0.08) 0px 8px 24px 0px
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Standard 12-column grid with generous margins and a clear separation between header, hero, and footer sections.
07
Motion & Interaction
100msmicro
300mssmall
600msmedium
cubic-bezier(0.7, 0, 0.3, 1)easing
Smooth background position transitions for interactive elements. · Linear micro-interactions for hover states. · Cubic-bezier transitions for primary layout shifts.
Subtle background color transitions on interactive elements. · Immediate visual feedback via cursor pointer.
08
Components
buttonPill-shaped primary buttons with high-contrast accent background, and subtle outline secondary buttons.
cardNot explicitly shown in this view, but the hero image uses a rounded container.
chipNot present in this view.
inputNot present in this view.
heroSplit layout with large headline on the left and a rounded image container on the right, separated by generous white space.
09
Voice & Don'ts
ToneHelpful, professional, and direct, even when delivering error messages.
HeadlinesLarge, bold, and slightly colloquial ('Oops, this help center no longer exists') to soften the negative message.
CTAsClear, action-oriented buttons ('Read the guide', 'Free trial') with high-contrast styling.
don't use a dark background for the main content area — screenshot shows a clean white background.
don't use serif fonts for headlines — screenshot uses a humanist sans-serif for all text.
don't use low-contrast colors for primary text — screenshot uses high-contrast black on white.
don't use sharp, rectangular buttons — screenshot uses pill-shaped buttons with generous border-radius.
don't crowd the hero section with multiple elements — screenshot shows a clean split layout with generous white space.
don't use the accent color for text or backgrounds — screenshot restricts it to high-contrast buttons.
Avoid: Avoid overly technical jargon in user-facing copy.
Avoid: Avoid dense blocks of text without clear hierarchy.
Avoid: Avoid using the accent color for anything other than primary calls to action.
11
System prompt
This is a Zendesk help center page using a clean, professional design system. It features a high-contrast black and white palette with a single vibrant chartreuse accent (#D1F470) for primary calls to action. The typography is a humanist sans-serif (Vanilla Sans) with a clear hierarchy from 68px headlines down to 14px captions. The layout is a standard 12-column grid with generous white space. Critical don'ts: never use dark backgrounds for main content, never use low-contrast text, and never use the accent color outside of primary buttons.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
