TrayoAI Style Guide

Reusable UI elements used across Newsfeed, Accounts, and People pages.

Buttons

Dynamic Signals View Source

CTA Buttons

Avatars

TÖ

Logos

Typography

Heading Large

Section Heading

Primary Body Title

Secondary supporting copy

Muted subtitle text

Workforce planning leader

Colors

Brand Purples

Purple

--color-purple

#845CFF

Purple Soft

--color-purple-soft

#B59DFF

Purple Mist

--color-purple-mist

#CEBEFF

Purple Wash

--color-purple-wash

#E6DEFF

Deep Purples

Purple Deep

--color-purple-deep

#6F00FF

Purple Depth

--color-purple-depth

#4F3799

Purple Night

--color-purple-night

#352566

Accents

Violet

--color-violet

#CD81FF

Mint

--color-mint

#5EFABC

Peach

--color-peach

#FFA182

Sand Scale

Sand

--color-sand

#FDDC98

Sand Soft

--color-sand-soft

#FEE9BE

Sand Mist

--color-sand-mist

#FEF3D9

Sand Wash

--color-sand-wash

#FFFAEE

Surfaces

Cream

--color-cream

#FEFBF4

Cream Light

--color-cream-light

#FFFDF8

Neutral Scale (dark mode defaults — inverted in light mode)

100

200

300

400

500

600

700

800

900

950

Neutral 50

--neutral-50

#FEFBF4

Neutral 100

--neutral-100

#F5F5F5

Neutral 200

--neutral-200

#E5E5E5

Neutral 300

--neutral-300

#D4D4D4

Neutral 400

--neutral-400

#A3A3A3

Neutral 500

--neutral-500

#737373

Neutral 600

--neutral-600

#525252

Neutral 700

--neutral-700

#404040

Neutral 800

--neutral-800

#262626

Neutral 900

--neutral-900

#171717

Neutral 950

--neutral-950

#0A0A0A