style-guide.md

Essential Stuff

Html import links

Google font

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Iceberg&display=swap');

Icons

<!-- Ionicons -->
<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

--fc-black: #000000;
--fc-primary: #7C000B;
--fc-gray-primary: #7A7A7A;
--fc-gray-secondary: #8B8585;
--fc-slate-primary: #2F2E41;
--fc-slate-secondary: #3F3D56;

Typography

--ff-poppins: "Poppins", sans-serif;
--ff-iceberg: "Iceberg", sans-serif;
--ff-intern: "Intern", sans-serif;

Spacing

Border Radius

--radius-circle: 50%;
--radius-pill: 50px;
--radius-ordinary: 10px;

Box Shadow

--shadow-primary: 0 0 4px 0 rgba(0, 0, 0, 25%);
--shadow-secondary: 0 0 4px 0 rgba(0, 0, 0, 30%);

Transition