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.