Colors

Ayro UI Colors

All the colors are available as CSS variables in starter.css file, we predefinded all required colors so you will remain consistent while building a project using Ayro UI. You can also explore all these colors from our core style guide which is provided as a figma file.

Color Codes

--primary: #155bd5;
--primary-dark: #1c3ab6;
--primary-light: #e2f1ff;
--accent: #00d4d7;
--accent-dark: #00bac1;
--accent-light: #dff9f8;
--success: #13d527;
--success-dark: #00ae11;
--success-light: #eafbe7;
--secondary: #8f15d5;
--secondary-dark: #6013c7;
--secondary-light: #f4e5fa;
--info: #15b2d5;
--info-dark: #0f8ca8;
--info-light: #e0f5fa;
--caution: #dbbb25;
--caution-dark: #d58f15;
--caution-light: #fbf9e4;
--error: #e6185e;
--error-dark: #bf1257;
--error-light: #fce4eb;
--black: #1d1d1d;
--dark-1: #2d2d2d;
--dark-2: #4d4d4d;
--dark-3: #6d6d6d;
--gray-1: #8d8d8d;
--gray-2: #adadad;
--gray-3: #cdcdcd;
--gray-4: #e0e0e0;
--light-1: #efefef;
--light-2: #f5f5f5;
--light-3: #fafafa;