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@300;400;500;600;700&family=Roboto: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

--maximum-blue-green_10: hsla(185, 75%, 45%, 0.1);
--rich-black-fogra-29: hsl(217, 28%, 9%);
--gray-x-11-gray: hsl(0, 0%, 74%);
--oxford-blue_60: hsla(230, 41%, 14%, 0.6);
--bittersweet: hsl(5, 100%, 69%);
--smoky-black: rgb(7, 6, 1);
--gainsboro: hsl(0, 0%, 88%);
--black_90: hsla(0, 0%, 0%, 0.9);
--cultured: hsl(200, 12%, 95%);
--salmon: hsl(5, 100%, 73%);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--onyx: hsl(0, 0%, 27%);

Typography

--ff-roboto: 'Roboto', sans-serif;
--ff-josefin-sans: 'Josefin Sans', sans-serif;

--fs-1: 3rem;
--fs-2: 2.6rem;
--fs-3: 2.2rem;
--fs-4: 2rem;
--fs-5: 1.8rem;
--fs-6: 1.6rem;
--fs-7: 1.4rem;
--fs-8: 1.2rem;

--fw-300: 300;
--fw-500: 500;
--fw-600: 600;
--fw-700: 700;

Transition

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

Spacing

--section-padding: 60px;