Skip to content
DesignMunkDesignMunk Submit a site

Gorgias

gorgias.com
One inbox for every customer conversation, powered by AI
AI Ecommerce Tailwind Webflow Homepage Inter Tight
Share Visit site
gorgias.com DESKTOP · 1440
Gorgias

AI Breakdown

Design export

# Design brief: the Gorgias 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/09/14084500/gorgias-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/14084500/gorgias-com-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/gorgias-2/

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

# Gorgias: Coral CTA Pairing and Chat-Layered Hero

## Overview

Gorgias presents a confident, commerce-focused interface: minimal color, strong type, and compact spacing with generous breathing room around key claims. The tone is professional with a friendly accent color used for momentum and conversion. Composition is mostly two-column with proof and tool-driven sections that feel practical rather than splashy. The page should read fast, prioritizing clarity and action over decoration.

## Page Structure

- Announcement bar: single-line promo at the very top, centered text with a lightweight link.
- Sticky header: logo left, five-item nav with dropdowns, auth link, and a right-aligned CTA pair (primary coral and secondary black) inside a pill group.
- Hero: full-bleed photo/video background; left column holds a large display headline, one-paragraph intro, and dual CTAs; right side overlays floating chat/recommendation bubbles.
- Client proof strip: a low-height row of brand logos beneath the hero with an understated caption and optional case-study links.
- Intro section: headline and subhead followed by a row of feature callouts and a testimonial card; airy, with comfortable spacing between items.
- Platform explainer: "AI Agent + Helpdesk" area in stacked two-ups—each block uses a headline, concise bullet list, and a text CTA; columns balance copy and capability lists.
- Metrics block: KPI grid of big numbers with brief labels, arranged in a simple row/stack depending on width.
- Program timeline: "50 in 50" stepped progression with day markers and a right-aligned quote card.
- Trust deck: partner badges and platform claims in compact cards, presented as rows with succinct copy.
- Primary CTA band: centered headline with the recurring CTA pair.
- Resource promos: slim bands linking to featured campaigns and research, then a report download with a secondary CTA.
- Footer: newsletter signup above a mega-footer with multi-column links, legal, and utilities.

## Colors

- Primary (#1b1a19): Core ink for headlines, body text, and icons.
- Secondary (#040404): Deeper black for rare emphasis or inverse surfaces.
- Tertiary (#ff9780): Coral accent for primary actions and key highlights.
- Neutral (#ffffff): Base surface for the light theme and inverse text backgrounds.
- Border (#e5e7eb): Subtle dividers, card edges, inputs, and section separators.
- brand-graceful-ballerina (#df8c7a): Soft blush used in AI/chat accents, strokes, and glows.
- brand-deep-rhubarb (#7c5454): Muted rhubarb for subdued emphasis and gradient depth in overlays.
- surface (#ffffff): Default page background and card surfaces.
- on-surface (#1b1a19): Text color on light surfaces to maintain consistent contrast.

## Typography

- Inter Tight (Google): Single-family system for all headings and body. Headline levels run at 400 weight for a modern, condensed look that remains highly legible.
  - headline-lg 56px/1.13: Page hero and major section intros.
  - headline-md 41px/1.2: Section headings and key product claims.
  - headline-sm 30px/1.28 and headline-xs 22px/1.62: Subheads, card titles, and feature intros.
  - body-md 16px/normal: Paragraphs, lists, and UI text.
- Availability: Inter Tight is freely available from Google Fonts. If Inter Tight cannot be used, substitute Inter (Google), Roboto (Google), or system-ui for broad compatibility while maintaining similar proportions and tone.

## Layout

- Spacing scale is compact and precise: 6, 10, 14, 18, 48px. Use 48px as the default vertical section padding multiple; 18px for column gaps; 14px for card interior padding and list spacing; 10px for button padding; 6px for tight stacks like captions and meta.
- Composition favors two-column splits with generous left text columns and right visuals; switch to a single column on small screens with 18–48px vertical rhythm.
- Cards and logo rows use even gutters and border dividers (#e5e7eb) to keep density under control without shadows.
- CTAs stay consistent at 40px height across header, hero, and bands.

## Elevation & Depth

- No drop shadows are used (all measured shadows are none). Hierarchy is conveyed through contrast, white space, and 1px borders in #e5e7eb.
- Soft color treatments (brand-graceful-ballerina and brand-deep-rhubarb) outline or tint chat overlays and key highlights to suggest depth without casting shadows.
- Section changes rely on spacing and subtle dividers rather than panels with elevation.

## Shapes

- A single radius language: 8px (rounded.sm). Apply to buttons, cards, chat bubbles, and inputs for consistency.
- Links remain unrounded; only interactive blocks and callouts carry the 8px cue.
- Use circular treatment only for brand logos or avatars; otherwise keep edges uniformly 8px.

## Components

- Buttons follow the tokened sizes and fills. Keep label case and length succinct to preserve the 40px height.
  - Primary button: background #ff9780, text #1b1a19, 8px radius, 10.08px x 16px padding, 40px height.
  - Secondary button: background #1b1a19, text #ffffff, 8px radius, same padding and height.
  - Link button: unrounded, text #1b1a19.
- Card: background #ffffff, text #1b1a19, 8px radius, 16px padding, 1px border #e5e7eb when separation is needed.

### Header Navigation
- Sticky bar with left-aligned logo, centered/left nav groups, and right-aligned CTA pair. Spacing: 14px between nav items, 10–16px internal paddings. Buttons at 40px height with 8px radius.

### Hero Conversation Overlay
- Two-column hero over media. Left: headline at 56px/400, body at 16px, CTA pair. Right: stacked chat bubbles with 8px radius, thin borders or strokes using #df8c7a, and small avatar chips. Overall padding: 48px top/bottom.

### Client Logo Strip
- Low-contrast row of monochrome logos on #ffffff with 18px gutters and optional text links. Use #e5e7eb dividers if the row needs separation from adjacent sections.

### Platform Two-Up (AI Agent + Helpdesk)
- Stacked pairs of sections. Each block: headline at 41px, short list (16px) with 14px spacing, and a right-justified link or button. Maintain equal column widths and 48px section spacing.

### KPI Metrics Grid
- Row or two-row grid of large numerals as titles (30–41px) with concise 16px labels. Use even 18px gaps and optional #e5e7eb separators.

### 50-in-50 Timeline
- Horizontal/vertical stepper with day markers as compact chips, 8px radius. Each step pairs a bold short title (22–30px) with 16px descriptions. Include a bordered quote card at 8px radius.

### Partner & Platform Proof
- Grid of small cards/badges with concise copy, using 1px #e5e7eb borders and 16px padding. Headlines at 22px, body at 16px.

### Footer Mega Menu
- Newsletter input above a multi-column link grid. Columns separated by 48px gutters; link stacks at 6–10px spacing. Legal row uses small text and light dividers.

## Do's and Don'ts

- Do use the coral accent (#ff9780) only for primary actions and key highlights; keep secondary and tertiary links in #1b1a19.
- Do preserve the 40px button height and 8px radius everywhere for familiarity across sections.
- Do rely on #e5e7eb borders and spacing for separation; avoid adding drop shadows.
- Do keep headlines at the specified Inter Tight sizes (56/41/30/22px) with generous line-heights.
- Don't stack more than two emphasis colors in a single component; keep AI accents to #df8c7a/#7c5454 only.
- Don't place long paragraphs over busy media; keep text over solid or subtly masked areas.

## Agent Prompt Guide

Quick reference — text: #1b1a19; background: #ffffff; border: #e5e7eb; accent: #ff9780; AI accents: #df8c7a, #7c5454. Font: Inter Tight (Google).

1) Build the hero
- Layout: two columns over a media background. Left column width ~50%.
- Left: h1 Inter Tight 56px/1.13 weight 400 color #1b1a19; paragraph Inter Tight 16px color #1b1a19; buttons: primary (#ff9780 text #1b1a19) and secondary (#1b1a19 text #ffffff), both 40px height, 8px radius, 16px horizontal padding; 14px gap.
- Right: stack two chat bubbles at 8px radius with thin strokes in #df8c7a and small avatars; place within the right half. Section padding 48px top/bottom.

2) Create a client logo strip
- Background #ffffff. A single row of logos centered with 18px gaps. Add a 1px top border #e5e7eb if it needs separation from the hero. Caption in Inter Tight 16px.

3) Two-up platform explainer
- Section padding 48px. Headline Inter Tight 41px/1.2 weight 400 color #1b1a19.
- Two columns: left explanatory copy (16px) with 14px line spacing; right list of 4–6 bullets (16px) with 14px gaps. End with a link-style CTA in #1b1a19 or a primary button in #ff9780.

4) KPI metrics grid
- Use a 2x3 or single-row grid depending on width with 18px gaps.
- Each tile: number in Inter Tight 30–41px/1.2, label in 16px. Optional 1px #e5e7eb dividers between tiles, 16px internal padding, 8px radius if carded.

5) CTA band
- Centered heading Inter Tight 30px, body 16px, then the CTA pair (primary #ff9780, secondary #1b1a19) side-by-side with 14px gap. Section padding 48px and a top border #e5e7eb to separate from prior content.

## Similar Brands

- Zendesk: Similar restrained palette and proof-first homepage; Zendesk leans greener and more enterprise, while Gorgias uses coral accents and ecommerce-specific visuals.
- Intercom: Shares the chat motif and conversational demos; Intercom uses more illustration and gradients, Gorgias keeps borders and real product overlays.
- Shopify: Comparable typography crispness and border-led depth; Shopify's green brand accent replaces Gorgias's coral.
- Klaviyo: Ecomm-focused with metric-heavy storytelling; Klaviyo runs darker themes, while Gorgias stays light with coral actions.
- Kustomer: Enterprise helpdesk positioning with two-column sections; Kustomer's visuals skew more corporate, Gorgias keeps retail-oriented chat and storefront context.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #1b1a19;
  --color-secondary: #040404;
  --color-tertiary: #ff9780;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-graceful-ballerina: #df8c7a;
  --color-brand-deep-rhubarb: #7c5454;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 56px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.13;
  --text-headline-md-size: 41px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.2;
  --text-headline-sm-size: 30px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.28;
  --text-headline-xs-size: 22px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.62;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --font-inter-tight: "Inter Tight";

  /* Rounded */
  --radius-sm: 8px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 10px;
  --spacing-md: 14px;
  --spacing-lg: 18px;
  --spacing-xl: 48px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 10.08px 16px;
  --button-primary-height: 40px;
  --button-secondary-background-color: var(--color-primary);
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 10.08px 16px;
  --button-secondary-height: 40px;
  --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-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #1b1a19;
  --color-secondary: #040404;
  --color-tertiary: #ff9780;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-graceful-ballerina: #df8c7a;
  --color-brand-deep-rhubarb: #7c5454;
  --color-surface: #ffffff;
  --color-on-surface: #1b1a19;
  --font-headline-lg: "Inter Tight";
  --font-headline-md: "Inter Tight";
  --font-headline-sm: "Inter Tight";
  --font-headline-xs: "Inter Tight";
  --font-body-md: "Inter Tight";
  --text-headline-lg: 56px;
  --text-headline-md: 41px;
  --text-headline-sm: 30px;
  --text-headline-xs: 22px;
  --text-body-md: 16px;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --spacing-xs: 6px;
  --spacing-sm: 10px;
  --spacing-md: 14px;
  --spacing-lg: 18px;
  --spacing-xl: 48px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.106,
                    0.102,
                    0.098
                ],
                "hex": "#1b1a19"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.016,
                    0.016,
                    0.016
                ],
                "hex": "#040404"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.592,
                    0.502
                ],
                "hex": "#ff9780"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-graceful-ballerina": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.875,
                    0.549,
                    0.478
                ],
                "hex": "#df8c7a"
            }
        },
        "brand-deep-rhubarb": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.329,
                    0.329
                ],
                "hex": "#7c5454"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.106,
                    0.102,
                    0.098
                ],
                "hex": "#1b1a19"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 18,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Tight",
                "fontSize": {
                    "value": 56,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Tight",
                "fontSize": {
                    "value": 41,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Tight",
                "fontSize": {
                    "value": 30,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Tight",
                "fontSize": {
                    "value": 22,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter Tight",
                "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 Gorgias**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
sundayparis.com
Sunday Paris Creative
Sunday Paris
oka.com
OKA Ecommerce
OKA
primalpastures.com
Primal Pastures Ecommerce
Primal Pastures
wattspet.com
Watts Pet Ecommerce
Watts Pet