Skip to content

style-guide.md

Latest commit

 

History

History
105 lines (83 loc) · 2.29 KB

style-guide.md

File metadata and controls

105 lines (83 loc) · 2.29 KB

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=Urbanist: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

--prussian-blue: hsla(217, 33%, 17%, 1);
--oxford-blue-2: hsla(222, 47%, 11%, 1);
--oxford-blue: hsla(221, 33%, 15%, 1);
--blue-violet: hsla(262, 83%, 58%, 1);
--blue-violet_a5: hsla(262, 83%, 58%, 0.05);
--blue-violet_a10: hsla(262, 83%, 58%, 0.1);
--alice-blue: hsla(214, 32%, 91%, 1);
--alice-blue-2: hsla(215, 30%, 92%, 1);
--cultured: hsla(220, 14%, 96%, 1);
--gainsboro: hsla(220, 13%, 91%, 1);
--light-gray: hsla(216, 12%, 84%, 1);
--white: hsla(0, 0%, 100%, 1);
--white_a10: hsla(0, 0%, 100%, 0.1);
--manatee: hsla(218, 11%, 65%, 1);
--green-cyan: hsla(161, 94%, 30%, 1);
--cadet-grey: hsla(215, 20%, 65%, 1);
--electric-indigo: hsla(263, 70%, 50%, 1);
--maximum-red: hsla(0, 72%, 51%, 1);
--black: hsla(0, 0%, 0%, 1);
--gunmetal: hsla(215, 28%, 17%, 1);

Gradient color

--linear-gradient-1: linear-gradient(to top left, hsla(0, 72%, 51%, 0.4) 0%, hsla(262, 83%, 58%, 0.4));
--linear-gradient-2: linear-gradient(to right, hsla(262, 83%, 58%, 1), hsla(0, 72%, 51%, 1));

Typography

--ff-urbanist: 'Urbanist', sans-serif;

--headline-lg: 3.6rem;
--headline-md: 2.6rem;
--title-lg: 2rem;
--title-md: 1.8rem;
--title-sm: 1.7rem;
--body-lg: 2rem;
--body-md: 1.7rem;
--label-lg: 1.5rem;
--label-md: 1.4rem;

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

Spacing

--section-padding: 32px;

Shadow

--shadow-1: 0 0 3px hsl(215, 28%, 17%);
--shadow-2: 0 5px 13px hsl(215, 28%, 17%);
--shadow-3: 0 5px 13px hsl(217, 19%, 27%);
--shadow-4: 0 0 3px hsl(217, 19%, 27%);
--shadow-5: 0 5px 13px hsla(214, 19%, 29%, 0.2);

Border Radius

--radius-circle: 50%;
--radius-pill: 100px;
--radius-12: 12px;
--radius-8: 8px;
--radius-6: 6px;

Transition

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