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=Jost:wght@400;500;600&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

--maximum-yellow-red_a10: hsla(41, 99%, 64%, 0.1);
--maximum-yellow-red_a40: hsla(41, 99%, 64%, 0.4);
--maximum-yellow-red: hsl(41, 99%, 64%);
--orange-red_a20: hsla(19, 100%, 55%, 0.2);
--eerie-black: hsl(210, 11%, 15%);
--orange-red: hsl(19, 100%, 55%);
--davys-gray: hsl(0, 0%, 33%);
--white_a80: hsla(0, 0%, 100%, 0.8);
--white_a75: hsla(0, 0%, 100%, 0.75);
--white_a10: hsla(0, 0%, 100%, 0.1);
--jet_a10: hsla(0, 0%, 22%, 0.1);
--black: hsl(0, 0%, 0%);
--white: hsl(0, 0%, 100%);
--jet: hsl(0, 0%, 22%);

Typography

--ff-jost: 'Jost', sans-serif;

--fs-45: 4.5rem;
--fs-38: 3.8rem;
--fs-32: 3.2rem;
--fs-27: 2.7rem;
--fs-26: 2.6rem;
--fs-22: 2.2rem;
--fs-20: 2rem;
--fs-18: 1.8rem;
--fs-17: 1.7rem;
--fs-14: 1.4rem;
--fs-12: 1.2rem;

--fw-400: 400;
--fw-500: 500;
--fw-600: 600;

Spacing

--section-padding: 60px;

Shadow

--shadow: 0 2px 2px hsla(0, 0%, 22%, 0.08);

Border Radius

--radius-50: 50px;
--radius-pill: 100px;
--radius-circle: 50%;

Transition

--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);