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=DM+Sans:wght@400;500;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

--cadet-blue-crayola: hsl(227, 13%, 73%);
--maximum-yellow-red: hsl(41, 95%, 61%);
--medium-sea-green: hsl(142, 43%, 54%);
--blue-crayola_10: hsla(222, 100%, 61%, 0.05);
--smocky-black_30: hsla(0, 0%, 6%, 0.3);
--eerie-black-1: hsl(240, 5%, 8%);
--eerie-black-2: hsl(228, 9%, 10%);
--raisin-black: hsl(225, 15%, 16%);
--blue-crayola: hsl(222, 100%, 61%);
--roman-silver: hsl(223, 10%, 52%);
--presian-red: hsl(0, 64%, 52%);
--gunmetal_50: hsla(230, 16%, 22%, 0.5);
--gainsboro: hsl(0, 0%, 85%);
--cultured: hsl(0, 0%, 93%);
--white_50: hsla(0, 0%, 100%, 0.5);
--white_30: hsla(0, 0%, 100%, 0.3);
--white_10: hsla(0, 0%, 100%, 0.1);
--black_10: hsla(0, 0%, 0%, 0.1);
--white: hsl(0, 0%, 100%);

Gradient color

--gradient: linear-gradient(90deg, var(--white_10) 0px 77%, var(--white_50) 92%, transparent);

Typography

--ff-dm-sans: 'DM Sans', sans-serif;

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

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

Spacing

--section-padding: 100px;

Shadow

--shadow-1: 0px 4px 8px var(--black_10);
--shadow-2: 0px 30px 10px -20px var(--smocky-black_30);
--shadow-3: 0px 15px 10px -20px var(--smocky-black_30);

Border Radius

--radius-12: 12px;
--radius-24: 24px;

Transition

--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--transition-3: 1s ease;
--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);