CURATED · OPEN · FREE

Gleap

AI agents that automate support, feedback, and development tasks

SaaSAIProductCleanRestraint

↓ Download design system (13 MB)Open in OpenDesign

Visit: https://gleap.io

📦 Browse pack contents →

Identity DNA

AI supportself-driving developmentproductivitySaaS

A professional, capable AI team member integrated into your workflow

Color

#353535Ink

#292929Ink soft

#F6F6F3BG

#EDEDE8BG soft

#FFFFFFBG quiet

rgba(53,53,53,0.5)Muted

rgba(53,53,53,0.12)Line

Warm neutrals with high contrast for clarity

Typography

humanist-sans · monospace

display-lg64px · 400
display-sm32px · 400
body-lg22px · 400
body16px · 400
caption14px · 400

Use humanist sans-serif for all text · Maintain tight letter-spacing on large display text · Keep body text at 16px base for readability

Spacing

4px

8px

16px

18px

24px

32px

60px

84px

Consistent 4px base grid with generous vertical spacing

Surfaces

sm · 6px

md · 12px

lg · 200px

pill · 999px

1px solid rgba(53,53,53,0.12)

0px 18px 55px 0px rgba(16,24,40,0.12) · 0px 1px 3px 0px rgba(0,0,0,0.15) · 0px 0px 20px 0px rgba(0,0,0,0.1)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered single-column layout for content, wide grid for pricing cards

Motion & Interaction

200msmicro

200mssmall

200msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth opacity and background-color transitions on hover · Transform transitions for interactive elements

Subtle background color changes and opacity adjustments · Immediate visual feedback with no delay

Components

button Pill-shaped buttons with dark backgrounds for primary actions, light backgrounds with dark borders for secondary
card Clean cards with subtle backgrounds (green tint for highlighted), no heavy borders
chip Small rounded badges for features and tags
input Simple text fields with minimal styling
hero Large centered headline with supporting text and prominent CTA buttons

Voice & Don'ts

Tone Professional yet approachable, confident in AI capabilities
Headlines Clear, benefit-focused statements with period punctuation
CTAs Action-oriented with clear value proposition (e.g., 'Start 14-day free trial')

Don't use neon or saturated accent colors — screenshot shows muted, warm neutrals only
Don't use serif fonts — screenshot shows consistent humanist sans-serif throughout
Don't create heavy visual hierarchy with color — screenshot uses weight and size, not color
Don't add decorative borders or heavy shadows — screenshot uses subtle borders and minimal shadows
Don't use complex gradients — screenshot shows flat, warm background colors
Don't overcrowd the layout — screenshot maintains generous whitespace and breathing room
Avoid: Technical jargon
Avoid: Overly casual language
Avoid: Unclear value propositions

Inside the pack — real screenshots

Gleap — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Gleap.io is a SaaS platform offering AI-powered support and development tools. The design uses a warm, neutral palette with #F6F6F3 as the primary background, #353535 for primary text, and #EDEDE8 for subtle contrast. Typography is humanist sans-serif (Switzer) with tight letter-spacing on large display text (64px). Key elements: pill-shaped buttons with dark backgrounds for primary actions, generous 84px vertical padding, and a clean centered layout. Critical donts: never use neon colors, never use serif fonts, never overcrowd the layout with decorative elements. The design prioritizes clarity and professionalism over visual complexity.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko