Skip to content
DesignMunkDesignMunk Submit a site

Glide

glideapps.com
Turn spreadsheets into beautiful, intelligent, AI-powered apps—no coding required.
Developer Tools Software Next.js Tailwind Homepage booton Font
Share Visit site
glideapps.com DESKTOP · 1440
Glide

AI Breakdown

Design export

---
version: alpha
name: Glide
description: Turn spreadsheets into beautiful, intelligent, AI-powered apps—no coding required.
colors:
  primary: "#000000"
  secondary: "#9b9b93"
  tertiary: "#0cbdc3"
  neutral: "#ffffff"
  brand-dire-wolf: "#272829"
  brand-american-silver: "#cececf"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: bootonFont
    fontSize: 48px
    fontWeight: 575
    lineHeight: 1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: bootonFont
    fontSize: 36px
    fontWeight: 575
    lineHeight: 1.11
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: bootonFont
    fontSize: 20px
    fontWeight: 575
    lineHeight: 1.2
  headline-xs:
    fontFamily: bootonFont
    fontSize: 18px
    fontWeight: 575
    lineHeight: 1.22
  body-md:
    fontFamily: bootonFont
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: -0.013em
rounded:
  sm: 14px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 40px
  lg: 54px
  xl: 80px
components:
  button-primary:
    backgroundColor: "#171715"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 0px 14px
    height: 32px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 0px 14px
    height: 32px
  button-link:
    textColor: "#2e2e2b"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 20px 20px 16px
---

# Glide: Cutaway Factory Hero with Pill-First Interface

## Overview

Glide's UI is operational and matter-of-fact: black and white with a restrained accent, dense information set in calm spacing. The audience is teams turning spreadsheets into internal tools, so the tone stays professional rather than playful. Interfaces should feel capable, quick to scan, and slightly industrial — confident headlines, understated body text, pill actions, and large whitespace frames.

## Colors

- **primary (#000000):** Core text, headlines, and icons for highest contrast.
- **secondary (#9b9b93):** Supporting copy, meta text, and subdued UI labels.
- **tertiary (#0cbdc3):** Reserved accent for highlights, small icons, or illustrative states — not primary CTAs.
- **neutral (#ffffff):** Page and card surfaces; default background.
- **brand-dire-wolf (#272829):** Deep gray for muted headings, footers, or dark UI chrome.
- **brand-american-silver (#cececf):** Hairline borders, dividers, and control outlines.
- **surface ({colors.neutral}):** Standard surface color reference for containers.
- **on-surface ({colors.primary}):** Default text/icon color on surfaces.

## Typography

All levels use the custom Booton Font. Headline-lg 48px/1 at weight 575 (tight tracking) is the hero voice; headline-md 36px and headline-sm 20px handle section intros and callouts; headline-xs 18px works for small section headings. Body-md is 16px/1.5 at weight 450 with slight negative tracking for compact paragraphs.
Availability: Booton is self-hosted (type: custom), so agents should not assume access. Recommended substitutes with similar contemporary grotesk tone: Inter (Google), Manrope (Google), or Outfit (Google). Use system fallbacks if needed: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif. When substituting, keep the token sizes; approximate weight 575 with 600 and 450 with 500.

## Layout

Spacing runs on discrete steps: 8, 16, 40, 54, 80. Use xs/sm for element padding and control gaps; md for intra-section rhythm; lg/xl for section breaks and hero bands. A centered, wide container with generous side gutters suits the minimal palette; a 12-column grid with sm (16px) gutters keeps UI components aligned. Text blocks should cap at readable line lengths; use md (40px) between stacked blocks and xl (80px) above/below major sections.

## Elevation & Depth

Depth is minimal. A compact multi-stop sm shadow adds realism to floating elements; larger shadows are none. Inputs and app frames may use the provided inner shadow for soft depth. Most hierarchy should come from weight, contrast (#000 on #FFF), hairline borders in #CECECF, and whitespace rather than heavy blur.

## Shapes

Corners are intentionally soft. Cards and large containers use 14px (rounded.sm) for a friendly-but-professional profile. Interactive controls and primary actions are fully rounded (rounded.full) for clear affordance. Links remain square per button-link to read as textual actions.

## Components

Buttons
- Primary: #171715 background with white text, 32px height, full-radius pill, horizontal padding 14px. Use for main CTAs like Get started.
- Secondary: Text-only button using #000000 on white with full-radius hit area and 32px height; pair with a subtle #CECECF outline when needed.
- Link: Text button in #2e2e2b, unrounded; use inline inside paragraphs or lists.

Card
- White surface, black text, 14px radius, padding 20px 20px 16px. Employ sm shadow sparingly for lift.

### Builder Prompt Bar
A search-like input used in the hero. White surface, 14px radius, sm shadow or inner shadow. Contains an "Upload spreadsheet" action using the primary pill.

### App Category Pills
A horizontal set of pills (Field Operations, Inventory, etc.). Use full-radius chips with #CECECF borders. Active pill uses stronger contrast (#000 text on white); space pills with sm (16px).

### Product Screenshot Window
A large card framing UI imagery. 14px corners, soft inner shadow to imply glass; border/divider in #CECECF; md (40px) padding around the image.

### Integrations Strip
Row of partner logos on white with generous xl (80px) vertical spacing. Each logo sits in a 14px card or on bare surface with #CECECF dividers.

### Security Compliance Row
Inline links/badges (SOC 2, GDPR, CCPA). Use small chips or text buttons with #CECECF borders and body-md text.

### Testimonial Stack
Quotes in a simple grid. Headline-sm (20px) or body-md for quotes, name/title as secondary (#9B9B93). Cards use 14px radius with sm gaps.

## Do's and Don'ts

- Do keep primary actions as full-radius pills at 32px height; pair one filled (#171715) with one quiet secondary when two CTAs appear.
- Do use #CECECF for dividers and control outlines; avoid darker borders that fight the monochrome palette.
- Do reserve #0CBDC3 for small accents or illustrative elements; not for primary buttons.
- Don't introduce heavy drop shadows; stay with the provided sm shadow or inner shadow only.
- Don't mix corner radii on adjacent elements — cards at 14px, pills at full-radius for clear hierarchy.
- Don't lighten body text beyond #9B9B93; legibility falls quickly against #FFFFFF.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #FFFFFF
- Border: #CECECF
- Accent: #0CBDC3

1) Hero with prompt bar
"Create a centered hero on #FFFFFF. Set H1 in Inter (as Booton substitute) at 48px, weight 600, line-height 1, letter-spacing -0.02em, color #000000. Add a white prompt bar card (14px radius) with sm shadow: rgba(0,0,0,0.1) 0 0 2px 0, rgba(0,0,0,0.16) 0 0 1px 0, rgba(0,0,0,0.05) 0 1px 2px 0. Inside, place a primary pill button 32px high with #171715 background and #FFFFFF text, 14px horizontal padding. Use xl (80px) spacing above/below."

2) Three-up features grid
"On #FFFFFF, render three cards per row. Each card: 14px radius, padding 20px 20px 16px, border 1px solid #CECECF, sm shadow optional. Headline at 20px/1.2 weight 600 (Inter), body at 16px/1.5 weight 500. Use md (40px) gaps and lg (54px) section padding."

3) Integrations strip
"Full-width section with xl (80px) vertical padding. Place logos in a single row with sm (16px) gaps. Each logo sits in a 14px pill or bare cell with a 1px #CECECF divider. Keep text/icons #000000 and small accents #0CBDC3 only."

4) Footer columns
"Build a 12-column grid footer on #FFFFFF with column gutters 16px. Section padding xl (80px). Headings use 18px weight 600, links at 16px weight 500 in #2e2e2b. Dividers in #CECECF, no large shadows."

## Similar Brands

- Notion — similar black/white discipline and soft corners; Notion leans more editorial with serif-like spacing, while Glide is more industrial and operational.
- Airtable — crisp monochrome with restrained accents; Airtable uses brighter brand colors and denser data UI.
- Retool — utilitarian product storytelling and minimal color; Retool is more developer-centric and darker by default.
- Zapier — pill CTAs and simple layouts; Zapier introduces more orange accenting and marketing flourish than Glide's restrained tone.

More like this

Browse Developer Tools →
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 4 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 16 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 17 hours ago
adapt.com
Adapt AI
Adapt
One agent. Full control on the full-stack AI platform.
Homepage · 21 hours ago