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=Be+Vietnam+Pro:wght@400;500;600;900&display=swap"
  rel="stylesheet">

Material icon

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet" />

---

Colors

--imperial-red_12: hsla(357, 86%, 57%, 0.12);
--pacific-blue_12: hsla(188, 78%, 41%, 0.12);
--davys-gray_12: hsla(210, 9%, 31%, 0.12);
--imperial-red: hsl(357, 86%, 57%);
--sonic-sliver: hsl(0, 0%, 47%);
--pacific-blue: hsl(188, 78%, 41%);
--blue-ryb_12: hsla(220, 100%, 50%, 0.12);
--space-cadet: hsl(220, 41%, 20%);
--eerie-black: hsl(214, 10%, 13%);
--davys-gray: hsl(210, 9%, 31%);
--emerald_12: hsla(144, 62%, 53%, 0.12);
--cool-gray: hsl(225, 11%, 59%);
--cultured: hsl(225, 20%, 96%);
--blue-ryb: hsl(220, 100%, 50%);
--black_08: hsla(0, 0%, 0%, 0.06);
--black_12: hsla(0, 0%, 0%, 0.12);
--coral_12: hsla(15, 100%, 65%, 0.12);
--sunglow: hsl(44, 100%, 61%);
--emerald: hsl(144, 62%, 53%);
--onyx-2: hsl(210, 10%, 23%);
--coral: hsl(15, 100%, 65%);
--white: hsl(0, 0%, 100%);
--onyx: hsl(207, 8%, 21%);

Typography

--ff-vietnam: "Be Vietnam Pro", sans-serif;

--fs-1: 1.563rem;
--fs-2: 1.5rem;
--fs-3: 1.25rem;
--fs-4: 1.078rem;
--fs-5: 1rem;
--fs-6: 0.938rem;
--fs-7: 0.875rem;
--fs-8: 0.844rem;
--fs-9: 0.813rem;
--fs-10: 0.769rem;

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

Transition

--transition: 0.25s ease;
--cubic-out: cubic-bezier(0.45, 0.85, 0.5, 1);
--cubic-in: cubic-bezier(0.5, 0, 0.50, 0.95);

Radius

--radius-6: 6px;

Shadow

--shadow-1: 0 12px 20px hsla(210, 10%, 23%, 0.07);
--shadow-2: 0 2px 10px hsla(0, 0%, 0%, 0.04);
--shadow-3: 0 2px 20px var(--black_08);