Text Styling

Typography

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

Header 1 - Bold 60 pt

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

Heading 2 - SemiBold 32-40 pt

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

Heading 3 - Medium 24-28 pt

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

Heading 4 - SemiBold 18 pt

Body - Regular 14-18 pt

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec suscipit sapien. Integer pharetra, dui et congue vulputate, neque libero ornare massa.

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

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

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)

Author : Joanne Kim, Clare Huang, Sophia Wang

Illustrations

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