StyleGuide.md

Style-guide 🖌

Table of Content:

---

• Style-guide
• 🧩 Figma-UI-Styleguide
• 🎨 Colors
• 🖋 Typography
• 📐 Layout
• 💟 Iconography
• 🟨 Buttons

---

Colors 🎨

Primary Colors

• Background
  • Light Soft Green - #CCE3C8
• Sections
  • White - #FFFEFE

Secondary Colors

• Buttons #2B8872
• Active icons #EF8A62

---

Typography

Heading 1 Bold 2rem

Heading 2 Medium 1.9rem

Heading 3 Bold 1.6rem

Heading 4 800 1.5rem

Heading 5 500 1.2rem

Heading 6 700 1rem

Bodytext 400 1.2rem

---

Layout

Grid

• Margin: 0px 30px 30px 0px

Padding

• 1rem

---

Iconography

Library

React Icons/Remix Icon

Sizes

• Default: 24px24px
• Active: 60px60x

State Colors

• Primary: #2B8876
• Secondary: #FEFFEE
• Active: #EF8A62

Navbar Icons

• <RiUserFill/>
• <RiHome5Fill/>
• <RiSearchLine/>

Food restrictions Iconc

• <RiPlaneFill/>
• <RiPlantLine/>
• <TbMilk/>
• <CiWheat/>

Button Icons

• < RiUserAddFill/>
• < RiArrowRightLine/>
• <RiArrowDownSLine/>
• <RiArrowUpSLine/>
• <RiLogoutCircleLine/>
• <RiLoginCircleLine/>

Recipe Icons

• < RiGroupFill/>
• < RiTimeFill/>
• < RiCheckboxBlankCircleLine/>

---

Button Style

• All buttons used in the projects exists in styles folder in components map.

Small

• For cards and use cases "Show" more or less.
• Primary prop for orange color or white color as default.

Medium

• Used as CTA such as Log in and Log out, in cancel prompt.
• Uses the prop "bgColor = " to set orange or green color (see hed codes used)

Large

• Used as Page CTA for Login page and Sign Up Page
• Displays orange or green depending if it's Login or sign up.