Skip to content
DesignMunkDesignMunk Submit a site

Communicate

communicate.so
AI customer support with a human—answers from your help content.
AI Software Next.js Tailwind Homepage Inter Tight Jet Brains Mono
Share Visit site
communicate.so DESKTOP · 1440
Communicate

AI Breakdown

Design export

# Design brief: the Communicate design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/10/03063140/communicate-so-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/10/03063140/communicate-so-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/communicate/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Communicate: Blue-accent split hero with live Q&A demo

## Overview

A crisp, technical UI with restrained color: black text on white surfaces and a single blue accent for actions and highlights. The tone is confident and instructional, balancing automation with human oversight. Spacing is generous and sections are well bounded by wide gutters and large corner radii, aiming for clarity over spectacle. Use this style to feel trustworthy, measured, and product-forward rather than promotional.

## Page Structure

- Promo bar: thin full-width strip announcing the lifetime deal above the header.
- Header: left-aligned logotype and simple nav; right stack of actions (Book Demo, Sign in, accent CTA). Compact height with clear separation from content.
- Hero: two-column split—left oversized display headline, short paragraph, primary CTA plus text link; right animated/pictographic chat graphic with small labels and an autoplay control.
- Live Q&A demo: centered heading and explanatory line above an interactive chat/input panel that shows a short question/answer transcript and a small action row.
- Feature chooser band: a row of compact tiles showcasing data sources, allowed tasks, reply style, and file drop—dense, utility-led.
- "Three steps" section: horizontal row of three step cards with numbers, short headings, and concise copy.
- Capabilities list: a condensed list/grid of six benefit items, each with a short heading and sentence; more text-driven than visual.
- Logo/usage proof: a wide, airy wall mixing team types and customer logos in grouped rows.
- Four showcase sections (01–04): alternating media/text panels with a numbered rail and links to deeper pages; include a chat vignette and cited-answer example.
- Solutions grid and demo CTA: link cards for audience types followed by a compact, centered "Talk it through" card with button.
- FAQ: accordion list of eight items in a single column.
- Final CTA band: centered headline with primary CTA and secondary link; brief pricing note.
- Footer: multi-column sitemap (Product, Solutions, Company, Legal, Resources) with copyright and back-to-top link.

## Colors

- Primary (#15171a): Deep ink for headlines, paragraphs, and icons.
- Tertiary (#3567e0): Blue accent for primary actions, links, and interactive highlights.
- Neutral (#ffffff): Paper white used for page background and most surfaces.
- Surface (#ffffff): Alias of neutral; use for cards and elevated sections.
- On-surface (#15171a): Alias of primary; text and icon color when placed on surface.

## Typography

- Inter Tight (Google; freely available): Display family for headlines and UI overlines. Use headline-lg at 80px/1.04/500 with -0.054em tracking for the main H1. Headline-md at 58px/1.07/500 suits section leads, while headline-sm (20px/1.6/400, -0.02em) and headline-xs (18px/1.22/400) handle overlines, captions, and compact headings. Substitutes when needed: Inter, SF Pro, or Helvetica Neue.
- JetBrains Mono (Google; freely available): Body and UI copy at 16px/1.5/400 (body-md). Use for paragraphs, labels, and meta text to give a precise, technical tone. Substitutes: IBM Plex Mono, Fira Mono, Menlo.
- Pairing guidance: keep headings in Inter Tight and running copy in JetBrains Mono; avoid mixing weights heavily—500 for display, 400 for body—so the page reads calm and consistent.

## Layout

- Spacing scale: xs 6px for tight control groups; sm 16px for inline gaps and small paddings; md 28px for intra-section spacing; lg 40px for section gutters and card padding stacks; xl 100px for vertical section breaks.
- Grid: most sections resolve to a two-column split at wide viewports, switching to a single column on small screens. Rows of cards (steps, solutions, logos) use equal-width columns with md or lg gutters.
- Content width: keep long text blocks narrow and use md line-height for comfortable reading in monospace. Cards use the 24px internal padding defined by the card component.

## Elevation & Depth

- Shadows are minimal: sm is suitable for small floating elements like menus; md provides a soft lift for large demo cards. Large shadows are off; hierarchy relies on white surfaces, 1px rules, and spacing rather than heavy blur.
- Use tonal contrast (primary on neutral) and size to separate layers; reserve shadow only where interaction benefits from lift.

## Shapes

- Small radius (5px) for controls and inputs, communicating precision and clickability.
- Large radius (32px) for cards and major surfaces, signaling container groups and giving sections a friendly but still technical silhouette.
- Keep radii consistent within a component; do not mix 5px and 32px on the same element.

## Components

- Buttons
  - Primary (background #ffffff, text #15171a, 5px radius, 39px height, 14px×12px padding) for light, high-contrast actions on colored or busy grounds.
  - Secondary (background #3567e0, text #ffffff, 5px radius, 39px height, same padding) for the main CTA in hero and sticky contexts.
  - Link (text #15171a, radius 0) for inline actions and quiet secondary links.
- Card
  - Background #ffffff, text #15171a, 32px radius, 24px internal padding. Use md shadow sparingly for demos.

### Promo Bar
Thin full-width strip above the header announcing deals; text in #15171a on #ffffff with minimal height and sm (16px) horizontal padding.

### Global Nav with Action Cluster
Compact header with left logotype and center nav links; right side shows Book Demo, Sign in, and a blue (#3567e0) CTA. Controls use 5px radius and 39px height.

### Split Hero with Graphic
Two-column layout: left H1 at 80px Inter Tight; 16px JetBrains Mono paragraph; blue secondary button plus link. Right column hosts the pixel-grid chat mark with small labels and an autoplay toggle styled as a compact control.

### Live Q&A Demo Panel
Centered card (32px radius, md shadow) containing a single-line input and a short transcript. Body text at 16px JetBrains Mono; accent actions in #3567e0.

### Step Rail (01–04)
A horizontal strip of numbered steps used across multiple sections. Numbers and chevrons in JetBrains Mono 16px; headings in Inter Tight 20–58px depending on context; spacing sm between items.

### Capability Tiles
A tight row of small tiles showing data sources, allowed tasks, reply style, and file drop. Each tile is a mini card (5px radius if button-like; otherwise 32px if grouped) using 24px padding and 16px body text.

### Logo Wall
Airy band listing customer types and logos in rows; minimal decoration, wide gaps (lg–xl) and no heavy shadows.

### FAQ Accordion
Single-column list of questions; headings in Inter Tight 18–20px; answers in JetBrains Mono 16px. Use 1px rules and sm–md spacing between items.

### Final CTA Band
Centered headline and blue CTA on white; short pricing note in 16px body just below. Keep vertical rhythm to md above the note and sm below.

## Do's and Don'ts

- Do reserve #3567e0 for interactive elements (buttons, links, toggles); keep decorative use minimal.
- Do use Inter Tight for all headings and JetBrains Mono for paragraphs and UI labels to maintain the technical tone.
- Do apply 32px radius to major surfaces and 5px to controls—never mix both within one element.
- Do space sections with xl (100px) to keep long pages scannable; inside cards, stick to 24px padding.
- Don't introduce additional grays or tints for borders; use #15171a with reduced opacity only if necessary, or prefer 1px rules and spacing.
- Don't add heavy shadows; sm or md only, and avoid glow effects.

## Agent Prompt Guide

Quick color reference: text #15171a / background #ffffff / border #15171a / accent #3567e0

1) Split hero with live graphic
- Container: white background (#ffffff). Left column: H1 in Inter Tight 500 at 80px, line-height 1.04, letter-spacing -0.054em, color #15171a. Paragraph in JetBrains Mono 16px/1.5. Place two buttons: primary CTA as blue secondary button (bg #3567e0, text #ffffff, radius 5px, height 39px) and a link button to the right. Right column: a 32px-radius white card hosting the graphic; apply md shadow and 24px padding.

2) Live Q&A demo panel
- Center a card (bg #ffffff, radius 32px, padding 24px, md shadow). Title in Inter Tight 58px (headline-md). Inside: input field 39px tall with 5px radius and 1px border #15171a; body copy in JetBrains Mono 16px. Accent any action chips or buttons in #3567e0.

3) Three-step row
- Create a row of three equal cards. Each: number label in JetBrains Mono 16px, heading in Inter Tight 20px (headline-sm), short body in 16px Mono. Card background #ffffff, radius 32px, padding 24px, no shadow. Gutter between cards: lg (40px).

4) FAQ accordion
- Single column. Question buttons use Inter Tight 18–20px, 5px radius, 39px min-height, 1px border #15171a. Answers in JetBrains Mono 16px with md (28px) vertical spacing. Keep links and highlights in #3567e0.

## Similar Brands

- Intercom: similar restrained palette and blue-accent CTAs; Intercom leans softer with rounder shapes and more gradients, while Communicate stays sharper with 5px/32px radii.
- Stripe: disciplined black-on-white typography and selective color; Stripe is denser and more editorial, Communicate feels more product-guided with step rails.
- Linear: high-contrast type and technical vibe; Linear is darker and uses more motion, while Communicate stays light and evidence-led.
- Help Scout: comparable support-tool audience with friendly cards; Help Scout uses softer typography and more illustrations, Communicate is more minimal and demo-first.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #15171a;
  --color-tertiary: #3567e0;
  --color-neutral: #ffffff;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 80px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.04;
  --text-headline-lg-tracking: -0.054em;
  --text-headline-md-size: 58px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.07;
  --text-headline-md-tracking: -0.045em;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.6;
  --text-headline-sm-tracking: -0.02em;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-inter-tight: "Inter Tight";
  --font-jetbrains-mono: "JetBrains Mono";

  /* Rounded */
  --radius-sm: 5px;
  --radius-md: 32px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 40px;
  --spacing-xl: 100px;

  /* Components */
  --button-primary-background-color: var(--color-neutral);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 14px 12px;
  --button-primary-height: 39px;
  --button-secondary-background-color: var(--color-tertiary);
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 14px 12px;
  --button-secondary-height: 39px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 24px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #15171a;
  --color-tertiary: #3567e0;
  --color-neutral: #ffffff;
  --color-surface: #ffffff;
  --color-on-surface: #15171a;
  --font-headline-lg: "Inter Tight";
  --font-headline-md: "Inter Tight";
  --font-headline-sm: "Inter Tight";
  --font-headline-xs: "Inter Tight";
  --font-body-md: "JetBrains Mono";
  --text-headline-lg: 80px;
  --text-headline-md: 58px;
  --text-headline-sm: 20px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.054em;
  --tracking-headline-md: -0.045em;
  --tracking-headline-sm: -0.02em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 5px;
  --radius-md: 32px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 28px;
  --spacing-lg: 40px;
  --spacing-xl: 100px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.082,
                    0.09,
                    0.102
                ],
                "hex": "#15171a"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.208,
                    0.404,
                    0.878
                ],
                "hex": "#3567e0"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.082,
                    0.09,
                    0.102
                ],
                "hex": "#15171a"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 28,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 100,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 5,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Tight",
                "fontSize": {
                    "value": 80,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.054,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Tight",
                "fontSize": {
                    "value": 58,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.045,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Tight",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Tight",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "JetBrains Mono",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Communicate**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
capsulecrm.com
Capsule Productivity
Capsule
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
gogallery.online
Gogallery Creative
Gogallery