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

--russian-violet: hsl(269, 36%, 22%);
--dark-purple: hsl(268, 22%, 15%);
--eerie-black: hsl(240, 4%, 10%);
--davys-gray: hsl(0, 0%, 34%);
--light-gray: hsl(0, 0%, 84%);
--cultured-1: hsl(0, 0%, 98%);
--cultured-2: hsl(280, 14%, 96%);
--cultured-3: hsl(280, 9%, 94%);
--gainsboro: hsl(0, 1%, 85%);
--black_10: hsla(0, 0%, 0%, 0.1);
--black_5: hsla(0, 0%, 0%, 0.05);
--pumpkin: hsl(22, 90%, 56%);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);

Typography

--ff-poppins: 'Poppins', sans-serif;
--ff-roboto: 'Roboto', sans-serif;

--fs-1: 3rem;
--fs-2: 2rem;
--fs-3: 1.5rem;
--fs-4: 1.4rem;
--fs-5: 1.3rem;

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

Spacing

--section-padding: 50px;

Shadow

--shadow-1: 0px 0px 20px var(--black_10);
--shadow-2: 0 0 20px 4px var(--black_5);

Border Radius

--radius-6: 6px;
--radius-10: 10px;

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