style-guide.md

Essential Stuff

Html import links

Google font

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">

---

Colors

--primary: #B5A1E5; 
--on-primary: #100E17; 
--background: #131214;
--on-background: #EAE6F2;
--surface: #1D1C1F;
--on-surface: #DDDAE5;
--on-surface-variant: #7B7980; 
--on-surface-variant-2: #B9B6BF;
--outline: #3E3D40;
--bg-aqi-1: #89E589;
--on-bg-aqi-1: #1F331F;
--bg-aqi-2: #E5DD89;
--on-bg-aqi-2: #33311F;
--bg-aqi-3: #E5C089;
--on-bg-aqi-3: #332B1F;
--bg-aqi-4: #E58989;
--on-bg-aqi-4: #331F1F;
--bg-aqi-5: #E589B7;
--on-bg-aqi-5: #331F29;
--white: hsl(0, 0%, 100%);
--white-alpha-4: hsla(0, 0%, 100%, 0.04);
--white-alpha-8: hsla(0, 0%, 100%, 0.08);
--black-alpha-10: hsla(0, 0%, 0%, 0.1);

Gradient color

--gradient-1: linear-gradient(180deg, hsla(270, 5%, 7%, 0) 0%, hsla(270, 5%, 7%, 0.8) 65%, hsl(270, 5%, 7%) 100%);
--gradient-2: linear-gradient(180deg, hsla(260, 5%, 12%, 0) 0%, hsla(260, 5%, 12%, 0.8) 65%, hsl(260, 5%, 12%) 100%);

Typography

--ff-nunito-sans: 'Nunito Sans', sans-serif;

--heading: 5.6rem;
--title-1: 2rem;
--title-2: 1.8rem;
--title-3: 1.6rem;
--body-1: 2.2rem;
--body-2: 2rem;
--body-3: 1.6rem;
--label-1: 1.4rem;
--label-2: 1.2rem;

--weight-regular: 400;
--weight-semiBold: 600;

Shadow

--shadow-1: 0px 1px 3px hsla(0, 0%, 0%, 0.5);
--shadow-2: 0px 3px 6px hsla(0, 0%, 0%, 0.4);

Border Radius

--radius-28: 28px;
--radius-16: 16px;
--radius-pill: 500px;
--radius-circle: 50%;

Transition

--transition-short: 100ms ease;