Overview
Use a white, editorial SaaS language: large serif headlines, compact black actions, pastel secondary CTAs, rounded product panels, and calm pricing cards.
Gleap
Gleap powers modern support workflows with AI bots, live chat, bug reporting, surveys, help centers, and product roadmapping. All built to unite teams and delight users.
4.0
7
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Gleap Home design analysis
Use a white, editorial SaaS language: large serif headlines, compact black actions, pastel secondary CTAs, rounded product panels, and calm pricing cards.
Colors
Keep the page mostly white and black. Use warm off-white for product stages and pastel pink for secondary actions or feature categories. Pastel blue can support secondary category moments.
Typography
Use a high-contrast serif for hero and section titles. Use a modern grotesk for navigation, product cards, body copy, and buttons.
Layout
Center hero content with generous top space. Place product proof in a large rounded panel below the fold. Pricing and integration pages should use centered headings followed by card grids.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Editorial Support OS
An editorial SaaS design language with white space, high-contrast serif headlines, black primary actions, pastel secondary CTAs, rounded product panels, and pricing/support cards.
Clean, editorial, founder-friendly, and product-led.
Primary mode: lightcustomer support SaaSui-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Clean, editorial, founder-friendly, and product-led.
Density
4
Variance
4
Motion
2
Signals
large serif headline · white canvas · black CTA · pastel pink action · rounded product panel · chat bubble launcher
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
White Canvas
#FFFFFF
Ink Black
#000000
Warm Off White
#F5F2F0
Assistant Pink
#F1CCFF
Support Blue
#91E0FF
Muted Gray
#7B7B7B
Usage rules
Keep the page mostly white with black editorial hierarchy.
Use pastels as soft action or category blocks, not as gradients.
Reserve black fills for decisive actions and billing toggles.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
clamp(32px, 6vw, 80px)
hero_top
180px
section_gap
120px
card_gap
32px
button_padding
14px 20px
panel_padding
40px
Token Radii
Corner radii tokens with a live surface sample.
button
10px
pill
999px
card
24px
panel
32px
launcher
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Editorial serif
high-contrast, elegant, and serious
Body
Modern grotesk
clear SaaS support copy
Mono
System mono
optional for product identifiers
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
62px/1.15
Hero
Section
48px/1.15
Section
Card title
32px/1.2
Card title
Body
20px/1.4
Body
Nav
16px/1.2
Nav
Label
14px/—
Label
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 1.15 |
section | 1.15 |
card_title | 1.2 |
body | 1.4 |
nav | 1.2 |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 400 |
section | 400 |
card_title | 600 |
body | 400 |
control | 600 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use serif for hero and major section titles. · Use grotesk for navigation, cards, controls, and product copy.
Borders
Border tokens with resolved values.
Subtle
1px solid rgba(0, 0, 0, 0.16)
Card
1px solid rgba(0, 0, 0, 0.08)
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
Soft
0 20px 60px rgba(0, 0, 0, 0.08)
Launcher
0 10px 28px rgba(0, 0, 0, 0.25)
Borders
Resolved border token values.
| Property | Value |
|---|---|
subtle | 1px solid rgba(0, 0, 0, 0.16) |
card | 1px solid rgba(0, 0, 0, 0.08) |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
soft | 0 20px 60px rgba(0, 0, 0, 0.08) |
launcher | 0 10px 28px rgba(0, 0, 0, 0.25) |
Layout Principles
Center hero copy and CTAs with generous top whitespace.
Use rounded product panels below the fold as the first visual proof.
Make pricing pages calm, centered, and card-based.
Use pastel blocks for product categories inside otherwise black-and-white layouts.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#000000
Text
#FFFFFF
Border
0
Radius
{tokens.radii.button}->10px
Padding
{tokens.spacing.button_padding}->14px 20px
Min height
44px
Typography
nav
Buttons secondary
Base Attributes
Background
#F1CCFF
Text
#000000
Border
0
Radius
{tokens.radii.button}->10px
Padding
{tokens.spacing.button_padding}->14px 20px
Min height
44px
Typography
nav
Cards product panel
Feature Card
Component preview content
Base Attributes
Background
#F5F2F0
Text
#000000
Border
0
Radius
{tokens.radii.panel}->32px
Padding
{tokens.spacing.panel_padding}->40px
Shadow
none
Cards pricing
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#000000
Border
{tokens.borders.card}->1px solid rgba(0, 0, 0, 0.08)
Radius
{tokens.radii.card}->24px
Padding
{tokens.spacing.panel_padding}->40px
Shadow
{tokens.shadows.soft}->0 20px 60px rgba(0, 0, 0, 0.08)
Cards pastel feature
Feature Card
Component preview content
Base Attributes
Background
#F1CCFF
Text
#000000
Border
0
Radius
{tokens.radii.card}->24px
Padding
32px
Navigation header
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#000000
Height
96px
Item padding
8px 12px
Item radius
{tokens.radii.pill}->999px
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not use generic blue SaaS chrome.
- -Do not make the serif decorative in controls.
- -Do not crowd the hero with product screenshots above the headline.
- -Do not overuse pastel fills.