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=Inter:wght@300;400;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

--eerie-black_80: hsla(225, 9%, 9%, 0.8);
--eerie-black_60: hsla(225, 9%, 9%, 0.6);
--eerie-black: hsl(225, 9%, 9%);
--light-gray-1: hsl(0, 0%, 80%);
--light-gray-2: hsl(240, 2%, 81%);
--gainsboro: hsl(240, 9%, 91%);
--cultured: hsl(300, 8%, 95%);
--blue-ryb: hsl(232, 100%, 60%);
--white_20: hsla(0, 0%, 100%, 0.2);
--white: hsl(0, 0%, 100%);

Typography

--ff-inter: 'Inter', sans-serif;

--fs-1: 3.6rem;
--fs-2: 3.2rem;
--fs-3: 2.4rem;
--fs-4: 2.2rem;
--fs-5: 2rem;
--fs-6: 1.8rem;
--fs-7: 1.5rem;
--fs-8: 1.4rem;
--fs-9: 1.3rem;

--fw-700: 700;
--fw-500: 500;
--fw-300: 300;

Spacing

--section-padding: 50px;

Border Radius

--radius-16: 16px;
--radius-pill: 200px;
--radius-circle: 50%;

Transition

--transition-1: 0.25s ease;
--transition-2: 0.5s ease;