Basic Styling

Colour swatches

This is the color palette used at grainjar. Primary colors reflect the overall branding of our company and secondary colors serve as accent colors throughout the site.

Primary colors

green #283D3B

rgb(40,61,59)
grey #EADDD0

rgb(234,221,208)
grey #3A2B1B

rgb(58,43,27)

Secondary colors

grey #A00226

rgb(160,2,38)
beige #FFFDF4

rgb(255,253,244)
brown #B29770

rgb(178,151,112)
silver #F2F2F2

rgb(242,242,242)
turquoise#5B7A78

rgb(91,122,120)
dark grey #AFB7B6

rgb(175,183,182)

Accessibility

accessibility green
accessibility green
accessibility green
accessibility green

When dealing with light text on dark backgrounds, this is the range of light colours which are utilised in text on grainjar’s signature dark green.

accessibility light
accessibility light
accessibility light
accessibility light

When dealing with dark text on light backgrounds, this is the text colour which is used on the various light colours within grainjar’s colour palette.

accessibility red

This is how the red accent colour is used on grainjar’s site.

Author : Joanne Kim, Clare Huang, Sophia Wang

Illustrations

The following illustrations (top row) are drawn by Clare Huang. Illustrations are used throughout the site at grainjar to indicate important information graphically.

icons

Text Styling

Typography

This is the typography structure we use at grainjar to organize and create hierarchies for necessary information. The primary brand typeface at grainjar is "Poppins".

poppins

Header 1 - Bold 60 pt

Heading 2 - SemiBold 40 pt

Heading 3 - Medium 24 pt

Heading 4 - SemiBold 18 pt

Body - Regular 16 pt

This is the default body text for our website.The max-width of the body paragraph is capped at 40em to optimize legibility.

Sample code < h1 > Poppins Bold 60pts < /h1 >

Sample code < h2 > Poppins semiBold 40pts < /h2 >

Sample code < h3 > Poppins Medium 24pts < /h3 >

Sample code < h4 > Poppins Semibold 18pts < /h4 >

Sample code < p > Poppins Light 16pts < /p >

Author : Joanne Kim

Bulleted list

Lists are content grouped vertically and begin with either a bullet or a number.

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
Sample code < ul > < li > Lorem Ipsum < /li >< /ul >

Numbered lists

  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum
Sample code < ol > < li > Lorem Ipsum < /li >< /ol >

Author : Joanne Kim

Basic Interactive elements

Call to action buttons

Buttons are interactive elements which communicate and trigger an action.

Primary

Primary

Secondary

Secondary ›

Tertiary

Tertiary

Disabled

Disabled

Anatomy

All the default buttons used at grainjar are center-aligned. In the case that an icon is used in secondary buttons, the text is left-aligned.

button anatomy
  1. text field
  2. container
  3. icon (only for secondary buttons)

Button size

button size

Sample code <a href ="#" class = "button"> Secondary </a>

Author : Joanne Kim

In-text link

This is an in-text link

Sample code <a href ="#"> This is an in-text link </a>

Text input field / label

Forms are a group of related input which are used for submitting data. Spacing and margin should be considered to ensure legibility.

Author : Sophia Wang