---
title: "Gleap design system"
variant: extended
source: https://www.gleap.ai/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/gleap-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Gleap · Design System

> A quiet canvas for AI-powered support

**Theme:** light · **Industry:** ai · **Source:** https://www.gleap.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Gleap pairs a cinematic, star-speckled dark hero with a calm, warm off-white product narrative. Oversized Switzer typography, rounded controls, and vivid gradient-backed interface mockups make the AI support workflow feel clear and approachable.

## North star

Use the contrast between a cinematic near-black opening and spacious warm-neutral product sections to make complex AI workflows feel calm and legible.

## Overview

The page opens with an expansive near-black hero that uses sparse star-like details and oversized, widely separated type to create a cinematic pause. A small, unobtrusive navigation and pill-shaped light CTA sit above the dramatic field; supporting headline and buttons appear further down the hero. The rest of the page switches to a warm off-white canvas, with dark headings and muted gray copy arranged in centered introductions, alternating two-column feature stories, and broad vertical intervals. Switzer is the dominant sans serif: regular weights, compact line spacing, and tight display tracking keep large text confident without feeling heavy. Product interface mockups are framed by bright blue, lilac, and peach gradients; these are illustrative media rather than core brand accents. White cards, quiet neutral surfaces, hairline borders, and restrained shadows preserve legibility. Pricing, FAQs, proof points, and footer links continue the spacious, low-noise rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#f6f6f3` | `--color-warm-canvas` | surface | Main page background across the product story, pricing, FAQ, and footer sections. |
| Soft Graphite | `#6f6f6e` | `--color-soft-graphite` | neutral | Muted body copy and secondary links, especially where text should recede. |
| Stone Divider | `#dbdbd2` | `--color-stone-divider` | surface | Neutral card and button fill, plus borders and dividers on light sections. |
| Night Ink | `#191919` | `--color-night-ink` | brand | Cinematic hero background, dark sections, and primary dark CTA buttons. |
| Charcoal Copy | `#353535` | `--color-charcoal-copy` | neutral | Default navigation, body copy, and understated link text. |
| Pure White | `#ffffff` | `--color-pure-white` | surface | Product cards and light controls, including the contrasting hero CTA. |
| Oat Surface | `#edede8` | `--color-oat-surface` | surface | Subtle secondary surface tone for cards, badges, and soft section details. |
| Midnight Navy | `#060d25` | `--color-midnight-navy` | semantic | Small high-contrast text and badge details; not a dominant page background. |
| Deep Charcoal | `#292929` | `--color-deep-charcoal` | neutral | Heading text and dark text on light secondary buttons or product cards. |
| Silver Haze | `#bababa` | `--color-silver-haze` | neutral | Minor low-emphasis text details; secondary measured tone rather than a defining brand color. |
| Cloud Gray | `#c0c0c0` | `--color-cloud-gray` | neutral | Small incidental neutral details in navigation and interface visuals. |
| Slate Note | `#65656d` | `--color-slate-note` | neutral | Fine-print and badge text, primarily in small UI details. |
| Quiet Pewter | `#90908e` | `--color-quiet-pewter` | neutral | Occasional subdued text and decorative interface details. |
| Blue Gray | `#9b9fae` | `--color-blue-gray` | neutral | Sparse badge or UI text detail, not a primary site-wide color. |

### Semantic aliases

`--color-canvas` → `#f6f6f3` (Warm Canvas) · `--color-surface` → `#191919` (Night Ink) · `--color-surface-2` → `#ffffff` (Pure White) · `--color-surface-3` → `#dbdbd2` (Stone Divider) · `--color-surface-4` → `#edede8` (Oat Surface) · `--color-text` → `#060d25` (Midnight Navy) · `--color-text-muted` → `#6f6f6e` (Soft Graphite) · `--color-text-subtle` → `#353535` (Charcoal Copy) · `--color-border` → `#dbdbd2` (Stone Divider)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#060d25` | `#f6f6f3` | 17.76:1 | AAA |
| `#060d25` | `#191919` | 1.09:1 | fail |
| `#060d25` | `#ffffff` | 19.23:1 | AAA |
| `#060d25` | `#dbdbd2` | 13.8:1 | AAA |
| `#6f6f6e` | `#f6f6f3` | 4.65:1 | AA |
| `#6f6f6e` | `#191919` | 3.5:1 | AA-large |
| `#6f6f6e` | `#ffffff` | 5.03:1 | AA |
| `#6f6f6e` | `#dbdbd2` | 3.61:1 | AA-large |
| `#353535` | `#f6f6f3` | 11.33:1 | AAA |
| `#353535` | `#191919` | 1.43:1 | fail |

### Gradients

- `linear-gradient(90deg, color(srgb 0 0 0 / 0), rgb(246, 246, 243))`
- `linear-gradient(90deg, rgb(25, 25, 25), rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgb(25, 25, 25))`
- `linear-gradient(90deg, rgb(6, 13, 37) 0%, rgb(6, 13, 37) 35%, rgb(164, 143, 220) 50%, rgb(6, 13, 37) 65%, rgb(6, 13, 37) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Switzer | `--font-body` | system | 400, 500, 600 | Primary display, heading, body, navigation, and link typography. | Inter |
| system-ui | `--font-system-ui` | system | 500, 600, 400, 700 | Small UI badges and compact labels within interface-like components. | Inter |
| ui-monospace | `--font-mono` | system | 600, 700, 400, 500 | Minor technical or code-like details in product UI. | Roboto Mono |

- **Switzer:** Use regular weight as the baseline; large display text is tightly tracked, with mostly sentence case.
- **system-ui:** Used selectively at stronger weights for compact labels and badge text.
- **ui-monospace:** Restrict to small technical snippets; it is a minor supporting face.

### Type scale — Perfect Fourth (ratio ≈ 1.373, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 78px | 400 | 1.06 | -0.045em | — | Switzer | Oversized hero wordmark-style phrases and high-impact display moments. |
| h1 | 45.5px | 400 | 1.15 | -0.01em | — | Switzer | Primary hero and major page-level headline. |
| h2 | 40px | 400 | 1.2 | 0 | — | Switzer | Feature, pricing, and closing section headings. |
| h3 | 27px | 400 | 1.3 | 0 | — | Switzer | Feature titles and prominent card headings. |
| h4 | 22.5px | 400 | 1.35 | 0 | — | Switzer | Smaller section and component headings. |
| body | 16px | 400 | 1.5 | 0 | — | Switzer | Feature descriptions, explanatory copy, and plan details. |
| caption | 14px | 400 | 1.5 | 0 | — | Switzer | Fine print, proof notes, and image captions. |
| nav | 14px | 400 | 1.5 | 0 | — | Switzer | Header and footer navigation labels. |
| link | 12px | 400 | 2 | 0 | — | Switzer | Compact inline links and supporting actions. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20 px.
- Section rhythm 84px · element gap 9px · card padding — · max content width 1080px.

A centered content system uses a measured maximum width of 1080px, with generous vertical section spacing and comfortable density. The opening hero occupies a large dark field; after it, content rests on a consistent light canvas. Centered section introductions lead into alternating two-column feature splits, with product imagery and copy trading sides. Pricing presents three adjacent plan cards, FAQs use a simple question list, and the close returns to a centered CTA before a multi-column footer. Keep alignments crisp and let large blank intervals separate stories.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `50%` · badge `9999px` · nav `50%` · link `5px` · xs `3px` · sm `4px` · md `5px` · lg `6px` · xl `7px` · 2xl `8px` · pill `9999px`
- Shadow `lg` (card, other): `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.22) 0px 14px 32px -18px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0.18) 0px 1px 2px 0px inset`
- Shadow `md` (other): `rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.3) 0px 10px 22px -10px`
- Shadow `lg-2` (card): `rgba(6, 13, 37, 0.06) 0px 1px 2px 0px, rgba(6, 13, 37, 0.28) 0px 12px 40px -12px`
- Shadow `hairline` (other): `rgba(16, 24, 40, 0.05) 0px 1px 2px 0px`
- Shadow `hairline-2` (other): `rgba(0, 0, 0, 0.02) 0px 1px 2px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most light sections stay visually flat, separated by whitespace and subtle neutral borders. Product cards and mockups use restrained, soft shadows to lift them from the canvas without appearing glossy. Dark pill buttons and white cards create clear contrast; use layering mainly for interface previews and the hero’s floating UI, not for stacked decoration.

## Imagery

Product UI mockups carry the visual storytelling: clean white interface panels are placed over vivid blue, lilac, and peach gradient backdrops. These colorful treatments belong to illustrative product imagery, not the core page palette. The hero instead uses sparse star-like lights against near-black, with no conventional photography. Frame interface captures as clear, rounded panels and preserve readable UI details.

## Components

### Pill CTA

Fully rounded actions use a dark #191919 fill with white text for primary calls, or a pale neutral/light fill for secondary actions.

### Hero navigation

Compact, low-contrast links sit across the top of the dark hero, balanced by a small logo and bright rounded Start free action.

### Product preview card

White interface panels with rounded corners sit over vivid gradient imagery; use subtle shadowing and keep the mock UI legible.

### Feature split

Alternate a concise heading and explanatory copy with a single product visual in a two-column row; use a dark pill action where relevant.

### Pricing cards

Three adjacent white plan cards organize tier name, price, short description, feature list, and a rounded action.

### FAQ rows

A plain question list uses thin neutral separators and small disclosure indicators, with no heavy card chrome.

### Footer directory

A light, softly tinted panel groups product, resource, company, and alternative links into compact columns.

### Measured component styles

- **Primary button** (“Explore AI investigations”): background #191919 · text #ffffff · radius 200px · padding 0px 24px · 400 16px Switzer
- **Secondary button** (“Start free”): background #dbdbd2 · text #292929 · radius 200px · padding 0px 24px · 400 16px Switzer
- **Link** (“No. 01 Kai Support Answers customers”): transparent background · text #292929 · radius 0px · padding 0px · 400 16px Switzer
- **Card** (“No. 01 Kai Support Answers customers”): background #ffffff · text #292929 · border 1px solid #ddddda · radius 16px · padding 0px · 400 16px Switzer · shadow rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.22) 0px 14px 32px -18px
- **Badge** (“#147021”): background #fafaf8 · text #65656d · radius 7px · padding 4px 8px · 600 12px system-ui
- **Navigation item** (“Login”): transparent background · text #353535 · radius 0px · padding 0px · 400 14px Switzer

## Do

- Keep the hero near-black and visually cinematic.
- Use the warm off-white canvas for the long-form product narrative.
- Use Switzer-like sans-serif type with restrained regular weights.
- Reserve bright gradients for product interface illustrations.
- Give section transitions generous breathing room.
- Use rounded pill actions and subtle card edges.

## Don't

- Do not spread illustration colors across the core interface palette.
- Do not crowd the page with dense paragraphs or tight section spacing.
- Do not use heavy shadows as a default card treatment.
- Do not make every section a boxed card grid.
- Do not style navigation louder than the hero headline.
- Do not use decorative display fonts or all-caps headings.

## Agent prompt

Build a new SaaS page in Gleap’s visual language. Use Warm Canvas (#f6f6f3) as the main content background and Night Ink (#191919) for a dramatic opening or key CTA. Set headings in a Switzer-like sans serif, with regular weights, tight tracking on large display text, and clear muted supporting copy in Charcoal Copy (#353535) or Soft Graphite (#6f6f6e). Create spacious, centered sections with alternating two-column product stories and a restrained three-card pricing area. Use white product panels over vivid gradients only as illustrative media, not as global UI colors. Keep borders quiet, shadows soft, corners rounded, and actions pill-shaped. Prioritize legibility, generous separation, and calm contrast over decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark canvas with compact top navigation and expansive centered hero field. | top navigation, scroll cue, floating support launcher | near-black background, star-speckled media, light pill CTA |
| 2 | logo-cloud | Single horizontal band of customer marks beneath the dark hero. | social proof | logo strip, dark background |
| 3 | product-showcase | Centered heading and intro above a wide product preview with small supporting labels. | product walkthrough, role switching | white interface panel, gradient media frame, caption |
| 4 | feature-split | Two-column feature story pairing evidence-focused copy with a product visual. | in-app bug reporting, investigation workflow | split layout, product mockup, dark action |
| 5 | feature-split | Two-column feature story with prioritization interface and explanatory copy. | customer feedback context, feature prioritization | ranked product card, gradient media, pill action |
| 6 | feature-split | Two-column feature story pairing code review copy with a code-oriented product visual. | ticket-to-code flow, human review | code interface mockup, rounded media frame, dark action |
| 7 | feature-split | Two-column story with customer update mockup and supporting explanatory copy. | automatic follow-up, ticket status updates | message preview, gradient media, pill action |
| 8 | stats | Two-column proof section with performance story, supporting visuals, and actions. | customer case study, results proof | metric-led copy, case study link, rounded CTA |
| 9 | testimonials | Two-column testimonial and quantified customer outcome. | customer quote, outcome statistic | quote text, attribution, supporting imagery |
| 10 | pricing | Three adjacent plan cards under a left-aligned section heading. | plan comparison, free trial selection | tier cards, feature lists, rounded buttons |
| 11 | faq | Single-column accordion list with category label and aligned questions. | expandable answers, question navigation | disclosure indicators, thin separators |
| 12 | cta | Centered closing message with small agent illustrations and paired actions. | final conversion, pricing shortcut | centered headline, agent cards, pill buttons |
| 13 | footer | Multi-column link directory inside a light panel, followed by a compact legal row. | site navigation, region selection | link columns, brand mark, subtle top accent |

## Source CSS custom properties (selected)

```css
--_colors--surface---surface-1: #f6f6f3;
--_colors--text---text-body: #353535;
--_typography--typefaces---default-font-weight: 400;
--_colors--text---text-heading: #292929;
--_spacing--gap---gap-3: 9px;
--_spacing--gap---gap-4: 12px;
--_colors--surface---text-heading<deleted|variable-f44b3f07-8efd-6c7b-852b-7fbb3771065b>: #191919;
--_spacing--gap---gap-2: 6px;
--_button---button-radius-medium: 200px;
--_colors--button---button-background-primary: #191919;
--_colors--button---button-text-primary: white;
--_colors--surface---surface-3: #dbdbd2;
--_tiles--text---tile-small-text-size: 14px;
--_colors--core---neutral-0: white;
--_colors--core---neutral-950: #191919;
--_spacing--gap---gap-6: 24px;
--_spacing--gap---gap-10: 72px;
--_spacing--gap---gap-5: 18px;
--_spacing--gap---gap-7: 36px;
--_border-radius---radius-medium: 12px;
--_colors--surface---surface-2: #edede8;
--_spacing--gap---gap-8: 48px;
--_spacing--gap---gap-9: 60px;
--_colors--text---text-heading-muted: color-mix(in srgb, #292929 50%, transparent);
--_spacing--section---section-padding-medium: 84px;
--_spacing--section---section-padding-large: 168px;
--_spacing--section---section-pading-small: 42px;
--_colors--text---text-body-muted: color-mix(in srgb, #353535 70%, transparent);
--_navigation---navbar-items-gap: 24px;
--_navigation---navbar-links-gap: 24px;
--_spacing--gap---gap-1: 3px;
--_border-radius---radius-small: 6px;
--_border-radius---radium-extra-small: 3px;
--_colors--dropdown---dropdown-background: white;
--_colors--core---neutral-1000: #000;
--_colors--border---border-default: #0000001f;
--_navigation---navbar-notch-radius: 12px;
--_colors--surface---surface-4: #d0d0c8;
--_form---text-input-height: 48px;
--_form---text-input-padding: 12px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/gleap-io