# Django: brand book and build spec

A one-color lowercase wordmark in deep Logo Green, a site built from greens (Dark Green header, Medium Green CTAs and banners, Green links) on white with pale Gray Line hairlines, set entirely in open Roboto with Fira Mono for code. A docs-first voice: an expert talking to a fellow developer, plain about difficulty, wary of superlatives.

From unfairly.ai/brand-guidelines/django, checked 2026-10-31. Unofficial study; not affiliated with Django.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** A developers' institution that looks like a well-kept manual: one family of greens, one open sans in a few weights, thin rules and generous reading width. Nothing shouts; the documentation is the brand. Based on: From the style guide's 740px reading column, five loaded Roboto styles only, greens for every role, and the docs guide's 'one person addressing another' voice.

## Purpose

DSF goal: Promote, support and advance the Django web framework (paraphrase of the Django Software Foundation's goal). (published; https://www.djangoproject.com/foundation/)

Story: 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. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Open source spirit | The community may use the name for related projects, groups and events, and anyone profiting reports what goes back (paraphrase). | published: https://www.djangoproject.com/trademarks/ |
| Kindness and honesty | Engage kindly and honestly with others (Code of Conduct encouraged behavior). | published: https://www.djangoproject.com/conduct/ |
| Different viewpoints | Respect different viewpoints and experiences. | published: https://www.djangoproject.com/conduct/ |
| Responsibility | Take responsibility for actions and contributions; impact matters more than intent. | published: https://www.djangoproject.com/conduct/ |
| Constructive feedback | Give and accept constructive feedback gracefully. | published: https://www.djangoproject.com/conduct/ |
| Welcoming, safe, equitable | The pledge: a community welcoming, safe and equitable for all (paraphrase). | published: https://www.djangoproject.com/conduct/ |

## Fixed and flexible

Never changes:
- 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.

## Positioning

- **Statement**: A high-level Python web framework that encourages rapid development and clean, pragmatic design (paraphrase). (observed)
- **Category**: Python web framework, free and open source (observed)
- **Audience**: Web developers on deadlines who want it right: 'perfectionists with deadlines'; experienced web developers. (observed)
- **Problem**: The repetitive hassle of web development and reinventing the wheel (paraphrase). (observed)
- **Promise**: Build better web apps more quickly and with less code (paraphrase of the homepage hero). (observed)
- **Differentiators**: Batteries included: auth, admin, site maps, feeds out of the box; Security by default against common web attacks; Scales to heavy traffic; Free, open source, run by a non-profit foundation; Famously thorough documentation written in a human voice

## Messaging

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. (Beside the logo in the site header (shown at 1500px and wider) and in the page title area; the long-running Django tagline)
- Building the Django Community for 21 years, 3 months. Come join us! (Community-section copy banner; the count updates live (2026-10-31))

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Ridiculously fast | Take applications from concept to completion as quickly as possible. | From concept to launch in a matter of hours (Django's own claim). | observed |
| Fully loaded | Dozens of extras for common tasks, right out of the box. | User authentication, content administration, site maps and RSS feeds included. | observed |
| Reassuringly secure | Helps developers avoid common security mistakes. | Guards against SQL injection, cross-site scripting, CSRF and clickjacking. | observed |
| Exceedingly scalable | Scales quickly and flexibly to meet heavy traffic. | Some of the busiest sites on the planet use Django (no names or numbers given). | observed |
| Incredibly versatile | Used to build everything from CMSs to scientific platforms. | Companies, organizations and governments build content management, social and scientific computing platforms with it. | 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.
- No named customers or traffic numbers are published with the scalability claim; keep it qualitative.
- Don't call any step easy or simple.

## Voice

Tone words: Human, Expert, Plainspoken.

Traits:
- Human, but not Frictionless (published)
- Expert, but not Grandiose (published)
- Systematic, but not Mechanical (published)
- Lively, but not Dull (published)
- Honest about difficulty, but not Dismissive (published)
- Welcoming, but not Exclusive (published)

- 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).

Rules a copy check enforces:
- 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

Their words: pragmatic, free and open source, community.
Never: easily, simply, just, merely, straightforward, he or she, e-mail, Web (capitalized), -ise spellings.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Logo Green | #092E20 | logo | The logo's only color. Published on the logos page; not used as a UI color in the site's SCSS. |
| Text | #0C3C26 | ink | Primary. Main text, headings. |
| Dark Green | #0C4B33 | night | Primary. Header, title bar, bottom footer strip. |
| Green | #20AA76 | accent_secondary | Primary. Links and icons. |
| Light Green | #93D7B7 | extra | Primary. Light accent; dark-mode links. |
| White | #F1FFF7 | on_night | Primary. Faint green-white: nav text on Dark Green, light ground. |
| Dark Red | #6A0E0E | extra | Primary. Error dark. |
| Medium Dark Green | #2B8C67 | extra | Secondary. Hover and accent. |
| Medium Green | #44B78B | accent | Secondary. CTA fill, green copy banner, footer. |
| Very Light Green | #C9F0DD | extra | Secondary. Text on Medium Green, selection, nav hover. |
| Text Light | #798780 | ink_muted | Secondary. Meta and alternate text. |
| Gray Line | #CFE3DC | hairline | Secondary. Every hairline and border. |
| Red | #BA2121 | extra | Secondary. Errors. |
| Paper White | #FFFFFF | paper | Main column and homepage hero ground (source code). |
| Off White | #F8F8F8 | surface | Page ground beside the content and code blocks (source code). |
| Black | #0E1117 | dark mode | Dark-mode page ground (source code). |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Roboto | Open source (Google Fonts; Apache 2.0 originally, SIL OFL 1.1 in current releases); self-hosted by djangoproject.com | Roboto | Roboto, Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif |
| body | Roboto | Open source (Google Fonts) | Roboto | Roboto, Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif |
| mono | Fira Mono | SIL OFL 1.1 (Mozilla) | Fira Mono | "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero line (homepage copy banner) | --text-hero-* | Roboto | 36px | 36px | 1.3 | -1px | 300 |
| Copy banner (section pages, guide) | --text-banner-* | Roboto | 32px | 24px | 1.3 | -1px | 300 |
| Main H1 (Meet Django) | --text-h1-* | Roboto | 32px | 32px | 1.1 | -1px | 400 |
| Main H2 (Join the Community) | --text-h2-* | Roboto | 24px | 24px | 1.6 | 0px | 400 |
| Feature title (24px on phone) | --text-feature-title-* | Roboto | 18px | 24px | 1.6 | 0px | 400 |
| Body / intro / feature text | --text-body-* | Roboto | 18px | 18px | 1.6 | 0px | 400 |
| Community card title | --text-card-title-* | Roboto | 20px | 20px | 1.2 | 0px | 700 |
| Sidebar heading | --text-side-heading-* | Roboto | 20px | 20px | 1.2 | 0px | 400 |
| News title | --text-news-title-* | Roboto | 16px | 16px | 1.2 | 0px | 700 |
| Sidebar text, links, descriptions | --text-small-* | Roboto | 14px | 14px | 1.6 | 0px | 400 |
| News byline (meta) | --text-meta-* | Roboto | 14px | 14px | 1.3 | 0px | 400 |
| Read-more link, sidebar (uppercase + ›) | --text-readmore-* | Roboto | 12px | 12px | 1.6 | 0px | 700 |
| Nav link (uppercase) | --text-nav-* | Roboto | 13px | 13px | 1.23 | 0px | 700 |
| Hero CTA label | --text-cta-* | Roboto | 18px | 18px | 1.3 | -1px | 700 |
| Sidebar download button label | --text-cta-side-* | Roboto | 16px | 16px | 1.6 | 0px | 700 |
| Outline button label | --text-cta-outline-* | Roboto | 18px | 18px | 1.6 | 0px | 400 |
| Footer column head | --text-footer-head-* | Roboto | 16px | 16px | 1.2 | 0px | 700 |
| Footer link | --text-footer-link-* | Roboto | 14px | 14px | 1.6 | 0px | 400 |
| In-kind donors credit | --text-credit-* | Roboto | 20px | 20px | 1.6 | 0px | 400 |
| Footer fine print (credits labels, copyright) | --text-fine-* | Roboto | 12px | 12px | 1.6 | 0px | 400 |
| Back to top (phone only, uppercase) | --text-backtotop-* | Roboto | 14px | 14px | 1.6 | 0px | 700 |
| H3 in main content (guide) | --text-h3-* | Roboto | 20px | 20px | 1.2 | 0px | 700 |

## Layout

Measured on https://www.djangoproject.com/styleguide/: 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.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 60px | 10px |
| Section padding | 40px | 40px |
| Container max width | 1320px | full |
| Hero text width | max 700px | full |
| Grid columns | 2 | 1 |
| Gutter | 106px | 10px |
| Card gap | 60px | 60px |
| Navigation height | 82px | 82px |

Breakpoints from Django's CSS: 500, 768, 1024, 1080, 1280, 1500px.

Homepage bands, top to bottom (observed):
1. Header
   - Desktop: 1440x82 at y 0; wordmark x 70; links x 272-1111; search x 1123-1337; toggle x 1339
   - Phone: 390x82: dj mark, search, toggle, hamburger
   - Not sticky
   - Links 13px 700 uppercase #F1FFF7, 10px padding each
2. Hero copy banner
   - Desktop: y 83-483, padding 50px 0, text 700px centred in 2 lines, CTA 267x61
   - Phone: y 83-576, text 4 lines full width, CTA 267x61 centred
   - 1px #CFE3DC bottom hairline
   - No image, no eyebrow
3. Meet Django (main column)
   - Desktop: y 524-1381 in x 60-878; features on a 170px pitch with 80px circles; 1px rule at the end
   - Phone: y 617-1608; 40px circles inline with 24px titles; hairline above each feature
   - Sidebar runs alongside from y 523
   - Main column ground #FFFFFF; the parallel right sidebar sits on #F8F8F8
4. Join the Community (main column)
   - Desktop: y 1430-1799, cards at x 60 and 420, 60px gap
   - Phone: cards stacked and centred, then BACK TO TOP
   - Main column then pads 80px to the footer at y 2798
5. Sidebar (parallel to the main column)
   - Desktop: x 984-1380, y 523-2738
   - Phone: after the main column, y 2519-4789, 10px gutters
   - Each module: 20px 400 heading, 15px padding, 1px #CFE3DC rule, 14px green links, uppercase read-more ›
6. Footer link band
   - Desktop: y 2798-3092, columns spread with space-between
   - Phone: y 4790-6233, one column with hairlines over each head
   - Heads 16px 700, links 14px, all #F1FFF7
7. Footer strip
   - Desktop: y 3112-3263 (151px)
   - Phone: y 6253-6646, credits stacked
   - Text #2B8C67; credit logos #F1FFF7 at 0.4 opacity

## Page anatomy

How Django's own landing pages are built, part by part (observed; https://www.djangoproject.com/, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- summary: None on the homepage at rest. A #billboard container exists under the header but is empty on 2026-10-31 (no banner, 0px tall). When a campaign runs, it is a Light Green #93D7B7 band with a 1px #0E1117 top border, centred Roboto Light 1.8rem/1.4 text in #0E1117, max-width 60em, padding 1em 3em (1em 1.25em phone).
- resting state: Absent. Do not add one.

**Navigation**
- summary: 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.
- ground: #0C4B33 (Dark Green), full bleed, no border, no shadow; the white hero below starts 1px under it (y 83)
- height: 82px at every width (padding 10px 0 6px around a 66px flex row)
- border: none
- logo: variant white "django" wordmark (logo-django.svg, fill #FFFFFF, not currentColor) on desktop and >=500px; the white "dj" mark (logo-dj.svg) below 500px; px wordmark box 104x36 (SVG 104x36); "dj" box 45x36; position desktop x 70 y 25 (container padding 60px + 10px margin); phone x 4 y 25; file https://raw.githubusercontent.com/django/djangoproject.com/main/djangoproject/static/img/logo-django.svg
- links: count 10; labels OVERVIEW, DOWNLOAD, DOCUMENTATION, NEWS, CODE, ISSUES, COMMUNITY, FOUNDATION, ♥ DONATE, SPONSOR (source labels Overview, Download, Documentation, News, Code, Issues, Community, Foundation, ♥ Donate, Sponsor; rendered uppercase; the heart is the text character U+2665, not an icon); size 13px/16px Roboto 700, text-transform uppercase, letter-spacing normal; weight 700; color #F1FFF7 at rest; hover #C9F0DD; the active section is #44B78B (none active on the homepage); alignment flex row, each link padding 10px (36px tall hit area), no gap; boxes start x 272, 356, 447, 574, 630, 683, 747, 845, 945, 1031 and end x 1111; the nav block is pushed right by margin-left auto (starts x 270)
- actions:
  - Search field: white #FFFFFF input 214x46 at x 1123 y 20, 1px solid #CFE3DC border, radius 4px, padding 6px 37px 8px 10px, Roboto 16px #0C3C26; placeholder "Search (⌘ K)" in #0C3C26 (placeholder uses the body colour, not grey); focus border #20AA76
  - Search button: 40x40 inside the right end of the field (x 1289 y 23), no fill, Font Awesome fa-search glyph 20px #44B78B; hover/focus #0C4B33
  - Theme toggle: 39x45 transparent button at x 1339, Font Awesome fa-adjust (half-filled circle) 18px #F1FFF7; it cycles auto, dark (fa-moon-o), light (fa-sun-o); the screenshot state is auto (fa-adjust)
  - No sign-in, no CTA button in the bar
- tagline: "The web framework for perfectionists with deadlines." sits after the logo (13px 700 #44B78B) only at 1500px and wider; hidden at 1440 and in every screenshot
- sticky: not sticky; the header scrolls away with the page (position relative)
- phone: shows "dj" mark 45x36 at x 4 y 25; search field 212x46 at x 88 y 20 (same style); theme toggle 39x45 at x 304; hamburger button 45x45 at x 345 (Font Awesome fa-reorder 20px #F1FFF7 on #0C4B33). Nav links are hidden below 1280px, so tablets also get the hamburger.; menu the nav drops down inside the green header (max-height 0 to 580px, 0.3s ease-out): full-width rows, 13px/16px 700 uppercase #F1FFF7, padding 20px 0, 10px side margin, each row topped by a 1px #106142 rule; same ten labels in the same order; cta no CTA in the phone bar; the hero CTA is the first button

**Hero**
- summary: 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.
- desktop: section y 83-483 (400px incl. the 1px bottom border), ground #FFFFFF full bleed, padding 50px 0, text-align center; column split one centred column; vertical anchors headline <p> box y 169 (36px top margin), text lines y 170-264 (2 x 46.8px); CTA y 307-368; 40px CTA bottom margin then 50px band padding; hairline y 482; text max width 700px (x 370-1070), centred; forced by max-width, so it breaks after "web apps"; media none; cta size 267x61 at x 586 (centred)
- phone: order headline, CTA; alignment centred; the headline runs the full 390px with no side padding (the homepage banner overrides the usual 10px); sizes section y 83-576 (493px); headline 36px/46.8px, 4 lines (y 169-363): "Django makes it easier to / build better web apps / more quickly and with less / code."; CTA 267x61 at x 61 y 400
- at rest: Static. Nothing animates in the hero.
- media: none: the hero is type and one button on white
- type: Roboto 300 36px/46.8px (1.3), letter-spacing -1px, #0C3C26, centred, roman (the source wraps it in <em> but em is set font-style normal)
- cta: Get started with Django: #44B78B fill, #FFFFFF Roboto 700 18px/23.4px, letter-spacing -1px (inherited from the banner, so it reads tight), padding 18px 50px 19.8px, radius 5px, no border, inline-block; hover #51BE95, active #41B085; focus outline 2px currentColor offset 2px
- proof: none: no logos, stats or quotes anywhere on the homepage
- copy:
  - Headline: "Django makes it easier to build better web apps more quickly and with less code."
  - CTA: "Get started with Django" (links to /start/)
- copy prov: observed, verbatim, https://www.djangoproject.com/ (2026-10-31)

**Two-column body frame (main left, sidebar right)**
- summary: 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.
- ground: main #FFFFFF (its white extends to the left viewport edge through box-shadows); sidebar region #F8F8F8 (the body ground) from x 931 to the right edge
- desktop: container x 0-1440 with padding 0 60px (32/768 = 4.17% of the width), so content spans x 60-1380 (1320px, fluid; no max width); main x 60-931: width 62% (871px) with padding-right 4% (53px), content x 60-878 (818px); padding-bottom 80px; min-height 800px; sidebar x 984-1380 (396px = 30%), margin-left 3% (40px), margin-top 20px, padding-bottom 40px; split line the white/grey boundary at x 931 is a hard colour edge, no rule; height y 483-2798 (both columns end at the footer; main 2315px, sidebar 2275px)
- phone: stacking one column: all of main (y 576-2489, padding 1px 10px 40px, white) then the sidebar (y 2519-4789, padding 0 10px 20px, on the #F8F8F8 body ground); gutter 10px each side; content 370px
- anatomy:
  - Desktop styles start at 768px; below that every block is full width
  - Main sections are divided by a 1px #CFE3DC rule after 40px bottom padding; the last section has none
- components:
  - container
  - main column
  - sidebar column

**Meet Django (intro + three features + outline button)**
- summary: 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.
- ground: #FFFFFF
- desktop: band y 524-1381 (section box; 40px bottom padding then the 1px #CFE3DC rule at y 1381); h1 "Meet Django" 32px/35.2px 400 -1px #0C3C26 at x 60 y 524 (margin 40px 0 30px); intro 18px/28.8px 400 #0C3C26, 818px wide, 3 lines, y 589-675; features dl starts y 725 (50px margin-top). Three rows on a 170px pitch: dt tops y 725, 895, 1065. Each dt has padding 20px 0 0 110px; the icon is absolutely placed at x 60, 20px below the dt top (y 745, 915, 1085), 80x80. Title 18px/28.8px 400 #0C3C26 at x 170 (y 745). Description <p> 18px/28.8px 400 #0C3C26 at x 170, 648px wide (dd padding 0 60px 20px 110px), starts 33px below the title top (y 778, 947, 1117), 2 lines each; button Learn more about Django: outline button 456x67 at x 241 y 1253, centred in the 818px column (max-width 400px + 27px padding each side + 1px borders), 20px margins
- phone: band y 617-1608 (section), content x 10-380; h1 32px/35.2px -1px at y 617, 1 line; intro 18px/28.8px, 7 lines, y 683-885; features each dt carries a 1px #CFE3DC top rule and 25px top padding; a 40x40 green circle (font-size 24px glyph) sits inline before the title, 10px gap, and the title is 24px/38.4px 400 #0C3C26 on the same line; the description follows under it at 18px/28.8px, full width (no indent). dt tops y 934, 1126, 1318 (192px pitch); button outline button full width 370x67 at x 10 y 1501 (30px margin-top)
- anatomy:
  - Feature icons: solid #20AA76 circles (80px desktop, radius 40px; 40px phone) holding a #F1FFF7 Font Awesome 4.2 glyph (46px desktop, 24px phone): fa-bolt (\f0e7), fa-lock (\f023), fa-dashboard (\f0e4). Use the supplied SVGs feature-bolt-80.svg, feature-lock-80.svg, feature-dashboard-80.svg (40px versions for phone)
  - Icons at rest are upright (transform none). They spin in from rotate(0.5turn) when scrolled into view (0.3s ease-out): animation only
  - Title and description are plain text, no links; the only link in the section is the outline button
  - Outline button: transparent, 1px solid #CFE3DC, radius 5px, Roboto 18px/28.8px 400 #859D94, padding 18px 27px; hover text and border #20AA76; active #44B78B
- components:
  - feature_row
  - feature_icon
  - button_outline
- copy:
  - H1: "Meet Django"
  - Intro: "Django is a high-level Python web framework that encourages 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 without needing to reinvent the wheel. It’s free and open source."
  - Feature 1: "Ridiculously fast." / "Django was designed to help developers take applications from concept to completion as quickly as possible."
  - Feature 2: "Reassuringly secure." / "Django takes security seriously and helps developers avoid many common security mistakes."
  - Feature 3: "Exceedingly scalable." / "Some of the busiest sites on the web leverage Django’s ability to quickly and flexibly scale."
  - Button: "Learn more about Django" (links to /start/overview/)
- copy prov: observed, verbatim, https://www.djangoproject.com/ (2026-10-31)

**Join the Community (two icon cards)**
- summary: 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.
- ground: #FFFFFF
- desktop: band y 1430-1798 (last main section, no bottom rule); main then pads 80px to y 2798 where the footer starts; h2 "Join the Community" 24px/38.4px 400 #0C3C26 at x 60 y 1430 (margin 50px 0 30px); cards flex row with 60px gap (6rem on a 10px root), left-aligned: card 1 x 60-360, card 2 x 420-720, both y 1499-1799, 300x300; card inside fill #C9F0DD, radius 20px, padding 20px, flex column centred both ways; icon 150x150 (x +75, y +28); title 20px/24px Roboto 700 #0C4B33 with margin 40px 0 20px (title top y +227), centred
- phone: band y 1659-2387; H2 at y 1659; cards stacked and centred: 300x300 at x 45, y 1727 and y 2087 (60px gap); back to top phone only: "BACK TO TOP" link under the cards, 370x42 at y 2397, Roboto 14px/22.4px 700 uppercase #20AA76, centred, padding 10px 0, preceded by a Font Awesome fa-chevron-up 14px; hidden from 768px up
- anatomy:
  - Card icons are inline SVGs coloured #0C4B33 (fill currentColor in the source): a Material Symbols "forum" double speech bubble (viewBox 0 0 48 48) and the Discord logo in a speech-bubble tile (viewBox 0 0 256 293). Use community-forum.svg and community-discord.svg
  - Card title is underlined; the underline is the link's #20AA76 (the text itself is #0C4B33); hover turns the link colour #1D915C
  - No border, no shadow on the cards
- components:
  - community_card
- copy:
  - H2: "Join the Community"
  - Card 1: "Forum - Post a question" (https://forum.djangoproject.com/)
  - Card 2: "Discord - Chat with us" (https://chat.djangoproject.com)
- copy prov: observed, verbatim, https://www.djangoproject.com/ (2026-10-31)

**Sidebar: download button and docs link**
- summary: Top of the grey sidebar: a full-width Medium Green download button with the release number, then a small centred uppercase docs link.
- ground: #F8F8F8
- desktop: button 396x58 at x 984 y 523: #44B78B, radius 5px, padding 16px 24px, Roboto 16px/25.6px 700, centred; "Download " in #FFFFFF then "latest release: 6.1.2" in #C9F0DD (an <em> set roman); hover #51BE95; docs link "DJANGO DOCUMENTATION ›" 12px/19.2px 700 uppercase #20AA76, centred, block, y 590 (margin-top -10px pulls it under the button)
- phone: button 370x58 at x 10 y 2519 (30px under the main column); docs link centred at y 2587
- anatomy:
  - The release number is live content: 6.1.2 on 2026-10-31. Keep the structure "Download latest release: X.Y.Z"
  - Read-more chevron is the text " ›" generated after the label at 1.2em
- components:
  - button_sidebar
  - readmore_link
- copy:
  - Button: "Download latest release: 6.1.2"
  - Link: "Django documentation" (rendered uppercase)
- copy prov: observed, verbatim, https://www.djangoproject.com/ (2026-10-31)

**Sidebar: Support Django! (donation module)**
- summary: Sidebar heading over a hairline, then a pixel-art heart at left and a three-line green donor sentence at right.
- ground: #F8F8F8
- desktop: heading "Support Django!" 20px/24px 400 #0C3C26 at y 633, padding-bottom 15px, 1px #CFE3DC rule under it (y 672), 396px; heart fundraising-heart.svg at x 984 y 713, 64x55 (float left, width 20%, max 64px, 20px top and bottom margin); text float left, width 70%, 5% side margins: starts x 1083 y 710, 277px wide, 14px/22.4px 400 #20AA76 link, no underline, 3 lines
- phone: heart 64x55 at x 10 y 2700; text x 103, 259px wide, 3 lines
- anatomy:
  - The donor sentence rotates per page load: "<Donor> donated to the Django Software Foundation to support Django development. Donate today!" (observed "Hale Law, P.A." in the measurement and "Sunscrapers" in the screenshot, 2026-10-31). It links to /fundraising/
  - Heart: 8x7 grid of square pixels in pinks #D9195C, #EE2178, #D62D75, #AD1D45 with one highlight #F7B0CF; use the SVG as supplied
- components:
  - sidebar_heading
  - donation_snippet

**Sidebar: Latest news**
- summary: Sidebar heading, then three news items (bold green title, 14px summary, grey byline) separated by hairlines, then MORE NEWS ›.
- ground: #F8F8F8
- desktop: heading "Latest news" text at y about 809 (its box starts y 693 and wraps under the floated heart), rule at y 847; items first title y 884, second item rule y 1080 / title 1126, third rule y 1299 / title 1345; items after the first have border-top 1px #CFE3DC, margin-top 35px, padding-top 10px; item inside h4 title 16px/19.2px 700, a link #20AA76 no underline (hover #25C488), h4 margin-top 35px for the first; summary <p> 14px/22.4px 400 #0C3C26, margin 14px 0; byline 14px/18.2px 400 #859D94 with the author in <strong> 700, margin 10px 0 20px; more "MORE NEWS ›" 12px/19.2px 700 uppercase #20AA76 at y 1469
- phone: items same structure at 370px: titles y 2870, 3134, 3354; MORE NEWS y 3500
- anatomy:
  - Live content, recorded 2026-10-31 in order:
  - 1. "Quarterly contributor outreach" / "The Steering Council is reaching out to bring people's attention to a few areas. We have major features we'd like to test and review for 6.2, smaller changes that could use attention and then various New Feature ideas we'd like community input on." / "FEATURED | Posted by Tim Schilling on Oct. 19, 2026" (FEATURED is uppercase, then a | separator)
  - 2. "Natalia Bidart - Planned short-term leave" / "Natalia Bidart will take a three-month break from her Django Fellow duties from November 2026 through January 2027, returning in February." / "Posted by Natalia Bidart on Oct. 26, 2026"
  - 3. "Django security reporting update" / "We are updating how security issues in Django are reported." / "Posted by The Django Security Team on Oct. 8, 2026"
  - Byline structure: [FEATURED | ]Posted by <strong>Author</strong> on Mon. D, YYYY
- components:
  - news_item
  - readmore_link

**Sidebar: link modules**
- summary: 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.
- ground: #F8F8F8
- desktop: headings y New to Django? 1532; The power of Django 1734; Get involved 2000; Get Help 2259; The Django Software Foundation 2465 (each margin 30px 0 20px, padding-bottom 15px, 1px #CFE3DC rule); docs list li rows 32px pitch (14px/22.4px, li margin-top 10px); each link preceded by Font Awesome fa-file-text-o (\f0f6) 14px in #20AA76, floated in a 23px-wide slot, then the link #20AA76 at x +23; dl list dt link 14px/22.4px 400 #20AA76 at x 984, dd description 14px/22.4px #798780 under it (padding-top 2px, margin 2.8px 0 16.8px); 67px pitch between dts; readmores y GETTING STARTED WITH DJANGO › 1671; EXPLORE MORE FEATURES › 1937; INSIDE THE DJANGO COMMUNITY › 2196; (none under Get Help); MORE ABOUT THE DSF › 2705
- phone: layout same order and spacing at 370px wide; headings y 3563, 3765, 4032, 4291, 4497; sidebar ends y 4789
- anatomy:
  - New to Django? (docs list): Installation guide; Write your first Django app; read-more "Getting started with Django"
  - The power of Django (docs list): Object-relational mapper; Automatic admin interface; Robust template system; Quick internationalization; read-more "Explore more features"
  - Get involved (link + description): Ticket system / Report bugs and make feature requests; Development dashboard / see what's currently being worked on; read-more "Inside the Django community"
  - Get Help (link + description): Django Discord Server / Join the Django Discord Community; Official Django Forum / Join the community on the Django Forum.
  - The Django Software Foundation (link + description): About the Foundation / Our non-profit supports the project; Support Django / Your contribution makes Django stronger; Contact the Django Software Foundation (no description); read-more "More about the DSF"
  - Read-more labels are rendered uppercase with " ›" after; descriptions keep their own case (note the lowercase "see what's...")
- components:
  - sidebar_heading
  - docs_list_item
  - link_description_item
  - readmore_link

**Footer**
- summary: 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.
- ground: #44B78B link band (y 2798-3092 desktop) then a 20px #44B78B gap, then #0C4B33 strip (y 3112-3263, 151px)
- anatomy:
  - Link band: container padding 0 60px; five columns in a flex row with justify-content space-between, each as wide as its longest label: x 60 (177px), 364 (143), 634 (134), 896 (136), 1159 (221)
  - Column heads 16px/19.2px Roboto 700 #F1FFF7, padding 30px 0 10px (text top y 2828); list margin-top 15px; links 14px/22.4px 400 #F1FFF7, no underline (hover underline), rows on a 32.4px pitch from y 2880; list padding-bottom 30px
  - Learn More: About Django, Getting Started with Django, Team Organization, Django Software Foundation, Code of Conduct, Diversity Statement
  - Get Involved: Join a Group, Contribute to Django, Submit a Bug, Report a Security Issue, Individual membership
  - Get Help: Getting Help FAQ, Django Discord, Official Django Forum
  - Follow Us: GitHub, X, Fediverse (Mastodon), Bluesky, LinkedIn, News RSS (text links, no social icons)
  - Support Us: Sponsor Django, Donate to Django, Corporate membership, Official merchandise store, Benevity Workplace Giving Program, GitHub Sponsors
  - Strip: padding 10px 0 30px. White wordmark logo-django.svg 109x39 box (SVG 104x36, left-centred) at x 60 y 3142
  - Credits at x 496 and x 931 (30% columns): "Hosting by" 12px #2B8C67 (in a 24px box, line-height 36px) over "In-kind donors" 20px/32px #2B8C67 link at y 3150, no underline; "Design by" over the threespot logo (94x33 box, logo-threespot.svg 84x20) at x 931 y 3151, "&" 12px #2B8C67 at x 1034 (6px side margins, nudged 6px down), andrevv logo (94x33 box, logo-andrevv.svg 65x10) at x 1063. Both credit logos are #F1FFF7 at about 0.4 opacity (baked into the SVGs), reading as a muted grey-green
  - Copyright at x 60, padding-top 30px (text y 3214), 12px/19.2px #2B8C67, max-width 80%: "© 2005-2026 Django Software Foundation and individual contributors. Django is a registered trademark of the Django Software Foundation." with "Django Software Foundation" (to /foundation/) and "registered trademark" (to /trademarks/) underlined in #2B8C67
  - No street address, phone number or social icons are published in the footer
- phone: Link band (y 4790-6233, padding 0 10px): the five columns stack in one 370px column; each head gets a 1px #CFE3DC top rule, margin-top 20px, padding 30px 0 10px; same 32.4px link pitch. Strip (y 6253-6646): wordmark at x 10 y 6283; credits stack as full-width rows (padding 17px 10px 11px): "Hosting by" / "In-kind donors", then "Design by" / threespot logo / "&" / andrevv logo each on its own line; copyright at x 10 y 6578 in 2 lines.
- copyright: © 2005-2026 Django Software Foundation and individual contributors. Django is a registered trademark of the Django Software Foundation.

**On dark grounds**
- secondary button: none on dark grounds; the only buttons are the #44B78B CTAs on white/grey
- link: on #0C4B33 (header): #F1FFF7, hover #C9F0DD; on #44B78B (footer band): #F1FFF7, hover underline; on the #0C4B33 strip: #2B8C67 underlined
- muted text: #2B8C67 on the #0C4B33 strip
- hairline: #106142 between rows of the phone menu on #0C4B33
- logo variant: white wordmark logo-django.svg (#FFFFFF) on #0C4B33 in both header and footer; never the Logo Green #092E20 artwork

## Components

- **button primary** (observed): fill #44B78B, text #FFFFFF, border none, radius 5, padding 18px 50px 19.8px, height 61, example Get started with Django (267x61), text style 18px/23.4px Roboto 700, letter-spacing -1px, padding x 50, font size 18, weight 700, face body
  - hover (observed): fill #51BE95
  - active (published): fill #41B085
  - focus (published): outline 2px solid #44B78B, offset 2px
- **button sidebar** (observed): fill #44B78B, text #FFFFFF, border none, radius 5, padding 16px 24px, height 58, example Download latest release: 6.1.2 (full sidebar width, 396x58); the <em> part is #C9F0DD, roman, text style 16px/25.6px Roboto 700, padding x 24, font size 16, weight 700, face body
  - hover (observed): fill #51BE95
  - active (published): fill #41B085
- **button outline** (observed): fill none, text #859D94, ring px 1, ring #CFE3DC, border 1px solid #CFE3DC, radius 5, padding 18px 27px, height 67, example Learn more about Django (456x67 desktop, max-width 400px content; full width on phone), text style 18px/28.8px Roboto 400, padding x 27, font size 18, weight 400, face body
  - hover (observed): text #20AA76, border #20AA76
  - active (published): text #44B78B, border #44B78B
- **feature icon** (observed): fill #20AA76, on #F1FFF7, radius 40, size 80px circle, 46px glyph (desktop); 40px circle, 24px glyph (phone), glyphs Font Awesome 4.2.0 fa-bolt, fa-lock, fa-dashboard, files feature-bolt, feature-lock and feature-dashboard SVGs at 80px and 40px (see the slot images), radius note border-radius 50% (a circle): 40px on the 80px desktop circle, 20px on the 40px phone circle. Static state upright; the spin-in from rotate(0.5turn) on scroll is animation only
- **feature row** (observed): desktop icon absolute at left (x 0, 20px down); title and text indented 110px; text column 648px (60px right padding); 170px row pitch, phone 1px #CFE3DC top rule, 25px top padding, 40px icon inline + 10px gap + 24px title; text full width below
- **community card** (observed): fill #C9F0DD, radius 20, size 300x300, padding 20px, icon 150x150 #0C4B33 SVG, title 20px/24px 700 #0C4B33, underline #20AA76, gap 60px
  - hover (observed): link color #1D915C (underline)
- **sidebar heading** (observed): text #0C3C26, text style 20px/24px Roboto 400, rule 1px solid #CFE3DC under, 15px padding-bottom, margin 30px 0 20px (20px for the first)
- **news item** (observed): title 16px/19.2px 700 link #20AA76, summary 14px/22.4px #0C3C26, byline 14px/18.2px #859D94, author bold, divider 1px #CFE3DC top border, 35px margin-top, 10px padding-top (not on the first)
  - hover (observed): title #25C488
- **docs list item** (observed): icon Font Awesome fa-file-text-o 14px #20AA76 in a 23px float, link 14px/22.4px 400 #20AA76 no underline, pitch 32px
- **link description item** (observed): link 14px/22.4px 400 #20AA76, description 14px/22.4px #798780, 2px padding-top, pitch 67px
- **readmore link** (observed): text #20AA76, text style 12px/19.2px Roboto 700 uppercase in the sidebar (14px in main content), then " ›" at 1.2em; no underline
  - hover (observed): color #25C488
- **nav link** (observed): text #F1FFF7, text style 13px/16px Roboto 700 uppercase, padding 10px
  - hover (observed): color #C9F0DD
- **search field** (observed): fill #FFFFFF, text #0C3C26, border 1px solid #CFE3DC, radius 4, size 214x46 (desktop), 212x46 (phone), icon fa-search 20px #44B78B in a 40x40 button at the right end; hover #0C4B33, placeholder Search (⌘ K), #0C3C26
  - focus (published): border #20AA76
- **footer link** (observed): text #F1FFF7, text style 14px/22.4px Roboto 400, no underline
  - hover (observed): text decoration underline
- **text link** (observed): text #20AA76. Body links are underlined; link-green links (headings, sidebar, read-more) are not
  - hover (observed): color #1D915C (underlined links), #25C488 (link-green)

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| menu | ease-out | 300ms | Mobile nav drawer opens by max-height | published |
| fade | ease-in-out | 200ms | Opacity fades (console tabs, overlays) | published |
| slow | ease-out | 500ms | Larger transitions (all / top) | published |

## Icon tokens

Grid not published (Font Awesome 4.2.0 webfont glyphs), stroke n/a: filled webfont glyphs (published).
| Name | Size | Use |
|---|---|---|
| styleguide | 32px | Icon row in the style guide, Green #20AA76 |

## Signature moves

### Green copy banner

Where: the full-width band under the header on section pages (Community, Overview); the homepage swaps it for a white centered version.
Do: Medium Green #44B78B band, one line of Roboto Light 32px (24 phone), tracking -1px, in Very Light Green #C9F0DD, with key words emphasized not by italics but by switching to the faint White #F1FFF7 (em: font-style normal). Left-aligned in the content container. One banner per page, directly under the header.
Don't: set it bold, italicize the emphasis, or put it below other content.
Example: "Building the Django Community for 21 years, 3 months. Come join us!", with "Django", "21 years, 3 months" set as color #F1FFF7, roman.

### Dark Green header with uppercase nav

Where: every page's top bar.
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.
Don't: use the Logo Green #092E20 for the bar or recolor the wordmark.

### Uppercase read-more link with a chevron

Where: under feature blurbs and list modules.
Do: Roboto Bold 14px uppercase in Green #20AA76, no underline, followed by ' ›' at 1.2em; back links use '‹ ' before.
Don't: underline it or turn it into a button.
Example: "SEE HOW FAST YOU CAN START BUILDING ›".

### Gray Line hairlines

Where: between page sections, under sidebar headings, between list items.
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.
Don't: use heavy rules, shadows as dividers, or dark lines.

## Messaging: rules

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'.

Why it works: Adverb-plus-adjective heads carry personality in two words, so the sentence under them can stay sober and technical.

- Lead with the benefit as a two-word head, then one plain sentence
- Keep proof qualitative unless a sourced number exists
- Say free and open source plainly
- Never imply DSF endorsement for third-party work

Sources: https://www.djangoproject.com/start/overview/, https://www.djangoproject.com/, https://www.djangoproject.com/trademarks/

## Voice: rules

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.

Why it works: Django's docs are its reputation; the guide protects the friction and personality that make them teach.

|  |  |
|---|---|
| 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 |

- 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
- 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

Do and don't:
- Do: "Run the migration, then check the output for errors.". States the step and what to watch for.
- Don't: "Simply run the migration and you're done!". 'Simply' minimizes difficulty; the docs guide bans it.

Real examples, to look at on Django's own pages (not for reuse):
- The docs guide's human vs frictionless example: https://docs.djangoproject.com/en/dev/internals/contributing/writing-documentation/

Sources: https://docs.djangoproject.com/en/dev/internals/contributing/writing-documentation/, https://www.djangoproject.com/conduct/, https://www.djangoproject.com/start/overview/

## Logo: rules

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.

Why it works: A lowercase word, one color, no symbol: the name is the mark, matching how developers type it.

|  |  |
|---|---|
| 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 |

- 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

Real examples, to look at on Django's own pages (not for reuse):
- Positive logo, green on white: https://www.djangoproject.com/community/logos/
- Negative logo, white on green: https://www.djangoproject.com/community/logos/
- The Official Django Logos page: formats, color, font, standards: https://www.djangoproject.com/community/logos/

Sources: https://www.djangoproject.com/community/logos/, https://www.djangoproject.com/trademarks/, https://www.djangoproject.com/community/badges/, https://docs.djangoproject.com/en/dev/internals/contributing/writing-documentation/

## Color: rules

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.

Why it works: A single hue family keeps the site calm and recognizably Django without a second brand color competing with links and buttons.

|  |  |
|---|---|
| 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 |

- 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)

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.

Do and don't:
- Do: "Get started with Django". Medium Green CTA, white Roboto Bold, 5px radius.
- Don't: "Get started with Django". A non-green accent: reds are for errors only.

Real examples, to look at on Django's own pages (not for reuse):
- Style guide: primary and secondary swatches: https://www.djangoproject.com/styleguide/
- Official logo color published in RGB, hex and CMYK: https://www.djangoproject.com/community/logos/

Sources: https://www.djangoproject.com/styleguide/, https://www.djangoproject.com/community/logos/, https://github.com/django/djangoproject.com/blob/main/djangoproject/scss/_utils.scss, https://github.com/django/djangoproject.com/blob/main/djangoproject/scss/_dark-mode.scss, https://www.djangoproject.com/trademarks/

## Typography: rules

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.

Why it works: One open sans keeps docs, marketing and community pages identical; Light 300 gives the copy banner its quiet voice.

|  |  |
|---|---|
| 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) |

- 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

Real examples, to look at on Django's own pages (not for reuse):
- Style guide typography: main and secondary content scales: https://www.djangoproject.com/styleguide/

Sources: https://www.djangoproject.com/styleguide/, https://github.com/django/djangoproject.com/blob/main/djangoproject/scss/_utils.scss, https://github.com/django/djangoproject.com/blob/main/djangoproject/scss/_style.scss, https://www.djangoproject.com/community/logos/

## Graphic elements: rules

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.

Why it works: Few components, each with one job, so a page reads like documentation even when it sells.

|  |  |
|---|---|
| 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 |

- 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)

Real examples, to look at on Django's own pages (not for reuse):
- Style guide page elements: CTA, outline button, forms: https://www.djangoproject.com/styleguide/
- Style guide list modules: https://www.djangoproject.com/styleguide/

Sources: https://www.djangoproject.com/styleguide/, https://github.com/django/djangoproject.com/blob/main/djangoproject/scss/_style.scss

## Iconography: rules

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.

|  |  |
|---|---|
| Set | Font Awesome 4.2.0 (font SIL OFL 1.1, CSS MIT) |
| Sample size | 32px |
| Color | #20AA76 |
| Grid / stroke | not published (webfont glyphs) |

- 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

Real examples, to look at on Django's own pages (not for reuse):
- Style guide icon row: https://www.djangoproject.com/styleguide/

Sources: https://www.djangoproject.com/styleguide/, https://github.com/django/djangoproject.com/blob/main/djangoproject/scss/_font-awesome.scss

## Illustration: rules

No illustration style is published. The site's one recurring drawing is a pixel-art heart in magenta for fundraising, shown in the sidebar.

Why it works: Not published; the site leans on type and color, not pictures.

|  |  |
|---|---|
| Illustration style | not published |
| Pixel heart | fundraising-heart.svg on the homepage sidebar (observed 2026-10-31) |

- 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

Real examples, to look at on Django's own pages (not for reuse):
- Fundraising pixel heart from the site's source: https://github.com/django/djangoproject.com/blob/main/djangoproject/static/img/fundraising-heart.svg

Sources: https://www.djangoproject.com/community/logos/, https://github.com/django/djangoproject.com/blob/main/djangoproject/static/img/

## Photography: rules

No photography guidance is published. The guideline pages carry no photos; sponsor logos and screenshots are the only images.

|  |  |
|---|---|
| Photo style | not published |

- Photography: not published
- Prefer real screenshots and logos over stock photos (observed practice)
- Don't use stock photography as decoration

Sources: https://www.djangoproject.com/styleguide/, https://www.djangoproject.com/community/logos/

## Motion: rules

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 | 0.3s ease-out |
| Fade | 200-400ms |
| Large | 0.5s ease-out |
| Motion guide | not published |

- 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

Sources: https://github.com/django/djangoproject.com/blob/main/djangoproject/scss/_style.scss

## Interface and layout: rules

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.

- Default: sidebar left (main 63% floated right, sidebar 30%) for navigation
- Sidebar right for secondary content
- Single column max 740px for marketing, landing and single-purpose pages
- Below 768px everything is one column; desktop styles start at 768px
- White #FFFFFF content column on an #F8F8F8 page ground

Not published: a pixel grid, gutter or spacing scale (the SCSS uses percentages: container padding 32/768).

Real examples, to look at on Django's own pages (not for reuse):
- Style guide page layouts: sidebar left and right: https://www.djangoproject.com/styleguide/
- Single column at 740px for landing pages: https://www.djangoproject.com/styleguide/

Sources: https://www.djangoproject.com/styleguide/, https://github.com/django/djangoproject.com/blob/main/djangoproject/scss/_style.scss

## Rules: rules

- 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
- Don't imply DSF endorsement
- Don't load or fake unloaded weights
- Don't call a task easy, simple or straightforward
- Don't add a second accent color

Sources: https://www.djangoproject.com/community/logos/, https://www.djangoproject.com/trademarks/, https://www.djangoproject.com/styleguide/, https://docs.djangoproject.com/en/dev/internals/contributing/writing-documentation/

## Campaigns

### The 2014 djangoproject.com redesign and its web style guide (2014)

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.

How the system shows: The greens, Roboto scale, sidebar and single-column layouts, CTA and outline buttons in the guide are the ones live today.
Why it works: A small documented set of parts let a volunteer community keep the site consistent for over a decade.
Channels: website, docs. Source: https://www.djangoproject.com/styleguide/

## Applications

| Format | What | 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. | https://www.djangoproject.com/community/badges/ |
| logo downloads | Positive and negative logo in png and svg (screen) and eps (print). | https://www.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. | https://www.djangoproject.com/trademarks/ |
| merchandise | Artwork and products need formal DSF approval; sellers state what share goes back to the DSF. | https://www.djangoproject.com/trademarks/ |
| documentation | Sphinx docs at docs.djangoproject.com, written to the docs style and voice guide, Fira Mono for code. | https://docs.djangoproject.com/en/dev/internals/contributing/writing-documentation/ |

## By format

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). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | 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 | 1 | Sidebar layout, Roboto body 18/1.6, Fira Mono code on #F8F8F8, human expert voice, sentence-case titles | admonition boxes, used sparingly |
| Deck | 2 | 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 | 1 | White page, Text-green copy, one Medium Green CTA, qualitative claims unless sourced | a green copy banner for the headline |
| Community event site | 3 | Name = Django + place/audience; logo variant adds locality only; code of conduct; no implied DSF endorsement | own colors permitted beyond the logo |
| Email | 1 | White, Roboto or system sans fallback, Green links, one Medium Green button | Dark Green header strip |
| Error message | 0 | Plain language, Red #BA2121 on light red only for the error itself, no blame | none |

## Checks before anything ships

- **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.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Django's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- 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.

Logos and reference images belong to Django. Look at them on Django's own pages; don't reuse them.