AI-powered enterprise work management software | Wrike

Design Specification — AI-powered enterprise work management software | Wrike

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#162136), a vivid accent (#007860). All type is set in TT_Norms_Pro. Detected font weights: 400, 500, 600, 700. Detected style signatures: gradient-rich / aurora; rounded / pill-heavy.

Logo asset(s): https://www.wrike.com/tp/storage/uploads/ea10c069-f31a-4c6f-ad2e-8e5998be5a95/wrike-website-logo-light.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(90deg,rgba(,.0001) 0%, 100%)
• linear-gradient(270deg,rgba(235,245,243,0) 0%, 100%)
• linear-gradient(-270deg,rgba(235,245,243,0) 0%, 100%)
• linear-gradient(90deg,transparent 0,#ffffff 50%)
• linear-gradient(to bottom,rgba(0,0,0,0),#000 46%)

> 5 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: TT_Norms_Pro — stack: TT_Norms_Pro

Font stacks (most used first)

• inherit
• TT_Norms_Pro
• "TT_Norms_Pro Fallback: -apple-system"
• "TT_Norms_Pro Fallback: BlinkMacSystemFont"
• "TT_Norms_Pro Fallback: Helvetica Neue"
• "TT_Norms_Pro Fallback: Segoe UI"
• "TT_Norms_Pro Fallback: Roboto"
• "TT_Norms_Pro Fallback: Oxygen"
• "TT_Norms_Pro Fallback: Fira Sans"
• "TT_Norms_Pro Fallback: Ubuntu"

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 0 4px #ffa200
• 0 25px 45px -45px #181f3840
• 0 8px 24px #2b38571f
• 0 8px 24px #2b3a571f
• transparent
• 0 2px 7px #9aa0a629,0 7px 30px #9da2a833

Layout

Container max-width: 767px

Breakpoints

• 767px
• 768px
• 1023px
• 1024px
• 1280px
• 1366px
• 1600px
• 1920px

Animation & Motion

Transitions

• opacity .35s ease
• opacity .275s ease-in-out .275s
• stroke .275s ease
• color .275s ease
• top 75ms ease .125s,opacity 75ms ease
• bottom 75ms ease .125s,transform 75ms cubic-bezier(.55,.055,.675,.19)
• opacity .2s,transform .5s
• .15s background-color linear
• .275s opacity linear,.275s max-height linear
• .15s background-color linear,.15s border-color linear,.15s color linear,.15s box-shadow linear
• .15s border-color linear,.15s box-shadow linear,.15s color linear,.15s transform linear
• opacity .3s,transform .4s

Easing curves

• ease
• cubic-bezier(.55,.055,.675,.19)
• cubic-bezier(.55,.055,.675,.19)
• ease-in-out
• linear
• linear

Keyframes

@keyframes animateGradient { to{background-position:200% 0} }
@keyframes _ngcontent-tp_fe-c909626499_move { 0%{left:0;opacity:0}5%{opacity:0}48%{opacity:.6}80%{opacity:0}to{left:82%} }
@keyframes _ngcontent-tp_fe-c909626499_blink { 0%{opacity:0;transform:translate(0) rotate(45deg)}6.67%{opacity:.5;transform:translate(250%) rotate(45deg)}13.33%{opacity:0;transform:translate(500%) rotate(45deg)}to{opacity:0;transform:translate(500%) rotate(45deg)} }
@keyframes _ngcontent-tp_fe-c909626499_scale { 0%,to{transform:scale(1)}50%{transform:scale(1.15)} }
@keyframes _ngcontent-tp_fe-c909626499_bounce-left-up { 0%,to{transform:translate(-4px,-4px)}30%{transform:translate(-7px,-7px)}60%{transform:translate(-2px,-2px)} }
@keyframes _ngcontent-tp_fe-c909626499_bounce-down { 0%,to{transform:translate(-3px,-3px)} }
@keyframes _ngcontent-tp_fe-c1794182523_spin { to{transform:rotate(360deg)} }
@keyframes _ngcontent-tp_fe-c2609325257_loop { 0%{transform:translate(0)}to{transform:translate(calc(-1 * (var(--logos-track-width) + var(--logos-track-gap))))} }
@keyframes _ngcontent-tp_fe-c2530124792_preloader { 0%{opacity:1}to{opacity:.5} }

Animations

• animateGradient 5s ease-in-out infinite
• none
• _ngcontent-tp_fe-c2609325257_loop var(--animation-duration) linear infinite

CTA labels found on page

• Try Wrike for free
• Contact Sales

Effects

• backdrop-filter: blur(4px)
• backdrop-filter: blur(2px)
• backdrop-filter: blur(10px)

Source Design Tokens (CSS custom properties)

:root {
  --website-grid-gutter--mobile: 16px;
  --website-grid-gutter--tablet: 16px;
  --website-grid-gutter--laptop: 16px;
  --website-grid-gutter--desktop-small: 16px;
  --website-grid-gutter--desktop: 16px;
  --website-grid-gutter--desktop-big: 16px;
  --website-grid-gutter--wide: 24px;
  --website-grid-margin--mobile: 20px;
  --website-grid-margin--tablet: 32px;
  --website-grid-margin--laptop: 32px;
  --website-grid-margin--desktop-small: 48px;
  --website-grid-margin--desktop: 0;
  --website-grid-margin--desktop-big: 0;
  --website-grid-margin--wide: 0;
  --website-grid-max-width--mobile: calc(100% - var(--website-grid-margin--mobile) * 2);
  --website-grid-max-width--tablet: calc(100% - var(--website-grid-margin--tablet) * 2);
  --website-grid-max-width--laptop: calc(100% - var(--website-grid-margin--laptop) * 2);
  --website-grid-max-width--desktop-small: calc(100% - var(--website-grid-margin--desktop-small) * 2);
  --website-grid-max-width--desktop: 1220px;
  --website-grid-max-width--desktop-big: 1220px;
  --website-grid-max-width--wide: 1464px;
  --website-heading-1-font-weight: 600;
  --website-heading-1-letter-spacing: normal;
  --website-heading-1-line-height: 1.1;
  --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-line-height: 1.1;
  --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-line-height: 1.1;
  --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-line-height: 1.2;
  --website-heading-3-font-size--mobile: 24px;
  --website-heading-3-font-size--tablet: 32px;
  --website-heading-4-font-weight: 600;
  --website-heading-4-line-height: 1.2;
  --website-heading-4-font-size--mobile: 20px;
  --website-heading-4-font-size--tablet: 24px;
  --website-heading-5-font-weight: 600;
  --website-heading-5-line-height: 1.2;
  --website-heading-5-font-size--mobile: 16px;
  --website-heading-5-font-size--tablet: 20px;
  --website-subtitle-font-weight: 400;
  --website-subtitle-line-height: 1.4;
  --website-subtitle-font-size--mobile: 16px;
  --website-subtitle-font-size--tablet: 18px;
  --website-paragraph-line-height: 1.6;
  --website-paragraph-font-size: 16px;
  --website-notes-font-weight: normal;
}

Do's and Don'ts

Do

• Do reserve the accent #007860 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 500, 600, 700.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #FFA200;
  --color-accent: #007860;
  --color-background: #FFFFFF;
  --color-surface: #EBF5F3;
  --color-text-primary: #162136;
  --color-secondary: #162136;
  --color-text-secondary: #BFC7D9;
  --color-border: #2B3A57;
  --color-on-primary: #162136;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #EBF5F3;
  --color-surface-container: #DCE1EB;
  --color-surface-container-high: #BFC7D9;
  --font-sans: TT_Norms_Pro;
  --font-size-headline-md: 24px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 1px;
  --radius-md: 8px;
  --radius-lg: 40px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 0 4px #ffa200;
  --shadow-md: 0 8px 24px #2b3a571f;
  --shadow-lg: 0 2px 7px #9aa0a629,0 7px 30px #9da2a833;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 60px;
  --tracking-label: .2px;
  --container-max: 767px;
}