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=Manrope:wght@500;700&display=swap" rel="stylesheet">

Ionicon

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

---

Colors

--violet-blue-crayola: hsla(234, 50%, 64%, 1);
--dark-cornflower-blue_a7: hsla(214, 88%, 27%, 0.07);
--white: hsla(0, 0%, 100%, 1);
--white_a3: hsla(0, 0%, 100%, 0.03);
--white_a8: hsla(0, 0%, 100%, 0.08);
--white_a12: hsla(0, 0%, 100%, 0.12);
--white_a70: hsla(0, 0%, 100%, 0.7);
--cultured: hsla(220, 20%, 97%, 1);
--lavender-web: hsla(233, 52%, 94%, 1);
--cadet-blue-crayola: hsla(220, 12%, 70%, 1);
--cadet-blue-crayola_a20: hsla(222, 23%, 71%, 0.2);
--charcoal: hsla(218, 22%, 26%, 1);
--raisin-black: hsla(216, 14%, 14%, 1);
--light-gray: hsla(0, 0%, 79%, 1);
--blue-crayola: hsla(219, 72%, 56%, 1);
--black-coral: hsla(220, 12%, 43%, 1);

Typography

--ff-manrope: 'Manrope', sans-serif;

--fs-1: calc(2.7rem + 1.38vw);
--fs-2: calc(2.6rem + .66vw);
--fs-3: 2.2rem;
--fs-4: 1.9rem;
--fs-5: 1.8rem;
--fs-6: 1.7rem;
--fs-7: 1.5rem;
--fs-8: 1.4rem;

--fw-700: 700;

Spacing

--section-padding: 90px;

Shadow

--shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
--shadow-2: 0 0 0 0.05rem hsla(214, 88%, 27%, 0.08), 0 0 1.25rem hsla(216, 14%, 14%, 0.06);
--shadow-3: 0 0 1.25rem hsla(216, 14%, 14%, 0.04);

Border Radius

--radius-circle: 50%;
--radius-pill: 100px;
--radius-10: 10px;
--radius-8: 8px;
--radius-6: 6px;

Transition

--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--transition-3: 0.3s ease-in-out;