Style Guide
{% endblock %} {% block content %}This styleguide is a reference to maintain a design standard on djangoproject.com and related Django websites. It is meant to provide a source of available elements, and give insight into which elements to use where.
It is best practice to use elements from this guide to serve any design needs before introducing new elements. If new elements must be introduced to accommodate new content, please be mindful of the guidelines here and take the liberty to update the guide.
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.
A sidebar on the right side of the page should be used to show additional, secondary content.
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.
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 used for main text, links and backgrounds. Hover each swatch to see the corresponding SASS variable name.
Colors used for hover states, alternate texts, borders, etc. These are mostly slight variations of the primary colors to be paired.
The djangoproject.com website is set in Roboto, a sans-serif font. 5 styles of this typeface are provided, 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.
Serif paragraph type. Palatino font style should be used for all text copy, except for the documentation and in sidebars.
Monospace type. Used exclusively in documentation and code examples.
Sans-serif paragraph type. Roboto font is used in documentation paragraph text, sidebars, headers, and footers.
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.
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.