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=Be+Vietnam+Pro: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

--space-cadet: hsl(224, 48%, 22%);
--red-crayola: hsl(342, 100%, 50%);
--black-coral: hsl(219, 13%, 44%);
--blue-ryb: hsl(244, 86%, 59%);
--cultured: hsl(0, 0%, 96%);
--white: hsl(0, 0%, 100%);

Typography

--ff-be-vietnam-pro: 'Be Vietnam Pro', sans-serif;

--fs-1: 1.875rem;
--fs-2: 1.5rem;
--fs-3: 1.063rem;
--fs-4: 0.875rem;
--fs-5: 0.813rem;

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

Transition

--transition: 0.25s ease;
--transition-2: 0.5s ease;

Spacing

--section-padding: 60px;

Border radius

--radius-4: 4px;
--radius-8: 8px;
--radius-12: 12px;