cflow Color System project

Hi Everyone,

I am introducing a vibrant new colour scheme for the CFlow app! The sleek dark background accentuates the primary and secondary colours, making navigation and accessibility effortless. Every colour is carefully chosen to meet WCAG contrast standards, ensuring a visually appealing and compliant experience.

I hope you can take a look and provide some feedback and suggestions to help me improve my design.

Thank you!

Tools used

Figma

From brief

Create a Color System

Topics

Color Branding Color Palette

Reviews

2 reviews

Hi, first of all nice work!

Regarding accessibility I noticed they gray in the presentation has too low contrast ratio, but because it's just a presentation I am not basing my review on that.

In the design itself I couldn't understand the reason for multiple secondary colors, if the colors do not have attached meaning, I believe keeping one secondary color would be less confusing. Although if the app introduces their meaning during new user onboarding, then it's totally fine.

Dennis Reyes Henson

Pro

UI Designer 3 reviews

Hi Michal, Thanks for your time and feedback Right, I agree with what you said. I made some minor adjustments based on your suggestions, especially on the greys and it gives better results on the WCAG color contrast checker. Pls have a look and let me know your thoughts. Thanks, Dennis

(edited)

1 year ago

Michal Kuczek

Pro

Developer 75 reviews

On the 12th slide where you have the preview of how the colors would be implemented – I still don't understand why you are mixing the colors in components; it is hard for me to devise the meaning behind that choice. If you can either explain why or change this slide, I will update my review.

1 year ago

Dennis Reyes Henson

Pro

UI Designer 3 reviews

Thanks again Michal. The idea is for the secondary colors will be assigned as labels for example Orange for Overdue, Cyan for Today, Yellow for New Task and Pink In Progress. I could not show everything on one screen that's why I was not able to show the other colours. I made another adjustment I reduced the color on each card component so that it would not look too much. Let me know if that will work. Thanks

(edited)

1 year ago

I like the application of the guidelines in the mobile.

Dennis Reyes Henson

Pro

UI Designer 3 reviews

Thanks bro!

1 year ago

9 Claps

Average 4.5 by 2 people

5 claps

4 claps

3 claps

2 claps

1 claps

Review project and earn 100 XP

View all

Project

Visual Design Courses

Popular

Course

UX Design Foundations

Gene Kamenez

Learn the essentials of UX design to build a strong foundation in core principles. Gain practical skills to support product development and create better user experiences.

Beginner

4.8 (14.3k)

Course

Introduction to Figma

Gene Kamenez

Learn essential Figma tools like layers, styling, typography, and images. Master the basics to create clean, user-friendly designs

Beginner

4.5 (1.8k)

Course

Design Terminology

Alesya Dzenga

Learn UX terminology and key UX/UI terms that boost collaboration between designers, developers, and stakeholders for smoother, clearer communication.

Beginner

4.7 (8.8k)

<?xml version="1.0" encoding="utf-8"?>

cflow Color System

Tools used

From brief

Topics

Share

Reviews

You might also like

Sneak

Heuristic Evaluation - Booking.com

User persona for TikTok

Empathy Map - Revolut

UNIVERSALTAXPROFESSIONALS WEBSITE REVAMP [ Informational Website ]

Satori Reader-Dark & Light Mode Empty State Pages

Visual Design Courses

UX Design Foundations

Introduction to Figma

Design Terminology