Qolor

UI Cards

94DE83primary
CD83DEsecondary

Track your expenses

Control your finances with real-time insights and smart budgets

Color Usage

6 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

fern700#4A7D3E

Gradient · primaryDark

fern700#4A7D3E

Text · textSecondary

AA

4.9:1

Lc 71

tea green50#E2FFDB

Badge · surfaceAlt

lightgreen500#94DE83

Button · primary

3×4

Expenses

$18,247

JanFebMarAprMayJun

Color Usage

8 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen300#94DE83

Chart · chart[0]

mauve pink400#CD83DE

Chart · chart[1]

petunia600#9E5FAC

Chart · chart[3]

fern700#4A7D3E

Chart · chart[4]

dark plum800#54275E

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen300#94DE83

Chart · chart[0]

mauve pink400#CD83DE

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

9 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Dot · primary

mauve pink500#CD83DE

Dot · secondary

fern500#4A7D3E

Dot · tertiary

tea green200#E2FFDB

Badge · primaryLight

piglet200#F9E0FF

Badge · secondaryLight

palegreen200#BFFFB0

Badge · tertiaryLight

3×4

Thursday, March 26

Design system meeting

9 - 10 AM

Lunch

1 - 2 PM

Design review

3 - 4 PM

Color Usage

9 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Overlay · primary

mauve pink500#CD83DE

Overlay · secondary

fern500#4A7D3E

Overlay · tertiary

tea green200#E2FFDB

Icon · primaryLight

piglet200#F9E0FF

Icon · secondaryLight

palegreen200#BFFFB0

Icon · tertiaryLight

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Icon · primary

lightgreen500#94DE83

Chart · primary

tea green100#E2FFDB

Badge · borderLight

3×4

MacBook Air

13 inch

Color Usage

8 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

tea green50#E2FFDB

Gradient · surfaceAlt

palegreen200#BFFFB0

Gradient · tertiaryLight

hunter green700#2B5421

Icon · tertiaryDark

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

plum purple500#784284

Button · accent

pearl#FCF0FF

Button · textOnAccent

AA

6.5:1

Lc 79

3×4

AirPods Max

Midnight

Color Usage

5 colors
piglet200#F9E0FF

Gradient · secondaryLight

tea green200#E2FFDB

Gradient · primaryLight

dark forest900#0E2E06

Text · textPrimary

dark forest900#0E2E06

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Icon · primary

lightgreen400#A8EF98

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Dot · primary

mauve pink500#CD83DE

Dot · secondary

fern500#4A7D3E

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Ring · primary

mauve pink500#CD83DE

Ring · secondary

fern500#4A7D3E

Ring · tertiary

plum purple500#784284

Ring · accent

white#ffffff

Button · surface

lightgreen400#A8EF98

Icon · textMuted

tea green50#E2FFDB

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

9 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

tea green200#E2FFDB

Badge · primaryLight

piglet200#F9E0FF

Badge · secondaryLight

palegreen200#BFFFB0

Badge · tertiaryLight

lightgreen500#94DE83

Overlay · primary

mauve pink500#CD83DE

Overlay · secondary

fern500#4A7D3E

Overlay · tertiary

3×4

Mia Chen

Product Designer

128

Posts

42

Projects

2.1k

Followers

Color Usage

7 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

lightgreen500#94DE83

Ring · primary

tea green200#E2FFDB

Icon · primaryLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Button · primary

mauve pink500#CD83DE

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Dot · primary

tea green200#E2FFDB

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Badge · primary

tea green50#E2FFDB

Overlay · surfaceAlt

3×4

Gain control

of your financial future

Color Usage

6 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

dark plum700#54275E

Gradient · accentDark

fern700#4A7D3E

Text · textSecondary

AA

4.9:1

Lc 71

tea green50#E2FFDB

Badge · surfaceAlt

plum purple500#784284

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

fern700#4A7D3E

Text · textSecondary

AA

4.9:1

Lc 71

lightgreen400#A8EF98

Text · textMuted

Fail

1.4:1

Lc 17

lightgreen500#94DE83

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Dot · primary

mauve pink500#CD83DE

Dot · secondary

fern500#4A7D3E

Dot · tertiary

plum purple500#784284

Dot · accent

3×4
$2,430.00

$84,251.30

+8%

Total amount

Color Usage

4 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Chart · primary

3×2
$985.50

$12,609.74

-2%

Total amount

Color Usage

4 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

plum purple500#784284

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen400#A8EF98

Text · textMuted

Fail

1.4:1

Lc 17

mauve pink500#CD83DE

Icon · secondary

lightgreen500#94DE83

Chart · primary

lightgreen500#94DE83

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Badge · primary

lightgreen500#94DE83

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

lightgreen500#94DE83

Gradient · primary

fern700#4A7D3E

Gradient · primaryDark

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

black#000C00

Text · textOnPrimary

AAA

12.4:1

Lc 77

lightgreen500#94DE83

Button · primary

mauve pink500#CD83DE

Overlay · secondary

fern500#4A7D3E

Overlay · tertiary

plum purple500#784284

Overlay · accent

piglet200#F9E0FF

Overlay · secondaryLight

hunter green700#2B5421

Overlay · tertiaryDark

tea green200#E2FFDB

Overlay · primaryLight

3×4

Productivity Hacks for Life on the Road

The Ultimate Digital Nomad Toolkit

Color Usage

6 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

hunter green700#2B5421

Gradient · tertiaryDark

fern700#4A7D3E

Text · textSecondary

AA

4.9:1

Lc 71

tea green50#E2FFDB

Badge · surfaceAlt

mauve pink500#CD83DE

Button · secondary

3×4

Remote working

Color Usage

13 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

lightgreen500#94DE83

Gradient · primary

mauve pink500#CD83DE

Gradient · secondary

fern500#4A7D3E

Gradient · tertiary

plum purple500#784284

Gradient · accent

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Overlay · primary

mauve pink500#CD83DE

Overlay · secondary

fern500#4A7D3E

Overlay · tertiary

plum purple500#784284

Overlay · accent

piglet200#F9E0FF

Overlay · secondaryLight

tea green50#E2FFDB

Background · surfaceAlt

3×4

New York

Economy

from $120JFK

Color Usage

5 colors
fern700#4A7D3E

Background · primaryDark

fern700#4A7D3E

Gradient · primaryDark

white#ffffff

Button · surface

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Icon · primary

3×4

San Francisco

Premium economy

from $240SFO

Color Usage

6 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

dark forest900#0E2E06

Button · textPrimary

lightgreen500#94DE83

Icon · primary

lightgreen400#A8EF98

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

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Icon · primary

mauve pink500#CD83DE

Icon · secondary

fern500#4A7D3E

Icon · tertiary

plum purple500#784284

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

7 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

fern700#4A7D3E

Text · textSecondary

AA

4.9:1

Lc 71

tea green200#E2FFDB

Badge · primaryLight

piglet200#F9E0FF

Badge · secondaryLight

palegreen200#BFFFB0

Badge · tertiaryLight

3×4

Income

$21,430

$19,115 prev.

Color Usage

4 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

lightgreen500#94DE83

Chart · primary

3×1

Expenses

$14,782

$12,390 prev.

Color Usage

4 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

fern500#4A7D3E

Chart · tertiary

3×1

Savings

$6,648

$6,725 prev.

Color Usage

4 colors
white#ffffff

Background · surface

tea green100#E2FFDB

Border · borderLight

dark forest900#0E2E06

Text · textPrimary

AAA

14.9:1

Lc 99

plum purple500#784284

Chart · accent

3×1