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=Catamaran:wght@600;700;800;900&family=Rubik:wght@400;500;800&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

--rich-black-fogra-29_50: hsl(210, 26%, 11%, 0.5);
--rich-black-fogra-29-1: hsl(210, 26%, 11%);
--rich-black-fogra-29-2: hsl(210, 50%, 4%);
--silver-metallic: hsl(212, 9%, 67%);
--coquelicot_20: hsla(12, 98%, 52%, 0.2);
--coquelicot_10: hsla(12, 98%, 52%, 0.1);
--sonic-silver: hsl(0, 0%, 47%);
--cadet-gray: hsl(214, 15%, 62%);
--light-gray: hsl(0, 0%, 80%);
--coquelicot: hsl(12, 98%, 52%);
--gainsboro: hsl(0, 0%, 88%);
--white_20: hsl(0, 0%, 100%, 0.2);
--white_10: hsl(0, 0%, 100%, 0.1);
--black_10: hsl(0, 0%, 0%, 0.1);
--white: hsl(0, 0%, 100%);

Typography

--ff-catamaran: 'Catamaran', sans-serif;
--ff-rubik: 'Rubik', sans-serif;

--fs-1: 3.8rem;
--fs-2: 3rem;
--fs-3: 2.5rem;
--fs-4: 2rem;
--fs-5: 1.8rem;
--fs-6: 1.5rem;

--fw-900: 900;
--fw-800: 800;
--fw-700: 700;
--fw-500: 500;

Spacing

--section-padding: 80px;

Shadow

--shadow-1: 0 0 20px var(--black_10);
--shadow-2: 0px 10px 24px var(--coquelicot_20);

Border Radius

--radius-10: 10px;
--radius-8: 8px;
--radius-5: 5px;

Transition

--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);