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

--medium-sea-green: hsl(157, 100%, 36%);
--silver-chalice: hsl(0, 0%, 66%); 
--granite-gray: hsl(0, 0%, 40%);
--sonic-silver: hsl(208, 7%, 46%);
--dodger-blue: hsl(205, 100%, 50%);
--oxford-blue: hsl(219, 37%, 18%);
--light-gray: hsl(0, 0%, 80%);
--gunmetal: hsl(216, 14%, 21%);
--cultured: hsl(210, 12%, 97%);
--charcoal: hsl(210, 29%, 24%);
--white: hsl(0, 0%, 100%);
--jet: hsl(0, 0%, 20%);

--gradient: linear-gradient(0.5turn, hsl(213, 42%, 91%), hsl(0, 0%, 100%));

Typography

Font Family

--ff-rubik: "Rubik", sans-serif;

Font Size

--fs-1: 28px;
--fs-2: 26px;
--fs-3: 24px;
--fs-4: 20px;
--fs-5: 18px;
--fs-6: 17px;
--fs-7: 15px;
--fs-8: 13px;

Font Weight

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

Transition

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

Spacing

--section-padding: 80px 0;