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=Mr+De+Haviland&family=Roboto:wght@400;500;700&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

--red-orange-color-wheel: hsl(17, 96%, 48%);
--middle-blue-green: hsl(167, 45%, 72%);
--smokey-black: hsl(0, 0%, 7%);
--spanish-gray: hsl(0, 0%, 60%);
--granite-gray: hsl(0, 0%, 40%);
--tan-crayola: hsl(27, 46%, 58%);
--light-gray: hsl(0, 0%, 80%);
--black_10: hsla(0, 0%, 0%, 0.1);
--black_25: hsla(0, 0%, 0%, 0.25);
--black_50: hsla(0, 0%, 0%, 0.4);
--black_70: hsla(0, 0%, 0%, 0.7);
--cultured: hsl(220, 16%, 96%);
--manatee: hsl(218, 11%, 65%);
--black: hsl(0, 0%, 0%);
--white: hsl(0, 0%, 100%);

Typography

--ff-roboto: 'Roboto', sans-serif;
--ff-mr_de_haviland: 'Mr De Haviland', cursive;

--fs-1: 6rem;
--fs-2: 3rem;
--fs-3: 2rem;
--fs-4: 1.8rem;
--fs-5: 1.4rem;
--fs-6: 1.2rem;

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

Spacing

--section-padding: 50px;

Shadow

--shadow: 0 0 2px hsla(0, 0%, 0%, 0.2);

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);