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&family=Rosario:wght@500;600;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

--cultured: hsla(0, 0%, 97%, 1);
--french-bistre: hsla(31, 17%, 44%, 1);
--jet: hsla(0, 0%, 20%, 1);
--bistre: hsla(35, 100%, 9%, 1);
--bistre_a75: hsla(35, 100%, 9%, 0.75);
--camel: hsla(30, 30%, 58%, 1);
--umber: hsla(31, 17%, 36%, 1);
--golden-brown_a60: hsla(35, 70%, 38%, 0.6);
--granite-gray: hsla(0, 0%, 38%, 1);   
--white: hsla(0, 0%, 100%, 1);
--black: hsla(0, 0%, 0%, 1);

Typography

--ff-rosario: 'Rosario', sans-serif;
--ff-poppins: 'Poppins', sans-serif;

--fs-1: 5rem;
--fs-2: 4.2rem;
--fs-3: 3rem;
--fs-4: 2.6rem;
--fs-5: 1.8rem;

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

Spacing

--section-padding: 12rem;

Shadow

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

Border Radius

--radius-circle: 50%;
--radius-20: 20px;
--radius-16: 16px;
--radius-6: 6px;
--radius-4: 4px;
--btn-radius: 32px 6px;

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.05, 0.83, 0.52, 0.97);