# Front — Design System
> A customer service platform combining communication, automation, and analytics for customer-first teams.
- **Canonical:** https://uiuxskills.com/library/front
- **Source:** https://front.com/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:39.080Z

---

---
version: alpha
name: Front
description: >-
  A customer service platform combining communication, automation, and analytics for customer-first
  teams.
tone: >-
  Professional, authoritative, and solution-oriented. The voice is direct and focuses on operational
  efficiency and clarity.
color-scheme: light
colors:
  primary: "#5A1E75"
  secondary: "#AF96F6"
  surface: "#FFFFFF"
  surface-container: "#E6E6E6"
  on-surface: "#122124"
  on-primary: "#FFFFFF"
  outline: "#888F91"
  error: "#D32F2F"
  success: "#388E3C"
  info: "#1976D2"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#3B144C"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.surface-container}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#3B144C"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.surface-container}"
    height: 1px
  badge-error:
    backgroundColor: "#FFEBEE"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-info:
    backgroundColor: "{colors.info}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-outline:
    backgroundColor: "{colors.outline}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Front is a sophisticated, human-centric platform designed for complex B2B operations. Its visual identity is clean, professional, and trust-oriented, characterized by a distinct violet-based palette that establishes authority in the competitive customer experience software market.

## Colors

The color strategy focuses on high-contrast accessibility and clear functional hierarchy, using a bold primary violet to anchor the brand against neutral surfaces.

*   Primary (#5A1E75): The core brand color used for main CTAs and key interactive elements.
*   Secondary (#AF96F6): An accent color for highlights and supporting UI elements.
*   Surface (#FFFFFF): The primary background color for the application and marketing site.
*   Surface-container (#E6E6E6): Used for subtle backgrounds, dividers, and UI containers.
*   On-surface (#122124): The primary text color, providing high contrast against light surfaces.
*   On-primary (#FFFFFF): The text color used for elements placed on primary backgrounds.
*   Outline (#888F91): Used for borders and secondary UI elements.
*   Error (inferred) (#D32F2F): Semantic color for error states.
*   Success (inferred) (#388E3C): Semantic color for success states.
*   Info (inferred) (#1976D2): Semantic color for informational elements.

## Typography

Front utilizes a clean, sans-serif typography stack to maintain readability and a professional, solution-oriented tone across all touchpoints.

*   Display-lg (inferred): Used for primary hero headlines.
*   Display-md (inferred): Used for major section headers.
*   Headline-lg (inferred): Used for sub-headers.
*   Headline-md (inferred): Used for card titles.
*   Body-md (inferred): Standard body text for paragraphs and long-form content.
*   Label-md (inferred): Used for UI labels and button text.

## Layout

The layout follows a responsive grid system with generous gutters, ensuring content remains readable on large screens while collapsing into a single-stack view on mobile. The page pattern follows a logical flow: nav, hero, features, social-proof, industries, testimonials, integrations, and footer. The hero composition is centered, featuring a primary headline supported by dual primary and secondary CTAs.

## Elevation & Depth

Depth is used sparingly to maintain a flat, modern SaaS aesthetic. Elevation is applied to distinguish interactive cards from the background.

*   Elevation.sm: Subtle lift for standard cards.
*   Elevation.md: Used for dropdowns, popovers, or elevated interactive cards.
*   Elevation.lg: Used for modal or drawer overlays.

## Shapes

The shape language balances professional structure with approachable softness. Content cards use a subtle `{rounded.md}` radius to maintain a clean, organized feel.

Buttons and primary navigation elements utilize `{rounded.full}` to create a pill-shaped, high-action aesthetic that stands out from the more rigid content containers.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and `{rounded.full}` for a pill-shaped aesthetic. Use primary buttons for the main conversion goal and secondary buttons for alternative actions.

### Card
Cards utilize `{colors.surface}` with a `{rounded.md}` border radius. Use these to group related content or features, ensuring consistent `{spacing.md}` between them.

### Input Field
Input fields feature a clean border using `{colors.outline}`. Upon focus, the border should transition to `{colors.primary}` to provide clear feedback to the user.

### Badge
Badges use `{colors.surface-container}` as a base. Semantic variants like `badge-success` and `badge-error` should be used to provide immediate visual status updates to the user.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Do not use `{colors.secondary}` for primary action buttons. |
| Apply `{rounded.full}` to all main navigation and primary action buttons. | Avoid using sharp corners on buttons; always use `{rounded.full}`. |
| Use `{typography.display-lg}` for primary hero headlines. | Do not mix multiple font families; stick to the primary sans-serif stack. |
| Maintain consistent `{spacing.md}` between card elements. | Never use `{typography.label-md}` for main body content. |
| Use `{colors.surface-container}` for subtle background dividers. | Do not use excessive shadows; keep elevation to `{elevation.sm}` for cards. |
| Ensure all text on `{colors.primary}` backgrounds uses `{colors.on-primary}`. | Avoid using `{colors.on-surface}` text on dark backgrounds without sufficient contrast. |
| Use `{rounded.md}` for content cards. | Do not use `{rounded.full}` for content cards. |
| Use `{input-field-focus}` to indicate active input states. | Do not use default browser focus rings on input fields. |

## Content Style

CTA labels are action-oriented and use imperative verbs (e.g., "Request demo," "Start free trial"). They should be concise and clearly communicate the outcome of the interaction.

Headings are benefit-driven, declarative, and professional. They focus on operational efficiency and clarity, avoiding marketing fluff in favor of direct value propositions.

Copy density is designed for scannability. Use short paragraphs, frequent headers, and bulleted lists to break up complex information, ensuring the user can digest the content quickly.

## Imagery & Icons

The imagery style is mixed, combining clean product screenshots with abstract background shapes to ground the abstract software concepts in reality. Iconography should be professional and minimal, adhering to the brand's clean, enterprise-ready aesthetic. Avoid overly complex illustrations; prioritize clarity and functional visual communication.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Front, a minimal enterprise customer service platform. Match its professional, solution-oriented tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{spacing.md}`, `{rounded.full}` — never hardcode hex values, pixel sizes, or font sizes directly.
2. Respect the `components:` block exactly. Do not invent variants (e.g., a `button-tertiary`) that the spec does not define.
3. Follow the Shapes section: buttons and primary nav use `{rounded.full}`; content cards use `{rounded.md}`. These are non-negotiable per the Do's and Don'ts table.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., using `{colors.secondary}` for a primary CTA), surface the conflict before proceeding.
5. Apply elevation sparingly: `{elevation.sm}` for standard cards, `{elevation.md}` for dropdowns and popovers, `{elevation.lg}` for modals. Do not exceed the specified level for a given context.

## Output contract

**Must:**
- Use token names for all colors, typography, spacing, radii, and elevation.
- Include hover, focus, and disabled states for every interactive component where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.full}` to all primary action buttons and `{rounded.md}` to all content cards.
- Use `{colors.on-primary}` for text on any `{colors.primary}` background.
- Write CTA labels as concise imperative verbs matching the Content Style section.

**Must NOT:**
- Invent colors, radii, font families, or spacing values absent from the spec.
- Use generic utility defaults (e.g., `text-gray-500`, `rounded-md` as a literal string) when a named token exists.
- Use `{colors.secondary}` as a primary CTA color.
- Add emoji, filler copy, or marketing language.
- Rewrite page headings, button labels, navigation items, or any existing copy.
- Alter page structure or information architecture as a side effect of applying tokens.

## When in doubt
- If a required token is not defined in the spec, ask the product team before inventing a value.
- Prefer composing existing components over introducing new tokens or variants.
- For ambiguous background roles, default to `{colors.surface}`; for subtle containers, use `{colors.surface-container}`; for body text, use `{colors.on-surface}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) is available, those values take precedence.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.