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=Oswald:wght@500;700&family=Rubik:wght@400;500;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

--rich-black-fogra-29: hsl(222, 44%, 8%);
--middle-blue-green_40: hsla(174, 64%, 71%, 0.4);
--midnight-green: hsl(186, 100%, 19%);
--midnight-green_a25: hsla(186, 100%, 19%, 0.25);
--independece: hsl(236, 14%, 39%);
--verdigris: hsl(182, 100%, 35%);
--ming: hsl(186, 72%, 24%);
--space-cadet: hsla(226, 45%, 24%);
--eerie-black: hsl(0, 0%, 13%);
--alice-blue: hsl(187, 25%, 94%);
--gray-web: hsl(0, 0%, 50%);
--gainsboro: hsl(0, 0%, 87%);
--white: hsl(0, 0%, 100%);
--white_a20: hsla(0, 0%, 100%, 0.2);
--white_a10: hsla(0, 0%, 100%, 0.1);
--black: hsl(0, 0%, 0%);

Typography

--ff-oswald: 'Oswald', sans-serif;
--ff-rubik: 'Rubik', sans-serif;

--headline-lg: 5rem;
--headline-md: 3rem;
--headline-sm: 2rem;
--title-lg: 1.8rem;
--title-md: 1.5rem;
--title-sm: 1.4rem;

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

Spacing

--section-padding: 120px;

Shadow

--shadow-1: 0px 2px 20px hsla(209, 36%, 72%, 0.2);
--shadow-2: 0 4px 16px hsla(0, 0%, 0%, 0.06);

Border Radius

--radius-circle: 50%;
--radius-12: 12px;
--radius-6: 6px;
--radius-4: 4px;

Transition

--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--transition-3: 1s ease;
--cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
--cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);