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

# Applied Labs · Design System

> Warm editorial storytelling meets outcome-driven AI

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

Applied Labs pairs cinematic, full-width photography with a restrained editorial interface to present its AI customer-experience platform. Warm off-white sections, dark product showcases, and selective blue accents make the page feel both human and operational.

## North star

Let warm, human imagery introduce the story, then make every interface section feel clear, measured, and product-specific.

## Overview

The page balances human warmth with a product-focused SaaS system. Its opening and closing photography uses brick, shadow, and real street scenes as immersive backdrops; these image colours are not the core interface palette. The interface itself relies on white canvas, warm pale section bands, near-black text, and charcoal product-story sections. Blue appears sparingly in links, badges, charts, and selected cards. Archivo carries headlines and body copy with medium weights and subtly tight tracking, while IBM Plex Mono gives captions and technical labels a compact, precise tone. Layouts alternate between broad centered statements, four-card feature rows, asymmetric product panels, and evidence-led chart or testimonial bands. Comfortable whitespace separates these blocks; thin warm-gray borders and rounded corners define cards without heavy shadow. Use the screenshots to preserve the clear contrast between photographic storytelling and crisp product UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Periwinkle Mist | `#b9caff` | `--color-periwinkle-mist` | accent | Pale blue badge and small interface highlight; a supporting accent rather than a page-wide fill. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, light cards, white CTA surfaces, and reversed text over dark sections. |
| Near Ink | `#020202` | `--color-near-ink` | neutral | Primary headings and body text, dark CTA fills, and high-contrast product panels. |
| Warm Charcoal | `#3d3838` | `--color-warm-charcoal` | surface | Large dark product showcase band and its contrasting text or dividing edges. |
| Deep Roast | `#141211` | `--color-deep-roast` | neutral | Measured gradient detail; use only as a subtle dark photographic or visual treatment. |
| Soft Stone | `#f3f0ee` | `--color-soft-stone` | surface | Warm pale section backgrounds and small channel badges such as email labels. |
| Cream Paper | `#fdf8f2` | `--color-cream-paper` | surface | Warm feature-card fills and lightly tinted content sections. |
| Muted Taupe | `#57534e` | `--color-muted-taupe` | neutral | Secondary copy and subdued mono channel labels on pale backgrounds. |
| Linen Line | `#ece8e2` | `--color-linen-line` | semantic | Fine card and section borders that separate light surfaces without strong contrast. |
| Olive Gray | `#6b6a5e` | `--color-olive-gray` | neutral | Occasional subdued text detail; not a dominant brand or surface colour. |
| Roasted Ink | `#1c1a18` | `--color-roasted-ink` | surface | Deep alternate section background for high-contrast content. |
| Warm Divider | `#e4e0da` | `--color-warm-divider` | semantic | Card outlines and subtle lower-edge rules around product mockups. |
| Pale Periwinkle | `#dfe7ff` | `--color-pale-periwinkle` | accent | Occasional cool-tinted card or highlight behind selected product content. |
| Signal Periwinkle | `#6b8eff` | `--color-signal-periwinkle` | accent | Blue accent on selected cards, chart details, and small interface marks. |
| Deep Olive Ink | `#26251e` | `--color-deep-olive-ink` | neutral | Secondary dark heading or text colour where softer than the primary near-black. |
| Cool Mist | `#e9eef7` | `--color-cool-mist` | surface | Cool pale band behind a proof or outcome-focused section. |
| Electric Blue | `#3061ff` | `--color-electric-blue` | accent | Strong blue link or small emphasis; keep it selective and avoid broad fills. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#3d3838` (Warm Charcoal) · `--color-surface-2` → `#f3f0ee` (Soft Stone) · `--color-surface-3` → `#fdf8f2` (Cream Paper) · `--color-surface-4` → `#1c1a18` (Roasted Ink) · `--color-text` → `#020202` (Near Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#57534e` (Muted Taupe) · `--color-border` → `#ece8e2` (Linen Line) · `--color-accent` → `#6b8eff` (Signal Periwinkle) · `--color-accent-2` → `#3061ff` (Electric Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#020202` | `#ffffff` | 20.75:1 | AAA |
| `#020202` | `#3d3838` | 1.8:1 | fail |
| `#020202` | `#f3f0ee` | 18.29:1 | AAA |
| `#020202` | `#fdf8f2` | 19.65:1 | AAA |
| `#ffffff` | `#3d3838` | 11.53:1 | AAA |
| `#ffffff` | `#f3f0ee` | 1.13:1 | fail |
| `#ffffff` | `#fdf8f2` | 1.06:1 | fail |
| `#57534e` | `#ffffff` | 7.63:1 | AAA |
| `#57534e` | `#3d3838` | 1.51:1 | fail |
| `#57534e` | `#f3f0ee` | 6.72:1 | AA |

### Gradients

- `linear-gradient(to top, oklab(0 0 0 / 0.3) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Archivo | `--font-body` | webfont | 500, 400, 600 | Headlines, body copy, buttons, navigation, and most interface labels. | Inter |
| IBM Plex Mono | `--font-mono` | webfont | 400, 500, 600 | Captions, technical labels, channel badges, and compact metadata. | Space Mono |

- **Archivo:** Measured weights 400, 500, and 600; headlines use medium weight and slightly tight tracking.
- **IBM Plex Mono:** Measured weights 400, 500, and 600; keep labels small, crisp, and generally untransformed.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 500 | 1.11 | -0.02em | — | Archivo | Hero headline and primary page statement. |
| h2 | 44px | 500 | 1.14 | -0.02em | — | Archivo | Major section headings introducing lifecycle, outcomes, and proof. |
| h3 | 34px | 500 | 1.18 | -0.02em | — | Archivo | Feature-card and product-story subheadings. |
| h4 | 26px | 500 | 1.23 | -0.02em | — | Archivo | Smaller product panel and supporting content headings. |
| body | 18px | 500 | 1.44 | -0.01em | — | Archivo | Introductory copy, feature descriptions, and explanatory text. |
| caption | 11px | 400 | 1.27 | 0 | — | IBM Plex Mono | Compact technical labels, channel markers, and metadata. |
| button | 14.5px | 500 | 1.24 | 0 | — | Archivo | Primary and secondary CTA labels. |
| link | 14.5px | 500 | 1.24 | 0 | — | Archivo | Inline links and secondary navigation actions. |
| code | 11px | 400 | 1.27 | 0 | — | IBM Plex Mono | Mono technical snippets and compact system-like labels. |

## Spacing & layout

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

Use a wide editorial canvas with broad section bands and generous breathing room rather than a dense dashboard grid. The hero is full-bleed photography with left-aligned copy; subsequent sections alternate centered headings, four-column feature cards, paired content panels, and wide product or chart showcases. Align cards and text to consistent content edges, while allowing selected mockups to feel oversized or offset. Maintain comfortable vertical rhythm between sections and clear contrast between white, cream, cool pale, and charcoal bands. The measured spacing scale is available, but the page does not establish a measured max-width.

## Shape & elevation

- Radius: button `8px` · card `14px` · media `50%` · badge `9999px` · nav `9999px` · link `16px` · xs `5px` · sm `6px` · md `8px` · lg `10px` · xl `12px` · 2xl `14px` · pill `9999px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(17, 17, 17, 0.06) 0px 2px 8px 0px`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(228, 224, 218) 0px 2px 0px 0px`
- Shadow `sm-2` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px`
- Shadow `md` (badge): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.18) 0px 2px 12px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Keep most surfaces flat and let warm-gray hairlines define cards and product mockups. Cards have measured 14px radii, buttons 8px, and badges pill-shaped corners; use these distinctions consistently. A restrained small shadow appears in limited UI contexts, while the larger visual hierarchy comes from alternating dark and light bands, not stacked elevation.

## Imagery

Use cinematic, full-width lifestyle photography for the hero and lower CTA, showing real urban storefronts and people in motion. Preserve the warm brick and shadow-rich photographic character, with text legible over the image. Product sections rely on clean, white UI mockups, diagrams, charts, and integration marks rather than decorative illustration. Treat image-derived browns as photographic content, not the interface palette.

## Components

### Hero and navigation

Overlay a compact navigation row on full-bleed storefront photography. Pair a large white headline and short copy with a white primary CTA and understated text link.

### Lifecycle feature cards

Present four warm, lightly tinted cards beneath a dark heading. Use concise titles, muted explanatory copy, small mono category labels, and restrained blue marks.

### Outcome panels

Alternate pale and dark rounded panels for capabilities and measurable results; use thin borders, short feature lists, and compact pill labels.

### Product mockup showcase

Set oversized white interface cards against a charcoal band. Combine Archivo product headings with small IBM Plex Mono labels and clean embedded UI.

### Evidence chart

Use a cool pale section band, a concise risk-reversal message, and a white chart card with carefully limited blue emphasis.

### Testimonial cards

Arrange customer quotes in a horizontal card sequence with alternating white, black, and blue surfaces, keeping the quote text prominent.

### CTA buttons

Use compact Archivo labels, 8px corners, and high-contrast black-on-white or white-on-black treatments; keep secondary actions quieter.

### Measured component styles

- **Primary button** (“Book a demo”): background #ffffff · text #020202 · radius 8px · padding 16px 30px · 500 14.5px Archivo
- **Secondary button** (“Book a demo”): background #020202 · text #ffffff · radius 3.35544e+07px · padding 15px 28px · 500 14.5px Archivo
- **Link** (“RESOLVE Resolve the issue — not just def”): background #fdf8f2 · text #09090b · radius 16px · padding 32px · 400 16px Archivo
- **Card** (“JR Jess Rivers Where is my order? · #451”): background #ffffff · text #09090b · border 1px solid #e4e0da · radius 14px · padding 0px · 400 16px Archivo
- **Badge** (“Support Agent”): transparent background · text #020202 · border 1px solid #d6d2ca · radius 3.35544e+07px · padding 6px 14px · 500 13px Archivo
- **Navigation item** (“Product Industries Resources Customers P”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Archivo

## Do

- Use Archivo for the main interface hierarchy.
- Reserve IBM Plex Mono for compact labels and metadata.
- Alternate warm light sections with deliberate charcoal product bands.
- Keep blue accents limited to meaningful UI highlights.
- Use thin warm-gray borders to define cards.
- Let photography bring warmth without recolouring the interface.

## Don't

- Do not turn the interface into a brown palette based on the hero photo.
- Do not use gradients as a dominant page treatment.
- Do not crowd feature cards with long paragraphs.
- Do not add heavy shadows to every surface.
- Do not make every section dark or every CTA blue.
- Do not use decorative illustrations where product UI or photography is needed.

## Agent prompt

Build a new Applied Labs page as an editorial AI SaaS experience. Use Gallery White (#ffffff), Cream Paper (#fdf8f2), and Soft Stone (#f3f0ee) for calm content bands; reserve Warm Charcoal (#3d3838) and Roasted Ink (#1c1a18) for focused product sections. Set primary copy in Near Ink (#020202), supporting text in Muted Taupe (#57534e), and fine borders in Linen Line (#ece8e2). Use Signal Periwinkle (#6b8eff) sparingly for interface emphasis. Set headings, body, navigation, and buttons in Archivo; use IBM Plex Mono for compact labels. Pair one immersive lifestyle image with crisp product mockups, chart evidence, and concise card layouts. Keep surfaces mostly flat, corners softly rounded, and the vertical rhythm comfortable. Preserve strong contrast and a clear separation between brand storytelling and operational product detail.

## Source CSS custom properties (selected)

```css
--tw-prose-quote-borders: hsl(var(--border));
--tw-prose-th-borders: hsl(var(--border));
--tw-prose-td-borders: hsl(var(--border));
```

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