Django Web Style Guide

Updated December 15, 2014

Page Layout

Sidebar left

A sidebar on the left side of the page is the default layout, and used for most pages. This layout is used when the sidebar is used mainly for navigating.

Sidebar right

A sidebar on the right side of the page should be used to show additional, secondary content.

Single column

Single column layout should be used for single-purpose pages, such as marketing pages, landing pages, or other pages where the attention of the user should be intentionally narrowed. The column is purposefully limited to 740px to keep text line-lengths at a nice, readable width.

Responsive

Djangoproject.com uses responsive styles to scale the above layouts to fit desktop and tablet browsers comfortably. When visited on a mobile device, all layouts are condensed to single-column. Mobile styles are purposefully not loaded on desktop, for example, when the browser window is scaled very small.

Colors

Primary colors

Colors used for main text, links and backgrounds. Hover each swatch to see the corresponding SASS variable name.

Secondary colors

Colors used for hover states, alternate texts, borders, etc. These are mostly slight variations of the primary colors to be paired.

Typography

The djangoproject.com website is set in both serif and sans-serif fonts. The serif font is Palatino, which is widely available as a system font. The sans-serif font is Roboto, a web font that is loaded via Google Fonts. 5 styles of this typeface are loaded, Light (300), Normal (400), Normal Italic, Bold (700) and Bold Italic. Refrain from using weights and italics that are not loaded.

For documentation styles, the monospace font is Fira Mono. Normal (400) and Bold (700) weights are available.

Main content

Monospace type. Used exclusively in documentation and code examples.

Secondary content

Icons

Djangoproject.com makes use of Font Awesome for any icons throughout the interface. This all-inclusive webfont icon set eliminates the need to design icons for specific purposes, and keeps the icon language consistent throughout.

Page Elements

Buttons

Call to action buttons are used throughout the site, to focus users' attention on important flows of the site. An outline version is used when the call to action is less important.

Forms

General forms

Inline field forms

Lists