Qolor

UI Cards

AA94DEprimary
C8DE94secondary

Track your expenses

Control your finances with real-time insights and smart budgets

Color Usage

6 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

twilight purple700#604F84

Gradient · primaryDark

twilight purple700#604F84

Text · textSecondary

AAA

7.1:1

Lc 81

ghostwhite50#F6F3FF

Badge · surfaceAlt

wisteria500#AA94DE

Button · primary

3×4

Expenses

$18,247

JanFebMarAprMayJun

Color Usage

8 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria300#AA94DE

Chart · chart[0]

tea green400#C8DE94

Chart · chart[1]

anise600#96A86B

Chart · chart[3]

twilight purple700#604F84

Chart · chart[4]

fir800#46522A

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria300#AA94DE

Chart · chart[0]

tea green400#C8DE94

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Dot · primary

tea green500#C8DE94

Dot · secondary

twilight purple500#604F84

Dot · tertiary

lavender mist200#ECE5FF

Badge · primaryLight

tea green200#EBFFBE

Badge · secondaryLight

periwinkle200#D8CAFF

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Overlay · primary

tea green500#C8DE94

Overlay · secondary

twilight purple500#604F84

Overlay · tertiary

lavender mist200#ECE5FF

Icon · primaryLight

tea green200#EBFFBE

Icon · secondaryLight

periwinkle200#D8CAFF

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Icon · primary

wisteria500#AA94DE

Chart · primary

lavender100#F4F0FF

Badge · borderLight

3×4

MacBook Air

13 inch

Color Usage

8 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

ghostwhite50#F6F3FF

Gradient · surfaceAlt

periwinkle200#D8CAFF

Gradient · tertiaryLight

twilight purple700#41325E

Icon · tertiaryDark

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

oregano500#6D7C4A

Button · accent

black#050900

Button · textOnAccent

AA18

4.4:1

Lc 35

3×4

AirPods Max

Midnight

Color Usage

5 colors
tea green200#EBFFBE

Gradient · secondaryLight

lavender mist200#ECE5FF

Gradient · primaryLight

raisin900#24183B

Text · textPrimary

raisin900#24183B

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Icon · primary

mauve400#C2ADF4

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Dot · primary

tea green500#C8DE94

Dot · secondary

twilight purple500#604F84

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Ring · primary

tea green500#C8DE94

Ring · secondary

twilight purple500#604F84

Ring · tertiary

oregano500#6D7C4A

Ring · accent

white#ffffff

Button · surface

mauve400#C2ADF4

Icon · textMuted

ghostwhite50#F6F3FF

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

lavender mist200#ECE5FF

Badge · primaryLight

tea green200#EBFFBE

Badge · secondaryLight

periwinkle200#D8CAFF

Badge · tertiaryLight

wisteria500#AA94DE

Overlay · primary

tea green500#C8DE94

Overlay · secondary

twilight purple500#604F84

Overlay · tertiary

3×4

Mia Chen

Product Designer

128

Posts

42

Projects

2.1k

Followers

Color Usage

7 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

wisteria500#AA94DE

Ring · primary

lavender mist200#ECE5FF

Icon · primaryLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Button · primary

tea green500#C8DE94

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Dot · primary

lavender mist200#ECE5FF

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Badge · primary

ghostwhite50#F6F3FF

Overlay · surfaceAlt

3×4

Gain control

of your financial future

Color Usage

6 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

fir700#46522A

Gradient · accentDark

twilight purple700#604F84

Text · textSecondary

AAA

7.1:1

Lc 81

ghostwhite50#F6F3FF

Badge · surfaceAlt

oregano500#6D7C4A

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

7 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

twilight purple700#604F84

Text · textSecondary

AAA

7.1:1

Lc 81

mauve400#C2ADF4

Text · textMuted

Fail

2.0:1

Lc 36

wisteria500#AA94DE

Ring · primary

lavender mist200#ECE5FF

Border · border

3×4

Categories

Groceries

14 transactions

Household

7 transactions

Travel

3 transactions

Other

18 transactions

Color Usage

7 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Dot · primary

tea green500#C8DE94

Dot · secondary

twilight purple500#604F84

Dot · tertiary

oregano500#6D7C4A

Dot · accent

3×4
$2,430.00

$84,251.30

+8%

Total amount

Color Usage

4 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Chart · primary

3×2
$985.50

$12,609.74

-2%

Total amount

Color Usage

4 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

oregano500#6D7C4A

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

mauve400#C2ADF4

Text · textMuted

Fail

2.0:1

Lc 36

tea green500#C8DE94

Icon · secondary

wisteria500#AA94DE

Chart · primary

wisteria500#AA94DE

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Badge · primary

wisteria500#AA94DE

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

wisteria500#AA94DE

Gradient · primary

twilight purple700#604F84

Gradient · primaryDark

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

licorice#0A021A

Text · textOnPrimary

AAA

7.7:1

Lc 55

wisteria500#AA94DE

Button · primary

tea green500#C8DE94

Overlay · secondary

twilight purple500#604F84

Overlay · tertiary

oregano500#6D7C4A

Overlay · accent

tea green200#EBFFBE

Overlay · secondaryLight

twilight purple700#41325E

Overlay · tertiaryDark

lavender mist200#ECE5FF

Overlay · primaryLight

3×4

Productivity Hacks for Life on the Road

The Ultimate Digital Nomad Toolkit

Color Usage

6 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

twilight purple700#41325E

Gradient · tertiaryDark

twilight purple700#604F84

Text · textSecondary

AAA

7.1:1

Lc 81

ghostwhite50#F6F3FF

Badge · surfaceAlt

tea green500#C8DE94

Button · secondary

3×4

Remote working

Color Usage

13 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

wisteria500#AA94DE

Gradient · primary

tea green500#C8DE94

Gradient · secondary

twilight purple500#604F84

Gradient · tertiary

oregano500#6D7C4A

Gradient · accent

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Overlay · primary

tea green500#C8DE94

Overlay · secondary

twilight purple500#604F84

Overlay · tertiary

oregano500#6D7C4A

Overlay · accent

tea green200#EBFFBE

Overlay · secondaryLight

ghostwhite50#F6F3FF

Background · surfaceAlt

3×4

New York

Economy

from $120JFK

Color Usage

5 colors
twilight purple700#604F84

Background · primaryDark

twilight purple700#604F84

Gradient · primaryDark

white#ffffff

Button · surface

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Icon · primary

3×4

San Francisco

Premium economy

from $240SFO

Color Usage

6 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

raisin900#24183B

Button · textPrimary

wisteria500#AA94DE

Icon · primary

mauve400#C2ADF4

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Icon · primary

tea green500#C8DE94

Icon · secondary

twilight purple500#604F84

Icon · tertiary

oregano500#6D7C4A

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

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

twilight purple700#604F84

Text · textSecondary

AAA

7.1:1

Lc 81

lavender mist200#ECE5FF

Badge · primaryLight

tea green200#EBFFBE

Badge · secondaryLight

periwinkle200#D8CAFF

Badge · tertiaryLight

3×4

Income

$21,430

$19,115 prev.

Color Usage

4 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

wisteria500#AA94DE

Chart · primary

3×1

Expenses

$14,782

$12,390 prev.

Color Usage

4 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

twilight purple500#604F84

Chart · tertiary

3×1

Savings

$6,648

$6,725 prev.

Color Usage

4 colors
white#ffffff

Background · surface

lavender100#F4F0FF

Border · borderLight

raisin900#24183B

Text · textPrimary

AAA

16.6:1

Lc 101

oregano500#6D7C4A

Chart · accent

3×1