style-guide.md

Essential Stuff

Html import links

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

--selective-yellow: hsl(42, 100%, 56%);
--roman-silver: hsl(240, 6%, 51%);
--roman-silver_10: hsla(240, 6%, 51%, 0.1);
--light-coral: hsl(357, 100%, 75%);
--oxford-blue: hsl(224, 53%, 10%);
--light-gray: hsl(0, 0%, 80%);
--keppei: hsl(173, 60%, 47%);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--black_10: hsla(0, 0%, 0%, 0.1);

Typography

--ff-gilroy: "Gilroy", sans-serif;

--headline-lg: 4.8rem;
--headline-md: 3rem;
--headline-sm: 2.4rem;
--title-lg: 2.2rem;
--title-md: 2rem;
--title-sm: 1.8rem;

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

Spacing

--section-padding: 56px;

Shadow

--shadow-1: 0px 35px 65px -10px hsla(0, 0%, 0%, 0.05);
--shadow-2: 0 10px 40px hsla(0, 0%, 0%, 0.06);

Border Radius

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

Transition

--transition: 0.25s 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);