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=Poppins:wght@400;500;600&family=Source+Sans+Pro:wght@600;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

--st-patricks-blue: hsl(236, 57%, 28%);
--amaranth-purple: hsl(335, 88%, 38%);
--royal-blue-dark: hsl(231, 68%, 21%);
--chrome-yellow: hsl(39, 100%, 52%);
--space-cadet-1: hsl(230, 41%, 25%);
--space-cadet-2: hsl(230, 59%, 16%);
--winter-sky_50: hsla(335, 87%, 53%, 0.5);
--purple-navy: hsl(236, 26%, 43%);
--ksu-purple: hsl(275, 54%, 33%);
--winter-sky: hsl(335, 87%, 53%);
--razzmatazz: hsl(335, 87%, 51%);
--platinum: hsl(0, 0%, 90%);
--black_70: hsla(0, 0%, 0%, 0.7);
--rajah: hsl(29, 99%, 67%);
--white: hsl(0, 0%, 100%);

--gradient-1: linear-gradient(90deg,var(--royal-blue-dark) 0,var(--ksu-purple) 51%,var(--royal-blue-dark));
--gradient-2: linear-gradient(90deg,var(--razzmatazz) ,var(--rajah));

Typography

--ff-source-sans-pro: 'Source Sans Pro', sans-serif;
--ff-poppins: 'Poppins', sans-serif;

--fs-1: 4.2rem;
--fs-2: 3.8rem;
--fs-3: 3.2rem;
--fs-4: 2.5rem;
--fs-5: 2.4rem;
--fs-6: 2rem;
--fs-7: 1.8rem;
--fs-8: 1.5rem;

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

Border Radius

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

Spacing

--section-padding: 60px;

Transition

--transition-1: 0.15s ease;
--transition-2: 0.35s ease;
--cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
--cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);

Shadow

--shadow: 0 5px 20px 1px hsla(220, 63%, 33%, 0.1);