--- title: "Frontify design system" variant: extended source: https://www.frontify.com/en captured_at: 2026-10-12 theme: light industry: saas generator: Design DNA (https://four.wiralomi.com/style/frontify-com-en) ai_generated: true ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content" --- # Frontify · Design System > Quiet editorial design with a cinematic product front door **Theme:** light · **Industry:** saas · **Source:** https://www.frontify.com/en · **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._ Frontify’s homepage pairs a warm, restrained neutral system with a cinematic, image-led hero. Editorial headlines and generous space frame product-interface previews as the practical proof of its brand platform. ## North star Keep the warm neutral canvas and editorial whitespace dominant; use cinematic imagery and product UI as deliberate, contained focal points. ## Overview A warm off-white canvas (#f0f0eb) carries nearly the entire page, giving the homepage a calm editorial foundation. The first viewport deliberately breaks from that neutral field: a full-bleed blue-toned photograph supports a very large, light serif headline, white supporting copy, and compact rounded calls to action. Treat those blues as image-led atmosphere, not as a measured interface palette. Below, black display text and muted secondary copy sit amid substantial open space; customer marks and software previews provide visual rhythm without introducing loud section bands. Cranny supplies the expressive headline voice, while ABC Diatype and Satoshi keep navigation and body copy functional. Pale gray-green surfaces distinguish product cards and UI mockups, with fine borders defining edges instead of shadows. The layout favors centered statements and isolated product demonstrations, letting each idea breathe and making the interface imagery the main evidence of the product. ## Colors | Name | Hex | Token | Group | Role | |---|---|---|---|---| | Warm Canvas | `#f0f0eb` | `--color-warm-canvas` | brand | Dominant page background across the long-form sections, logo band, and product storytelling. | | Soft Graphite | `#ccccc8` | `--color-soft-graphite` | surface | Measured section and surface tone; use for subdued structural fills and hairline borders. | | Near Ink | `#111110` | `--color-near-ink` | semantic | Primary headlines, navigation, text, and dark filled demo calls to action. | | Muted Charcoal | `#464643` | `--color-muted-charcoal` | semantic | Secondary explanatory copy on the warm canvas. | | Paper White | `#ffffff` | `--color-paper-white` | neutral | Text on the dark hero CTA and light login button; also used for the outlined hero control. | | Deep Teal | `#042a2b` | `--color-deep-teal` | semantic | Muted text within pale product-interface cards, not a broad page background. | | Mist Panel | `#e9e9e3` | `--color-mist-panel` | surface | Pale fill for the larger product content card. | | Stone Panel | `#e1e1db` | `--color-stone-panel` | surface | Secondary card, interface, and button surface tone. | | Quiet Putty | `#d7d7cf` | `--color-quiet-putty` | surface | Subtle card and interface detail; keep its use limited to mockup-like surfaces. | ### Semantic aliases `--color-canvas` → `#f0f0eb` (Warm Canvas) · `--color-surface` → `#ccccc8` (Soft Graphite) · `--color-surface-2` → `#e9e9e3` (Mist Panel) · `--color-surface-3` → `#e1e1db` (Stone Panel) · `--color-text` → `#111110` (Near Ink) · `--color-text-muted` → `#464643` (Muted Charcoal) · `--color-text-subtle` → `#042a2b` (Deep Teal) · `--color-border` → `#ccccc8` (Soft Graphite) ### Contrast (WCAG 2.x) | Text | Background | Ratio | Level | |---|---|---|---| | `#111110` | `#f0f0eb` | 16.53:1 | AAA | | `#111110` | `#ccccc8` | 11.73:1 | AAA | | `#111110` | `#e9e9e3` | 15.5:1 | AAA | | `#111110` | `#e1e1db` | 14.39:1 | AAA | | `#464643` | `#f0f0eb` | 8.28:1 | AAA | | `#464643` | `#ccccc8` | 5.88:1 | AA | | `#464643` | `#e9e9e3` | 7.77:1 | AAA | | `#464643` | `#e1e1db` | 7.21:1 | AAA | | `#042a2b` | `#f0f0eb` | 13.4:1 | AAA | | `#042a2b` | `#ccccc8` | 9.51:1 | AAA | ## Typography | Family | Token | Source | Weights | Role | Free substitute | |---|---|---|---|---|---| | ABC Diatype | `--font-abc-diatype` | webfont | 400, 500 | Navigation, links, utility labels, and interface headings | DM Sans | | Satoshi | `--font-body` | webfont | 400 | Body copy and supporting explanatory text | Manrope | | Cranny | `--font-display` | webfont | 400, 300 | Display and primary editorial headlines | Instrument Serif | | Cabinetgrotesk | `--font-cabinetgrotesk` | webfont | 500, 700 | Strong secondary headings | Space Grotesk | - **ABC Diatype:** Utility-led sans; measured regular and medium weights. Keep labels in natural case with restrained tracking. - **Satoshi:** Regular weight for compact, readable copy; slight positive tracking and relaxed line height. - **Cranny:** Light display voice with open forms; use sentence case and avoid heavy, condensed treatments. - **Cabinetgrotesk:** Bold measured heading style; use for clear secondary hierarchy rather than body text. ### Type scale — Perfect Fifth (ratio ≈ 1.546, base 14px) | Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for | |---|---|---|---|---|---|---|---| | display | 80px | 300 | 1 | 0 | — | Cranny | Oversized, light editorial statement in the hero. | | h1 | 61px | 400 | 1.1 | 0 | — | Cranny | Primary page and section headline, including the hero title. | | h2 | 40px | 700 | 1 | 0 | — | Cabinetgrotesk | Emphatic secondary section heading. | | h3 | 18px | 400 | 1.3 | 0.01em | — | ABC Diatype | Product-feature or interface subheading. | | body | 14px | 400 | 1.3 | 0.01em | — | Satoshi | Supporting paragraphs and explanatory copy. | | nav | 14px | 500 | 1.67 | 0 | — | ABC Diatype | Top navigation labels and menu items. | | link | 14px | 400 | 1.67 | 0 | — | ABC Diatype | Text links and utility actions such as Pricing or Search. | ## Spacing & layout - Base unit **8px**, density **spacious**. - Scale (most used values): 4, 6, 8, 12, 14, 15, 16, 18, 24, 32, 48, 60, 80 px. - Section rhythm 80px · element gap 32px · card padding 30px · max content width —. Use a spacious, mostly single-column editorial flow on the warm canvas. The hero spans the viewport with centered title and actions over full-bleed media; subsequent areas return to centered headings and isolated product demonstrations. A logo strip creates a narrow transition, while product previews sit in restrained, centered grids or panels. Measured spacing uses an 8px base, with a spacious density and long section gaps; preserve this generous rhythm rather than compressing content. The crawler did not provide a page max-width, so let screenshots guide responsive container sizing. ## Shape & elevation - Radius: button `24px` · card `8px` · nav `9999px` · link `9999px` · xs `4px` · sm `8px` · md `24px` · pill `9999px` - No box shadows measured: the page is flat. - Motion: standard transition `0.2s ease` on interactive elements. The page reads as largely flat: no measured shadows or gradients. Use pale fills and fine borders to separate cards, controls, and mockup panes from the canvas. Rounded controls and softly rounded product cards provide the main depth cues; reserve stronger layering for the hero’s image overlay and floating UI elements. ## Imagery Lead with a full-bleed cinematic photograph featuring a person in an outdoor landscape, with a framed asset-tool overlay. Later imagery is mostly customer marks, asset thumbnails, and software UI previews. Keep photography rich and atmospheric, while product mockups remain pale, crisp, and low-contrast; vivid colors within thumbnails belong to imagery, not the core palette. ## Components ### Top navigation A light rounded navigation bar sits over the hero media, with compact ABC Diatype labels, menu indicators, a light outlined Login control, and a dark Demo CTA. ### Hero actions Pair a Near Ink (#111110) filled demo button with white text and a transparent, white-outlined secondary action; both use pill-like rounded ends. ### Logo strip Customer marks appear in a horizontal band on the same Warm Canvas (#f0f0eb), acting as a quiet credibility transition rather than a colored section. ### Product cards Show interface content on Mist Panel (#e9e9e3) or Stone Panel (#e1e1db) fills, with Deep Teal (#042a2b) text and restrained rounded corners. ### Asset search preview A search field and filters sit above a compact thumbnail gallery; use a clear input area, understated controls, and image-led results. ### Guideline showcase Present the product UI as a wide, pale mockup with a narrow navigation pane, content column, and large preview area. ### Measured component styles - **Primary button** (“Demo”): background #111110 · text #ffffff · border 1px solid · radius 24px · padding 12px 16px · 400 14px ABC Diatype - **Secondary button** (“Login”): background #ffffff · text #111110 · border 1px solid #111110 · radius 24px · padding 12px 16px · 400 14px ABC Diatype - **Link** (“Pricing”): transparent background · text #111110 · radius 32px · padding 8px 16px · 500 14px ABC Diatype - **Input** (“Search assets”): transparent background · text #111110 · radius 0px · padding 0px · 400 14px ABC Diatype - **Card** (“Guidelines Assets Templates Photography ”): background #e9e9e3 · text #042a2b · radius 8px · padding 24px 48px 24px 24px · 400 18px ABC Diatype - **Navigation item** (“Platform”): transparent background · text #111110 · radius 0px · padding 0px · 500 14px ABC Diatype ## Do - Keep Warm Canvas (#f0f0eb) as the dominant page field. - Use Cranny for large, editorial headline moments. - Keep navigation and body copy compact and functional. - Let product mockups sit on pale gray-green surfaces. - Use near-black filled buttons for primary actions. - Give sections generous breathing room. - Treat hero blues as photography, not interface palette. ## Don't - Don't introduce a saturated brand-color system absent from the measured palette. - Don't turn every section into a colored card or band. - Don't add drop shadows as a default separation method. - Don't crowd headings, copy, and product previews together. - Don't use decorative gradients to imitate the hero photograph. - Don't make product UI louder than the editorial headline. ## Agent prompt Build a new Frontify-style SaaS page with a warm, spacious editorial character. Use Warm Canvas (#f0f0eb) for the main background, Near Ink (#111110) for headlines and primary buttons, and Muted Charcoal (#464643) for supporting copy. Set large headlines in an expressive light serif close to Cranny; use a clean utility sans close to ABC Diatype for navigation and controls. Give the opening section a cinematic, full-bleed photograph with centered copy and compact pill-shaped actions, then return to quiet neutral sections with generous gaps. Use Mist Panel (#e9e9e3) and Stone Panel (#e1e1db) for restrained product UI previews, with Deep Teal (#042a2b) for interface text. Prefer fine borders over shadows, keep imagery distinct from interface colors, and preserve strong whitespace around each product demonstration. ## Page sections (top to bottom) | # | Type | Layout | UX patterns | UI patterns | |---|---|---|---|---| | 1 | hero | Full-bleed photo beneath a floating navigation bar; centered headline, copy, and paired actions above a framed asset overlay. | Primary demo CTA, Secondary explainer action, Floating navigation | Large light serif headline, White-on-image copy, Rounded nav bar, Framed asset overlay | | 2 | logo-cloud | A horizontal row of customer logos on the continuous warm canvas. | Customer credibility | Monochrome logo marks, Open horizontal spacing | | 3 | product-showcase | Centered section statement followed by a product-interface demonstration amid extensive whitespace. | Product capability introduction, Interface demonstration | Centered editorial heading, Pale product panel, SVG interface details | | 4 | product-showcase | Centered search story and CTA above a search field, filter suggestions, and a thumbnail grid. | Search interaction preview, Filter suggestions, Demo action | Understated search input, Dropdown filters, Image thumbnail grid | | 5 | product-showcase | Left-aligned feature copy with a wide product interface preview below. | Guideline feature explanation, See-in-action CTA | Pale multi-column mockup, Sidebar navigation, Content and preview panes | ## Source CSS custom properties (selected) ```css --coded-color-theme--bg: #f0f0eb; --primitive-font-family--utility: "ABC Diatype",Verdana,sans-serif; --coded-color-theme--text: #111110; --primitive-font-size--f-18px: 1.125rem; --primitive-font-family--expression: Cranny,"Palatino Linotype",sans-serif; --primitive-spacing--s-16px: 1rem; --primitive-font-weight--regular: 400; --primitive-letter-spacing--1: .01em; --primitive-spacing--s-32px: 2rem; --alias-spacing--s-4xs: .75rem; --alias-spacing--s-xs: 1.5rem; --alias-spacing--s-3xs: 1rem; --alias-spacing--s-xl: 5rem; --type-headline--medium-reg--h6-font-family: Cranny,"Palatino Linotype",sans-serif; --type-headline--medium-reg--h6-spacing: 0em; --alias-spacing--s-lg: 4rem; --primitive-spacing--s-8px: .5rem; --type-headline--small-reg--h8-font-family: Cranny,"Palatino Linotype",sans-serif; --type-headline--small-reg--h8-spacing: 0em; --primitive-spacing--s-24px: 1.5rem; --type-body--small-reg--b6-font-family: "ABC Diatype",Verdana,sans-serif; --archive-alias-txt-color--secondary: #575753; --type-body--small-reg--b6-spacing: .01em; --radius--r-default: .5rem; --type-body--medium-acc--b3-font-family: "ABC Diatype",Verdana,sans-serif; --type-body--medium-acc--b3-spacing: .01em; --archive-alias-bg-color--inverse: #111110; --alias-spacing--s-md: 3rem; --coded-color-theme--bg-secondary: #e1e1db; --archive-alias-txt-color--inverse: white; --type-body--large-acc--b1-font-family: "ABC Diatype",Verdana,sans-serif; --type-body--large-acc--b1-spacing: 0em; --alias-spacing--s-2xl: 8rem; --primitive-spacing--s-80px: 5rem; --coded-color-theme--bg-transparent: white; --primitive-spacing--s-64px: 4rem; --alias-spacing--s-3xl: 10rem; --alias-spacing--s-7xs: 0rem; --alias-spacing--s-6xs: .25rem; --primitive-spacing--s-0px: 0rem; ``` --- 本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 Generated by Design DNA · https://four.wiralomi.com/style/frontify-com-en