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=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@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

--blue-green-color-wheel_60: hsla(165, 77%, 17%, 0.6);
--blue-green-color-wheel_10: hsla(165, 77%, 17%, 0.1);
--blue-green-color-wheel: hsl(165, 77%, 17%);
--black-chocolate: hsl(32, 24%, 14%);
--spanish-gray: hsl(210, 3%, 62%);
--orange-web: hsl(38, 100%, 50%);
--davys-gray: hsl(213, 5%, 34%);
--light-gray: hsl(0, 0%, 80%);
--msu-green: hsl(165, 77%, 15%);
--cultured: hsl(30, 22%, 96%);
--white_15: hsl(0, 0%, 100%, 0.15);
--white: hsl(0, 0%, 100%);
--onyx: hsl(210, 10%, 23%);

Typography

--ff-montserrat: 'Montserrat', sans-serif;
--ff-playfair: 'Playfair Display', serif;

--fs-1: 3.6rem;
--fs-2: 2.4rem;
--fs-3: 2.2rem;
--fs-4: 2rem;
--fs-5: 1.5rem;
--fs-6: 1.4rem;
--fs-7: 1.3rem;

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

Spacing

--section-padding: 60px;

Shadow

--shadow-1: 0 2px 30px hsla(0, 0%, 0%, 0.1);
--shadow-2: 2px 4px 8px hsla(215, 20%, 16%, 0.15);

Border Radius

--radius-2: 2px;
--radius-10: 10px;
--radius-50: 50px;

Transition

--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--transition-3: 1s 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);