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

# Parloa · Design System

> Editorial clarity meets cinematic enterprise AI

**Theme:** light · **Industry:** ai · **Source:** https://www.parloa.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._

Parloa’s homepage pairs restrained editorial typography and generous white space with cinematic, warm-toned imagery. A vivid orange CTA and a full-bleed results section provide selective energy within an otherwise quiet enterprise presentation.

## North star

Let editorial serif typography and generous white space lead; reserve vivid orange and cinematic imagery for deliberate moments of emphasis.

## Overview

The page opens with full-bleed video of a hazy, amber city scene, overlaid with white navigation, a large Season Serif headline and a small orange primary CTA. The image’s browns and golds are photographic atmosphere, not the core UI palette. Below, a white canvas and ink-colored text establish a calm editorial rhythm: serif headlines introduce sections, while light Geist body copy stays compact and legible. Pale warm-gray cards and hairlines separate feature and testimonial content without heavy framing. Content is arranged in broad, aligned bands, with spacious transitions and selective multi-column grids. Customer imagery appears inside testimonial cards, while the security and certification sections return to restrained white space. A bright orange gradient dominates the results band as a deliberate late-page contrast. The footer is dense but orderly, returning to neutral surfaces, dark text, and subtle dividers.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, white content sections, light text on the dark hero, and light button labels. |
| Charcoal Ink | `#1f1c1b` | `--color-charcoal-ink` | brand | Primary text and headings, inverse cards, dark hero base, footer band, and dark CTA buttons. |
| Mushroom Taupe | `#746861` | `--color-mushroom-taupe` | neutral | Muted navigation, footer, and secondary text against light surfaces. |
| Limestone Line | `#ebe9e1` | `--color-limestone-line` | neutral | Fine borders and hairlines on inputs and pale cards. |
| Warm Porcelain | `#f5f4f0` | `--color-warm-porcelain` | surface | Soft card, input, and secondary-button surfaces. |
| Umber Text | `#5a4f4a` | `--color-umber-text` | neutral | Secondary text shade measured in the page; use sparingly where a softer dark text is needed. |
| Stone Divider | `#bfb9af` | `--color-stone-divider` | neutral | Subtle button-border detail in measured UI; secondary to the more frequent pale hairlines. |
| Signal Orange | `#ff5522` | `--color-signal-orange` | accent | Primary hero CTA and small moments of UI emphasis; the results band also uses orange imagery. |
| Ash Divider | `#d3d0c8` | `--color-ash-divider` | neutral | Low-contrast footer divider detail. |
| Roast Brown | `#4c423d` | `--color-roast-brown` | semantic | Dark inverse card and footer surface variation. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#1f1c1b` (Charcoal Ink) · `--color-surface-2` → `#f5f4f0` (Warm Porcelain) · `--color-surface-3` → `#ebe9e1` (Limestone Line) · `--color-surface-4` → `#4c423d` (Roast Brown) · `--color-text` → `#1f1c1b` (Charcoal Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#746861` (Mushroom Taupe) · `--color-border` → `#ebe9e1` (Limestone Line) · `--color-accent` → `#ff5522` (Signal Orange) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1f1c1b` | `#ffffff` | 16.93:1 | AAA |
| `#1f1c1b` | `#f5f4f0` | 15.39:1 | AAA |
| `#1f1c1b` | `#ebe9e1` | 13.93:1 | AAA |
| `#ffffff` | `#1f1c1b` | 16.93:1 | AAA |
| `#ffffff` | `#f5f4f0` | 1.1:1 | fail |
| `#ffffff` | `#ebe9e1` | 1.22:1 | fail |
| `#746861` | `#ffffff` | 5.39:1 | AA |
| `#746861` | `#1f1c1b` | 3.14:1 | AA-large |
| `#746861` | `#f5f4f0` | 4.9:1 | AA |
| `#746861` | `#ebe9e1` | 4.43:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 300, 500, 400 | Body copy, navigation, buttons, captions, and interface text. | Inter |
| Season Serif | `--font-display` | webfont | 440 | Large editorial headlines and section titles. | Cormorant Garamond |
| Geist Mono | `--font-mono` | webfont | 300 | Small technical or code-like labels, used sparingly. | Roboto Mono |

- **Geist:** Light weights keep utility text quiet; use medium emphasis for buttons. Preserve natural case.
- **Season Serif:** Use an elegant, light display serif with close, gently negative tracking; avoid heavy bold styling.
- **Geist Mono:** Light monospace with slightly open tracking; reserve for technical microcopy.

### Type scale — Golden Ratio (ratio ≈ 1.568, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 440 | 1.05 | -0.01em | — | Season Serif | Editorial hero headline, set large over the cinematic image. |
| h2 | 42px | 440 | 1.05 | -0.01em | — | Season Serif | Section introductions and prominent editorial statements. |
| h3 | 24px | 440 | 1.2 | -0.01em | — | Season Serif | Feature, card, and subsection headings. |
| body | 14px | 300 | 1.4 | 0 | — | Geist | Explanatory paragraphs, testimonial copy, and supporting descriptions. |
| caption | 12px | 300 | 1.4 | 0 | — | Geist | Compact attribution, metadata, and low-priority supporting labels. |
| button | 13px | 300 | 1.2 | 0 | — | Geist | Concise CTA and action labels. |
| nav | 12px | 300 | 1.4 | 0 | — | Geist | Small, understated primary navigation labels. |
| code | 12px | 300 | 1.2 | 0.02em | — | Geist Mono | Occasional technical or code-like interface label. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 5, 6, 8, 10, 12, 14, 16, 20, 24, 32, 42, 48, 64, 128 px.
- Section rhythm 64px · element gap 24px · card padding 24px · max content width 1280px.

Use a centered content frame capped at the measured 1280px, with broad white section bands and comfortable density. The page alternates full-bleed media with left-aligned editorial content, feature columns, testimonial cards, and simple split layouts. Maintain a clear 8px-based spacing rhythm, generous section gaps, and consistent 24px card padding. The footer can be denser and multi-column, but should keep its hierarchy, alignment, and breathing room. Preserve the page’s long-form vertical pacing rather than compressing every section into one screen.

## Shape & elevation

- Radius: button `6px` · input `6px` · card `6px` · xs `6px` · sm `10px` · md `16px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0.2) 1px 1px 1px 0px inset, rgba(255, 255, 255, 0.2) -1px -1px 1px 0px inset`
- Motion: standard transition `0.26s cubic-bezier(0.14, 0.875, 0.33, 0.915)` on interactive elements.

The interface is mostly flat: rely on white space, warm-gray surfaces, and thin pale borders rather than pronounced shadows. Cards and controls have small rounded corners, typically 6px, with soft contrast against the canvas. Layer text directly over hero media with image treatment for legibility; keep cards visually grounded without conspicuous elevation.

## Imagery

Lead with full-bleed cinematic video: hazy city and bridge photography in warm dusk tones, darkened enough for white overlays to read. Treat this amber palette as image content, not a UI token. Use customer and brand imagery in restrained card galleries, and certification graphics as evidence within mostly white sections. Avoid decorative illustration or generic product mockups where the page calls for photography.

## Components

### Primary CTA

Signal Orange (#ff5522) fill with white label, compact Geist medium text, and a 6px radius; use sparingly for the lead action.

### Secondary CTA

Warm Porcelain (#f5f4f0) or Charcoal Ink (#1f1c1b) fill with contrasting text and a 6px radius.

### Navigation

Small Geist labels sit over the hero image in white; keep the menu quiet and the booking action clearly differentiated.

### Feature cards

Three-column editorial feature row with pale neutral card surfaces, concise serif headings, and compact supporting copy.

### Testimonial cards

A horizontally broad gallery of customer quotes, combining photographic backgrounds with concise white copy and restrained framing.

### Newsletter form

Footer signup uses a warm off-white input with a thin Limestone Line (#ebe9e1) border and a contrasting dark submit button.

### Measured component styles

- **Primary button** (“Explore the platform”): background #ff5522 · text #ffffff · border 1px solid · radius 6px · padding 0px 14px · 500 14px Geist
- **Secondary button** (“Visit the trust center”): background #1f1c1b · text #ffffff · border 1px solid · radius 6px · padding 0px 14px · 500 14px Geist
- **Input**: background #f5f4f0 · text #1f1c1b · border 1px solid #ebe9e1 · radius 6px · padding 0px 11px · 300 14px Geist
- **Card** (“"This collaboration allowed us to push t”): background #f5f4f0 · text #ffffff · radius 6px · padding 24px · 400 16px Geist
- **Navigation item** (“Overview”): transparent background · text #746861 · radius 0px · padding 0px · 300 12px Geist

## Do

- Lead with a cinematic, full-bleed hero image or video.
- Use Season Serif-style headlines for editorial emphasis.
- Keep body copy light, compact, and easy to scan.
- Preserve large areas of clean white canvas.
- Use Signal Orange (#ff5522) for a small number of high-priority actions.
- Separate sections with whitespace and subtle warm-neutral rules.

## Don't

- Do not turn the amber hero photography into the general UI palette.
- Do not add heavy shadows or thick card borders.
- Do not use orange on every button or link.
- Do not crowd the editorial sections with dense copy.
- Do not replace the serif display voice with bold geometric headings.
- Do not make every section a boxed card grid.

## Agent prompt

Build a new enterprise AI page in Parloa’s visual style. Use a white canvas (#ffffff), Charcoal Ink (#1f1c1b) for primary text, and Warm Porcelain (#f5f4f0) with Limestone Line (#ebe9e1) for quiet UI surfaces. Set display headlines in an elegant Season Serif-like face, with light Geist-like sans-serif for navigation, buttons, and body copy. Create a cinematic, full-bleed photographic hero with subdued white overlays and one Signal Orange (#ff5522) primary CTA. Keep content aligned in a broad centered frame, with generous whitespace, editorial section introductions, and selective multi-column cards. Use photography as atmosphere and proof, not decoration. Keep elevation minimal, corners gently rounded, and the footer orderly even when it becomes dense.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video background with top navigation and lower-left headline and CTA. | Persistent primary navigation, Hero action | White overlay text, Orange primary button, Cinematic image treatment |
| 2 | logo-cloud | Single horizontal row of six customer logos on white. | Social proof | Monochrome logo row, Open white spacing |
| 3 | other | Left-aligned section label and large serif heading in a single-column white band. | Section orientation | Small eyebrow, Editorial headline |
| 4 | feature-grid | Three equal feature columns with visual panels, headings, and supporting copy. | Feature comparison | Three-column grid, Pale neutral panels |
| 5 | feature-split | Section headline on the left, explanatory paragraph aligned to the right. | Product introduction | Two-sided editorial layout, Large serif title |
| 6 | product-showcase | Tall, mostly open single-column showcase area following the platform introduction. | Product exploration | Large open canvas |
| 7 | other | Short white transition band with minimal visible content. | Visual pacing | Whitespace |
| 8 | testimonials | Section heading and ratings above a wide gallery of customer quote cards. | Customer proof, Review ratings | Horizontal card gallery, Image-backed quotes |
| 9 | other | Left-aligned editorial statement in a white single-column band. | Trust proof | Serif statement, Minimal framing |
| 10 | testimonials | Certification image and executive quote arranged side by side. | Executive endorsement | Certification artwork, Attributed quote |
| 11 | other | Large left-aligned heading with a trust-center action and certification marks below. | Trust-center navigation | Dark CTA, Certification logo row |
| 12 | logo-cloud | Six security and compliance marks arranged in a horizontal strip. | Compliance proof | Logo row, White background |
| 13 | stats | Full-bleed results section with headline, supporting copy, CTAs, and three metrics. | Impact summary, Conversion actions | Orange gradient imagery, Large numeric metrics |
| 14 | footer | Four-column footer with newsletter area, dense link groups, and legal details. | Newsletter signup, Site-wide navigation | Input and submit button, Multi-column links, Subtle dividers |

## Source CSS custom properties (selected)

```css
--duration-xs: 60ms;
--duration-sm: 110ms;
--duration-md: 260ms;
--duration-lg: 480ms;
--duration-xl: 920ms;
--duration-xxl: 1120ms;
--ease-out: cubic-bezier(0.14,0.875,0.33,0.915);
--ease-in-out: cubic-bezier(0.77,0,0.175,1);
--primary: #ff7714;
--secondary: #ed5f00;
--body-bg: #ffffff;
--body-color: #1f1c1b;
--link-color: #ff7714;
--grid-background: transparent;
--spacing-xs: 8px;
--spacing-s: 12px;
--spacing-base: 16px;
--spacing-m: 24px;
--spacing-l: 32px;
--spacing-xl: 48px;
--spacing-2xl: 64px;
--haze-space-none: 0;
--haze-space-small: 64px;
--haze-space-medium: 128px;
--haze-space-large: 192px;
--module-spacing-top: 64px;
--module-spacing-bottom: 64px;
--card-background: transparent;
--card-border-radius: 8px;
--button-icon-gap: 8px;
--button-primary-background: #ff7714;
--button-primary-color: #ffffff;
--button-primary-background-hover: #ff7714;
--button-primary-background-active: #ff7714;
--button-primary-border-width: 1px;
--button-primary-border-style: solid;
--button-primary-border-width-hover: 1px;
--button-primary-border-style-hover: solid;
--button-primary-radius: 12px;
--button-primary-padding: 12px 24px;
```

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