Front End

Here we can break our wireframe down into the components we'll need. We can also define our color palette, font-families, and anything else!

Logo

The lemon icon in the header is an svg.

It is conditionally rendered based on whether the user has a viewport of 400px or less. When a user has a viewport larger than 400px, the logo includes the 'Task Lemon' name. When it is less, the lemon only is rendered.

Icon Designer: Luis Prado

Colors

• Background: #EFFBEE

• Gradient: #FFD233 -> #00EEE1

• Other greens: #1F321D, #224631

Font

• Logo Title: Barlow-Bold by Jeremy Tribby
• Body: Apple System, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif
• Code: Source Code Pro, Menlo, Monaco, Consolas, Courier New, monospace