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

# Glide · Design System

> Quiet monochrome meets vivid, practical software

**Theme:** light · **Industry:** saas · **Source:** https://www.glideapps.com/ · **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._

Glide pairs a restrained monochrome canvas with oversized product imagery and generous whitespace. The homepage moves from an AI app-building hero through capabilities, integrations, security, testimonials, and a bold photographic closing CTA.

## North star

Keep the interface monochrome and spacious, letting real product screens—not decorative color—carry the visual interest.

## Overview

The visual system is built on white space, near-black text, and a limited set of soft gray surfaces. Black is reserved for strong headings, primary actions, and a few high-contrast bands; muted gray supports explanatory copy, while pale hairlines quietly separate controls and content. BootonFont carries most of the interface, with compact navigation and body copy balancing large, tightly tracked display headings. AffairsFont adds a distinct editorial note to select heading roles. The page is spacious and predominantly single-column or split-layout, with centered treatments for integrations and template discovery. Product UI screenshots and demos are the central imagery, supported by workplace photography, customer portraits, and colorful app icons. Those saturated colors belong mostly to product imagery rather than the core brand palette. Rounded controls and cards soften the otherwise crisp, minimal presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and light surfaces; also appears in reverse text and subtle fades. |
| Soft Graphite | `#5c5c5c` | `--color-soft-graphite` | neutral | Muted body copy, secondary links, and supporting explanatory text. |
| Warm Hairline | `#edede8` | `--color-warm-hairline` | semantic | Main subtle border tone for cards, links, and controls. |
| Charcoal Fade | `#303030` | `--color-charcoal-fade` | neutral | Dark endpoint of a measured gray gradient, mainly in decorative or media treatment. |
| Linen Surface | `#f5f5f2` | `--color-linen-surface` | surface | Pale warm gray card background, especially behind product and app interface previews. |
| Silver Panel | `#bfbfbf` | `--color-silver-panel` | surface | Neutral gray surface seen in supporting media and product-preview areas. |
| Slate Copy | `#525252` | `--color-slate-copy` | neutral | Secondary text tone within supporting interface and content. |
| Soft Black | `#171715` | `--color-soft-black` | brand | Primary dark surface, CTA fill, and dark text on light controls. |
| Mist Gray | `#a3a3a3` | `--color-mist-gray` | neutral | Light endpoint of the measured gray gradient; largely decorative. |
| Ink | `#000000` | `--color-ink` | brand | Headlines, navigation, primary text, and selected interface labels. |
| Stone Line | `#999991` | `--color-stone-line` | neutral | Secondary border or link detail; not a dominant page color. |
| Deep Teal | `#066266` | `--color-deep-teal` | accent | Small Hiring badge text only; an isolated interface accent. |
| Night Panel | `#0d0d0d` | `--color-night-panel` | brand | Dark security section background and reverse content surface. |
| Quiet Gray | `#9e9e9e` | `--color-quiet-gray` | neutral | Secondary interface text; low prominence in the overall page. |
| Warm Ink | `#242421` | `--color-warm-ink` | neutral | Dark secondary links, including integration labels. |
| Ash Text | `#575757` | `--color-ash-text` | neutral | Minor supporting copy tone, not a defining brand surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f2` (Linen Surface) · `--color-surface-2` → `#bfbfbf` (Silver Panel) · `--color-surface-3` → `#171715` (Soft Black) · `--color-surface-4` → `#0d0d0d` (Night Panel) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#5c5c5c` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#edede8` (Warm Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f5f5f2` | 19.23:1 | AAA |
| `#000000` | `#bfbfbf` | 11.42:1 | AAA |
| `#000000` | `#171715` | 1.17:1 | fail |
| `#5c5c5c` | `#ffffff` | 6.69:1 | AA |
| `#5c5c5c` | `#f5f5f2` | 6.12:1 | AA |
| `#5c5c5c` | `#bfbfbf` | 3.64:1 | AA-large |
| `#5c5c5c` | `#171715` | 2.68:1 | fail |
| `#ffffff` | `#f5f5f2` | 1.09:1 | fail |
| `#ffffff` | `#bfbfbf` | 1.84:1 | fail |

### Gradients

- `linear-gradient(to right bottom in oklab, rgb(163, 163, 163) 0%, rgb(48, 48, 48) 100%)`
- `linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%)`
- `linear-gradient(270deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| bootonFont | `--font-body` | webfont | 450, 600, 575, 500 | Primary display, navigation, body copy, captions, links, and buttons. | Inter |
| affairsFont | `--font-affairsfont` | webfont | 450 | Select secondary display headings and editorial-style feature titles. | DM Sans |

- **bootonFont:** Mostly regular to semibold weights; headings use tight negative tracking, with natural sentence case.
- **affairsFont:** Measured regular weight; use sparingly to contrast the dominant geometric sans.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 575 | 1 | -0.02em | — | bootonFont | Large hero or campaign statement. |
| h1 | 56px | 575 | 1.2 | -0.02em | — | bootonFont | Primary page headline and prominent section headline. |
| h2 | 48px | 575 | 1 | -0.02em | — | bootonFont | Major feature and content-section headings. |
| h3 | 36px | 450 | 1.2 | -0.01em | — | affairsFont | Secondary editorial-style feature heading. |
| h4 | 27px | 450 | 1.2 | 0 | — | affairsFont | Smaller feature or card heading. |
| body | 16px | 450 | 1.4 | -0.01em | — | bootonFont | Explanatory paragraphs and primary supporting copy. |
| caption | 14px | 450 | 1.3 | -0.01em | — | bootonFont | Compact labels and image or card details. |
| button | 14px | 575 | 1.3 | -0.01em | — | bootonFont | Primary and secondary CTA labels. |
| nav | 14px | 450 | 1.3 | -0.01em | — | bootonFont | Header navigation and menu items. |
| link | 14px | 450 | 1.3 | -0.01em | — | bootonFont | Text links, integration labels, and inline actions. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 5, 6, 8, 11, 12, 16, 20, 24, 40, 52, 128 px.
- Section rhythm 128px · element gap 8px · card padding — · max content width 1336px.

Use a centered content frame capped at the measured 1336px maximum width, with generous section spacing and a spacious overall density. The hero is centered, while feature stories alternate between aligned text and broad product media. Several sections use simple two-column or multi-column structures; integrations and template discovery return to centered composition. Keep large white gaps between major content blocks, with occasional full-width dark bands and image-led closing content.

## Shape & elevation

- Radius: button `8px` · card `8px` · media `7px` · badge `9999px` · nav `6px` · link `9999px` · xs `6px` · sm `8px` · md `11px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `sm` (link, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 2px 0px, rgba(0, 0, 0, 0.16) 0px 0px `
- Shadow `inset` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px -4px 44px 0px inset, rgba(255, 255, 255, `
- Shadow `hairline` (other, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(3.63549 -0.00000745058 0.00000298023 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.01) 0px 106px 43`
- Shadow `hairline-2` (input): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(23, 23, 21) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 4.67594px 14.0278px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat, relying on whitespace and thin pale borders rather than pronounced shadows. Cards use measured rounded corners and occasional restrained inset or soft shadows, especially around product UI. Layered preview frames and floating input controls create depth without making the overall interface feel glossy.

## Imagery

Favor crisp product screenshots, app previews, and demo video as the primary visual language. Frame software inside quiet light surfaces, often with rounded corners and subtle separation from the white canvas. Use workplace photography and customer portraits in testimonial and closing sections. Bright icon colors appear inside app illustrations and interface previews; do not promote them into the site-wide palette.

## Components

### Header navigation

Minimal horizontal header with black wordmark, compact links, login action, outlined contact control, and dark rounded Get started CTA.

### Hero builder prompt

Centered headline and muted supporting copy above a broad product media stage; a white prompt input with upload action and circular submit affordance overlays the preview.

### Pill controls

Rounded navigation and CTA controls use compact BootonFont labels; primary action uses #171715 with #ffffff text.

### Product feature cards

Product stories combine image or video previews with concise labels and descriptions; cards use #f5f5f2 surfaces and measured 8px rounding.

### Integration list

Centered heading and brief copy above compact integration names and icons, followed by a subdued rounded exploration action.

### Security band

Full-width #0d0d0d section pairs light text and security CTA with certification-style marks and restrained contrast.

### Footer directory

Dense multi-column link directory on a light surface, with small labels, grouped product links, and a compact legal and utility row.

### Measured component styles

- **Primary button** (“Get started”): background #171715 · text #ffffff · radius 3.35544e+07px · padding 0px 20px · 575 14px bootonFont
- **Secondary button** (“Events”): background #ffffff · text #171715 · radius 3.35544e+07px · padding 8px 16px · 500 14px bootonFont · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Platform”): transparent background · text #2e2e2b · radius 0px · padding 5px 0px · 450 14px bootonFont
- **Input**: transparent background · text #171715 · radius 0px · padding 0px · 450 16px bootonFont · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“Ask Glide Review inventory outliers Brai”): background #f5f5f2 · text #000000 · radius 8px · padding 0px · 450 16px bootonFont
- **Badge** (“Hiring”): background #cefafc · text #066266 · radius 3.35544e+07px · padding 5px 7px · 600 12px bootonFont
- **Navigation item** (“Product Enterprise Customers Resources P”): transparent background · text #000000 · radius 0px · padding 0px · 450 16px bootonFont

## Do

- Keep the core interface palette monochrome and restrained.
- Use generous whitespace between major sections.
- Make product previews the primary visual focus.
- Use near-black for headings and high-priority actions.
- Use muted gray for supporting copy, not competing headlines.
- Keep buttons and cards softly rounded.
- Reserve saturated colors for product imagery and app icons.

## Don't

- Do not add a bright site-wide accent color.
- Do not crowd the layout with dense decoration.
- Do not use heavy shadows as the default card treatment.
- Do not make every section a centered text block.
- Do not let screenshots overwhelm their surrounding whitespace.
- Do not use decorative gradients as a primary brand motif.

## Agent prompt

Build a new page in Glide’s visual language: use a clean #ffffff canvas, #000000 headings, and #5c5c5c supporting copy. Use #171715 for the primary CTA and #edede8 for quiet borders; reserve #0d0d0d for an occasional full-width contrast band. Keep layouts spacious within the measured 1336px maximum content width, mixing centered introductions with aligned feature splits and broad product previews. Use BootonFont or a close sans-serif substitute for most interface text, with tight heading tracking and compact navigation. Give buttons and cards soft rounded corners, but keep surfaces largely flat. Use real product UI, app screens, and relevant workplace photography; let saturated colors remain inside these visuals rather than expanding the brand palette. Build clear section rhythm, concise copy, and unobtrusive interactions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and prompt above a broad, layered product showcase. | Describe-and-build input, Upload spreadsheet, Selectable app categories | Oversized black headline, Floating white prompt, Layered app preview |
| 2 | logo-cloud | Single horizontal row of customer marks on white. | Customer trust signal | Muted wordmarks, Even horizontal distribution |
| 3 | feature-grid | Section intro above a row of three image-led feature cards. | Feature carousel controls, Explore product link | Left-aligned title, Three rounded media cards, Compact captions |
| 4 | how-it-works | Two-column section with title and steps beside a large product demo. | Expandable process steps, Spreadsheet upload explanation | Left text column, Right media panel, Subtle dividers |
| 5 | product-showcase | Intro copy above a broad desktop-and-mobile product demonstration. | Responsive product viewing | Large interface media, Open white canvas |
| 6 | integrations | Centered heading, supporting text, integration names, and exploration action. | Explore integrations | Compact logo labels, Centered rounded action |
| 7 | feature-split | Dark full-width band with copy on the left and security marks on the right. | Explore security details | #0d0d0d background, Light text, Certification-style emblems |
| 8 | gallery | Loose centered arrangement of colorful app icons on white. | Visual browsing | Colorful rounded-square icons, Open spacing |
| 9 | product-grid | Centered title, short explanation, and app-store action. | Explore app templates | Centered typography, Compact pill action |
| 10 | testimonials | Section heading above a horizontally browsable row of testimonial cards. | Carousel navigation, Customer proof | Photo-led cards, Overlaid quote text |
| 11 | other | Centered quotation and portrait on a spacious white background. | Leadership statement | Editorial serif-like quote, Small centered portrait |
| 12 | cta | Full-width photographic CTA with large white text over the image. | Start with a spreadsheet | Workplace photo backdrop, Large white headline |
| 13 | footer | Five-column link directory followed by a compact utility and legal row. | Browse grouped links, Legal and utility navigation | Small typography, Multi-column lists, Dense footer |

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