---
title: "Front design system"
variant: extended
source: https://front.com/
captured_at: 2026-10-12
theme: dark
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/front-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Front · Design System

> Deep purple, bright signals, customer work in focus

**Theme:** dark · **Industry:** saas · **Source:** https://front.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Front pairs a deep purple canvas with vivid lime calls to action and a polished, light product interface. Spacious centered messaging gives way to evidence, product demonstrations, and a broad, structured footer.

## North star

Use the deep purple canvas to frame crisp, readable content, and reserve lime for the primary action.

## Overview

The visual identity hinges on the contrast between a saturated aubergine canvas (#300c41) and clean white content areas. A lime button (#dee948) is the strongest call to action, while pale lavender text (#f8f1fe and #e2dcf6) keeps purple sections readable. The main page alternates between dark, immersive product storytelling and white proof-oriented sections, with a purple footer as a closing brand field. Suisse Intl supplies a restrained, modern sans-serif voice: medium-weight headings use compact tracking, while body and navigation copy stay regular and legible. The hero is centered and spacious; later sections use columns, testimonial cards, and long product demonstrations. Product UI imagery sits within softly rounded frames and often glows with purple light, so treat that vividness as media styling rather than a replacement for the core palette. Keep controls pill-shaped and cards subtly rounded; let whitespace and contrast do more work than decoration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Aubergine Canvas | `#300c41` | `--color-aubergine-canvas` | brand | Signature dark canvas for the hero, product-story band, and final footer strip. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main background for trust, feature, testimonial, and integration sections; also cards and light controls. |
| Lavender Mist | `#e2dcf6` | `--color-lavender-mist` | semantic | Muted pale text and fine details on dark navigation and footer areas. |
| Soft Silver | `#dedfe2` | `--color-soft-silver` | neutral | Hairlines and light card surfaces, including borders around customer-proof content. |
| Midnight Ink | `#0d1d39` | `--color-midnight-ink` | semantic | Dark text on lime calls to action and selected light navigation elements. |
| Signal Lime | `#dee948` | `--color-signal-lime` | accent | Primary Request demo action and thin announcement banner. |
| Vivid Violet | `#8034bf` | `--color-vivid-violet` | accent | Small secondary circular controls and vivid purple interface accents. |
| Carbon Text | `#1c1e20` | `--color-carbon-text` | neutral | Dark copy and text within white testimonial and product cards. |
| Plum Footer | `#5b1f76` | `--color-plum-footer` | brand | Large footer field and purple link or section accents. |
| Porcelain Lilac | `#f8f1fe` | `--color-porcelain-lilac` | semantic | Primary headings and bright text against the purple canvas. |
| Slate Copy | `#5b5d63` | `--color-slate-copy` | neutral | Secondary body copy on light backgrounds. |
| Cloud Grey | `#f3f3f4` | `--color-cloud-grey` | surface | Quiet light section or inset surface among otherwise white content bands. |
| Graphite | `#3a3c40` | `--color-graphite` | neutral | Subdued navigation and supporting text. |
| Lilac Edge | `#d0c6f0` | `--color-lilac-edge` | accent | Thin inset button outline detail; use only as a small control treatment. |
| Olive Ink | `#1d1f04` | `--color-olive-ink` | semantic | Rare dark text or link detail associated with the lime accent. |

### Semantic aliases

`--color-canvas` → `#300c41` (Aubergine Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#f3f3f4` (Cloud Grey) · `--color-surface-3` → `#dedfe2` (Soft Silver) · `--color-surface-4` → `#1c1e20` (Carbon Text) · `--color-text` → `#f8f1fe` (Porcelain Lilac) · `--color-text-muted` → `#e2dcf6` (Lavender Mist) · `--color-text-subtle` → `#0d1d39` (Midnight Ink) · `--color-border` → `#dedfe2` (Soft Silver) · `--color-accent` → `#dee948` (Signal Lime) · `--color-accent-2` → `#8034bf` (Vivid Violet) · `--color-accent-3` → `#5b1f76` (Plum Footer) · `--color-on-accent` → `#0d1d39` (Midnight Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f8f1fe` | `#300c41` | 15.15:1 | AAA |
| `#f8f1fe` | `#ffffff` | 1.1:1 | fail |
| `#f8f1fe` | `#f3f3f4` | 1:1 | fail |
| `#f8f1fe` | `#dedfe2` | 1.21:1 | fail |
| `#e2dcf6` | `#300c41` | 12.6:1 | AAA |
| `#e2dcf6` | `#ffffff` | 1.33:1 | fail |
| `#e2dcf6` | `#f3f3f4` | 1.2:1 | fail |
| `#e2dcf6` | `#dedfe2` | 1:1 | fail |
| `#0d1d39` | `#300c41` | 1:1 | fail |
| `#0d1d39` | `#ffffff` | 16.77:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisse Intl | `--font-body` | webfont | 400, 500 | Headings, body copy, navigation, buttons, captions, and links throughout. | Inter |

- **Suisse Intl:** Use measured 400 and 500 weights; headings are medium with slightly tight negative tracking, eyebrow labels are uppercase with expanded tracking.

### Type scale — Major Third (ratio ≈ 1.28, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 43px | 500 | 1.21 | -0.017em | — | Suisse Intl | Centered hero statement in two compact lines. |
| h2 | 36px | 500 | 1.17 | -0.018em | — | Suisse Intl | Major section headings and prominent customer-work claims. |
| h3 | 30px | 500 | 1.2 | -0.015em | — | Suisse Intl | Feature, testimonial, and card headings. |
| h4 | 25px | 500 | 1.2 | -0.01em | — | Suisse Intl | Smaller subsection and product-story headings. |
| body | 16px | 400 | 1.5 | 0 | — | Suisse Intl | Explanatory paragraphs and standard supporting copy. |
| caption | 14px | 400 | 1.43 | 0 | — | Suisse Intl | Compact customer, attribution, and supporting details. |
| button | 16px | 500 | 1.5 | 0 | — | Suisse Intl | Primary demo action and prominent controls. |
| nav | 15px | 400 | 1.27 | 0 | — | Suisse Intl | Top navigation links and menu items. |
| link | 14px | 400 | 1.43 | 0 | — | Suisse Intl | Inline actions and footer destinations. |
| eyebrow | 15px | 400 | 1.4 | 0.067em | uppercase | Suisse Intl | Uppercase category labels above section headings. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 6, 8, 12, 16, 24, 32, 48 px.
- Section rhythm 48px · element gap 8px · card padding 1px · max content width 840px.

The hero uses a centered single-column composition, while later proof and feature areas shift into multi-column grids and long product-story panels. The measured page max width is 840px; preserve generous outer whitespace and centered headings where shown. White and purple bands alternate to distinguish evidence from immersive product content. Spacing follows an 8px base rhythm with comfortable density and pronounced section gaps. Keep body copy aligned to its card or column rather than stretching it across the page.

## Shape & elevation

- Radius: button `9999px` · card `8px` · media `8px` · nav `9999px` · link `12px` · xs `7px` · sm `8px` · md `10px` · lg `12px` · xl `20px` · pill `9999px`
- Shadow `inset` (button): `rgb(208, 198, 240) 0px 0px 0px 1px inset`
- Shadow `xl` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 60px 60px 0px, rgba(0, 0, 0, 0.03) 0px 30.375px 26.156px 0px, rgba(0, 0, 0, 0.02) 0px 12px 9.75px 0px, rgba(`
- Shadow `inset-2` (section): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(34, 8, 46, 0.75) 8px 12px 120px 0px inset`
- Shadow `inset-3` (button): `rgb(175, 150, 246) 0px 0px 0px 1px inset`
- Motion: standard transition `0.4s cubic-bezier(0.16, 1, 0.3, 1)` on interactive elements.

Most sections and cards feel flat, with pale hairlines and subtle corner rounding defining the boundaries. Product screenshots gain depth from vivid purple backplates and soft glow, not heavy card shadows. The floating navigation has the clearest measured elevation; keep any shadow treatment restrained and preserve contrast between layered media and the page canvas.

## Imagery

The visual storytelling is led by product-interface screenshots and a large video still, not decorative illustration. Frame product UI in broad rounded rectangles with purple or lavender glow treatments; these brighter hues belong to the media rather than the core palette. Customer logos and testimonial marks remain compact within light cards. The integration area uses a soft lavender bloom, while the closing CTA pairs a dark purple panel with open negative space.

## Components

### Announcement strip

A slim signal-lime banner above the dark navigation, with centered compact copy and an inline link.

### Pill CTA

Primary Request demo control uses a lime fill, midnight ink text, medium-weight Suisse Intl, and a fully rounded silhouette.

### Centered hero

Large two-line heading, concise supporting copy, and a centered CTA sit above a wide product preview on aubergine.

### Proof cards

Customer logos, ROI figures, and quotations appear in a tight multi-column white area with pale borders.

### Product story panel

A dark purple feature band pairs a left-side capability list with stacked product demonstrations and concise explanatory copy.

### Category cards

A rounded purple container holds a three-column grid of team-use-case cards, each with a short description and Explore more link.

### Testimonial cards

White quote cards use light separators, restrained text hierarchy, and small company or author identifiers.

### Link-rich footer

A plum brand field organizes many compact destinations into columns, then transitions to a darker purple resource strip.

### Measured component styles

- **Primary button** (“Request demo”): background #dee948 · text #0d1d39 · radius 64px · padding 12px 16px · 500 16px Suisse Intl
- **Secondary button**: background #8034bf · text #e2dcf6 · radius 100% · padding 0px · 400 14px Suisse Intl
- **Link** (“Customer Service Work across teams and a”): background #5b1f76 · text #1c1e20 · radius 12px · padding 0px · 400 14px Suisse Intl
- **Card** (“Front is essential to our fast response ”): background #dedfe2 · text #1c1e20 · radius 8px · padding 1px · 400 14px Suisse Intl
- **Navigation item** (“Product Solutions Resources Pricing Sign”): transparent background · text #1c1e20 · radius 0px · padding 0px · 400 14px Suisse Intl

## Do

- Use aubergine (#300c41) for immersive brand sections.
- Reserve signal lime (#dee948) for the clearest primary action.
- Keep hero messaging centered and concise.
- Alternate dark storytelling with white evidence sections.
- Use Suisse Intl or a close, restrained sans-serif substitute.
- Frame product imagery with rounded corners and purple glow.
- Keep cards and dividers subtle.

## Don't

- Do not turn product-media colors into the site-wide palette.
- Do not use lime for large background areas.
- Do not crowd the hero with multiple competing actions.
- Do not replace the alternating section rhythm with one continuous surface.
- Do not add heavy shadows to ordinary cards.
- Do not use decorative display typography or all-caps body copy.

## Agent prompt

Build a polished SaaS page in Front’s visual language. Use Aubergine Canvas (#300c41) for immersive hero and product-story bands, Gallery White (#ffffff) for proof and content sections, and Plum Footer (#5b1f76) for the link-rich close. Set headings in Porcelain Lilac (#f8f1fe) on dark surfaces and dark ink on light ones. Use Signal Lime (#dee948) sparingly for the primary pill CTA with Midnight Ink (#0d1d39) text. Use Suisse Intl when available, otherwise Inter; keep typography clean and medium-weight for headings. Create generous centered hero spacing, alternating section bands, compact evidence grids, and rounded product previews with purple media glow. Keep cards mostly flat with restrained borders, readable copy, and clear section hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered single column on a dark canvas; large product preview beneath the CTA. | Primary demo action, Product preview | Dark aubergine field, Centered heading, Lime pill button |
| 2 | logo-cloud | White, multi-column proof band combining customer marks, metrics, and testimonials. | Social proof, ROI metrics | Logo tiles, Light card dividers, Centered introduction |
| 3 | video | Centered heading and wide video image, followed by three evenly spaced benefit columns. | Play control, Feature explanation | White canvas, Rounded media, Three-column copy |
| 4 | comparison | Left-aligned heading introduces a dark product-story area. | Positioning statement | Aubergine background, Light heading |
| 5 | product-showcase | Long dark panel with a capability list beside vertically stacked product demonstrations. | Capability navigation, Feature storytelling | Purple media glow, Product UI frames, Compact descriptions |
| 6 | feature-split | White section split between a left-aligned heading and a short checklist. | Security reassurance, Certification checklist | Two-column layout, Minimal decoration |
| 7 | category-nav | Rounded purple container with a heading above a three-column, two-row card grid. | Explore by team, Repeated destination links | Purple cards, Light text, Rounded outer panel |
| 8 | testimonials | Centered heading above a horizontal row of testimonial cards. | Customer quotes, Attribution | White cards, Subtle separators, Compact company marks |
| 9 | integrations | Centered label, heading, supporting copy, and action within a softly tinted feature panel. | Integration discovery, Explore action | Lavender glow, Centered typography, Rounded panel |
| 10 | cta | Large dark rounded panel, with a left-aligned heading and primary action. | Conversion CTA | Aubergine panel, Lime button, Open negative space |
| 11 | other | A narrow transition band leads from the white CTA area into the purple footer. | Visual transition | Stepped purple motif, High-contrast band |
| 12 | footer | Plum footer with logo and tagline beside several dense link columns. | Grouped site navigation, Social links | Plum background, Column links, Brand block |
| 13 | footer | Compact darker strip with multiple columns of additional resource links. | Related resources, Secondary navigation | Dark purple strip, Small link groups |

## Source CSS custom properties (selected)

```css
--tw-text-opacity: 1;
--tw-bg-opacity: 1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/front-com