.
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
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
fig. 03c
Setup:
Step 1: Choose a font family wisely. Your options aren’t unlimited, you’ve got to use a web-enabled font family. You can pick fonts from services like
google fonts and
typekit to avoid expensive licensing costs.
Step 2: Have your designer play with fonts you might want when testing the colors, and once you pick a web-ready font-- link it up!
Step 3: Include the font link.