UI Cards

FFFCDAprimary
DADDFFsecondary

Track your expenses

Control your finances with real-time insights and smart budgets

Color Usage

6 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

thyme700#8C8B75

Gradient · primaryDark

thyme700#8C8B75

Text · textSecondary

AA18

3.5:1

Lc 59

lightyellow50#FAF7D6

Badge · surfaceAlt

lightyellow500#FAF7D6

Button · primary

3×4

Expenses

$18,247

JanFebMarAprMayJun

Color Usage

9 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow300#FFFCDA

Chart · chart[0]

lavender mist400#DADDFF

Chart · chart[1]

lightyellow500#FAF7D6

Chart · chart[2]

heather600#A4A7C2

Chart · chart[3]

thyme700#8C8B75

Chart · chart[4]

twilight800#4D4F60

Chart · chart[5]

3×4

Revenue

$23,640
Marketing
$9,456
Development
$7,092
Operations
$4,728
Support
$2,364

Color Usage

6 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow300#FFFCDA

Chart · chart[0]

lavender mist400#DADDFF

Chart · chart[1]

lightyellow500#FAF7D6

Chart · chart[2]

3×4

Todo

Review quarterly budget report and send to finance team

Today

Book flights and hotel for the Barcelona conference next month

Tomorrow

Schedule one-on-one catchups with new team members

In 3 days

Color Usage

8 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Dot · primary

lavender mist500#DADDFF

Dot · secondary

thyme500#8C8B75

Dot · tertiary

lightyellow200#FAF7D6

Badge · primaryLight

ghostwhite200#F3F4FF

Badge · secondaryLight

3×4

Wednesday, March 25

Design system meeting

9 - 10 AM

Lunch

1 - 2 PM

Design review

3 - 4 PM

Color Usage

8 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Overlay · primary

lavender mist500#DADDFF

Overlay · secondary

thyme500#8C8B75

Overlay · tertiary

lightyellow200#FAF7D6

Icon · primaryLight

ghostwhite200#F3F4FF

Icon · secondaryLight

3×4

$47,892.60

This month
284 sales+8.31%
$12,458.90
17142130

You made an extra $3,247.80 this month

Color Usage

6 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Icon · primary

lightyellow500#FAF7D6

Chart · primary

lightyellow100#FAF7D6

Badge · borderLight

3×4

MacBook Air

13 inch

Color Usage

7 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

lightyellow50#FAF7D6

Gradient · surfaceAlt

thunder700#5B5A4A

Icon · tertiaryDark

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

dusk500#777990

Button · accent

black#06070E

Button · textOnAccent

AA

4.7:1

Lc 37

3×4

AirPods Max

Midnight

Color Usage

5 colors
ghostwhite200#F3F4FF

Gradient · secondaryLight

lightyellow200#FAF7D6

Gradient · primaryLight

obsidian900#2F2E23

Text · textPrimary

obsidian900#2F2E23

Button · textPrimary

white#ffffff

Button · surface

3×4

Lena Novak

UX Engineer crafting intuitive digital experiences.

31248

Color Usage

5 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Icon · primary

white#ffffff

Button · surface

3×4

@lena.studio

Instagram

•••
412,890Followers
United States241,530
Germany78,210
Singapore34,105

Color Usage

6 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Dot · primary

lavender mist500#DADDFF

Dot · secondary

thyme500#8C8B75

Dot · tertiary

3×4
+

Alex Rivera

Creative director blending art and technology.

72.9K

Likes

828

Posts

342.9K

Views

Color Usage

10 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Ring · primary

lavender mist500#DADDFF

Ring · secondary

thyme500#8C8B75

Ring · tertiary

dusk500#777990

Ring · accent

white#ffffff

Button · surface

lightyellow400#FAF7D6

Icon · textMuted

lightyellow50#FAF7D6

Background · surfaceAlt

3×4

Blog

Productivity Hacks for Life on the Road

Work

The Ultimate Digital Nomad Toolkit

Travel

Design in Cross-Functional Teams

Design

Color Usage

8 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow200#FAF7D6

Badge · primaryLight

ghostwhite200#F3F4FF

Badge · secondaryLight

lightyellow500#FAF7D6

Overlay · primary

lavender mist500#DADDFF

Overlay · secondary

thyme500#8C8B75

Overlay · tertiary

3×4

Mia Chen

Product Designer

128

Posts

42

Projects

2.1k

Followers

Color Usage

7 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

lightyellow500#FAF7D6

Ring · primary

lightyellow200#FAF7D6

Icon · primaryLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Button · primary

lavender mist500#DADDFF

Button · secondary

3×4

Post Activity

From 15 Feb - 15 May, 2024

687

Stories

189

Posts

24

Reels

SMTWTFS

Color Usage

4 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Chart · primary

3×4

Post Schedule

25 posts scheduled

09:00
10:00
11:00
12:00
13:00
14:00
15:00
09:15

5 design trends that will shape the next decade of product...

12:30

Behind the scenes of our latest rebrand and what we learned...

Color Usage

4 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Dot · primary

3×4

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 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Badge · primary

lightyellow50#FAF7D6

Overlay · surfaceAlt

3×4

Gain control

of your financial future

Color Usage

6 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

twilight700#4D4F60

Gradient · accentDark

thyme700#8C8B75

Text · textSecondary

AA18

3.5:1

Lc 59

lightyellow50#FAF7D6

Badge · surfaceAlt

dusk500#777990

Button · accent

3×4

Choose plan

Hobby

For personal side projects

$0 / month

Pro

For professionals & freelancers

$12 / month

Team

Collaboration & advanced tools

$29 / month

Color Usage

6 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

thyme700#8C8B75

Text · textSecondary

AA18

3.5:1

Lc 59

lightyellow400#FAF7D6

Text · textMuted

Fail

1.1:1

Lc 0

lightyellow500#FAF7D6

Ring · primary

3×4

Categories

Groceries

14 transactions

Household

7 transactions

Travel

3 transactions

Other

18 transactions

Color Usage

7 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Dot · primary

lavender mist500#DADDFF

Dot · secondary

thyme500#8C8B75

Dot · tertiary

dusk500#777990

Dot · accent

3×4
$2,430.00

$84,251.30

+8%

Total amount

Color Usage

4 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Chart · primary

3×2
$985.50

$12,609.74

-2%

Total amount

Color Usage

4 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

dusk500#777990

Chart · accent

3×2

Anomaly Detected

Your followers are increasing beyond our predictions. It could be because someone shared one of your posts.

+2,847 Followers

94.7%

Prediction 38%

Color Usage

7 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow400#FAF7D6

Text · textMuted

Fail

1.1:1

Lc 0

lavender mist500#DADDFF

Icon · secondary

lightyellow500#FAF7D6

Chart · primary

lightyellow500#FAF7D6

Button · primary

3×4

Your Accounts

3 connected

@marco.studio

278,534 followers

@marcostudio

48,190 followers

Marco Studio

12,740 followers

Color Usage

5 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Badge · primary

lightyellow500#FAF7D6

Dot · primary

3×4
20%off

Save 20% on all purchases today

Get discount

Save 20% on all purchases today

Color Usage

13 colors
white#ffffff

Background · surface

lightyellow500#FAF7D6

Gradient · primary

thyme700#8C8B75

Gradient · primaryDark

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

black#080703

Text · textOnPrimary

AAA

18.6:1

Lc 100

lightyellow500#FAF7D6

Button · primary

lavender mist500#DADDFF

Overlay · secondary

thyme500#8C8B75

Overlay · tertiary

dusk500#777990

Overlay · accent

ghostwhite200#F3F4FF

Overlay · secondaryLight

thunder700#5B5A4A

Overlay · tertiaryDark

lightyellow200#FAF7D6

Overlay · primaryLight

3×4

Productivity Hacks for Life on the Road

The Ultimate Digital Nomad Toolkit

Color Usage

6 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

thunder700#5B5A4A

Gradient · tertiaryDark

thyme700#8C8B75

Text · textSecondary

AA18

3.5:1

Lc 59

lightyellow50#FAF7D6

Badge · surfaceAlt

lavender mist500#DADDFF

Button · secondary

3×4

Remote working

Color Usage

13 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

lightyellow500#FAF7D6

Gradient · primary

lavender mist500#DADDFF

Gradient · secondary

thyme500#8C8B75

Gradient · tertiary

dusk500#777990

Gradient · accent

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Overlay · primary

lavender mist500#DADDFF

Overlay · secondary

thyme500#8C8B75

Overlay · tertiary

dusk500#777990

Overlay · accent

ghostwhite200#F3F4FF

Overlay · secondaryLight

lightyellow50#FAF7D6

Background · surfaceAlt

3×4

New York

Economy

from $120JFK

Color Usage

5 colors
thyme700#8C8B75

Background · primaryDark

thyme700#8C8B75

Gradient · primaryDark

white#ffffff

Button · surface

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Icon · primary

3×4

San Francisco

Premium economy

from $240SFO

Color Usage

5 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

obsidian900#2F2E23

Button · textPrimary

lightyellow500#FAF7D6

Icon · primary

3×4

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 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Icon · primary

lavender mist500#DADDFF

Icon · secondary

thyme500#8C8B75

Icon · tertiary

dusk500#777990

Icon · accent

3×4

Jobs

Senior Software Engineer

Novastream Labs

Full-time

Lead Product Designer

Pulsewave Studio

Hybrid

Senior Frontend Developer

Arclight Digital

On-site

Color Usage

6 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

thyme700#8C8B75

Text · textSecondary

AA18

3.5:1

Lc 59

lightyellow200#FAF7D6

Badge · primaryLight

ghostwhite200#F3F4FF

Badge · secondaryLight

3×4

Income

$21,430

$19,115 prev.

Color Usage

4 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

lightyellow500#FAF7D6

Chart · primary

3×1

Expenses

$14,782

$12,390 prev.

Color Usage

4 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

thyme500#8C8B75

Chart · tertiary

3×1

Savings

$6,648

$6,725 prev.

Color Usage

4 colors
white#ffffff

Background · surface

lightyellow100#FAF7D6

Border · borderLight

obsidian900#2F2E23

Text · textPrimary

AAA

13.7:1

Lc 97

dusk500#777990

Chart · accent

3×1
Color Visualizer - Preview Colors in Context | ColorPick