Skip to content
DesignMunkDesignMunk Submit a site

Pad

pad.ai
Faster together: team multiplayer AI workspace with shared memory.
AI Software Next.js Tailwind Homepage Geist
Share Visit site
pad.ai DESKTOP · 1440
Pad

AI Breakdown

Design export

---
version: alpha
name: Pad
description: "Faster together: team multiplayer AI workspace with shared memory."
colors:
  primary: "#5d5d5d"
  secondary: "#8b8b8b"
  tertiary: "#c026d3"
  neutral: "#ffffff"
  brand-eerie-black: "#1c1c1c"
  brand-armor-wash: "#040404"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Geist Variable
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Geist Variable
    fontSize: 31px
    fontWeight: 500
    lineHeight: 1.03
    letterSpacing: -0.012em
  headline-sm:
    fontFamily: Geist Variable
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.33
  headline-xs:
    fontFamily: Geist Variable
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.33
  body-md:
    fontFamily: Geist Variable
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
rounded:
  sm: 4.5px
  md: 10.1px
spacing:
  xs: 6px
  sm: 14px
  md: 24px
  lg: 38px
  xl: 64px
components:
  button-primary:
    backgroundColor: "#eeeeee"
    textColor: "#222222"
    rounded: "{rounded.sm}"
    padding: 13px 20px
    height: 40px
  button-secondary:
    backgroundColor: "#222222"
    textColor: "#f8f8f8"
    rounded: "{rounded.sm}"
    padding: 13px 20px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#f8f8f8"
    textColor: "#343434"
    rounded: "{rounded.md}"
    padding: 12px
---

# Pad: Inline Highlight Chips Sell Multiplayer Collaboration

## Overview

Pad's UI is confident, minimal, and text-forward. The tone is technical but approachable: monochrome base, small radii, and light shadows. Layout breathes at section edges while component density supports product screenshots and real conversation snippets. Aim for focused, collaborative energy—serious over playful, spacious over dense—so teams can scan quickly and act together.

## Colors

- primary (#5d5d5d): Default text and icon gray for body content and subdued links.
- secondary (#8b8b8b): Secondary text, placeholders, and less-important meta labels.
- tertiary (#c026d3): Accent for rare emphasis or illustrative UI moments; use sparingly.
- neutral (#ffffff): Base canvas for the light theme.
- brand-eerie-black (#1c1c1c): Strong text or backgrounds in marketing spots requiring maximum contrast.
- brand-armor-wash (#040404): Deepest black reserved for imagery or rare emphasis, not body text.
- surface ({colors.neutral}): Surfaces such as page background and large cards.
- on-surface ({colors.primary}): The text color that sits on surface elements; pairs with neutral and surface.

## Typography

All typography uses Geist Variable at medium contrast weights. Roles:
- headline-lg: 40px, 500, tight tracking; hero statements and top-of-section headlines.
- headline-md: 31px, 500; section headers and key feature leads.
- headline-sm: 24px, 500; feature titles and card headers.
- headline-xs: 18px, 500; overlines, FAQ triggers, and compact headings.
- body-md: 14px, 400; paragraphs, list items, and button labels.
Availability: Geist Variable is custom/self-hosted and not agent-loadable. Use close, free substitutes when implementing:
- Inter (Google) for neutral, versatile grotesk metrics.
- Manrope (Google) for a slightly wider, modern feel.
- Outfit (Google) for geometric clarity at large sizes.

## Layout

Spacing is asymmetric but intentional: xs 6, sm 14, md 24, lg 38, xl 64. Use xl 64 for section top/bottom padding, md 24 for intra-section blocks, and sm 14 for element gaps and list spacing. A responsive 12-column grid suits the page: center the hero and screenshots with generous gutters, collapse to a single column on mobile while preserving xl 64 between sections. Keep line lengths moderate; let imagery hang wider than text when needed.

## Elevation & Depth

Depth is restrained. Use shadow sm (rgba(0,0,0,0.04) 0 1px 2px) for small chips or sticky bars. Use shadow md (rgba(0,0,0,0.06) 0 1px 6px, rgba(0,0,0,0.16) 0 2px 32px) for floating screenshots, dialogs, and chat widgets. Larger tiers are none—hierarchy relies on tone shifts (#f8f8f8 card surfaces), spacing, and typographic scale rather than heavy elevation.

## Shapes

Corners are small and utilitarian. rounded.sm (4.5px) for buttons, small chips, and inputs keeps components crisp. rounded.md (10.1px) for cards, screenshots, and overlays softens larger blocks. Avoid mixing radii within a single component; radius signals component scale and click-target affordance.

## Components

Buttons and cards are atomic primitives; follow tokens exactly.
- Button Primary: background #eeeeee, text #222222, height 40px, padding 13px 20px, radius 4.5px. Default CTA on light surfaces.
- Button Secondary: background #222222, text #f8f8f8, same size as primary. Use for alternate or adjacent actions (e.g., "Book a demo").
- Button Link: text color #5d5d5d, no radius; inline action in paragraphs and lists.
- Card: background #f8f8f8, text #343434, radius 10.1px, padding 12px. Use for screenshots, chat snippets, and content groupings.

### Hero heading with inline chips
- Type: headline-lg (40px/500).
- Inline emphasis can be rendered as chips using background #eeeeee, radius 4.5px, and horizontal padding sm (14px). Maintain line-height 1.2 so chips align with the text baseline.

### Feature screenshot frame
- Container: card background #f8f8f8, radius 10.1px, shadow md.
- Outer margin: lg (38px) above/below the hero; inner padding md (24px) around the image.

### Integrations grid
- A responsive grid of logos, 3–6 columns desktop, 2 columns mobile.
- Gap sm (14px). Each tile is a card (radius 10.1px) on #f8f8f8 with equal padding 12px.

### Conversation thread card
- Card with shadow md for prominence.
- Header uses headline-xs (18px/500); messages and meta use body-md (14px/400).
- Action row sticks to the bottom with sm (14px) gap between icons.

### Sidebar workspace nav
- Vertical list with section labels (headline-xs 18px/500) and items in body-md.
- Row height ≈ sm+md (14px + 24px) and active state uses #eeeeee background with radius 4.5px.

### FAQ accordion
- Trigger: headline-xs 18px/500 with caret icons.
- Panel: card background #f8f8f8, padding md (24px), radius 10.1px; text body-md.

### Footer link columns
- 2–4 columns on desktop, stacking on mobile.
- Column titles use headline-xs; links use body-md with 6px (xs) vertical spacing.

## Do's and Don'ts

- Do pair the light primary button (#eeeeee) with the dark secondary (#222222) to create a clear primary/secondary action group.
- Do keep body text at body-md (14px) and limit line length; for long paragraphs, increase spacing to md (24px) between blocks.
- Do use shadow md only for floating elements like screenshots or chat widgets; keep standard cards on #f8f8f8 with minimal or no shadow.
- Don't mix rounded.sm and rounded.md within the same component; choose one per component.
- Don't introduce new accent colors; rely on tertiary (#c026d3) for rare emphasis and stay within the grayscale base elsewhere.
- Don't use #1c1c1c for long-form body text; reserve it for headlines or high-contrast moments.

## Agent Prompt Guide

Quick color reference
- Text: #5d5d5d
- Background: #ffffff
- Border/Divider: #eeeeee
- Accent: #c026d3

1) Build the hero block
- Canvas #ffffff with top/bottom padding 64px.
- Set font to Inter (Google) as a substitute for Geist Variable.
- H1: 40px, weight 500, color #1c1c1c; line-height 1.2; letter-spacing -0.025em.
- Emphasis chips: background #eeeeee, text #1c1c1c, border-radius 4.5px, padding 0 14px.
- Buttons: primary (#eeeeee bg, #222222 text) and secondary (#222222 bg, #f8f8f8 text), both 40px tall, padding 13px 20px, radius 4.5px, gap 14px.

2) Feature section with screenshot card
- Section padding: 64px top and bottom; grid: centered column max 880px.
- Heading: 31px, 500, #1c1c1c; body: 14px, #5d5d5d with 24px spacing between paragraphs.
- Screenshot wrapper: background #f8f8f8, radius 10.1px, shadow md (0 1px 6px rgba(0,0,0,0.06), 0 2px 32px rgba(0,0,0,0.16)), inner padding 24px.

3) Integrations grid
- Background #ffffff; section heading 24px/500.
- Create a responsive grid: 6 columns desktop, 3 tablet, 2 mobile; gap 14px.
- Each tile: background #f8f8f8, radius 10.1px, padding 12px; center logos on a 64px square.

4) FAQ accordion
- Triggers: 18px/500, color #1c1c1c, vertical spacing 14px.
- Expanded panel: background #f8f8f8, padding 24px, radius 10.1px; body text 14px/1.43 #5d5d5d.
- Dividers between items: 1px solid #eeeeee with 24px vertical rhythm.

5) Footer columns
- Section background #ffffff with 64px top/bottom padding.
- Titles 18px/500 #1c1c1c; links 14px #5d5d5d with 6px spacing.
- Grid: 4 columns desktop → 2 tablet → 1 mobile; use 14px gaps.

## Similar Brands

- Notion: Monochrome palette, minimal UI, and small radii; Pad is text-heavier with inline emphasis chips and lighter shadows.
- Linear: Crisp gray scale and disciplined type; Pad is less neon and favors softer card backgrounds (#f8f8f8).
- Vercel: Uses Geist across a high-contrast black/white system; Pad applies a lighter, friendlier variant with more surface tones.
- Superhuman: Focused, fast-feeling interface and grayscale marketing; Pad adds collaborative artifacts—memory and skills—front and center.

More like this

Browse AI →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 1 hour ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 1 hour ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 13 hours ago
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 13 hours ago