UI Cards

FFE1CDprimary
CDEBFFsecondary

Track your expenses

Control your finances with real-time insights and smart budgets

Color Usage

6 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

mocha700#8E7B6E

Gradient · primaryDark

mocha700#8E7B6E

Text · textSecondary

AA18

4.0:1

Lc 64

seashell white50#FFF2EA

Badge · surfaceAlt

peachpuff500#FFE1CD

Button · primary

3×4

Expenses

$18,247

JanFebMarAprMayJun

Color Usage

8 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff300#FFE1CD

Chart · chart[0]

columbia blue400#CDEBFF

Chart · chart[1]

glacier600#99B2C2

Chart · chart[3]

mocha700#8E7B6E

Chart · chart[4]

marengo800#46555F

Chart · chart[5]

3×4

Revenue

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

Color Usage

5 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff300#FFE1CD

Chart · chart[0]

columbia blue400#CDEBFF

Chart · chart[1]

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Dot · primary

columbia blue500#CDEBFF

Dot · secondary

mocha500#8E7B6E

Dot · tertiary

seashell white200#FFF2EA

Badge · primaryLight

aliceblue200#EBF7FF

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Overlay · primary

columbia blue500#CDEBFF

Overlay · secondary

mocha500#8E7B6E

Overlay · tertiary

seashell white200#FFF2EA

Icon · primaryLight

aliceblue200#EBF7FF

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Icon · primary

peachpuff500#FFE1CD

Chart · primary

seashell white100#FFF2EA

Badge · borderLight

3×4

MacBook Air

13 inch

Color Usage

7 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

seashell white50#FFF2EA

Gradient · surfaceAlt

umber700#5E5046

Icon · tertiaryDark

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

slate500#6E828F

Button · accent

black#03080C

Button · textOnAccent

AA

5.0:1

Lc 39

3×4

AirPods Max

Midnight

Color Usage

5 colors
aliceblue200#EBF7FF

Gradient · secondaryLight

seashell white200#FFF2EA

Gradient · primaryLight

taupe900#322821

Text · textPrimary

taupe900#322821

Button · textPrimary

white#ffffff

Button · surface

3×4

Lena Novak

UX Engineer crafting intuitive digital experiences.

31248

Color Usage

6 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Icon · primary

seashell white400#FFF0E5

Icon · textMuted

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Dot · primary

columbia blue500#CDEBFF

Dot · secondary

mocha500#8E7B6E

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Ring · primary

columbia blue500#CDEBFF

Ring · secondary

mocha500#8E7B6E

Ring · tertiary

slate500#6E828F

Ring · accent

white#ffffff

Button · surface

seashell white400#FFF0E5

Icon · textMuted

seashell white50#FFF2EA

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

seashell white200#FFF2EA

Badge · primaryLight

aliceblue200#EBF7FF

Badge · secondaryLight

peachpuff500#FFE1CD

Overlay · primary

columbia blue500#CDEBFF

Overlay · secondary

mocha500#8E7B6E

Overlay · tertiary

3×4

Mia Chen

Product Designer

128

Posts

42

Projects

2.1k

Followers

Color Usage

7 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

peachpuff500#FFE1CD

Ring · primary

seashell white200#FFF2EA

Icon · primaryLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Button · primary

columbia blue500#CDEBFF

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

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

5 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Dot · primary

seashell white200#FFF2EA

Dot · border

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Badge · primary

seashell white50#FFF2EA

Overlay · surfaceAlt

3×4

Gain control

of your financial future

Color Usage

6 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

marengo700#46555F

Gradient · accentDark

mocha700#8E7B6E

Text · textSecondary

AA18

4.0:1

Lc 64

seashell white50#FFF2EA

Badge · surfaceAlt

slate500#6E828F

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

mocha700#8E7B6E

Text · textSecondary

AA18

4.0:1

Lc 64

seashell white400#FFF0E5

Text · textMuted

Fail

1.1:1

Lc 0

peachpuff500#FFE1CD

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Dot · primary

columbia blue500#CDEBFF

Dot · secondary

mocha500#8E7B6E

Dot · tertiary

slate500#6E828F

Dot · accent

3×4
$2,430.00

$84,251.30

+8%

Total amount

Color Usage

4 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Chart · primary

3×2
$985.50

$12,609.74

-2%

Total amount

Color Usage

4 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

slate500#6E828F

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

seashell white400#FFF0E5

Text · textMuted

Fail

1.1:1

Lc 0

columbia blue500#CDEBFF

Icon · secondary

peachpuff500#FFE1CD

Chart · primary

peachpuff500#FFE1CD

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Badge · primary

peachpuff500#FFE1CD

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

peachpuff500#FFE1CD

Gradient · primary

mocha700#8E7B6E

Gradient · primaryDark

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

black#0B0603

Text · textOnPrimary

AAA

16.2:1

Lc 91

peachpuff500#FFE1CD

Button · primary

columbia blue500#CDEBFF

Overlay · secondary

mocha500#8E7B6E

Overlay · tertiary

slate500#6E828F

Overlay · accent

aliceblue200#EBF7FF

Overlay · secondaryLight

umber700#5E5046

Overlay · tertiaryDark

seashell white200#FFF2EA

Overlay · primaryLight

3×4

Productivity Hacks for Life on the Road

The Ultimate Digital Nomad Toolkit

Color Usage

6 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

umber700#5E5046

Gradient · tertiaryDark

mocha700#8E7B6E

Text · textSecondary

AA18

4.0:1

Lc 64

seashell white50#FFF2EA

Badge · surfaceAlt

columbia blue500#CDEBFF

Button · secondary

3×4

Remote working

Color Usage

13 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

peachpuff500#FFE1CD

Gradient · primary

columbia blue500#CDEBFF

Gradient · secondary

mocha500#8E7B6E

Gradient · tertiary

slate500#6E828F

Gradient · accent

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Overlay · primary

columbia blue500#CDEBFF

Overlay · secondary

mocha500#8E7B6E

Overlay · tertiary

slate500#6E828F

Overlay · accent

aliceblue200#EBF7FF

Overlay · secondaryLight

seashell white50#FFF2EA

Background · surfaceAlt

3×4

New York

Economy

from $120JFK

Color Usage

5 colors
mocha700#8E7B6E

Background · primaryDark

mocha700#8E7B6E

Gradient · primaryDark

white#ffffff

Button · surface

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Icon · primary

3×4

San Francisco

Premium economy

from $240SFO

Color Usage

6 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

taupe900#322821

Button · textPrimary

peachpuff500#FFE1CD

Icon · primary

seashell white400#FFF0E5

Icon · textMuted

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Icon · primary

columbia blue500#CDEBFF

Icon · secondary

mocha500#8E7B6E

Icon · tertiary

slate500#6E828F

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

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

mocha700#8E7B6E

Text · textSecondary

AA18

4.0:1

Lc 64

seashell white200#FFF2EA

Badge · primaryLight

aliceblue200#EBF7FF

Badge · secondaryLight

3×4

Income

$21,430

$19,115 prev.

Color Usage

4 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

peachpuff500#FFE1CD

Chart · primary

3×1

Expenses

$14,782

$12,390 prev.

Color Usage

4 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

mocha500#8E7B6E

Chart · tertiary

3×1

Savings

$6,648

$6,725 prev.

Color Usage

4 colors
white#ffffff

Background · surface

seashell white100#FFF2EA

Border · borderLight

taupe900#322821

Text · textPrimary

AAA

14.4:1

Lc 98

slate500#6E828F

Chart · accent

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