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

# Workleap — Officevibe · Design System

> Bright editorial layouts, grounded in actionable product clarity.

**Theme:** light · **Industry:** saas · **Source:** https://workleap.com/officevibe · **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._

A bright, editorial SaaS product page that pairs expressive headlines with clear, practical product storytelling. Saturated blue CTAs and interface imagery add focus to an otherwise restrained white canvas.

## North star

Keep the page airy and editorial: let expressive dark headlines explain the story, and use vivid blue only to guide action and spotlight product UI.

## Overview

The page is built on a predominantly white canvas, with subtle pale-blue atmospheric gradients near the hero and selective warm off-white bands. Ink-dark typography carries the narrative, while vivid Signal Blue is reserved for filled demo buttons, outlined actions, links, and small interface accents. Oversized, closely tracked display headlines create an editorial voice; italic serif-like emphasis appears within otherwise clean sans-serif headlines. Body copy stays compact and readable. The layout alternates centered product explanations, spacious two-column feature splits, integration content, testimonials, capability cards, FAQ, and a dark closing footer. Product UI screenshots—not lifestyle photography—supply most of the visual detail, often framed in saturated blue panels or softly elevated cards. Rounded buttons, generous media corners, thin dividers, and restrained shadows keep the interface approachable without making the page feel ornamental.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and the background for most feature, testimonial, capability, and FAQ sections. |
| Signal Blue | `#2545ff` | `--color-signal-blue` | accent | Filled primary demo CTA, outlined actions, links, and small emphasis within product interface visuals. |
| Soft Ink | `#171417` | `--color-soft-ink` | brand | Primary headline, body, navigation, and card text against light backgrounds. |
| Haze Lilac | `#c9d0f5` | `--color-haze-lilac` | surface | Pale blue-lilac gradient accent behind hero content and product imagery. |
| Warm Porcelain | `#f9f8f6` | `--color-warm-porcelain` | surface | Warm off-white integration section band and subtle card, input, and footer details. |
| Deep Charcoal | `#222222` | `--color-deep-charcoal` | neutral | Secondary navigation and inline link text; visually close to the primary ink. |
| Cloud Gray | `#f3f3f3` | `--color-cloud-gray` | surface | Light capability-card backgrounds and understated component surfaces. |
| Quiet Divider | `#e6e6e4` | `--color-quiet-divider` | semantic | Fine card and component borders that separate content without strong contrast. |
| Midnight Indigo | `#0c1754` | `--color-midnight-indigo` | brand | Full-width footer background and inverse text treatment; a deep anchor at the page end. |
| Muted Graphite | `#484747` | `--color-muted-graphite` | neutral | Muted body copy and secondary explanatory text on light sections. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f3f3f3` (Cloud Gray) · `--color-surface-2` → `#0c1754` (Midnight Indigo) · `--color-surface-3` → `#f9f8f6` (Warm Porcelain) · `--color-text` → `#171417` (Soft Ink) · `--color-text-muted` → `#484747` (Muted Graphite) · `--color-text-subtle` → `#f9f8f6` (Warm Porcelain) · `--color-border` → `#e6e6e4` (Quiet Divider) · `--color-accent` → `#2545ff` (Signal Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#171417` | `#ffffff` | 18.28:1 | AAA |
| `#171417` | `#f3f3f3` | 16.47:1 | AAA |
| `#171417` | `#0c1754` | 1.1:1 | fail |
| `#171417` | `#f9f8f6` | 17.22:1 | AAA |
| `#484747` | `#ffffff` | 9.26:1 | AAA |
| `#484747` | `#f3f3f3` | 8.35:1 | AAA |
| `#484747` | `#0c1754` | 1.79:1 | fail |
| `#484747` | `#f9f8f6` | 8.72:1 | AAA |
| `#f9f8f6` | `#ffffff` | 1.06:1 | fail |
| `#f9f8f6` | `#f3f3f3` | 1.05:1 | fail |

### Gradients

- `linear-gradient(135deg, rgba(0, 0, 0, 0) 66%, rgba(37, 69, 255, 0.2))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter hosted | `--font-body` | webfont | 400, 500, 700 | Body copy, navigation, links, captions, and button labels. | Inter |
| Abcfavoritvariable | `--font-display` | webfont | 400 | Display and heading typography, including the page's large editorial hero headline. | Manrope |

- **Inter hosted:** Use regular weight for copy and navigation, medium for buttons; sentence case and restrained tracking.
- **Abcfavoritvariable:** Measured at regular weight with tight negative tracking; use expressive italic emphasis in selected headline phrases where available.

### Type scale — Augmented Fourth (ratio ≈ 1.431, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 1 | -0.05em | — | Abcfavoritvariable | Oversized editorial headline treatment, most notably in the hero. |
| h1 | 64px | 400 | 1 | -0.05em | — | Abcfavoritvariable | Primary page headline and major standalone statements. |
| h2 | 48px | 400 | 1.1 | -0.02em | — | Abcfavoritvariable | Section headlines for features, testimonials, and FAQs. |
| h3 | 40px | 400 | 1.1 | -0.02em | — | Abcfavoritvariable | Feature and content subsection headings. |
| h4 | 24px | 400 | 1.1 | -0.02em | — | Abcfavoritvariable | Small card or nested section headings. |
| body | 16px | 400 | 1.4 | 0 | — | Inter hosted | Product explanations, feature descriptions, and paragraph copy. |
| caption | 14px | 400 | 1.4 | 0 | — | Inter hosted | Eyebrows, labels, and compact secondary information. |
| button | 16px | 500 | 1.1 | 0 | — | Inter hosted | Primary and outlined CTA labels. |
| nav | 16px | 400 | 1.4 | 0 | — | Inter hosted | Header and footer navigation links. |
| link | 16px | 400 | 1.6 | 0 | — | Inter hosted | Inline links and text actions. |

OpenType features in use: `"ss01", "ss04"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 11, 12, 16, 18, 20, 24, 32, 40, 48, 64, 80 px.
- Section rhythm 40px · element gap 8px · card padding — · max content width 1280px.

Use a centered content area capped at the measured 1280px page maximum. The page moves from a full-width announcement and navigation into an airy hero, then alternates centered how-it-works content with broad feature splits. Keep text aligned to the start beside product visuals; reserve centered alignment for selected statements and CTA moments. Sections have substantial vertical breathing room, while cards and interface groupings remain compact. Overall density is compact in controls and copy, but spacious in section rhythm.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `24px` · xs `16px` · sm `24px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.1) 0px 4px 16px 0px`
- Shadow `sm` (card): `rgba(37, 69, 255, 0.1) 0px 4px 8px 0px`
- Shadow `lg` (media): `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.08) 0px 8px 24px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

Most sections sit flat on white, with fine pale borders separating cards and controls. Product UI mockups and chat-like overlays use soft, low-contrast shadows to suggest depth without a heavy card-stack effect. Rounded media and cards create the main layering cue; reserve the strongest contrast for the dark footer and blue CTA treatment.

## Imagery

Use product-interface screenshots and UI mockups as the main imagery; lifestyle photography is not the defining visual language. Frame dashboard, survey, and feedback examples in rounded panels, sometimes with saturated blue backgrounds. Small partner marks and app icons appear in integration content. Keep visuals crisp and legible, with occasional pale blue atmospheric gradients and playful confetti or reaction details inside recognition mockups.

## Components

### Primary CTA

Filled Signal Blue (#2545ff) pill button with white label, medium Inter styling, and a thin blue border.

### Outlined CTA

White or transparent pill button with a 2px Signal Blue (#2545ff) border and matching text.

### Feature split

Large product mockup paired with a headline, explanatory copy, compact checklist, and demo or survey action.

### Product UI panel

Rounded interface mockup with survey, report, or feedback content; use blue framing or subtle elevation when appropriate.

### Capability card

Rounded light-gray or near-white card with dark text, a thin subtle border, and minimal or soft blue shadow.

### FAQ accordion

Question list with concise text, subtle separators, and small disclosure icons; pair with an editorial section heading.

### Footer

Deep Indigo (#0c1754) full-width footer with white brand and navigation content, email signup, and compact legal details.

### Measured component styles

- **Primary button** (“Book a demo”): background #2545ff · text #ffffff · border 2px solid #2545ff · radius 100px · padding 8px 24px · 500 16px Inter hosted
- **Secondary button** (“Explore surveys”): transparent background · text #2545ff · border 2px solid #2545ff · radius 100px · padding 11.2px 32px · 500 16px Inter hosted
- **Link** (“Goals”): transparent background · text #171417 · radius 0px · padding 0px · 400 16px Inter hosted
- **Input**: transparent background · text #ffffff · radius 0px · padding 12px 128px 12px 0px · 400 16px Inter hosted
- **Card** (“Goals Drafts goals in one pass, checks t”): background #f3f3f3 · text #171417 · border 1px solid #f9f8f6 · radius 24px · padding 0px · 400 16px Inter hosted
- **Navigation item** (“Product How it works Our Story Pricing R”): transparent background · text #171417 · radius 0px · padding 0px · 400 16px Inter hosted

## Do

- Keep the main canvas white and uncluttered.
- Use Signal Blue for clear actions and selected links.
- Pair expressive headlines with concise Inter body copy.
- Let product UI mockups carry feature explanations.
- Alternate centered content with aligned feature splits.
- Use rounded buttons, cards, and media consistently.

## Don't

- Do not turn every section into a tinted band.
- Do not use blue as a broad background by default.
- Avoid heavy shadows and thick decorative borders.
- Do not crowd feature text or interface mockups.
- Avoid lifestyle imagery as the dominant visual.
- Do not add unmeasured colors or decorative palettes.

## Agent prompt

Build a new Workleap-style SaaS page with an airy white canvas (#ffffff), ink-dark text (#171417), and carefully rationed Signal Blue (#2545ff) for primary actions, outlines, and small UI accents. Add a restrained Haze Lilac (#c9d0f5) glow behind hero or product visuals, and use Warm Porcelain (#f9f8f6) for an occasional section band. Use an editorial display face such as Manrope for large, tightly tracked headings and Inter for body, navigation, and controls. Structure the page as a clear narrative with a spacious hero, alternating copy-and-product-UI feature splits, and concise content sections. Frame interface mockups in rounded panels; keep elevation subtle. Finish with a contrasting Midnight Indigo (#0c1754) footer. Preserve generous section breathing room and concise, readable copy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Full-width announcement strip above a horizontal navigation bar. | Announcement link, Product navigation, Login and demo actions | Pale blue strip, Wordmark, Pill CTAs |
| 2 | how-it-works | Centered heading and explanation above three columns of product insight examples. | Three-step overview, Product assistant prompt | Pale gradient glow, Floating UI panel, Three compact insight visuals |
| 3 | feature-split | Two-column split with copy on one side and a framed survey mockup on the other. | Feature explanation, Checklist, Demo and survey actions | Blue product panel, Rounded media, Pill buttons |
| 4 | feature-split | Product report visual beside aligned explanatory copy. | Results explanation, Checklist, Demo action | Dashboard mockup, Rounded media, Compact bullets |
| 5 | feature-split | Aligned copy and checklist paired with a large feedback interface mockup. | AI action guidance, Feedback reply assistance, Demo action | Blue-framed interface, Chat-style UI, Rounded media |
| 6 | feature-split | Recognition card visual paired with a text block and secondary action. | Recognition use case, Discover action | Celebration card, Small confetti details, Outlined pill button |
| 7 | integrations | Two-column band with a scattered integration icon cluster beside headline and copy. | Integration discovery | Warm off-white section, Floating partner icons, Outlined CTA |
| 8 | testimonials | Editorial heading above a row of quote cards or columns. | Customer proof, Carousel controls | Brand marks, Quote text, Pagination controls |
| 9 | product-grid | Centered section heading above a horizontal multi-card capability display. | Capability browsing, Carousel controls | Rounded product cards, Embedded UI previews, Slide controls |
| 10 | cta | Centered headline and button in a wide dark blue rounded panel. | Demo conversion | Midnight gradient, Large light headline, Light pill CTA |
| 11 | faq | Editorial section heading on the left and a question accordion on the right. | Expandable questions | Subtle dividers, Disclosure icons, Two-column layout |
| 12 | footer | Full-width dark footer with newsletter content and several navigation columns. | Newsletter signup, Email consent, Site navigation | Midnight Indigo background, White wordmark, Compact link columns |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(255,255,255,0);
--osano-button-border-color: #fff;
--osano-button-background-color: #171417;
--osano-button-foreground-color: #ffffff;
--osano-dialog-background-color: #ffffff;
--osano-dialog-foreground-color: #000000;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.1);
--osano-link-color: #2545ff;
--osano-toggle-off-track-color: #ecebe8;
--osano-toggle-off-thumb-color: #000000;
--osano-toggle-on-track-color: #ffffff;
--osano-toggle-on-thumb-color: #171417;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-button-close-color: #000000;
--osano-button-accept-background-color: #171417;
--osano-button-accept-border-color: #fff;
--osano-button-accept-foreground-color: #ffffff;
--osano-button-deny-background-color: rgba(37,69,255,0);
--osano-button-deny-border-color: #fff;
--osano-button-deny-foreground-color: #171417;
--osano-button-reject-all-background-color: #171417;
--osano-button-reject-all-background-color-hover: #2b282b;
--osano-button-reject-all-border-color: #fff;
--osano-button-reject-all-foreground-color: #ffffff;
--osano-button-manage-background-color: #171417;
--osano-button-manage-border-color: #fff;
--osano-button-manage-foreground-color: #ffffff;
--osano-info-dialog-link-color: #2545ff;
--osano-info-dialog-button-close-color: #171417;
--osano-info-dialog-toggle-off-track-color: #ecebe8;
--osano-info-dialog-toggle-off-thumb-color: #000000;
--osano-info-dialog-toggle-on-track-color: #ffffff;
--osano-info-dialog-toggle-on-thumb-color: #171417;
--osano-info-dialog-button-background-color: #171417;
--osano-info-dialog-button-border-color: #ffffff;
--osano-info-dialog-button-foreground-color: #ffffff;
--osano-dialog-gpc-background-color: #ffffff;
```

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