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

--ultramarine-blue_10: hsla(235, 70%, 60%, 0.1);
--ultramarine-blue: hsl(235, 70%, 60%);
--orange-peel_10: hsla(36, 100%, 55%, 0.1);
--space-cadet_20: hsla(248, 32%, 23%, 0.2);
--space-cadet_80: hsla(247, 35%, 19%, 0.8);
--space-cadet-2: hsl(247, 35%, 19%);
--old-lavender: hsl(251, 9%, 46%);
--orange-peel: hsl(36, 100%, 55%);
--tart-orange: hsl(0, 100%, 63%);
--light-gray: hsl(0, 0%, 80%);
--cultured-1: hsl(0, 0%, 96%);
--cultured-2: hsl(0, 0%, 93%);
--coral_10: hsla(14, 95%, 66%, 0.1);
--white_10: hsla(0, 0%, 100%, 0.1);
--black_80: hsla(0, 0%, 0%, 0.8);
--pumpkin: hsl(26, 98%, 49%);
--white: hsl(0, 0%, 100%);

Typography

--ff-urbanist: 'Urbanist', sans-serif;

--fs-1: 4rem;
--fs-2: 3.2rem;
--fs-3: 2.4rem;
--fs-4: 2rem;
--fs-5: 1.8rem;
--fs-6: 1.4rem;

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

Spacing

--section-padding: 80px;

Shadow

--shadow-1: 0 8px 20px hsla(0, 0%, 0%, 0.06);
--shadow-2: 0px 4px 10px hsla(0, 0%, 0%, 0.05)

Border Radius

--radius-4: 4px;
--radius-6: 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.33, 0.85, 0.4, 0.96);