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

--rich-black-fogra-29: hsl(225, 25%, 9%);
--rich-black-fogra-39: hsl(170, 21%, 5%);
--raisin-black: hsl(228, 13%, 15%);
--eerie-black: hsl(207, 19%, 11%);
--light-gray: hsl(0, 3%, 80%);
--gunmetal-1: hsl(229, 15%, 21%);
--gunmetal-2: hsl(216, 22%, 18%);
--gainsboro: hsl(0, 7%, 88%);
--citrine: hsl(57, 97%, 45%);
--xiketic: hsl(253, 21%, 13%);
--gray-x: hsl(0, 0%, 74%);
--white: hsl(0, 100%, 100%);
--black: hsl(0, 0%, 0%);
--jet: hsl(0, 0%, 20%);

Typography

Font Family

--ff-poppins: 'Poppins', sans-serif;

Font Size

--fs-1: 36px;
--fs-2: 32px;
--fs-3: 30px;
--fs-4: 24px;
--fs-5: 20px;
--fs-6: 18px;
--fs-7: 16px;
--fs-8: 15px;
--fs-9: 14px;
--fs-10: 13px;
--fs-11: 12px;
--fs-12: 11px;

Font Weight

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

Transition

--transition-1: 0.15s ease;
--transition-2: 0.25s ease-in;

Spacing

--section-padding: 100px;