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

# Wrike · Design System

> Clear enterprise workflows, energized by green

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

Wrike pairs a bright, spacious canvas with deep navy typography and vivid green calls to action. Product interfaces, workplace photography, and soft green glows make the long homepage feel practical, human, and AI-enabled.

## North star

Keep the page airy and product-led: use navy for structure, green for action, and pale surfaces to organize content.

## Overview

The homepage is anchored by white canvas and generous open space, with pale blue-gray bands separating feature groups and dark navy reserved for contrast-heavy areas such as the footer. Bright green is the signature signal: it marks primary CTAs, logo details, play controls, and soft glows around product visuals. Blue appears more selectively in links and secondary actions. TT Norms Pro gives headings a rounded, confident shape; bold, compact headline blocks sit above quieter gray body copy. A centered page frame organizes the long scroll into clear bands, while alternating card grids and split product stories keep the content varied. Screenshots and workplace photography carry the product narrative, supported by restrained gradients, rounded panels, and fine borders rather than heavy decoration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, light section backgrounds, and occasional reversed text. |
| Signal Green | `#00e05c` | `--color-signal-green` | brand | Primary free-trial buttons, logo mark, play controls, and signature green glow. |
| Mist Panel | `#f2f5fa` | `--color-mist-panel` | surface | Pale feature-card and integration-chip surfaces, plus subtle borders. |
| Midnight Ink | `#162136` | `--color-midnight-ink` | brand | Main headings and body text, navigation, CTA text, and dark footer background. |
| Slate Copy | `#2b3a57` | `--color-slate-copy` | semantic | Muted body copy and secondary footer text. |
| Action Blue | `#0073d3` | `--color-action-blue` | accent | Secondary text links and supporting blue actions. |
| Lime Glow | `#aaff00` | `--color-lime-glow` | accent | Bright edge of green gradients and decorative glow around product imagery. |
| Electric Lime | `#00ff2b` | `--color-electric-lime` | accent | Gradient highlight in decorative brand effects, not a dominant interface fill. |
| Sky Tint | `#63c1ff` | `--color-sky-tint` | semantic | Minor button or interface detail; not a defining page color. |
| Cloud Border | `#bfc7d9` | `--color-cloud-border` | neutral | Subtle input and footer borders, plus restrained interface outlines. |
| Link Cobalt | `#0000ee` | `--color-link-cobalt` | semantic | Measured link color; use cautiously, since visible page links read as restrained blue. |
| Muted Steel | `#657694` | `--color-muted-steel` | semantic | Minor muted text and interface details. |
| Deep Teal | `#009980` | `--color-deep-teal` | accent | Dark endpoint in a narrow green navigation gradient, not a broad section color. |
| Leaf Green | `#00b259` | `--color-leaf-green` | accent | Intermediate green gradient stop used in decorative navigation effects. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f5fa` (Mist Panel) · `--color-surface-2` → `#162136` (Midnight Ink) · `--color-text` → `#162136` (Midnight Ink) · `--color-text-muted` → `#2b3a57` (Slate Copy) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#f2f5fa` (Mist Panel) · `--color-accent` → `#00e05c` (Signal Green) · `--color-accent-2` → `#0073d3` (Action Blue) · `--color-accent-3` → `#aaff00` (Lime Glow) · `--color-on-accent` → `#162136` (Midnight Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#162136` | `#ffffff` | 16.09:1 | AAA |
| `#162136` | `#f2f5fa` | 14.73:1 | AAA |
| `#2b3a57` | `#ffffff` | 11.38:1 | AAA |
| `#2b3a57` | `#f2f5fa` | 10.41:1 | AAA |
| `#2b3a57` | `#162136` | 1.41:1 | fail |
| `#ffffff` | `#f2f5fa` | 1.09:1 | fail |
| `#ffffff` | `#162136` | 16.09:1 | AAA |
| `#00e05c` | `#ffffff` | 1.78:1 | fail |
| `#00e05c` | `#f2f5fa` | 1.63:1 | fail |
| `#00e05c` | `#162136` | 9.06:1 | AAA |

### Gradients

- `radial-gradient(180px at 205px 143.9px, rgb(170, 255, 0) 0%, rgb(0, 224, 92) 42%, rgb(0, 255, 43) 62%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left, rgb(255, 255, 255), rgba(0, 0, 0, 0))`
- `linear-gradient(to left, rgb(0, 153, 128), rgb(0, 178, 89), rgb(0, 224, 92), rgb(0, 178, 89), rgb(0, 153, 128))`
- `linear-gradient(135deg, rgb(170, 255, 0), rgb(0, 224, 92), rgb(0, 255, 43))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TT_Norms_Pro | `--font-body` | webfont | 400, 600, 500 | Page-wide interface and editorial type, including headings, body copy, links, navigation, and buttons. | Inter |

- **TT_Norms_Pro:** Use clean sans-serif forms, mostly weight 400 for copy and 600 for headings and CTAs; keep tracking neutral except for uppercase eyebrow labels.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.1 | 0 | — | TT_Norms_Pro | Large hero headline and prominent section statements. |
| h1 | 48px | 600 | 1.1 | 0 | — | TT_Norms_Pro | Primary page headline and major top-level headings. |
| h2 | 32px | 600 | 1.2 | 0 | — | TT_Norms_Pro | Section titles introducing feature and solution bands. |
| h3 | 24px | 600 | 1.2 | 0 | — | TT_Norms_Pro | Feature-card and content-panel titles. |
| h4 | 20px | 600 | 1.2 | 0 | — | TT_Norms_Pro | Smaller card headings and supporting labels. |
| body | 16px | 400 | 1.6 | 0 | — | TT_Norms_Pro | Paragraphs, descriptions, and explanatory product copy. |
| caption | 14px | 400 | 1.4 | 0.014em | — | TT_Norms_Pro | Compact supporting labels and fine-print content. |
| button | 16px | 600 | 1.5 | 0 | — | TT_Norms_Pro | Primary and secondary CTA labels. |
| nav | 20px | 600 | 1.2 | 0 | — | TT_Norms_Pro | Main navigation labels. |
| link | 20px | 600 | 1.2 | 0 | — | TT_Norms_Pro | Prominent text links and secondary actions. |
| eyebrow | 12px | 600 | 1.3 | 0.125em | uppercase | TT_Norms_Pro | Uppercase section labels and compact overlines. |

OpenType features in use: `"ss01", "ss02", "ss03", "ss04", "ss06", "tnum"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 3, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 32, 48 px.
- Section rhythm 112px · element gap 16px · card padding — · max content width 1220px.

Use a centered, spacious desktop frame with a measured maximum width of 1220px and left-aligned hero copy. The page moves from a slim announcement strip and navigation into a broad two-column hero, then a logo row and stacked feature bands. Alternate card grids, split product showcases, horizontal solution cards, and centered content sections to pace the long scroll. Keep the overall density low, with a measured 112px section gap and 16px element gap; let product media occupy generous space.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `12px` · media `12px` · nav `8px` · link `20px` · xs `2px` · sm `4px` · md `8px` · lg `10px` · xl `12px` · 2xl `20px` · pill `9999px`
- Shadow `xl` (card): `rgba(22, 41, 54, 0.02) 0px 10px 22px 0px, rgba(22, 41, 54, 0.02) 0px 20px 64px 0px`
- Shadow `xl-2` (card): `rgba(22, 41, 54, 0.043) 0px 20px 48px 0px, rgba(22, 41, 54, 0.027) 0px 8px 20px 0px`
- Shadow `lg` (media): `rgba(154, 160, 166, 0.16) 0px 2px 7px 0px, rgba(157, 162, 168, 0.2) 0px 7px 30px 0px`
- Motion: standard transition `0.35s ease` on interactive elements.

Most content sits on flat white or pale surfaces, with hairline borders doing much of the separation. Feature cards use rounded corners and restrained, soft shadows; heavier lift is reserved for media and floating interface mockups. Use overlapping UI tiles and localized green glow for depth, not broad dark shadows.

## Imagery

Combine real workplace photography with crisp product-interface screenshots and collaboration mockups. Use rounded media frames and pale panels, layering small UI cards and avatar details over imagery where shown. The hero's green glow and other gradient accents remain soft and localized; photography stays natural rather than heavily color-treated. Customer logos and testimonial video tiles provide proof points deeper in the page.

## Components

### Announcement strip

A narrow pale band above the navigation, with a green lightning accent, compact announcement copy, and a blue report link.

### Primary CTA

Bright #00e05c pill-shaped free-trial buttons with #162136 semibold text; use the prominent larger treatment in the hero and signup sections.

### Hero split

Large left-aligned headline and short supporting copy on the left; layered workflow cards and a soft green glow balance the right.

### Feature cards

Pale #f2f5fa panels with rounded corners, concise headings, descriptive copy, blue text links, and product photography or UI.

### Product showcase

Pair a text and capability list with a large workflow screenshot; keep tabs and supporting controls visually light.

### Integration chips

Compact pale rounded labels with partner logos and names, arranged in orderly rows.

### Dark signup footer

A #162136 full-width footer and CTA area with white text, green action accents, certification marks, and dense navigation columns.

### Measured component styles

- **Primary button** (“Try Wrike for free”): background #00e05c · text #162136 · border 2px solid · radius 8px · padding 8px 14px · 600 16px TT_Norms_Pro
- **Secondary button** (“Slack”): background #f2f5fa · text #0000ee · border 2px solid · radius 40px · padding 16px 32px · 400 16px TT_Norms_Pro
- **Link** (“AI agents Build workflows with Wrike age”): background #f2f5fa · text #0000ee · border 2px solid #f2f5fa · radius 20px · padding 0px · 400 16px TT_Norms_Pro
- **Input**: background #f8f9fb · text #162136 · border 2px solid #bfc7d9 · radius 8px · padding 14px 20px · 400 18px TT_Norms_Pro
- **Card** (“Product management Centralize communicat”): background #f2f5fa · text #0000ee · border 2px solid · radius 20px · padding 0px · 400 16px TT_Norms_Pro
- **Navigation item** (“Products Try Wrike for free Contact Sale”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px TT_Norms_Pro

## Do

- Keep white space generous between distinct content bands.
- Use #162136 for core headings and readable interface text.
- Reserve #00e05c for primary actions and high-signal details.
- Use #f2f5fa to group cards and integration items.
- Pair product screenshots with concise, useful explanations.
- Use soft gradients only as localized green visual accents.

## Don't

- Do not make every section a dark or saturated color block.
- Do not use green as the default body-text color.
- Do not crowd the hero with extra navigation or dense copy.
- Do not overuse shadows or decorative gradients.
- Do not replace product visuals with generic abstract artwork.
- Do not introduce colors outside the measured palette.

## Agent prompt

Build a polished enterprise work-management page in Wrike's visual style. Use Gallery White (#ffffff) as the main canvas, Midnight Ink (#162136) for headings and core text, and Signal Green (#00e05c) for primary CTAs and small action cues. Organize content in a centered frame, with a spacious two-column hero followed by distinct feature, product, integrations, proof, and footer bands. Use Mist Panel (#f2f5fa) for card grouping, Action Blue (#0073d3) for secondary links, and soft green gradients only around product media. Set typography in TT_Norms_Pro or a close sans-serif substitute such as Inter, with confident semibold headings and calm readable body copy. Combine authentic workplace photography and product-interface visuals in rounded panels; favor subtle borders and restrained shadows. Maintain clear hierarchy and ample separation between sections.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Slim announcement and navigation above a spacious left-copy, right-product-visual hero; customer logos begin below. | announcement link, primary free-trial CTA, video link, customer proof | white canvas, green CTA, nav bar, green-glow product cards |

## Source CSS custom properties (selected)

```css
--website-heading-1-font-weight: 600;
--website-heading-1-letter-spacing: normal;
--website-heading-1-font-size--mobile: 40px;
--website-heading-1-font-size--tablet: 56px;
--website-heading-1-font-size--desktop: 64px;
--website-heading-1-font-size--wide: 72px;
--website-heading-1-blog-font-weight: 600;
--website-heading-1-blog-letter-spacing: normal;
--website-heading-1-blog-font-size--mobile: 36px;
--website-heading-1-blog-font-size--tablet: 48px;
--website-heading-1-blog-font-size--desktop: 56px;
--website-heading-1-blog-font-size--wide: 64px;
--website-heading-2-font-weight: 600;
--website-heading-2-font-size--mobile: 32px;
--website-heading-2-font-size--tablet: 40px;
--website-heading-2-font-size--desktop: 48px;
--website-heading-2-font-size--wide: 52px;
--website-heading-3-font-weight: 600;
--website-heading-3-font-size--mobile: 24px;
--website-heading-3-font-size--tablet: 32px;
--website-heading-4-font-weight: 600;
--website-heading-4-font-size--mobile: 20px;
--website-heading-4-font-size--tablet: 24px;
--website-heading-5-font-weight: 600;
--website-heading-5-font-size--mobile: 16px;
--website-heading-5-font-size--tablet: 20px;
--website-subtitle-font-weight: 400;
--website-subtitle-font-size--mobile: 16px;
--website-subtitle-font-size--tablet: 18px;
--website-paragraph-font-size: 16px;
--website-notes-font-weight: normal;
--website-notes-font-size: 14px;
--website-notes-letter-spacing: .2px;
--website-caption-font-weight: 600;
--website-caption-font-size: 12px;
--website-caption-letter-spacing: 1.5px;
--website-caption-text-transform: uppercase;
--website-ratings-font-weight: 400;
--website-ratings-font-size: 16px;
--website-ratings-letter-spacing: .2px;
```

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