style.guide.md

Essential Stuff

Colors

--rich-black-fogra-29: hsl(210, 26%, 7%);
--champagne-pink_20: hsla(23, 61%, 86%, 0.2);
--independence_30: hsla(245, 17%, 29%, 0.3);
--gray-x-11-gray: hsl(0, 0%, 73%);
--champagne-pink: hsl(23, 61%, 86%);
--spanish-gray: hsl(0, 0%, 60%);
--sonic-silver: hsl(0, 0%, 47%);
--deep-saffron: hsl(32, 100%, 59%);
--dark-orange: hsl(28, 100%, 58%);
--desert-sand: hsl(23, 49%, 82%);
--isabelline: hsl(38, 44%, 96%);
--gainsboro: hsl(0, 0%, 87%);
--tangerine: hsl(31, 84%, 50%);
--cinnabar: hsl(3, 90%, 55%);
--black_95: hsla(0, 0%, 0%, 0.95);
--cultured: hsl(0, 0%, 93%);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--onyx: hsl(0, 0%, 27%);

Typography

--ff-shadows-into-light: "Shadows Into Light", cursive;
--ff-roboto: "Roboto", sans-serif;
--ff-rubik: "Rubik", sans-serif;

--fs-1: 3.2rem;
--fs-2: 2.2rem;
--fs-3: 1.8rem;
--fs-4: 1.4rem;
--fs-5: 1.2rem;

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

Spacing

--section-padding: 60px;

Shadow

--shadow-1: 0 1px 4px hsla(0, 0%, 0%, 0.2);
--shadow-2: 0 1px 2px hsla(0, 0%, 0%, 0.2);

Transition

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

Clip path

--clip-path-1: polygon(0 40%, 100% 0%, 100% 100%, 0 100%);
--clip-path-2: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);