:root {
  /* Colors */
  --color-primary-blue: #3776ab;
  --color-dark-grey: #333333;
  --color-light-grey: #bbbbbb;
  --color-medium-grey: #caccce;
  --color-off-white: #e6e8ea;
  --color-python-yellow: #ffd343;
  --color-medium-grey-2: #999999;
  --color-light-blue: #75a8d3;
  --color-success-green: #11a611;
  --color-mid-grey: #555555;
  --color-lightest-grey: #f2f4f6;
  --color-divider-grey: #dddddd;
  --color-pale-blue: #89b4d9;
  --color-white: #ffffff;
  --color-medium-blue: #3d83be;
  --color-navy-blue: #316998;
  --color-black: #000000;
  --color-deep-navy: #2b5b84;
  --color-light-yellow: #ffdf76;
  --color-dark-charcoal: #1f2a32;
  --color-charcoal: #1e2933;
  --color-very-dark-grey: #1a1a1a;
  --color-bright-blue: #005fcc;
  --color-slate-grey: #444444;
  --color-steel-blue: #244e71;

  /* Typography */
  --font-flux-regular: "Flux-Regular", "SourceSansProRegular", Arial;
  --font-flux-bold: "Flux-Bold", "SourceSansProBold", Arial;
  --font-source-sans-regular: "SourceSansProRegular", Arial;
  --font-source-sans-bold: "SourceSansProBold", Arial;
  --font-pythonicon: "Pythonicon";
  --font-consolas: Consolas, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New";
  --font-georgia: Georgia;

  /* Spacing */
  --space-1: 1.3125px;
  --space-2: 2.415px;
  --space-3: 2.625px;
  --space-4: 5.25px;
  --space-5: 5.43375px;
  --space-6: 5.6px;
  --space-7: 6.3px;
  --space-8: 6.4px;
  --space-9: 6.5625px;
  --space-10: 7px;
  --space-11: 7.875px;
  --space-12: 8px;
  --space-13: 11.7px;
  --space-14: 12px;
  --space-15: 13.125px;
  --space-16: 15.3125px;
  --space-17: 16px;
  --space-18: 18.375px;
  --space-19: 20px;
  --space-20: 23.625px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 99px;

  /* Shadows */
  --shadow-light-inset: rgba(0,0,0,0.05) 1px 1px 1px 0px, rgba(255,255,255,0.5) 0px 0px 5px 0px inset;
  --shadow-blue-inset-sm: rgba(55,118,171,0.2) 0px 0px 5px 0px inset;
  --shadow-blue-inset-lg: rgba(55,118,171,0.15) 0px 0px 20px 0px inset;
}

# Python Design System Specification

You are a Python design expert. Build UIs matching their visual language exactly.

## Brand Context
Python.org’s design is functional, recognizable, and minimal. It uses the iconic blue and yellow from the logo, supported by neutral greys and whites. Typography is clean sans-serif with occasional monospace for code. Spacing follows an 8px grid. Depth is subtle, relying on inset shadows and borders.

## Color Palette
- Primary Blue: #3776ab — logo, links, primary buttons
- Dark Grey: #333333 — body text
- Light Grey: #bbbbbb — placeholders, skip-link
- Medium Grey: #caccce — buttons, neutral backgrounds
- Off-White: #e6e8ea — search button background
- Python Yellow: #ffd343 — donate button, CTAs
- Medium Grey 2: #999999 — neutral buttons
- Light Blue: #75a8d3 — accents
- Success Green: #11a611 — success states
- Mid Grey: #555555 — icons
- Lightest Grey: #f2f4f6 — backgrounds
- Divider Grey: #dddddd — dividers
- Pale Blue: #89b4d9 — accents
- White: #ffffff — backgrounds
- Medium Blue: #3d83be — borders
- Navy Blue: #316998 — accents
- Black: #000000 — text
- Deep Navy: #2b5b84 — main header
- Light Yellow: #ffdf76 — button highlight
- Dark Charcoal: #1f2a32 — hover/focus
- Charcoal: #1e2933 — hover/focus
- Very Dark Grey: #1a1a1a — hover/focus
- Bright Blue: #005fcc — hover/focus
- Slate Grey: #444444 — borders, hover/focus
- Steel Blue: #244e71 — hover/focus

## Typography
- Headings: Flux-Regular / Flux-Bold, fallback Source Sans Pro, Arial
- Body: SourceSansProRegular, Arial
- Code: Consolas, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New
- Icon font: Pythonicon
- Serif: Georgia

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 28.98px | 400 | 1.04 | Page titles |
| H1 | 28px | 400 | 1.00 | Section titles |
| Body | 16px | 400 | 1.63 | Paragraphs |
| Caption | 14px | 400 | 1.63 | Small labels |
... (include all from extracted data)

## Spacing & Grid
Base: 8px grid. Common values: 5.6px, 6.4px, 7px, 7.875px, 20px, 23.625px.
Use multiples for padding, margins, gaps.

## Border Radius
- sm: 6px — buttons, inputs
- md: 8px — navigation
- pill: 99px — pill shapes

## Shadows & Depth
- Light inset: rgba(0,0,0,0.05) 1px 1px 1px, inset white glow
- Blue inset: rgba(55,118,171,0.2) small, rgba(55,118,171,0.15) large

## Components

### Primary Button (Donate)
Default: bg #ffd343, text #4d4d4d, padding 6.4px 12px 5.6px, radius 6px, border 1px solid #dca900, light inset shadow.
Hover: bg #f8f9fa, text #dcdcdc, no border.
Active: bg #ffd343, text #dcdcdc.
Focus: bg #ffd95c, text #000000.

### Secondary Button (Search)
Default: bg #2b5b84, text #e6e8ea, padding 6.4px 12px 5.6px, radius 6px, blue inset shadow.
Hover: bg #ffd343, text #fff1c2.
Active: bg #ffd343, text #ffffff.
Focus: bg #ffd343, text #fff1c2.

### Input Field (Search)
Default: bg #ffffff, text #bbbbbb, padding 6.4px 8px 4.8px, no radius.
Focus: bg #ffffff, text #444444, red glow shadow.

### Links
Grey link: default #999999, hover #dcdcdc.
Yellow link: default #ffd343 underline, hover #dcdcdc no underline.

## Layout & Responsive Rules
Breakpoints: 640px, 768px, 1200px, 1300px, 1301px, 1320px.

## Interaction Rules
- Transitions: 150ms ease for hover/focus changes
- Focus: color change or glow, no default outline

## DO
- Use only palette colors
- Maintain 8px grid
- Use Flux for headings, Source Sans Pro for body
- Keep shadows subtle and inset
- Preserve button radius at 6px

## DON'T
- Invent new colors
- Use heavy drop shadows
- Mix rounded and sharp corners
- Use yellow text on white
- Break grid spacing

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ffd343;
  color: #4d4d4d;
  padding: 6.4px 12px 5.6px;
  border-radius: 6px;
  border: 1px solid #dca900;
  box-shadow: rgba(0,0,0,0.05) 1px 1px 1px, rgba(255,255,255,0.5) 0px 0px 5px inset;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #f8f9fa; color: #dcdcdc; border: 0; }
.btn-primary:focus { background: #ffd95c; color: #000000; }

.btn-secondary {
  background: #2b5b84;
  color: #e6e8ea;
  padding: 6.4px 12px 5.6px;
  border-radius: 6px;
  box-shadow: rgba(55,118,171,0.2) 0px 0px 5px inset;
}
.btn-secondary:hover { background: #ffd343; color: #fff1c2; }
.btn-secondary:focus { background: #ffd343; color: #fff1c2; }

.input-search {
  background: #ffffff;
  color: #bbbbbb;
  padding: 6.4px 8px 4.8px;
  border: none;
  border-radius: 0;
}
.input-search:focus {
  color: #444444;
  box-shadow: rgba(255,0,0,0.5) 0px 0px 10px;
}

---

## 9. Summary

**TL;DR:** Python.org’s design is built on the blue/yellow identity, clean sans-serif typography, and an 8px grid. It’s functional, readable, and deliberately consistent over time. Buttons are rounded at 6px, shadows are subtle and inset, and color usage is strictly within the brand palette.

**Brand Keywords:**  
- trust-driven  
- developer-functional  
- globally-recognizable  
- minimal-impact  
- code-friendly