Branding Guide

Logos and style guides

colors:

--primary-text: #ffffff;
--grad-primary: #df6277ff;

--background: #15181c;
--accent: #21242b;
--accent-light: #313540;

--code: #313540;

--disabled: #666;

--primary: hsl(350, 66%, 63%);
--link: hsl(214, 46%, 52%);
--info: hsl(274, 32%, 42%);
--success: hsl(145, 27%, 59%);
--warn: hsl(49, 85%, 69%);
--danger: hsl(17, 95%, 70%);

--primary-dark: hsl(350, 66%, 55%);
--link-dark: hsl(214, 46%, 42%);
--info-dark: hsl(274, 32%, 32%);
--success-dark: hsl(145, 27%, 49%);
--warn-dark: hsl(49, 85%, 60%);
--danger-dark: hsl(17, 95%, 65%);

--primary-light: hsl(350, 66%, 70%);
--link-light: hsl(214, 46%, 67%);
--info-light: hsl(274, 32%, 56%);
--success-light: hsl(145, 27%, 67%);
--warn-light: hsl(49, 85%, 79%);
--danger-light: hsl(17, 95%, 80%);

/* Light theme */

--primary-text: #333;
--background: #ffffff;
--accent: #e0e0e0;
--accent-light: #d0d0d0;

Logo colors:

--grass-green: #99cd61;
--dirt-light-brown: #7a573b;
--dirt-dark-brwon: #4d3f33 --rainbow-red: #df6277;
--rainbow-orange: #fb9168;
--rainbow-yellow: #f3db6c;
--rainbow-green: #7ab392;
--rainbow-blue: #4b7cbc;
--rainbow-purple: #6f488c;

--top-white: #ffffff;
--right-white: #d6d2d2;
--left-white: #dfdfdf;