Use a 12-column grid to keep the structure of this design.



Fork code for this grid from Codepen:

See the Pen Grid Mixin for RED Arena by Amalie Barras (@amaliebarras) on CodePen.


To use this grid:

  1. Wrap each row in a div with the "row". class
  2. Give a class of "col" to each column in the row.
  3. Give a class of col-n to each column in the row, with n representing the number of spaces in the grid that the column should take up.
  4. The sum of n's in each row should be 12.


Hierarchy is the key to success for this design, with the amount going on in each page. Type should evoke feelings of space while maintaining approachability and comfort.



Montserrat should be used as the brand typeface, but avoided in paragraph text as it takes up a lot of space.

The old posters and signs in the traditional neighborhood of Buenos Aires called Montserrat inspired me to design a typeface that rescues the beauty of urban typography from the first half of the twentieth century. The goal is to rescue what is in Montserrat and set it free, under a free, libre and open source license, the SIL Open Font License.

You can read more about Montserrat here.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0

Source Sans Pro

Source Sans Pro is an excellent fit for this application as it spacious and light, as well as approachable and friendly.

SourceĀ® Sans Pro, Adobe's first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.

You can read more about Source Sans Pro here.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0


Line height

When setting body copy, the leading should be 1.2 times the type size.

Line length

Keeping the line legnth short causes less fatigue to the users eyes since they don't have to go all the way across the screen to start the next line.

Lines shouldn't be more than 70 characters, or 80% of the desktop screen width.


h1, h2, h3, h4, h5, h6 { font-weight: $base-font-weight; margin-top: 1em; } h1 { font-family: 'Montserrat'; font-size: 2.5em; } h2 { font-family: 'Source Sans Pro'; font-size: 1.5em; letter-spacing: 1.0; } h3 { font-family: 'Source Sans Pro'; font-weight: bold; text-transform: uppercase; font-size: 1.25em; } h4 { font-family: 'Montserrat'; text-transform: uppercase; text-decoration: underline; } a { font-family: 'Montserrat'; }


Place this line of code inside the head tag of your HTML

<link href=' Montserrat:400,700|Source+Sans+P ro:400,300,600,600italic,400italic,700' rel='stylesheet' type='text/css'>


The color scheme chosen was simple and meant to be soothing while delivering feelings of what RedArena is all about. We chose natural, farm like colors with brighter colors to accent important calendar events.

Card Background
Accent 1
Accent 2


Form selection drop down

All form elements used are intended to be very user friendly and easily understood. Since RedArena App will be used by a variety of people with varying technical proficiencies, sticking with familiar elements was key.

Toggle Switch

Radio Buttons