Skip to content
DesignMunkDesignMunk Submit a site

Front

front.com
Only Front coordinates teams, conversations, and AI for complex support.
AI Communication Next.js Tailwind Homepage Suisse Intl
Share Visit site
front.com DESKTOP · 1440
Front

AI Breakdown

Design export

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

# Front: Dark Command-Center UI with Pill CTAs and Lead Form

## Overview

A dark, product-forward system aimed at operations, support, and revenue teams. Tone is confident and technical—"command center" rather than playful. Spacing is generous between sections but compact within cards, supporting dense information without clutter. Purple accents signal interactivity; text remains high-contrast throughout.

## Page Structure

- Hello bar: a single-line announcement strip above the nav; full-width, minimal text, dismissible style.
- Global navigation: logo left, primary links centered/left, and a right-aligned action group with two pill CTAs; compact vertical height.
- Hero: oversized headline (headline-lg), one-paragraph subcopy (body-md), and two side-by-side pill buttons; to the right, a floating lead-capture card with stacked options.
- Feature rail: a three-item selector below the hero CTAs with an active underline; concise labels and subtle separators.
- Product preview band: layered UI cards sliding/overlapping behind the feature rail to hint at workflows.
- Trust signal: concise line with a customer count and a row of logos/badges.
- Problem setup: lead-in header followed by a row of short, scannable problem statements; compact, card-like blocks.
- Solution triptych: sequential panels for AI, Support, and Operations—each with a header, body, and text CTA; two-column balance and ample vertical breathing room.
- Proof & badges: awards and year callouts in a tight strip; minimal copy, high recognition density.
- Teams & resources grid: linked cards for departments and one research/report tile; uniform cards in a tidy row or grid.
- Testimonials: long-form quotes with names/titles, stacked vertically; comfortable line lengths and stable rhythm.
- Integrations & final CTA: integration logos with a link to view all, followed by a primary call-to-action band; closes with a multi-column mega footer.

## Colors

- Primary (#f8f1fe): High-contrast light text for headings and body on dark surfaces.
- Secondary (#9845da): Core purple accent for highlights, active states, and links.
- Tertiary (#0d1d39): Dark fill for secondary buttons and chips.
- Neutral (#300c41): Primary background and card surface in dark mode.
- Border (#374151): Subtle separators, dividers, and control outlines on dark.
- brand-middy-s-purple (#ac84d4): Supporting tint for gradients, hovers, or secondary emphasis.
- brand-armor-wash (#040404): Near-black for overlays or deepest contrast moments.
- Surface ({colors.neutral}): Alias of the neutral background used for sections and cards.
- On-surface ({colors.primary}): Alias of the default light text color on dark backgrounds.

## Typography

- Suisse Intl: Used for all headings and body (headline-lg 62px/500/1.1/-0.02em; headline-md 47px/500/1.32; headline-sm 35px/500/1.77; headline-xs 27px/500/1.19; body-md 20px/400/1.4). This family is custom/self-hosted; agents should not assume it's available for direct loading.
- Substitutes (use when Suisse Intl is unavailable): Inter (Google) for a neutral grotesk that matches optical size and spacing well; IBM Plex Sans (Google) for a slightly more mechanical tone; Manrope (Google) for a modern, open sans with similar x-height.
- Weight strategy: Medium (500) for display heads to keep edges crisp on dark; Regular (400) for paragraphs and long-form quotes.

## Layout

- Spacing scale: xs 10, sm 24, md 48, lg 72, xl 96. Use sm for intra-card gaps, md for section internals, lg–xl for section boundaries and the hero.
- Rhythm: Stack sections on a single column flow; introduce two-column compositions for solution panels and testimonial image/text pairings where present.
- Content width: Keep long-form copy at readable line lengths; pair cards in rows with sm or md gaps to avoid visual massing on dark backgrounds.
- Alignment: Center the hero content block; align subsequent sections to a consistent content column for stability.

## Elevation & Depth

- No drop shadows (all shadow tokens are none). Depth is conveyed by tonal steps—neutral surfaces against the page background—and by borders using Border (#374151).
- Overlaps and layering (e.g., stacked UI previews) provide perceived depth; use the inner 1px inset only for pressed/active inputs where needed.
- Emphasize hierarchy by contrast and spacing rather than blur or glow.

## Shapes

- Radius sm 8px for cards and dense content containers—structured and product-like.
- Radius md 48px for CTAs, inputs, and chips—distinctive pill language that signals interactivity and key actions.
- Keep shape language consistent: pills for actions/navigation, 8px rectangles for content.

## Components

- Button — Primary: background #ffffff, text #300c41 (neutral), 48px height, 12px × 16px padding, 48px radius. Use for the main action in a section.
- Button — Secondary: background #0d1d39 (tertiary), text #1c1e20, 48px height, 12px × 16px, 48px radius. Use alongside the primary when a safe, low-contrast option is needed.
- Button — Link: text #d0c6f0, no radius. For tertiary actions and inline CTAs.
- Card: background #300c41, text #f8f1fe, 16px padding, 8px radius. Use for testimonials, feature blurbs, and small panels.

### Top Navigation
- Single-row bar with left-aligned logo, inline text links (body-md), and a right-aligned action group using the primary and secondary buttons. Vertical padding sm (24px).

### Hero CTA Cluster
- Headline set in headline-lg (62px/500/1.1), body copy in body-md (20px/1.4). Two buttons side-by-side with sm (24px) gap; both 48px tall, 48px radius.

### Feature Tabs Rail
- Three compact items in a horizontal rail beneath the hero CTAs. Active tab underlined in Secondary (#9845da); use body-md for labels and sm (24px) horizontal spacing between items.

### Floating Lead Form
- A narrow Card with sm (16px) internal padding and 8px radius, stacked pill buttons (48px height each). Sits to the hero's right as a persistent capture element.

### Problem List
- A row of concise issue cards: headline-xs for titles and body-md for copy. Use Card with 8px radius, 16px padding, and sm (24px) gaps.

### Teams & Use-Case Grid
- A row or grid of linked Cards pointing to departments and resources. Use headline-xs for titles, a short body-md line, and a link-style CTA. Maintain sm (24px) gaps and 8px corners.

### Testimonials Stack
- Long-form quotes in Cards with 16px padding and generous vertical spacing (md 48px between items). Name/title in body-md; no avatars required.

## Do's and Don'ts

- Do keep text #f8f1fe on the #300c41 surface for primary reading; reserve #9845da for accents and active states.
- Do use 48px-tall, 48px-radius pills for main actions and controls; pair with the 8px card radius elsewhere.
- Do separate dense sections with lg–xl vertical spacing and use Border (#374151) for quiet dividers.
- Don't add drop shadows; use tonal steps and borders for hierarchy instead.
- Don't mix additional brand colors beyond the provided purples and neutrals in core UI elements.
- Don't reduce body text below 20px; readability on dark backgrounds depends on the set size and spacing.

## Agent Prompt Guide

Quick color reference — Text: #f8f1fe; Background: #300c41; Border: #374151; Accent: #9845da.

1) Build the hero
- Background #300c41. Max-width container centered with xl (96px) top/bottom and md (48px) side padding.
- H1 in Inter (substitute for Suisse Intl) at 62px, weight 500, line-height 1.1, letter-spacing -0.02em, color #f8f1fe.
- Subcopy in Inter 20px/1.4, color #f8f1fe at 80% opacity.
- CTA group: primary button 48px tall, 12px × 16px, radius 48px, background #ffffff, text #300c41; secondary button 48px tall, 12px × 16px, radius 48px, background #0d1d39, text #1c1e20. Gap sm (24px).

2) Feature tabs rail under hero
- Horizontal list with three items set in Inter 20px/1.4. Use color #f8f1fe for text; active item gets an underline in #9845da. Space items with sm (24px). Add md (48px) top margin from the CTA group.

3) Problem list section
- Section padding lg (72px) top/bottom. Place a row of Cards: background #300c41, text #f8f1fe, radius 8px, padding 16px, gap sm (24px).
- Each card title in Inter 27px/500 (headline-xs), body in Inter 20px/1.4.

4) Teams grid with linked cards
- Section background #300c41, padding lg (72px). Grid of Cards with 8px radius and 16px padding; gap md (48px).
- Title in Inter 27px/500, one line of body in 20px/1.4, and a link-style CTA in #d0c6f0.

5) Testimonials stack
- Vertical list of Cards (16px padding, 8px radius) separated by md (48px). Quote text in Inter 20px/1.4; author line in the same size with reduced emphasis. No shadows; add a 1px divider in #374151 if needed.

## Similar Brands

- Intercom: Modern dark surfaces and bold pills; Intercom leans softer with more gradients, while Front is crisper and more structural.
- Zendesk: Enterprise support patterns and proof-heavy pages; Zendesk favors lighter themes and serif accents versus Front's stricter dark mode.
- Help Scout: Clear typography and approachable cards; Help Scout stays bright and friendly, Front is darker and more technical.
- Freshdesk: Familiar support IA and grids; Freshdesk uses more color variety, Front keeps a tighter purple-first palette.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #f8f1fe;
  --color-secondary: #9845da;
  --color-tertiary: #0d1d39;
  --color-neutral: #300c41;
  --color-border: #374151;
  --color-brand-middy-s-purple: #ac84d4;
  --color-brand-armor-wash: #040404;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 62px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.1;
  --text-headline-lg-tracking: -0.02em;
  --text-headline-md-size: 47px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.32;
  --text-headline-md-tracking: -0.021em;
  --text-headline-sm-size: 35px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.77;
  --text-headline-sm-tracking: -0.029em;
  --text-headline-xs-size: 27px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 20px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.4;
  --font-suisse-intl: "Suisse Intl";

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

  /* Spacing */
  --spacing-xs: 10px;
  --spacing-sm: 24px;
  --spacing-md: 48px;
  --spacing-lg: 72px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-background-color: #ffffff;
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 12px 16px;
  --button-primary-height: 48px;
  --button-secondary-background-color: var(--color-tertiary);
  --button-secondary-text-color: #1c1e20;
  --button-secondary-rounded: var(--radius-md);
  --button-secondary-padding: 12px 16px;
  --button-secondary-height: 48px;
  --button-link-text-color: #d0c6f0;
  --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: #f8f1fe;
  --color-secondary: #9845da;
  --color-tertiary: #0d1d39;
  --color-neutral: #300c41;
  --color-border: #374151;
  --color-brand-middy-s-purple: #ac84d4;
  --color-brand-armor-wash: #040404;
  --color-surface: #300c41;
  --color-on-surface: #f8f1fe;
  --font-headline-lg: "Suisse Intl";
  --font-headline-md: "Suisse Intl";
  --font-headline-sm: "Suisse Intl";
  --font-headline-xs: "Suisse Intl";
  --font-body-md: "Suisse Intl";
  --text-headline-lg: 62px;
  --text-headline-md: 47px;
  --text-headline-sm: 35px;
  --text-headline-xs: 27px;
  --text-body-md: 20px;
  --tracking-headline-lg: -0.02em;
  --tracking-headline-md: -0.021em;
  --tracking-headline-sm: -0.029em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --radius-md: 48px;
  --spacing-xs: 10px;
  --spacing-sm: 24px;
  --spacing-md: 48px;
  --spacing-lg: 72px;
  --spacing-xl: 96px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.973,
                    0.945,
                    0.996
                ],
                "hex": "#f8f1fe"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.596,
                    0.271,
                    0.855
                ],
                "hex": "#9845da"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.051,
                    0.114,
                    0.224
                ],
                "hex": "#0d1d39"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.188,
                    0.047,
                    0.255
                ],
                "hex": "#300c41"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.216,
                    0.255,
                    0.318
                ],
                "hex": "#374151"
            }
        },
        "brand-middy-s-purple": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.675,
                    0.518,
                    0.831
                ],
                "hex": "#ac84d4"
            }
        },
        "brand-armor-wash": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.016,
                    0.016,
                    0.016
                ],
                "hex": "#040404"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.188,
                    0.047,
                    0.255
                ],
                "hex": "#300c41"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.973,
                    0.945,
                    0.996
                ],
                "hex": "#f8f1fe"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 72,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Suisse Intl",
                "fontSize": {
                    "value": 62,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Suisse Intl",
                "fontSize": {
                    "value": 47,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.021,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Suisse Intl",
                "fontSize": {
                    "value": 35,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.029,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Suisse Intl",
                "fontSize": {
                    "value": 27,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Suisse Intl",
                "fontSize": {
                    "value": 20,
                    "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 Front**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears
agentwork.com
Agentwork AI
Agentwork