Design Patterns

Colors

Primary Colors

  • Teal
  • rgb(0,161,117)
  • #00a175
  • Purple
  • rgb(81,67,120)
  • #69579C
  • Black
  • rgb(0,0,0)
  • #000000

Secondary Colors

  • Light blue
  • rgb(122,181,214)
  • #7ab5d6
  • Gray
  • rgb(130,130,130)
  • #777777
  • Light gray
  • rgb(255,0,0)
  • #cf1b41

Grids

.grid-1-1
.grid-1-2
.grid-1-2
.grid-1-3
.grid-1-3
.grid-1-3
.grid-1-4
.grid-1-4
.grid-1-4
.grid-1-4

Buttons

button, a.button, button[type=submit], input[type=button], input[type=submit]

Link button

Coloured Buttons

.button-red, .button-teal, .button-yellow

Navigation Button

.button-nav

Nav Button

In-text Link

a

This is an In-text link

Text Input Field

input

Headings

h1, h2, h3, h4, h5, h6

Main Heading

Subpage title

Section header

Sub section heading

Bold content within body or form labels
button labels / meta content

5 em

1.75 em

1.25 em

1 em

0.75 em
0.50 em

Paragraphs

1 column section

BentoGo delivers fresh and elaborately arranged boxed lunches that fit to your taste. Our lunches come in a variety of different designs, including characters from popular cartoons, movies, and video games. At BentoGo, we understand the joy of preparing and receiving a homemade lunch box, and we want to recreate this with you. From cooked meals to treats of all sorts - we’ve got you covered. Our delivery folks bring your order to you, whether that’s at home, at the office, or wherever else you may want a bento box.

2 column section

BentoGo delivers fresh and elaborately arranged boxed lunches that fit to your taste. Our lunches come in a variety of different designs, including characters from popular cartoons, movies, and video games.

At BentoGo, we understand the joy of preparing and receiving a homemade lunch box, and we want to recreate this with you. From cooked meals to treats of all sorts - we’ve got you covered. Our delivery folks bring your order to you, whether that’s at home, at the office, or wherever else you may want a bento box.

3 column section

BentoGo delivers fresh and elaborately arranged boxed lunches that fit to your taste. Our lunches come in a variety of different designs, including characters from popular cartoons, movies, and video games.

At BentoGo, we understand the joy of preparing and receiving a homemade lunch box, and we want to recreate this with you. From cooked meals to treats of all sorts - we’ve got you covered. Fo'sho.

BentoGo delivers fresh and elaborately arranged boxed lunches that fit to your taste. Our lunches come in a variety of different designs, including characters from popular cartoons, movies, and video games.

Bulleted Lists

ul

  • Pikachu Bento
  • Jigglypuff Bento
  • Mewtwo Bento

Numbered Lists

ol

  1. Pikachu Bento
  2. Jigglypuff Bento
  3. Mewtwo Bento

Project Slabs

These first two slabs will be used in the homepage of my site to provide an introduction of the projects I want to showcase.

.slab-teal

Project Name

Videography

.slab-purple

Project Name

Vector Art

.slab-black

Project Name

Motion Graphics

Detail Slabs

The following slabs will be used in the individual pages of my projects - they provide a bit more detail on my role, process, and outcome.

.slab-white-text

taster

Process

This is my project description, it will include information such as my role, my process, my result, and what i've gained as insights upon completion of the project. I will also use this space to hook my audience in and make them continue learning about my project.

.slab-black-text

The Brief

The brief was to create a digital platform for an emerging bank that is serious, highly competent and trusted yet fresh, ambitious, innovative and disruptive.

.slab-image

More Projects

This following section will be used at the end of each of my indiivdual project page so users can quickly jump to my other projects on my portfolio.

.more-projects

Motion Graphics

Motion Graphics

Motion Graphics

Motion Graphics