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@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

Background color

--bg-white: hsla(0, 0%, 100%, 1);
--bg-gainsboro: hsla(154, 10%, 86%, 1);
--bg-wild-blue-yonder: hsla(227, 39%, 75%, 1);
--bg-orange-crayola: hsla(18, 97%, 62%, 1);
--bg-roman-silver-alpha-30: hsla(210, 9%, 57%, 0.3);

Text color

--text-orange-crayola: hsla(18, 97%, 62%, 1);
--text-blue-crayola: hsla(216, 98%, 52%, 1);
--text-eerie-black: hsla(210, 11%, 15%, 1);
--text-eerie-black-2: hsla(0, 0%, 7%, 1);
--text-black: hsla(270, 100%, 0%, 1);

Border color

--border-eerie-black: hsla(0, 0%, 7%, 1);

Typography

--fontFamily-inter: 'Inter', sans-serif;
--fontFamily-clashDisplay: 'ClashDisplay', cursive;

--fontSize-1: 6.2rem;
--fontSize-2: 4.4rem;
--fontSize-3: 3.8rem;
--fontSize-4: 3.4rem;
--fontSize-5: 3rem;
--fontSize-6: 2.5rem;
--fontSize-7: 2rem;
--fontSize-8: 1.8rem;
--fontSize-9: 1.4rem;
--fontSize-10: 2.4rem;

--weight-semiBold: 600;

Shadow

--shadow-1: 0 4px 6px hsla(256, 100%, 9%, 0.1);
--shadow-2: 4px 4px 0px hsla(0, 0%, 7%, 1);
--shadow-3: 2px 2px 0px hsla(0, 0%, 7%, 1);

Transition

--transition-1: 250ms ease;
--transition-2: 500ms ease;