Skip to content
DesignMunkDesignMunk Submit a site

BoldDesk

bolddesk.com
Effortlessly resolve 70% of customer inquiries with our all-in-one platform.
AI Software Elementor WordPress Homepage Inter
Share Visit site
bolddesk.com DESKTOP · 1440
BoldDesk

AI Breakdown

Design export

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

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

# BoldDesk: One-Plan Pricing, Black CTAs, Orange Emphasis

## Overview

BoldDesk presents a serious, engineering-forward brand for support teams. The tone is confident and utilitarian: minimal decoration, tight typography, and clear CTAs. Layouts are modular and reasonably dense, balanced by generous section spacing and consistent borders. Orange is a sparing highlight; primary actions are black, reinforcing a decisive call to action.

## Page Structure

- Utility strip: slim announcement banner for migration offer; full-width, centered text with inline link.
- Global nav: compact top bar with logo left, mega-menu triggers, and two right-aligned CTAs (Book a Demo, Free Trial).
- Hero: large display headline with one phrase in orange, short subcopy, dual CTAs (black primary, white secondary); a wide product UI screenshot docks just below, overlapping the fold.
- Trust metrics: compact row of stat badges under a small "Backed by Syncfusion" label.
- Platform overview: section header followed by a row of feature anchors/tabs (Ticketing, AI Agent, Live Chat, etc.) and brief feature blurbs/cards.
- Pricing: single-plan card with a prominent monthly figure and an agent-count table; supporting "everything included" checklist and CTA.
- Cost comparison: interactive module with an agent-count slider and stacked competitor summaries.
- Rationale tiles: short three-up explainer about pricing model (foundation, no tier engineering, renewal policy).
- Migration & onboarding: two-column layout with descriptive copy and a checklist-style benefits column plus CTA.
- Security & compliance: grid/list of certifications and controls.
- Testimonials: quotes presented as cards with attribution and links to external reviews.
- Closing CTA band: concise pitch, dual CTAs, and a compact list of assurances.
- Footer: multi-column mega-footer with product, features, resources, and company links.

## Colors

- Primary (#6b6b65): Slate gray for long-form text and default UI copy.
- Secondary (#2c3c5c): Deep navy accent for headings in secondary contexts and navigation hovers.
- Tertiary (#4353ff): Indigo accent available for emphasis or special states.
- Neutral (#ffffff): Pure white surfaces and page background.
- Border (#3a3a36): Charcoal lines for dividers, table rules, and card outlines.
- brand-blood-orange-juice (#fc4c04): Bold orange accent for key highlights (e.g., headline emphasis, high-attention CTAs/labels).
- Surface ({colors.neutral}): Base surface referencing Neutral (#ffffff).
- on-surface ({colors.primary}): Text on light surfaces defaults to Primary (#6b6b65).

## Typography

Inter is the sole family across headings and body and is freely available from Google Fonts. It may be loaded directly; acceptable substitutes when Inter cannot be served are system-ui/SF Pro Text (Apple platforms), Segoe UI (Windows), or Roboto (Google) for similar metrics and x-height.
- Headline LG (Inter 48px, 700, 1.25, -0.007em): Primary hero and top-section displays.
- Headline MD (Inter 36px, 700, 1.44, -0.009em): Major section headers and pricing leads.
- Headline SM (Inter 24px, 600, 1.2): Subsection titles, stat labels, card headers.
- Headline XS (Inter 18px, 600, 1.22): Eyebrow headings, badge titles, table headings.
- Body MD (Inter 14px, 500, 1.5): Paragraphs, lists, and UI copy. Links use the button-link color (#2563eb).

## Layout

Spacing follows an 8px base: xs 8, sm 16, md 24, lg 40, xl 80. Use xl (80px) to separate major sections, lg (40px) for intra-section blocks, and md/sm for card interiors and item stacks. Content typically centers within a wide container; sections alternate between single-column stacks and two-column splits. Grids for features, stats, and link lists use consistent gaps at 24px or 40px to maintain rhythm.

## Elevation & Depth

Shadows are not used (all measured shadows are none). Depth is established with whitespace, 1px borders in Border (#3a3a36), and tonal hierarchy: white cards on a white page with clear outlines. Emphasis comes from scale, weight, and accent color rather than blur or glow.

## Shapes

Rounded corners are restrained: sm 12px for buttons and small badges; md 16px for cards and large media. Corners signal clickability and containment; avoid fully pill-shaped elements unless specified by a component.

## Components

Buttons and cards derive from tokens:
- Primary Button: background #111110, text #f9fafb, 50px height, 13px×20px padding, 12px radius.
- Secondary Button: background #f9fafb with #111827 text, 50px height, 13px×20px padding, 12px radius; pair with a 1px border in #3a3a36 when needed.
- Link Button: text-only action in #2563eb; radius 0.
- Card: white background, #111110 text, 32px padding, 16px radius, bordered rather than shadowed.

### Utility Migration Banner
- Full-width bar above the nav. Body MD text (14/1.5) with a single link in #2563eb; 16px vertical padding; optional subtle bottom border (#3a3a36).

### Hero Stack with Dual CTAs
- Headline LG (48/700) with a phrase styled in #fc4c04. Body MD paragraph below. Actions: primary black button then secondary white button, both 12px radius and 50px high with 16–24px gap.

### Docked Product Screenshot
- Wide media card (16px radius) positioned immediately below hero CTAs, overlapping the fold; no shadow, optional border (#3a3a36); centered within the content width.

### Trust Metrics Strip
- Row of compact items; number set in Headline SM (24/600), label in Body MD; items separated by thin dividers (#3a3a36) on white.

### Feature Directory Tabs
- Horizontal row of anchor pills/links to feature sections. Each item uses Body MD (14/500); active or hovered states can use #fc4c04 underline or border.

### Single-Plan Pricing Card
- Prominent price set in Headline MD (36/700) with supporting table rules in #3a3a36. "Everything included" checklist below in Body MD. Primary CTA uses the black button.

### Cost Comparison Calculator
- Left column: agent-count slider with label (Headline XS 18/600). Right: stacked competitor summaries in bordered cards (16px radius, 24px padding).

### Migration & Onboarding Checklist
- Two-column split: descriptive copy left; on the right, a bordered card with bullet list (Body MD) and a CTA. Use lg (40px) gaps between bullets.

## Do's and Don'ts

- Do reserve the black primary button for the single most important action in a section.
- Do use brand orange (#fc4c04) sparingly for headline emphasis, key labels, or a high-attention CTA—not for long passages of text.
- Do separate major sections with 80px spacing and rely on borders (#3a3a36) instead of shadows for containment.
- Don't introduce additional border radii; stick to 12px for controls and 16px for cards/media.
- Don't mix multiple accent colors in one component; if links are blue (#2563eb), avoid also using orange in the same small region.
- Don't stack more than two button styles side by side; primary + secondary is the default pair.

## Agent Prompt Guide

Quick reference — Text: #6b6b65; Background: #ffffff; Border: #3a3a36; Accent: #fc4c04 (links: #2563eb).

1) Build the hero
- Container: center, max 1200px, padding 24–40px.
- Eyebrow: Inter 18px/600, color #6b6b65.
- H1: Inter 48px/700, line-height 1.25; highlight one phrase in #fc4c04.
- Body: Inter 14px/500, color #6b6b65, max-width 680px.
- Buttons: primary (#111110 bg, #f9fafb text, 50px, 12px radius), secondary (#f9fafb bg, #111827 text, 50px, 12px radius, 1px border #3a3a36). Gap 16–24px.
- Place a 16px-radius, border-outlined screenshot card directly beneath the buttons.

2) Create the trust metrics row
- 4–6 equal items in a row; container padding 24px, divider color #3a3a36.
- Number: Inter 24px/600, color #111110; Label: Inter 14px/500, #6b6b65.

3) Platform features strip
- Section title: Inter 36px/700.
- Row of feature links: Inter 14px/500; default #6b6b65, hover/active underline or left border in #fc4c04; 16px spacing.
- Optional supporting cards: 16px radius, 32px padding, 1px border #3a3a36.

4) Single-plan pricing card
- Card: 16px radius, 32px padding, 1px border #3a3a36.
- Price: Inter 36px/700; plan label: Inter 18px/600; table rules in #3a3a36.
- CTA: primary black button (spec above); supporting list in Inter 14px/500.

5) Cost comparison module
- Left: slider label Inter 18px/600, value Inter 24px/600; controls in #3a3a36.
- Right: 2–3 competitor cards (16px radius, 24px padding, 1px border #3a3a36). Use #6b6b65 for copy; accent figures may use #fc4c04 sparingly.

## Similar Brands

- Zendesk: Enterprise support marketing with heavy proof; diverges with multi-tier pricing versus BoldDesk's single-plan emphasis and orange highlights.
- Freshdesk: Bright green accent and many tiers; BoldDesk opts for black primary CTAs and border-defined cards without shadows.
- Help Scout: Minimal blue system and generous whitespace; BoldDesk is denser and more feature/comparison heavy.
- Intercom: Darker gradients and illustrated surfaces; BoldDesk stays flat, white, and border-led for clarity.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #6b6b65;
  --color-secondary: #2c3c5c;
  --color-tertiary: #4353ff;
  --color-neutral: #ffffff;
  --color-border: #3a3a36;
  --color-brand-blood-orange-juice: #fc4c04;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 48px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.25;
  --text-headline-lg-tracking: -0.007em;
  --text-headline-md-size: 36px;
  --text-headline-md-weight: 700;
  --text-headline-md-leading: 1.44;
  --text-headline-md-tracking: -0.009em;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 14px;
  --text-body-md-weight: 500;
  --text-body-md-leading: 1.5;
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 12px;
  --radius-md: 16px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;

  /* Components */
  --button-primary-background-color: #111110;
  --button-primary-text-color: #f9fafb;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 13px 20px;
  --button-primary-height: 50px;
  --button-secondary-background-color: #f9fafb;
  --button-secondary-text-color: #111827;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 13px 20px;
  --button-secondary-height: 50px;
  --button-link-text-color: #2563eb;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: #111110;
  --card-rounded: var(--radius-md);
  --card-padding: 32px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #6b6b65;
  --color-secondary: #2c3c5c;
  --color-tertiary: #4353ff;
  --color-neutral: #ffffff;
  --color-border: #3a3a36;
  --color-brand-blood-orange-juice: #fc4c04;
  --color-surface: #ffffff;
  --color-on-surface: #6b6b65;
  --font-headline-lg: "Inter";
  --font-headline-md: "Inter";
  --font-headline-sm: "Inter";
  --font-headline-xs: "Inter";
  --font-body-md: "Inter";
  --text-headline-lg: 48px;
  --text-headline-md: 36px;
  --text-headline-sm: 24px;
  --text-headline-xs: 18px;
  --text-body-md: 14px;
  --tracking-headline-lg: -0.007em;
  --tracking-headline-md: -0.009em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 700;
  --font-weight-headline-sm: 600;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 500;
  --radius-sm: 12px;
  --radius-md: 16px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.42,
                    0.42,
                    0.396
                ],
                "hex": "#6b6b65"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.173,
                    0.235,
                    0.361
                ],
                "hex": "#2c3c5c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.263,
                    0.325,
                    1
                ],
                "hex": "#4353ff"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.227,
                    0.227,
                    0.212
                ],
                "hex": "#3a3a36"
            }
        },
        "brand-blood-orange-juice": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.298,
                    0.016
                ],
                "hex": "#fc4c04"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.42,
                    0.42,
                    0.396
                ],
                "hex": "#6b6b65"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.007,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 36,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.009,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 14,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        }
    }
}
```

## 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 BoldDesk**, 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