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=Abril+Fatface&family=Comforter+Brush&family=Heebo:wght@400;500;600;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

--battleship-gray: hsl(0, 0%, 53%);
--viridian-green: hsl(180, 98%, 31%);
--silver-chalice: hsl(0, 0%, 69%);
--mikado-yellow: hsl(47, 98%, 50%);
--granite-gray: hsl(0, 0%, 40%);
--independence: hsl(219, 20%, 32%);
--spanish-gray: hsl(0, 0%, 61%);
--oxford-blue: hsl(222, 46%, 17%);
--black-coral: hsl(223, 8%, 44%);
--eerie-black: hsl(210, 11%, 15%);
--light-gray: hsl(0, 0%, 80%);
--white-2: hsl(0, 0%, 98%);
--white-1: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--jet: hsl(0, 0%, 20%);

Typography

--ff-abril-fatface: 'Abril Fatface', cursive;
--ff-comforter-brush: 'Comforter Brush', cursive;
--ff-heebo: 'Heebo', sans-serif;

--fs-1: 3.4rem;
--fs-2: 3.2rem;
--fs-3: 3rem;
--fs-4: 2.4rem;
--fs-5: 1.8rem;
--fs-6: 1.7rem;
--fs-7: 1.4rem;
--fs-8: 1.2rem;

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

Border Radius

--radius-6: 6px;

Spacing

--section-padding: 40px;

Transition

--transition-1: 0.15s ease;
--transition-2: 0.35s ease;
--cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);