Setup:
Step 1: Download the newly resized .PSD Template. This will make it scale to fit the nav header placement or anywhere else on your new site.
Step 2: Upload the logo to the Images tab in Radmin under "Logo URL"

Mobile Logo

This logo fits better with responsive resizing. If you don't input a mobile logo, your site will simply keep the regular logo and it will resize

Specs: We recommend the same height as your current logo but square, so 106x106.
Setup: Upload the logo to the Images tab in Radmin under "Mobile Logo URL"

Logo Versions

These are the different sized versions for different locations where your logo appears.
Specs:
16x16
44x44
90x90
177x177

Setup:
Step 1: Upload these in your assets
Step 2: Input the links in the comment section of the corresponding Asana Design task so that we can upload those for you

Back to Top

02 Color

fig. 02a

Our color palette breaks down into two core groups: base and accent (fig 02a) in order to delineate between page/content hierarchy and points of user interaction (navigation, call to action, etc)

Base Colors

fig. 02b

The example base palette (fig. 02b) has a balance of dark and light shades of grey. If you browse the demo site, you'll see that

• Header/Footer areas are always dark grey background

• Main content areas are light grey background

This is a deliberate design decision to help the user clearly orient themselves within the different sections of each template. While the base colors themselves can change, the contrast between the two sections cannot. Any variation that doesn't have a very obvious contrast between the two sides will result in a less intuitive hierarchy and a lack of organization for the site (fig 2c.i.).

fig 2c.i.

And, if you would like the darker base to be a navy blue, make sure the navy blue is around the same level of darkness as the grey (fig. 02c.ii.)

fig. 02c.ii

Lastly, you'll notice the base color palette also contains white, and not as one of the two dark and light base colors. We use this often on hover interactions, to put sidebar modules on, and for grouping information (fig. 02d). Why bring this up? Because we want you to use something other than white as your light base color :)  

fig. 02d

Accent Colors

fig. 02f

Enough base talk, lets talk accent colors-- the fun stuff. These colors are sprinkled throughout the design system to identify and group together specific types of interactions, calls to action, and general content separation and detailing. By grouping and arranging colors we are introducing some clear cognitive hooks for users.

You’ll need to choose at least three accent colors for three different types of interaction around the site. As you can see in our example palette above (fig 02f) we have 6 colors. You can too! Below, we break down some of the places where you see accent colors.

01. Navigation & Function

Global and functional navigation around the platform (fig. 02g). Think search, view toggle, dropdowns, add to MyXXX, etc.

fig. 02g

02. Call to Action / Site Activity

This grouping covers things like the Win or RSVP buttons, and visual elements around user activity like listening to music, following a band, or committing to a show.  (fig. 02h)

fig. 02h

03. Offsite Linking

An edge case, but there will be more in the future. This grouping is to articulate any activity done on the DoXXX platform that will send a user elsewhere on the web to help get them to an event. Right now this is only the Buy Tickets button (fig. 02i)

(fig. 02i)

States: Static/Inactive, Hover/Tap, Active/Focus

Note that in the first view of our color palette, each accent color has 3 states to it. To make life easier, we’ve handled both the static/inactive state and the active/focus states in code. This means you should pick  your accent colors carefully in their brightest state. (fig. 02f)

Color Summary

To best determine base and accent colors here is how it would look like in the Colors tab in Radmin:

Fields you can edit:

• Base colors! Choose your palette of dark, light, and white.

• Accent colors (the confetti) with all locations clearly designated. For more guidance, see this screenshot and note that the 4th accent color is not yet included.

NOTE: You'll want to use your new CSS editing capability VERY sparingly and ONLY for colors. Making layout or positioning changes (like you could with your old site) will make it impossible for us to keep your new site updated as we make changes to improve it once rolled out.

Back to Top

03 Font

Choosing your core font(s) is a very important decision. Take your time, have a designer explore options, and chat with our team as you go through the process. The default Open Sans and Open Sans Condensed.

Headlines, navigation and functional buttons all use the condensed version of the font (fig. 03a). By keeping all these elements in a condensed font, it allows the platform to be much more flexible with different screen sizes and devices.

In the example we’ve made all headlines (event titles) in all caps to gain some consistency and make the site easier to browse.

fig. 03a

We use the non-condensed version of the font for all body copy or text that isn’t ‘functional’ or ‘headliney’(fig. 03b) because we have more room to work with in these areas and the text is meant for reading rather than skimming

fig. 03b