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)

2 years 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.

2 years 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)

2 years ago

I like the application of the guidelines in the mobile.

Dennis Reyes Henson

Pro

UI Designer 3 reviews

Thanks bro!

2 years 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 UX design fundamentals and principles that create better products. Build foundational knowledge in design concepts, visual fundamentals, and workflows.

Beginner

4.8 (15.7k)

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.6 (2k)

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 (9.2k)

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

cflow Color System

Tools used

From brief

Topics

Share

Reviews

You might also like

NORTHSIDE - Coworking space Customer Journey Map

Wealthsimple 404 Page

HealthFlow: Designing a Simple and Insightful Wellness Dashboard

Rethinking Content Discovery for Netflix

Accessibile Login & Signup Form for Notion

Improving Dating App Onboarding: A/B Test Design

Visual Design Courses

UX Design Foundations

Introduction to Figma

Design Terminology