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

--united-nations-blue: hsl(214, 56%, 58%);
--bright-navy-blue: hsl(214, 57%, 51%);
--spanish-gray: hsl(0, 0%, 60%);
--black-coral: hsl(225, 8%, 42%);
--oxford-blue: hsl(208, 97%, 12%);
--yale-blue: hsl(214, 72%, 33%);
--blue-ncs: hsl(197, 100%, 36%);
--gunmetal: hsl(206, 34%, 20%);
--gainsboro: hsl(0, 0%, 88%);
--cultured: hsl(0, 0%, 98%);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--onyx: hsl(0, 0%, 25%);
--jet: hsl(0, 0%, 20%);

Typography

--ff-poppins: "Poppins", sans-serif;
--ff-montserrat: "Montserrat", sans-serif;

--fs-1: calc(20px + 3.5vw);
--fs-2: calc(18px + 1.6vw);
--fs-3: calc(16px + 0.45vw);
--fs-4: 15px;
--fs-5: 14px;
--fs-6: 13px;
--fs-7: 12px;
--fs-8: 11px;

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

Transition

--transition: 0.25s ease-in-out;

Spacing

--section-padding: 60px;

Border radius

--radius-15: 15px;
--radius-25: 25px;