Skip to content
DesignMunkDesignMunk Submit a site

Handhold

handhold.io
Handhold agents— a dedicated guide for every buyer, 24/7
AI Software Next.js Tailwind Homepage
Share Visit site
handhold.io DESKTOP · 1440
Handhold

AI Breakdown

Design export

---
version: alpha
name: Handhold
description: Handhold agents— a dedicated guide for every buyer, 24/7
colors:
  primary: "#000000"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: ui-sans-serif
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: system-ui
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.04
  headline-sm:
    fontFamily: ui-sans-serif
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.22
  headline-xs:
    fontFamily: ui-sans-serif
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.21
  body-md:
    fontFamily: ui-sans-serif
    fontSize: 16px
    fontWeight: 400
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Handhold: Monochrome UI Framed by a Ribbon Gradient

## Overview

Handhold targets B2B SaaS teams evaluating AI agents for sales and onboarding. The interface is intentionally minimal: black text on white surfaces, thin dividers, and generous spacing. The tone is confident yet practical—closer to documentation than marketing. Layouts are spacious rather than dense, with short paragraphs and repeated CTAs for forward flow.

## Colors

- **Primary (#000000):** Core ink for text and high-priority actions.
- **Neutral (#ffffff):** Page and card background; the default surface.
- **Border (#e5e7eb):** Subtle dividers and outlines for structure.
- **Surface ({colors.neutral}):** Alias of Neutral; use for sections and cards.
- **On-surface ({colors.primary}):** Alias of Primary; text/icons on light backgrounds.

## Typography

This system relies on platform UI stacks for speed and legibility. Headings and body use system sans-serif families, avoiding web-font costs.
- Headline LG (ui-sans-serif, 32px/1.19, 700): Section and hero headlines where emphasis is needed.
- Headline MD (system-ui, 27px/1.04, 400): Large subheads and stat numbers.
- Headline SM (ui-sans-serif, 23px/1.22, 400): Feature headings and accordion titles.
- Headline XS (ui-sans-serif, 19px/1.21, 400): Minor section labels.
- Body MD (ui-sans-serif, 16px, 400): All running copy and button labels.
Availability and substitutes: ui-sans-serif and system-ui are native stacks (no loading required). For consistent cross-platform rendering, Roboto (Google) can be loaded; common system fallbacks are Helvetica Neue and Arial. Emoji support is provided by Noto Color Emoji (Google).

## Layout

Spacing follows a 4px increment scale (4, 8, 12, 16, 20). Build rhythm with consistent multiples: xs for tight element pairs, sm–md for in-component gaps, lg–xl for section padding and vertical breathing room. Grids are simple two- and three-column arrangements that collapse to a single column on small screens. Dividers using the Border color separate content groups and keep sections readable without adding fills.

## Elevation & Depth

All measured shadows are none. Hierarchy is conveyed with whitespace, type scale, and thin borders (#e5e7eb). Cards remain on the white surface; emphasis comes from proximity, bold headings, and the black primary button rather than elevation.

## Shapes

Corners are understated and purposeful: 4px for interactive controls and chips, 8px for cards and larger containers. Link buttons are square (0px) to read as inline text actions. Consistent radii communicate a pragmatic, product-first voice.

## Components

Buttons
- Primary: background #000000, text #ffffff, height 40px, 8px×16px padding, 4px radius. Use for the main CTA ("Try for free", "Start demo").
- Secondary: text #000000, transparent background, 40px height, 8px×16px padding, 4px radius. Use where a quieter action is needed.
- Link: text #000000, no background, 0px radius. Use inline or in dense lists.
Card
- Background #ffffff, text #000000, 16px padding, 8px radius. Use for testimonials, FAQs, and compact content blocks.

### Announcement Bar
- Full-width strip at the top with On-surface text on Surface. Keep height compact and separate from the header with a Border divider.

### Header Navigation with CTA
- Left logo, right nav links plus a Primary button. Horizontal gaps use lg (16px). Sticky behavior optional; color scheme stays surface white with ink text.

### Hero with Ribbon Illustration
- Headline set in Headline LG, short Body MD subcopy, and two actions: Primary and Secondary. Keep vertical gaps at md–lg and maintain ample white space around the decorative ribbon image.

### Customer Logo Cloud
- Single row of grayscale client marks. Use md gaps horizontally and a top/bottom Border divider to contain the strip.

### Metrics and Testimonial Split
- Left column: two stat callouts using Headline MD for numerals and Body MD for qualifiers. Right column: quote inside a Card, author details beneath.

### Agent Capability Cards
- Three consecutive sections ("Inbound Q&A", "Demo agent", "Onboarding agent"). Each uses Headline SM titles, Body MD bullets, and md gaps. Optional Card if visual grouping is needed.

### Get Started Stepper
- Title with Headline LG; three numbered steps as a vertical list. Each step uses Headline XS for the number/label and Body MD for explanation; separate steps with Border dividers and md spacing.

### FAQ Accordion
- Each item title in Headline SM, answer in Body MD. Use top/bottom Border dividers and md internal padding; no shadows.

## Do's and Don'ts

Do
- Use #000000 on #ffffff as the default contrast pair and #e5e7eb for all dividers.
- Reserve the Primary button for the single next step on each section.
- Build spacing with the 4–20px scale; prefer md–xl between blocks, sm–md within components.
- Keep corners consistent: 4px for buttons, 8px for cards.

Don't
- Introduce extra brand colors or gradients inside UI elements; keep accents to imagery only.
- Add shadows; rely on borders and whitespace for separation.
- Mix additional fonts; stick to system UI stacks or Roboto if a web font is required.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent/CTA: #000000

1) Hero with two CTAs
- Section background #ffffff. H1 uses Headline LG (ui-sans-serif, 32px, 700), subcopy Body MD (ui-sans-serif, 16px, 400). Primary button: background #000000, text #ffffff, height 40px, padding 8px 16px, radius 4px. Secondary button: text #000000, transparent background, height 40px, padding 8px 16px, radius 4px. Use md spacing between text and buttons; lg padding around the block. Include a decorative image placeholder below the CTAs.

2) Customer logo strip
- Container background #ffffff with a top and bottom 1px divider in #e5e7eb. Place 6–8 logos centered with md horizontal gaps and sm vertical padding. All logos render in monochrome; no color fills.

3) Metrics + testimonial split
- Two columns on wide screens, one on small. Metric numbers use Headline MD (system-ui, 27px, 400); qualifiers use Body MD (ui-sans-serif, 16px). Testimonial sits in a Card: background #ffffff, text #000000, padding 16px, radius 8px; add a 1px border in #e5e7eb around the card.

4) Get started stepper (1–3)
- Title in Headline LG. Each step label in Headline XS (19px) with explanatory Body MD text beneath. Separate steps with a 1px #e5e7eb divider and md vertical spacing; keep the whole block on #ffffff.

5) FAQ accordion
- Each question line uses Headline SM (23px) with a chevron icon. Answer reveals in Body MD. Item container has 16px padding, a 1px #e5e7eb top border, and no shadow. Buttons or links inside answers use the Link button style (text #000000, radius 0).

## Similar Brands

- Vercel — Black-and-white minimalism with sharp dividers; Vercel leans darker and more developer-centric.
- Linear — Taut spacing and strict monochrome UI; Linear uses more gray panels and motion.
- Notion — Quiet type and lots of white; Notion introduces soft gray surfaces more often.
- Intercom — Clear proof and product-led sections; Intercom employs more color and illustration across components.

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 · 12 hours ago
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 12 hours ago