The designs were created to the following widths:
- Mobile: 375px
- Desktop: 1440px
- Pale Violet (sub-heading at the top of the app UI): hsl(276, 100%, 81%)
- Moderate Violet (chat on the left): hsl(276, 55%, 52%)
- Desaturated Dark Violet (chat on the right): hsl(271, 15%, 43%)
- Grayish Blue (placeholder text): hsl(206, 6%, 79%)
- Very Dark Desaturated Violet (main heading): hsl(271, 36%, 24%)
- Dark Grayish Violet (paragraph): hsl(270, 7%, 64%)
These two colors are the vibrant background colors you see throughout the design and are applied as a linear gradient:
- Light Magenta: hsl(293, 100%, 63%)
- Light Violet: hsl(264, 100%, 61%)
- White: hsl(0, 0%, 100%)
- Light Grayish Violet (app background): hsl(270, 20%, 96%)
- Very Dark Desaturated Violet (submit button background): hsl(271, 36%, 24%)
- Very Light Magenta (radio button outline): hsl(289, 100%, 72%)
- Font size: 16px
- Family: Rubik
- Weights: 400, 500, 700 :root { --subheading-text: hsl(276, 100%, 81%); --msg-bg: hsl(276, 100%, 91%); --msg-user-one: hsl(276, 55%, 52%); --msg-user-two: hsl(271, 15%, 43%); --placeholder: hsl(206, 6%, 79%); --main-heading: hsl(271, 36%, 24%); --paragraph: hsl(270, 7%, 64%); --lightgradient: hsl(293, 100%, 63%); --darkgradient: hsl(264, 100%, 61%); --white: hsl(0, 0%, 100%); --appbg: hsl(270, 20%, 96%); --btn: hsl(271, 36%, 24%); --radiobtn: hsl(289, 100%, 72%); }