Vivid API

Color tokens

Covers semantic color families, usage guidance for backgrounds, solids, borders, and text, and the full neutral, accent, status, and accent-alt scales.

Used for properties like foreground and background colors, surfaces, border colors, etc.

Neutral

Keywords: default, archived, history, saved/previously saved, date created, read message, expired job, no change

Figma: vivid/color/neutral/100
CSS: --vivid-color-neutral-100
 
Figma: vivid/color/neutral/200
CSS: --vivid-color-neutral-200
 
Figma: vivid/color/neutral/300
CSS: --vivid-color-neutral-300
 
Figma: vivid/color/neutral/400
CSS: --vivid-color-neutral-400
 
Figma: vivid/color/neutral/500
CSS: --vivid-color-neutral-500
 
Figma: vivid/color/neutral/600
CSS: --vivid-color-neutral-600
 
Figma: vivid/color/neutral/700
CSS: --vivid-color-neutral-700
 
Figma: vivid/color/neutral/800
CSS: --vivid-color-neutral-800
 
Figma: vivid/color/neutral/900
CSS: --vivid-color-neutral-900
 
Figma: vivid/color/neutral/1000
CSS: --vivid-color-neutral-1000
 
Figma: vivid/color/neutral/1100
CSS: --vivid-color-neutral-1100
 
Figma: vivid/color/neutral/1200
CSS: --vivid-color-neutral-1200
 
Figma: vivid/color/neutral/1300
CSS: --vivid-color-neutral-1300
 

Neutral Alt

Keywords: default, archived, history, saved/previously saved, date created, read message, expired job, no change

Figma: vivid/color/neutral-alt/100
CSS: --vivid-color-neutral-alt-100
 
Figma: vivid/color/neutral-alt/200
CSS: --vivid-color-neutral-alt-200
 
Figma: vivid/color/neutral-alt/300
CSS: --vivid-color-neutral-alt-300
 
Figma: vivid/color/neutral-alt/400
CSS: --vivid-color-neutral-alt-400
 
Figma: vivid/color/neutral-alt/500
CSS: --vivid-color-neutral-alt-500
 
Figma: vivid/color/neutral-alt/600
CSS: --vivid-color-neutral-alt-600
 
Figma: vivid/color/neutral-alt/700
CSS: --vivid-color-neutral-alt-700
 
Figma: vivid/color/neutral-alt/800
CSS: --vivid-color-neutral-alt-800
 
Figma: vivid/color/neutral-alt/900
CSS: --vivid-color-neutral-alt-900
 
Figma: vivid/color/neutral-alt/1000
CSS: --vivid-color-neutral-alt-1000
 
Figma: vivid/color/neutral-alt/1100
CSS: --vivid-color-neutral-alt-1100
 
Figma: vivid/color/neutral-alt/1200
CSS: --vivid-color-neutral-alt-1200
 
Figma: vivid/color/neutral-alt/1300
CSS: --vivid-color-neutral-alt-1300
 

Accent

Keywords: primary, brand, cta, action, highlight, standout, emphasis

Figma: vivid/color/accent/100
CSS: --vivid-color-accent-100
 
Figma: vivid/color/accent/200
CSS: --vivid-color-accent-200
 
Figma: vivid/color/accent/300
CSS: --vivid-color-accent-300
 
Figma: vivid/color/accent/400
CSS: --vivid-color-accent-400
 
Figma: vivid/color/accent/500
CSS: --vivid-color-accent-500
 
Figma: vivid/color/accent/600
CSS: --vivid-color-accent-600
 
Figma: vivid/color/accent/700
CSS: --vivid-color-accent-700
 
Figma: vivid/color/accent/800
CSS: --vivid-color-accent-800
 
Figma: vivid/color/accent/900
CSS: --vivid-color-accent-900
 
Figma: vivid/color/accent/1000
CSS: --vivid-color-accent-1000
 
Figma: vivid/color/accent/1100
CSS: --vivid-color-accent-1100
 
Figma: vivid/color/accent/1200
CSS: --vivid-color-accent-1200
 
Figma: vivid/color/accent/1300
CSS: --vivid-color-accent-1300
 

Accent Alt

Keywords: primary, brand, cta, action, highlight, standout, emphasis

Figma: vivid/color/accent-alt/100
CSS: --vivid-color-accent-alt-100
 
Figma: vivid/color/accent-alt/200
CSS: --vivid-color-accent-alt-200
 
Figma: vivid/color/accent-alt/300
CSS: --vivid-color-accent-alt-300
 
Figma: vivid/color/accent-alt/400
CSS: --vivid-color-accent-alt-400
 
Figma: vivid/color/accent-alt/500
CSS: --vivid-color-accent-alt-500
 
Figma: vivid/color/accent-alt/600
CSS: --vivid-color-accent-alt-600
 
Figma: vivid/color/accent-alt/700
CSS: --vivid-color-accent-alt-700
 
Figma: vivid/color/accent-alt/800
CSS: --vivid-color-accent-alt-800
 
Figma: vivid/color/accent-alt/900
CSS: --vivid-color-accent-alt-900
 
Figma: vivid/color/accent-alt/1000
CSS: --vivid-color-accent-alt-1000
 
Figma: vivid/color/accent-alt/1100
CSS: --vivid-color-accent-alt-1100
 
Figma: vivid/color/accent-alt/1200
CSS: --vivid-color-accent-alt-1200
 
Figma: vivid/color/accent-alt/1300
CSS: --vivid-color-accent-alt-1300
 

Positive

Keywords: success, complete, new section, new segment, new message, positive message, contacted/sent message, new job, new candidate, trending upward, above average, complete

Figma: vivid/color/positive/100
CSS: --vivid-color-positive-100
 
Figma: vivid/color/positive/200
CSS: --vivid-color-positive-200
 
Figma: vivid/color/positive/300
CSS: --vivid-color-positive-300
 
Figma: vivid/color/positive/400
CSS: --vivid-color-positive-400
 
Figma: vivid/color/positive/500
CSS: --vivid-color-positive-500
 
Figma: vivid/color/positive/600
CSS: --vivid-color-positive-600
 
Figma: vivid/color/positive/700
CSS: --vivid-color-positive-700
 
Figma: vivid/color/positive/800
CSS: --vivid-color-positive-800
 
Figma: vivid/color/positive/900
CSS: --vivid-color-positive-900
 
Figma: vivid/color/positive/1000
CSS: --vivid-color-positive-1000
 
Figma: vivid/color/positive/1100
CSS: --vivid-color-positive-1100
 
Figma: vivid/color/positive/1200
CSS: --vivid-color-positive-1200
 
Figma: vivid/color/positive/1300
CSS: --vivid-color-positive-1300
 

Critical

Keywords: high risk, high urgency, error, failed, delete, critical message, late/overdue, trending downward, unsatisfactory, overdue

Figma: vivid/color/critical/100
CSS: --vivid-color-critical-100
 
Figma: vivid/color/critical/200
CSS: --vivid-color-critical-200
 
Figma: vivid/color/critical/300
CSS: --vivid-color-critical-300
 
Figma: vivid/color/critical/400
CSS: --vivid-color-critical-400
 
Figma: vivid/color/critical/500
CSS: --vivid-color-critical-500
 
Figma: vivid/color/critical/600
CSS: --vivid-color-critical-600
 
Figma: vivid/color/critical/700
CSS: --vivid-color-critical-700
 
Figma: vivid/color/critical/800
CSS: --vivid-color-critical-800
 
Figma: vivid/color/critical/900
CSS: --vivid-color-critical-900
 
Figma: vivid/color/critical/1000
CSS: --vivid-color-critical-1000
 
Figma: vivid/color/critical/1100
CSS: --vivid-color-critical-1100
 
Figma: vivid/color/critical/1200
CSS: --vivid-color-critical-1200
 
Figma: vivid/color/critical/1300
CSS: --vivid-color-critical-1300
 

Information

Keywords: help, updated, scheduled, guidance message, unread, updated resume, previously contacted, average

Figma: vivid/color/information/100
CSS: --vivid-color-information-100
 
Figma: vivid/color/information/200
CSS: --vivid-color-information-200
 
Figma: vivid/color/information/300
CSS: --vivid-color-information-300
 
Figma: vivid/color/information/400
CSS: --vivid-color-information-400
 
Figma: vivid/color/information/500
CSS: --vivid-color-information-500
 
Figma: vivid/color/information/600
CSS: --vivid-color-information-600
 
Figma: vivid/color/information/700
CSS: --vivid-color-information-700
 
Figma: vivid/color/information/800
CSS: --vivid-color-information-800
 
Figma: vivid/color/information/900
CSS: --vivid-color-information-900
 
Figma: vivid/color/information/1000
CSS: --vivid-color-information-1000
 
Figma: vivid/color/information/1100
CSS: --vivid-color-information-1100
 
Figma: vivid/color/information/1200
CSS: --vivid-color-information-1200
 
Figma: vivid/color/information/1300
CSS: --vivid-color-information-1300
 

Caution

Keywords: low risk, low urgency, pending, upcoming, caution message, draft (label), not yet contacted, rating, below average, partially paid

Figma: vivid/color/caution/100
CSS: --vivid-color-caution-100
 
Figma: vivid/color/caution/200
CSS: --vivid-color-caution-200
 
Figma: vivid/color/caution/300
CSS: --vivid-color-caution-300
 
Figma: vivid/color/caution/400
CSS: --vivid-color-caution-400
 
Figma: vivid/color/caution/500
CSS: --vivid-color-caution-500
 
Figma: vivid/color/caution/600
CSS: --vivid-color-caution-600
 
Figma: vivid/color/caution/700
CSS: --vivid-color-caution-700
 
Figma: vivid/color/caution/800
CSS: --vivid-color-caution-800
 
Figma: vivid/color/caution/900
CSS: --vivid-color-caution-900
 
Figma: vivid/color/caution/1000
CSS: --vivid-color-caution-1000
 
Figma: vivid/color/caution/1100
CSS: --vivid-color-caution-1100
 
Figma: vivid/color/caution/1200
CSS: --vivid-color-caution-1200
 
Figma: vivid/color/caution/1300
CSS: --vivid-color-caution-1300