style-guide.md

Funel Style Guide

Html import links

Poppins - Google font import link:

<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@300;400;500;600;700&display=swap" rel="stylesheet">

Ionicon import link:

<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

--maximum-yellow-red: hsl(37, 100%, 68%);
--royal-blue-dark: hsl(231, 61%, 22%);
--silver-chalice: hsl(0, 0%, 70%);
--oxford-blue: hsl(231, 100%, 8%);
--bittersweet: hsl(2, 100%, 69%);
--french-rose: hsl(342, 90%, 61%);
--davys-gray: hsl(180, 3%, 28%);
--cool-gray: hsl(240, 13%, 62%);
--platinum: hsl(0, 0%, 92%);
--white-2: hsl(0, 0%, 98%);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--rythm: hsl(240, 9%, 53%);

Typography

Font Family

--ff-poppins: "Poppins", sans-sarif;

Font Size

--fs-1: 32px;
--fs-2: 26px;
--fs-3: 22px;
--fs-4: 18px;
--fs-5: 15px;
--fs-6: 14px;

Font Weight

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

Transition

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