GRID

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

Example

Code

Fork code for this grid from Codepen:

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

Use

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.

TYPE

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.

Typefaces

Montserrat

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.

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.

Spacing

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.

CODE

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'; }

USE

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

<link href='https://fonts.googleapis.com/css?family= Montserrat:400,700|Source+Sans+P ro:400,300,600,600italic,400italic,700' rel='stylesheet' type='text/css'>

COLORS

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.

FORM ELEMENTS

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

FAB