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

Ionicon

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

Colors

--flourescent-blue: hsl(178, 100%, 49%);
--heliotrope-gray: hsl(253, 15%, 70%);
--dark-violet: hsl(252, 100%, 12%);
--space-cadet: hsl(247, 43%, 20%);
--blue-ryb: hsl(221, 100%, 50%);
--white: hsl(0, 0%, 100%);

--gradient: linear-gradient(to right, var(--flourescent-blue), var(--blue-ryb));

Typography

Font Family

--ff-josefin: 'Josefin sans', sans-serif;

Font Size

--fs-1: 25px;
--fs-2: 18px;
--fs-3: 17px;
--fs-4: 15px;

Font Weight

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

Transition

--transition: 0.25s ease-in-out;

Spacing

--section-padding: 30px;