UI Cards
See your palette come alive on real-world dashboard, e-commerce, and social media cards
Track your expenses
Control your finances with real-time insights and smart budgets
Color Usage
6 colorsBackground · surface
Border · borderLight
Gradient · primaryDark
Text · textSecondary
6.9:1
Lc 80
Badge · surfaceAlt
Button · primary
Expenses
$18,247
Color Usage
9 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Chart · chart[0]
Chart · chart[1]
Chart · chart[2]
Chart · chart[3]
Chart · chart[4]
Chart · chart[5]
Revenue
Color Usage
6 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Chart · chart[0]
Chart · chart[1]
Chart · chart[2]
Todo
Review quarterly budget report and send to finance team
Book flights and hotel for the Barcelona conference next month
Schedule one-on-one catchups with new team members
Color Usage
9 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Dot · primary
Dot · secondary
Dot · tertiary
Badge · primaryLight
Badge · secondaryLight
Badge · tertiaryLight
Thursday, March 26
Design system meeting
9 - 10 AM
Lunch
1 - 2 PM
Design review
3 - 4 PM
Color Usage
9 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Overlay · primary
Overlay · secondary
Overlay · tertiary
Icon · primaryLight
Icon · secondaryLight
Icon · tertiaryLight
$47,892.60
This month ▾You made an extra $3,247.80 this month
Color Usage
6 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Icon · primary
Chart · primary
Badge · borderLight
MacBook Air
13 inch
Color Usage
8 colorsBackground · surface
Border · borderLight
Gradient · surfaceAlt
Gradient · tertiaryLight
Icon · tertiaryDark
Text · textPrimary
16.6:1
Lc 101
Button · accent
Button · textOnAccent
4.6:1
Lc 36
AirPods Max
Midnight
Color Usage
5 colorsGradient · secondaryLight
Gradient · primaryLight
Text · textPrimary
Button · textPrimary
Button · surface
Lena Novak
UX Engineer crafting intuitive digital experiences.
Color Usage
6 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Icon · primary
Icon · textMuted
Button · surface
@lena.studio
Color Usage
6 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Dot · primary
Dot · secondary
Dot · tertiary
Alex Rivera
Creative director blending art and technology.
72.9K
Likes
828
Posts
342.9K
Views
Color Usage
10 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Ring · primary
Ring · secondary
Ring · tertiary
Ring · accent
Button · surface
Icon · textMuted
Background · surfaceAlt
Blog
Productivity Hacks for Life on the Road
Work
The Ultimate Digital Nomad Toolkit
Travel
Design in Cross-Functional Teams
DesignColor Usage
9 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Badge · primaryLight
Badge · secondaryLight
Badge · tertiaryLight
Overlay · primary
Overlay · secondary
Overlay · tertiary
Mia Chen
Product Designer128
Posts
42
Projects
2.1k
Followers
Color Usage
7 colorsBackground · surface
Border · borderLight
Ring · primary
Icon · primaryLight
Text · textPrimary
16.6:1
Lc 101
Button · primary
Button · secondary
Post Activity
From 15 Feb - 15 May, 2024
687
Stories
189
Posts
24
Reels
Color Usage
4 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Chart · primary
Post Schedule
25 posts scheduled
5 design trends that will shape the next decade of product...
Behind the scenes of our latest rebrand and what we learned...
Color Usage
5 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Dot · primary
Dot · border
Post Insights
Posted on May 10, 2024 - 6:10pm
Accounts reached
5,192,879
Followers
+2,953
Unique Finding
Workspace and productivity posts drive the most reach. Keep posting!
Color Usage
5 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Badge · primary
Overlay · surfaceAlt
Gain control
of your financial future
Color Usage
6 colorsBackground · surface
Border · borderLight
Gradient · accentDark
Text · textSecondary
6.9:1
Lc 80
Badge · surfaceAlt
Button · accent
Choose plan
Hobby
For personal side projects
$0 / month
Pro
For professionals & freelancers
$12 / month
Team
Collaboration & advanced tools
$29 / month
Color Usage
7 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Text · textSecondary
6.9:1
Lc 80
Text · textMuted
1.9:1
Lc 35
Ring · primary
Border · border
Categories
Groceries
14 transactions
Household
7 transactions
Travel
3 transactions
Other
18 transactions
Color Usage
7 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Dot · primary
Dot · secondary
Dot · tertiary
Dot · accent
$84,251.30
▲ +8%Total amount
Color Usage
4 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Chart · primary
$12,609.74
▼ -2%Total amount
Color Usage
4 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Chart · accent
Anomaly Detected
Your followers are increasing beyond our predictions. It could be because someone shared one of your posts.
94.7%
Prediction 38%
Color Usage
7 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Text · textMuted
1.9:1
Lc 35
Icon · secondary
Chart · primary
Button · primary
Your Accounts
3 connected
@marco.studio
278,534 followers
@marcostudio
48,190 followers
Marco Studio
12,740 followers
Color Usage
5 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Badge · primary
Dot · primary
Save 20% on all purchases today
Get discount
Save 20% on all purchases today
Color Usage
13 colorsBackground · surface
Gradient · primary
Gradient · primaryDark
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Text · textOnPrimary
8.1:1
Lc 56
Button · primary
Overlay · secondary
Overlay · tertiary
Overlay · accent
Overlay · secondaryLight
Overlay · tertiaryDark
Overlay · primaryLight
Productivity Hacks for Life on the Road
The Ultimate Digital Nomad Toolkit
Color Usage
6 colorsBackground · surface
Border · borderLight
Gradient · tertiaryDark
Text · textSecondary
6.9:1
Lc 80
Badge · surfaceAlt
Button · secondary
Remote working
Color Usage
13 colorsBackground · surface
Border · borderLight
Gradient · primary
Gradient · secondary
Gradient · tertiary
Gradient · accent
Text · textPrimary
16.6:1
Lc 101
Overlay · primary
Overlay · secondary
Overlay · tertiary
Overlay · accent
Overlay · secondaryLight
Background · surfaceAlt
New York
Economy
Color Usage
5 colorsBackground · primaryDark
Gradient · primaryDark
Button · surface
Text · textPrimary
16.6:1
Lc 101
Icon · primary
San Francisco
Premium economy
Color Usage
6 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Button · textPrimary
Icon · primary
Icon · textMuted
Features
Palette Generator
Create color palettes
Contrast Checker
WCAG compliance
Theme Generator
Framework-ready themes
Color Simulator
Vision deficiency test
Gradient Builder
Smooth gradients
Export Tools
CSS, JSON, ASE
Color Usage
7 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Icon · primary
Icon · secondary
Icon · tertiary
Icon · accent
Jobs
Senior Software Engineer
Novastream Labs
Full-time
Lead Product Designer
Pulsewave Studio
Hybrid
Senior Frontend Developer
Arclight Digital
On-siteColor Usage
7 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Text · textSecondary
6.9:1
Lc 80
Badge · primaryLight
Badge · secondaryLight
Badge · tertiaryLight
Income
$21,430
$19,115 prev.
Color Usage
4 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Chart · primary
Expenses
$14,782
$12,390 prev.
Color Usage
4 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Chart · tertiary
Savings
$6,648
$6,725 prev.
Color Usage
4 colorsBackground · surface
Border · borderLight
Text · textPrimary
16.6:1
Lc 101
Chart · accent