Front — design system & UI screens

Communication · 2 screens · 21 sections · front.com

A deep-violet landing hero with a large two-line white headline ("AI for simple support is everywhere. Complex customer operations demand Front.") sitting above a floating, dark inset product mockup showing a shared inbox conversation with avatars and an AI suggestion bubble; a lime-yellow "Request a demo" pill is the signature accent. Below, the page alternates white feature bands with rounded violet product cards on the right, a "Categories Won" bar-chart proof block, a 3x2 industry photo grid, customer testimonial cards, a dark integrations logo grid, and a lime CTA banner, closing on a dense dark-violet mega-footer. The recurring motif is white headline + violet rounded UI screenshot pairs against an editorial purple/lime system.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/front.

Decoded design system

Front's decoded design system: background #FFFFFF, text #1C1E20, accent #300C41, link #8034BF, primary #0D1D39; type scale h1 62px / h2 52px / body 16px; 8px spacing base; 12px base radius. The single interactive/action color is #300C41 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F1F1F1`
border	`#DCDDDD`
text	`#1C1E20`
text_muted	`#727374`
primary	`#0D1D39`
accent	`#300C41`
link	`#8034BF`
secondary	`#DEE948`
button_bg	`#300C41`
button_text	`#FFFFFF`

Using these colors

Action color #300C41 — the single interactive color; only on things you click or must notice, never large fills.
accent, button_bg are all #300C41 — one role, not several (the action color).
accent #300C41 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #0D1D39 — a brand color — but the call-to-action uses #300C41, not this.
link #8034BF — inline text links and link-styled controls.
secondary #DEE948 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Suisse Intl
Body: Suisse Intl
h1: 62px
h2: 52px
body: 16px

Spacing

base unit: 8px
scale: 8px, 10px, 12px, 15px, 16px, 24px, 32px, 48px, 64px, 80px

Radii

base: 12px
button: 64px

Shadow

rgb(175, 150, 246) 0px 0px 0px 1px inset

Shadows (elevation)

card: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px

Motion

Micro-interactions run at 400ms (dominant) with cubic-bezier(0.16, 1, 0.3, 1).

durations: 400ms · 200ms · 300ms
easings: cubic-bezier(0.16, 1, 0.3, 1) · cubic-bezier(0.455, 0.03, 0.515, 0.955)
animated properties: opacity, transform, color, background-color

Button states (measured)

primary hover: background #E2DCF6 · color #300C41
primary focus: background #FFFFFF · color #300C41 · outline 1px solid rgb(255, 255, 255)

Layout (measured)

container max-width: 1300px
nav: 80px
common grid: 12 columns

Motion choreography (measured)

Load order: div.swiper-button-prev×2 → div.swiper-button-prev → div.swiper-button-prev → div.swiper-button-prev → div.swiper-button-prev → iframe.qlfd-not-mobile