Ridiculously fast
Take applications from concept to completion as quickly as possible. Observed
The system
Fixed, everywhere
- The lowercase 'django' wordmark in its one official color, never redrawn or added to
- Greens for every color role: Dark Green header, Medium Green CTAs and banners, Green links
- Roboto in the five loaded styles; Fira Mono only for code
- A plain, expert, human voice that never says 'easily' or 'simply'
The one thing that varies
Which page layout: sidebar left (default, navigation), sidebar right (secondary content) or the 740px single column for marketing and landing pages. Color loudness stays the same.
Source: djangoproject.com/styleguide
How loud each format gets
SilentError message
QuietDocs pageProposal pageEmail
CalmLanding pageDeck
WarmCommunity event site
Loud
Loudest
Our engine's setting, built from their rules.
Every piece passes 3 checks
Logo hidden
Cover the wordmark. It should still read as Django: a Dark Green header, Medium Green buttons and banner, Roboto Light with tight tracking, thin pale-green rules and a calm reading column.
Swap test
Put another framework's logo on it. If the all-green system, the docs-like layout and the plain, expert copy don't feel out of place, it's generic; send it back.
Banned words
Search the copy for easily, simply, just, merely and straightforward.
Strategy
A high-level Python web framework that encourages rapid development and clean, pragmatic design (paraphrase). Observed
Fully loaded
Dozens of extras for common tasks, right out of the box. Observed
Reassuringly secure
Helps developers avoid common security mistakes. Observed
Exceedingly scalable
Scales quickly and flexibly to meet heavy traffic. Observed
Incredibly versatile
Used to build everything from CMSs to scientific platforms. Observed
Full spec
- For Observed
- Web developers on deadlines who want it right: 'perfectionists with deadlines'; experienced web developers.
- Problem Observed
- The repetitive hassle of web development and reinventing the wheel (paraphrase).
- Promise Observed
- Build better web apps more quickly and with less code (paraphrase of the homepage hero).
- DSF goal Published
- Promote, support and advance the Django web framework (paraphrase of the Django Software Foundation's goal).
Proof behind each pillar
- Ridiculously fast. From concept to launch in a matter of hours (Django's own claim).
- Fully loaded. User authentication, content administration, site maps and RSS feeds included.
- Reassuringly secure. Guards against SQL injection, cross-site scripting, CSRF and clickjacking.
- Exceedingly scalable. Some of the busiest sites on the planet use Django (no names or numbers given).
- Incredibly versatile. Companies, organizations and governments build content management, social and scientific computing platforms with it.
Story Published
Django was invented to meet fast-moving newsroom deadlines while satisfying experienced web developers; because it was born in journalism, its people treat documentation like code and keep improving it.
Values
Open source spirit
The community may use the name for related projects, groups and events, and anyone profiting reports what goes back (paraphrase).
PublishedKindness and honesty
Engage kindly and honestly with others (Code of Conduct encouraged behavior).
PublishedDifferent viewpoints
Respect different viewpoints and experiences.
PublishedResponsibility
Take responsibility for actions and contributions; impact matters more than intent.
PublishedConstructive feedback
Give and accept constructive feedback gracefully.
PublishedWelcoming, safe, equitable
The pledge: a community welcoming, safe and equitable for all (paraphrase).
PublishedCategory. Python web framework, free and open source Observed
Why them
- Batteries included: auth, admin, site maps, feeds out of the box Observed
- Security by default against common web attacks Observed
- Scales to heavy traffic Observed
- Free, open source, run by a non-profit foundation Observed
- Famously thorough documentation written in a human voice Published
Boilerplate Observed
Django is a high-level Python web framework for rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app. It's free and open source.
Taglines
The web framework for perfectionists with deadlines. Observed
Building the Django Community for 21 years, 3 months. Come join us! Observed
They never claim
- Never imply a product, site, group or event is official or endorsed by the DSF or the Django core team without a licence. Published
- No named customers or traffic numbers are published with the scalability claim; keep it qualitative. Observed
- Don't call any step easy or simple. Published
Django's marketing lines are short and adverb-led ('Ridiculously fast.', 'Reassuringly secure.'), each with one plain sentence and an uppercase read-more link. The long-running tagline is 'The web framework for perfectionists with deadlines.' Claims stay qualitative: no customer names or traffic numbers back 'busiest sites'.
Source: djangoproject.com/start/overviewdjangoproject.comdjangoproject.com/trademarks
Personality and voice
Humanbut not FrictionlessPublished
Expertbut not GrandiosePublished
Systematicbut not MechanicalPublished
Livelybut not DullPublished
Honest about difficultybut not DismissivePublished
Welcomingbut not ExclusivePublished
Run the migration, then check the output for errors.
Simply run the migration and you're done!
Django's docs are its reputation; the guide protects the friction and personality that make them teach.
Full spec
- Sentence case headlines
- American spelling
- Never: easily, simply, just, merely, straightforward
- Say “they/them/their”, not “he or she” or “him or her” or “his or her”
- Don't reach for grandiose, empty superlatives (clear, robust, structured)
- Capitalize Django; lowercase only in Python code and in the logo
- Capitalize Python when referring to the language
- Say “the web / web framework / website”, not “the Web” or “Web framework” or “web site”
- Say “email”, not “e-mail”
- model, template, view lowercase; URLconf; subclass as one word; 'an HTTP', 'an SQL'
- Own and review any AI-generated text; it must reflect your own voice
- Credit the sources of content you contribute
HumanExpertPlainspoken
The only published voice guide is the documentation's: the human voice, one person addressing another, an expert helping a fellow developer, lively but systematic. It shows a human paragraph beside an AI 'frictionless' rewrite and explains why the rewrite fails.
- Write as one person to another; address the reader
- Sentence-case titles: capitalize only initial words and proper nouns
- American -ize spelling
- Gender-neutral they/them/their for a hypothetical person
- Capitalize Django and Python; the web, website and email lowercase
- The docs voice: one person addressing another, an expert helping a fellow developer (paraphrase of https://docs.djangoproject.com/en/dev/internals/contributing/writing-documentation/).
- Systematic but not mechanical; some friction is necessary for a reader to grasp a concept (paraphrase).
- No grandiose, empty description: don't overuse superlatives such as clear, robust or structured.
- Never minimize difficulty: avoid easily, simply, just, merely, straightforward.
- Marketing pages use a different register: short, adverb-led benefit heads ('Ridiculously fast.', 'Reassuringly secure.') with a plain sentence under each (observed https://www.djangoproject.com/start/overview/).
- Self-aware wit is allowed in small places: the badge 'I wish this site were powered by Django', and #django IRC described as chat 'like it's 1999' (observed).
Their words
pragmaticfree and open sourcecommunity
Never
easilysimplyjustmerelystraightforwardhe or shee-mailWeb (capitalized)-ise spellings
Source: docs.djangoproject.com/en/dev/internals/contributing/writing-documentationdjangoproject.com/conduct
- Don’t use easily, simply, just, merely or straightforward
- Don’t overuse superlatives such as clear, robust or structured
- Don’t smooth copy into a slippery, dull surface
- Don’t post AI-generated text you haven't reviewed and made your own
| Person | one person addressing another; 'you' to the reader |
|---|---|
| Case | sentence case titles |
| Spelling | American (-ize) |
| Pronouns | they / them / their |
| Banned | easily, simply, just, merely, straightforward |
| Terms | Django, Python, email, website, the web, URLconf, subclass |
Source: docs.djangoproject.com/en/dev/internals/contributing/writing-documentationdjangoproject.com/conductdjangoproject.com/start/overview
Logo
Official files from https://www.djangoproject.com/community/logos/ (png, svg, eps; positive and negative). The two header files come from the site's source (djangoproject/static/img in github.com/django/djangoproject.com). Django and the Django logo are registered trademarks of the Django Software Foundation; use follows the Django Trademark License. Shown for reference; not affiliated.
A lowercase word, one color, no symbol: the name is the mark, matching how developers type it.
Full spec
- Keep the official logo colors, including with transparency and gradients
- Scale only with the original proportions
- Don't add text that looks part of the logo, except as the trademark licence allows
- Groups and events may add a word or picture for locality, audience or activity (licence section 3)
- When used to identify Django, link the logo to djangoproject.com where possible
- png and svg for screen; eps for print
- Clear space and minimum size: not published
- Don’t recolor it outside the official color
- Don’t stretch or distort it
- Don’t add words that read as part of the logo
- Don’t imply DSF or core-team endorsement
- Don’t use the name or logo in a company's registered name or a commercial product's name
- Don’t use 'DjangoCon' without DSF permission
- Don’t retype the wordmark in another font
| Color | #092E20 (RGB 9/46/32; CMYK 90/50/80/60) |
|---|---|
| Versions | positive (green on white), negative (white on green) |
| Formats | png, svg (screen); eps (print) |
| Face | DTL Prokyon (logo only) |
| Clear space | not published |
| Minimum size | not published |
One logo: the lowercase wordmark 'django' set in DTL Prokyon, in a single dark green #092E20, supplied positive (green on white) and negative (white on a green ground) in png, svg and eps. The site header uses a white wordmark on its Dark Green bar and a short 'dj' mark below 500px wide.
Source: djangoproject.com/community/logosdjangoproject.com/trademarksdjangoproject.com/community/badgesdocs.djangoproject.com/en/dev/internals/contributing/writing-documentation
Color
Get started with Django
Get started with Django
A single hue family keeps the site calm and recognizably Django without a second brand color competing with links and buttons.
Full spec
- Primary colors for main text, links and backgrounds; secondary for hover, alternate text and borders
- Text in Text #0C3C26, never pure black
- Header, title bar and footer strip in Dark Green #0C4B33
- CTA buttons and the copy banner in Medium Green #44B78B
- Links in Green #20AA76; hairlines in Gray Line #CFE3DC
- Reds only for errors
- Don’t add a non-green accent color
- Don’t use the logo green #092E20 as a UI fill in place of Dark Green #0C4B33
- Don’t use the official logo or color palette on a community product's own site (trademark licence section 5)
| Logo | #092E20 |
|---|---|
| Primary | Text #0C3C26, Dark Green #0C4B33, Green #20AA76, Light Green #93D7B7, White #F1FFF7, Dark Red #6A0E0E |
| Secondary | Medium Dark Green #2B8C67, Medium Green #44B78B, Very Light Green #C9F0DD, Text Light #798780, Gray Line #CFE3DC, Red #BA2121 |
| Grounds | #FFFFFF content, #F8F8F8 page/sidebar; dark mode #0E1117 |
The logo has one published color, #092E20. The web style guide publishes six primary colors (for main text, links and backgrounds) and six secondary (for hover states, alternate text and borders), all greens plus a text green, a near-white and two reds. Hexes come from the site's SCSS; the guide shows swatches without numbers. A dark theme swaps the page to #0E1117 with light-green links.
Not published: color proportions; hex values on the style guide page itself (they come from the site's SCSS); print values for any color but the logo green.
Source: djangoproject.com/styleguidedjangoproject.com/community/logosgithub.com/django/djangoproject.com/blob/main/djangoproject/scss/_utils.scssgithub.com/django/djangoproject.com/blob/main/djangoproject/scss/_dark-mode.scssdjangoproject.com/trademarks
Typography
The web framework for perfectionists with deadlines.
One open sans keeps docs, marketing and community pages identical; Light 300 gives the copy banner its quiet voice.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Roboto | Copy banner in Light 300; headings in Normal 400 and Bold 700 | Open source (Google Fonts; Apache 2.0 originally, SIL OFL 1.1 in current releases); self-hosted by djangoproject.com | Roboto No stand-in: the real face is open and the woff2 files ship in the fonts folder. |
| Roboto | Body 18px/1.6, sidebars, nav, footer; five styles only (300, 400, 400 italic, 700, 700 italic) | Open source (Google Fonts) | Roboto |
| Fira Mono | Documentation and code examples only; 400 and 700 | SIL OFL 1.1 (Mozilla) | Fira Mono |
| DTL Prokyon | The wordmark artwork only. Use the supplied logo files; never set text in it | Proprietary (Dutch Type Library, http://www.dutchtypelibrary.nl/Prokyon_rdrct.html); logo only | none: use the logo files |
- Roboto Light 300, Normal 400, Normal Italic, Bold 700, Bold Italic only
- Copy banner 32px Roboto Light, tracking -1px
- H1 32 Normal, H2 24 Normal, H3 20 Bold, H4 16 Bold, H5 16 Normal (main content)
- Sidebar: H1 28, H2 20, H3 18 Normal, H4 16 Bold
- Body 18px, line-height 1.6
- Fira Mono 400/700 exclusively in documentation and code
- Don’t use weights or italics that are not loaded
- Don’t set prose in Fira Mono
- Don’t set any text in DTL Prokyon
- Don’t use faux bold or other families
| Sans | Roboto 300, 400, 400i, 700, 700i |
|---|---|
| Mono | Fira Mono 400, 700 |
| Banner | 32px Light, -1px |
| H1-H5 | 32 / 24 / 20 Bold / 16 Bold / 16 |
| Body | 18px / 1.6 |
| Logo face | DTL Prokyon (proprietary) |
Everything is Roboto in five loaded styles, with Fira Mono for code. The guide gives a pixel scale for main and secondary (sidebar) content. It also says serif Palatino should set text copy, but the live SCSS sets all body copy in Roboto.
Source: djangoproject.com/styleguidegithub.com/django/djangoproject.com/blob/main/djangoproject/scss/_utils.scssgithub.com/django/djangoproject.com/blob/main/djangoproject/scss/_style.scssdjangoproject.com/community/logos
Graphic elements
Building the Django Community for 21 years, 3 months. Come join us!
Green copy banner · the full-width band under the header on section pages (Community, Overview); the homepage swaps it for a white centered version
Do Dark Green #0C4B33 bar; white 'django' wordmark at left (104x36 box; the 'dj' mark below 500px); nav in Roboto Bold 13px uppercase, faint White #F1FFF7, hover Very Light Green, active Medium Green; search box and a theme toggle at right; the nav collapses to a menu button below 1280px. One header.
Dark Green header with uppercase nav · every page's top bar
SEE HOW FAST YOU CAN START BUILDING ›
Uppercase read-more link with a chevron · under feature blurbs and list modules
Do 1px solid Gray Line #CFE3DC; sections get 40px bottom padding then the rule; sidebar H2s are 20px Roboto Normal with 15px padding over the rule.
Gray Line hairlines · between page sections, under sidebar headings, between list items
Specimens use sample copy, not Django’s.
Few components, each with one job, so a page reads like documentation even when it sells.
Full spec
- Primary CTA: Medium Green #44B78B, white Roboto Bold, 5px radius, padding 1em 1.5em, max 400px wide
- CTA hover lightens the green 4%; active darkens it 2%; focus 2px outline offset 2px
- Outline CTA for less important actions: transparent, 1px Gray Line border, Gray Medium text, 400; hover turns border and text Green
- 'Arrow' CTA variant appends →
- Read-more links: 14px Bold uppercase Green with ›
- Framed images: 20px padding, 1px hairline, 4px radius
- Use existing elements before introducing new ones
- Don’t introduce a new element when a guide element fits
- Don’t use pill-shaped or square buttons
- Don’t use shadows as decoration (only faint 0 4px 8px rgba(12,60,38,0.07) section shadows)
| CTA | #44B78B fill, #FFFFFF text, 700, radius 5px, padding 1em 1.5em |
|---|---|
| Outline CTA | 1px #CFE3DC border, #859D94 text, 400 |
| Hairline | 1px #CFE3DC |
| Radius | 5px buttons, 4px frames |
The style guide's page elements: a filled green call-to-action button and an outline version for less important actions, forms with hairline-bordered fields, and list modules (contents outline, news link lists, collapsing lists). Uppercase read-more links with a › chevron and 1px Gray Line rules recur everywhere.
Source: djangoproject.com/styleguidegithub.com/django/djangoproject.com/blob/main/djangoproject/scss/_style.scss
Iconography
The site uses Font Awesome (version 4.2.0 in the source) for every interface icon rather than drawing its own.
Full spec
The site uses Font Awesome (version 4.2.0 in the source) for every interface icon rather than drawing its own. The style guide shows them at 32px in Green.
- Font Awesome for all interface icons
- Green #20AA76 by default
- Keep the icon language consistent: no custom one-off icons
- Don’t design bespoke icons for a single purpose
- Don’t mix icon sets
- Don’t color icons outside the greens
| Set | Font Awesome 4.2.0 (font SIL OFL 1.1, CSS MIT) |
|---|---|
| Sample size | 32px |
| Color | #20AA76 |
| Grid / stroke | not published (webfont glyphs) |
Source: djangoproject.com/styleguidegithub.com/django/djangoproject.com/blob/main/djangoproject/scss/_font-awesome.scss
Illustration
Not published; the site leans on type and color, not pictures.
Full spec
- No published illustration system: don't invent one
- The pixel heart belongs to fundraising messages only (observed)
- Don’t add mascots or characters (Django has none)
- Don’t draw decorative scenes
| Illustration style | not published |
|---|---|
| Pixel heart | fundraising-heart.svg on the homepage sidebar (observed 2026-10-31) |
No illustration style is published. The site's one recurring drawing is a pixel-art heart in magenta for fundraising, shown in the sidebar.
Source: djangoproject.com/community/logosgithub.com/django/djangoproject.com/blob/main/djangoproject/static/img
Photography
No photography guidance is published.
Full spec
No photography guidance is published. The guideline pages carry no photos; sponsor logos and screenshots are the only images.
- Photography: not published
- Prefer real screenshots and logos over stock photos (observed practice)
- Don’t use stock photography as decoration
| Photo style | not published |
|---|
Source: djangoproject.com/styleguidedjangoproject.com/community/logos
Motion
Motion is incidental: the mobile menu slides open by max-height in 0.3s ease-out, tabs fade in 200-400ms, and a pixel heart pulses.
Full spec
Motion is incidental: the mobile menu slides open by max-height in 0.3s ease-out, tabs fade in 200-400ms, and a pixel heart pulses. No motion guide is published; values come from the SCSS.
- Menu open: max-height 0.3s ease-out
- Fades: opacity 200ms ease / ease-in-out
- Keep motion functional; nothing decorative
- Don’t animate content on scroll
- Don’t add bouncy or long transitions
| Menu | 0.3s ease-out |
|---|---|
| Fade | 200-400ms |
| Large | 0.5s ease-out |
| Motion guide | not published |
Source: github.com/django/djangoproject.com/blob/main/djangoproject/scss/_style.scss
Interface & layout
The page, band by band
Header
Hero copy banner
Join the Community (main column)
Footer link band
Footer strip
Buttons
Full spec
The style guide publishes three page layouts. Sidebar left is the default, for navigation-led pages; sidebar right shows secondary content; the single column, limited to 740px for readable line length, is for marketing and landing pages. On phones every layout collapses to one column, and mobile styles are never loaded on desktop.
Measured from djangoproject.com/styleguide's The Django Web Style Guide (updated December 15, 2014), the Official Django Logos page and the DSF Trademark License, read 2026-10-31, plus the site's open-source SCSS (_utils.scss, _style.scss, _dark-mode.scss, _styleguide.scss at commit bf2d45dc) for exact values.
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 60px | 10px |
| Section padding | 40px | 40px |
| Hero text width | max 700px, centered | full width |
| Card gap | 60px | 60px |
| Navigation | 82px | 82px |
Type, at size
Hero line (homepage copy banner)
Roboto · 36px · line 1.3 · tracking -1px · weight 300
Copy banner (section pages, guide)
Roboto · 32px (phone 24) · line 1.3 · tracking -1px · weight 300
Main H1 (Meet Django)
Roboto · 32px · line 1.1 · tracking -1px · weight 400
Main H2 (Join the Community)
Roboto · 24px · line 1.6 · weight 400
Feature title (24px on phone)
Roboto · 18px (phone 24) · line 1.6 · weight 400
Body / intro / feature text
Roboto · 18px · line 1.6 · weight 400
Community card title
Roboto · 20px · line 1.2 · weight 700
Sidebar heading
Roboto · 20px · line 1.2 · weight 400
News title
Roboto · 16px · line 1.2 · weight 700
Sidebar text, links, descriptions
Roboto · 14px · line 1.6 · weight 400
News byline (meta)
Roboto · 14px · line 1.3 · weight 400
Read-more link, sidebar (uppercase + ›)
Roboto · 12px · line 1.6 · weight 700
Nav link (uppercase)
Roboto · 13px · line 1.23 · weight 700
Hero CTA label
Roboto · 18px · line 1.3 · tracking -1px · weight 700
Sidebar download button label
Roboto · 16px · line 1.6 · weight 700
Outline button label
Roboto · 18px · line 1.6 · weight 400
Footer column head
Roboto · 16px · line 1.2 · weight 700
Footer link
Roboto · 14px · line 1.6 · weight 400
In-kind donors credit
Roboto · 20px · line 1.6 · weight 400
Footer fine print (credits labels, copyright)
Roboto · 12px · line 1.6 · weight 400
Back to top (phone only, uppercase)
Roboto · 14px · line 1.6 · weight 700
H3 in main content (guide)
Roboto · 20px · line 1.2 · weight 700
- Motion
- Minimal: the mobile menu opens with max-height 0.3s ease-out; small opacity fades of 200-400ms
- Buttons
- rounded
Page anatomy
How Django’s own landing pages are built, observed on djangoproject.com, 2026-10-31. The full measurements are in spec.md.
- Navigation
- Desktop: one Dark Green bar, white "django" wordmark at left, ten uppercase links right-aligned in the middle, then a white search box and a half-circle theme-toggle icon at right. Phone: "dj" mark, search box, theme toggle and a hamburger in the same 82px bar.
- Hero
- White, centred copy banner: one 36px Roboto Light sentence in two lines and one solid Medium Green button. No image, no eyebrow, no secondary CTA. A 1px #CFE3DC hairline closes it.
- Two-column body frame (main left, sidebar right)
- Under the hero the page splits into a white main column on the left and a light grey #F8F8F8 sidebar on the right; the two run side by side down to the footer. This is the style guide's "sidebar right" layout.
- Meet Django (intro + three features + outline button)
- Main column: 32px H1, an 18px intro paragraph, three feature rows each with an 80px green circle icon at left and a one-line title + one sentence at right, then a centred outline button.
- Join the Community (two icon cards)
- Main column: a 24px H2 and two 300px square pale-green cards with rounded corners, each a big dark-green icon over an underlined bold title; the whole card is the link.
- Sidebar: download button and docs link
- Top of the grey sidebar: a full-width Medium Green download button with the release number, then a small centred uppercase docs link.
- Sidebar: Support Django! (donation module)
- Sidebar heading over a hairline, then a pixel-art heart at left and a three-line green donor sentence at right.
- Sidebar: Latest news
- Sidebar heading, then three news items (bold green title, 14px summary, grey byline) separated by hairlines, then MORE NEWS ›.
- Sidebar: link modules
- Five more sidebar modules, each a 20px heading over a hairline, a short list of green 14px links (with a document icon, or with a grey description line), and usually an uppercase read-more link.
- Footer
- Two-part footer: a Medium Green #44B78B link band with five columns of #F1FFF7 links, then a Dark Green #0C4B33 strip with the white wordmark, hosting and design credits, and the copyright line.
Source: djangoproject.com/styleguidegithub.com/django/djangoproject.com/blob/main/djangoproject/scss/_style.scss
In use
The 2014 djangoproject.com redesign and its web style guide · 2014
A small documented set of parts let a volunteer community keep the site consistent for over a decade. Our reading
Full spec
How our engine applies Django's system to each format. This is our recipe built from their published rules, not something Django publishes. Level = how much green fill a format carries (0 white page with green links, 5 green bands throughout).
- The 2014 djangoproject.com redesign and its web style guide. The current site design is credited to Threespot and andrevv (footer); its style guide is dated December 15, 2014 and still governs djangoproject.com and related sites. A dark theme and theme toggle were added later in the SCSS. djangoproject.com/styleguide
| Format | What they did | Source |
|---|---|---|
| site badges | GIF badges for sites built with Django, green or grey: Powered by Django 126x54, Made with Django 124x25, A Django project 120x25, A Django joint 107x25, A Django site 100x25 and 80x15, I wish this site were powered by Django 126x70. | djangoproject.com/community/badges |
| logo downloads | Positive and negative logo in png and svg (screen) and eps (print). | djangoproject.com/community/logos |
| community groups and events | May combine 'Django' with a place, audience or activity and add a locality word or picture to the logo, under the trademark licence and a code of conduct. | djangoproject.com/trademarks |
| merchandise | Artwork and products need formal DSF approval; sellers state what share goes back to the DSF. | djangoproject.com/trademarks |
| documentation | Sphinx docs at docs.djangoproject.com, written to the docs style and voice guide, Fira Mono for code. | docs.djangoproject.com/en/dev/internals/contributing/writing-documentation |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | Homepage-style landing page: follow kit.spec.page. Dark Green #0C4B33 82px header with the white wordmark and 13px Roboto Bold uppercase nav; a white centred hero with one Roboto Light 36px line (-1px tracking, #0C3C26, max 700px) and one #44B78B CTA (radius 5px); then the sidebar-right body: white main column (62%) with intro, 80px #20AA76 icon features and an outline button, beside an #F8F8F8 sidebar (30%) of hairline-headed link modules; #44B78B footer link band and #0C4B33 strip. Green links, uppercase read-more links with ›, 1px #CFE3DC hairlines. A single-purpose marketing page without a sidebar uses the guide's single 740px column instead | how many feature rows and sidebar modules; a green copy banner instead of the white hero on section pages | |
| Docs page | Sidebar layout, Roboto body 18/1.6, Fira Mono code on #F8F8F8, human expert voice, sentence-case titles | admonition boxes, used sparingly | |
| Deck | White slides, Roboto, Dark Green title bar or Medium Green banner slide, logo bottom or top left in its official color | dark green section dividers | |
| Proposal page | White page, Text-green copy, one Medium Green CTA, qualitative claims unless sourced | a green copy banner for the headline | |
| Community event site | Name = Django + place/audience; logo variant adds locality only; code of conduct; no implied DSF endorsement | own colors permitted beyond the logo | |
| White, Roboto or system sans fallback, Green links, one Medium Green button | Dark Green header strip | ||
| Error message | Plain language, Red #BA2121 on light red only for the error itself, no blame | none |
Rules
Do
- Lowercase 'django' wordmark in its official color only
- Greens for every role; text in #0C3C26
- Roboto in five loaded styles; Fira Mono for code
- Single 740px column for landing pages
- Human, expert voice; sentence-case titles
Don’t
- alter, recolor or add text to the logo
- imply DSF endorsement
- load or fake unloaded weights
- call a task easy, simple or straightforward
- add a second accent color
Source: djangoproject.com/community/logosdjangoproject.com/trademarksdjangoproject.com/styleguidedocs.djangoproject.com/en/dev/internals/contributing/writing-documentation
Steal this kit
Your name and logo, Django’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Django doesn’t publish
- Logo clear space: not published.
- Logo minimum size: not published.
- Logo placement rules: not published.
- Color proportions: not published.
- The style guide shows swatches without hex values; hexes here come from the site's open-source SCSS (_utils.scss).
- The logo green #092E20 differs from the site's Dark Green #0C4B33 and from the #0C3C26 text green; the guide doesn't say how they relate.
- The style guide (dated December 15, 2014) says serif Palatino should set text copy, but the live SCSS sets all copy in Roboto and loads no serif. Follow the live site.
- The guide lists H5 as 16px Roboto Normal; the SCSS sets H5 at 14px Bold.
- Spacing scale, grid and gutters in px: not published (the SCSS uses percentages).
- Illustration, photography and motion guidelines: not published.
- A marketing voice guide: not published; only the documentation voice guide exists.
- Print colors beyond the logo green (CMYK 90/50/80/60): not published; no Pantone given.
- The foundation page writes 'Django Web framework' with a capital W, against the docs rule 'the web'.
- DTL Prokyon licence terms for third parties: not published; treat as logo artwork only.
- Positioning against alternatives: not published.
- docs.djangoproject.com runs its own stylesheet (links render red-brown in the 2026-10-31 screenshot); its colors are not in the published web style guide and were not measured here.
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-31. Not affiliated with Django.