jQuery Design System Deep-Dive

1. Brand Overview

jQuery is one of the most recognizable names in front-end web development. It’s a JavaScript library that defined how developers interacted with the DOM back in the early 2000s and still has a loyal following today. The brand’s site at jquery.com reflects that history — it’s not chasing flashy trends. Instead, it’s practical, direct, and coded like a developer’s tool, not a marketing site.

The visual language is utilitarian with a touch of warmth. You see restrained use of color — mostly neutral grays, whites, and a few accent reds and teals. The typography is straightforward, relying on "Cairo" for bold, high-impact headings and "Helvetica Neue" for body text. There’s little embellishment; shadows are minimal, border radii are small, and spacing follows a predictable 8px scale.

This isn’t a brand trying to “sell” you jQuery with emotional imagery. It’s about trust and familiarity. The design says: “We’ve been here a long time, we’re stable, and we still work.” That’s reinforced by a site that feels slightly old-school — underlined links, non-gradient buttons, and hover states that don’t rely on complex animations.

Audience-wise, this is for developers, educators, and tech teams who value consistency over novelty. The site’s small set of breakpoints (480px, 700px, 767px, 807px) shows it’s tuned for basic responsiveness without a full mobile-first rebuild. The color choices lean heavily on accessibility, with strong contrasts and clear focus states. Even the button hover transform (a full 6.28rad rotation) feels like a playful nod rather than a UX necessity.

In short: jQuery’s design system is a developer-friendly toolkit. It’s functional first, aesthetic second — but the aesthetics that are there are deliberate. Every pixel feels like it was placed to support legibility, clarity, and the core message: jQuery is stable, familiar, and still relevant.

2. Color System

2.1 Primary Colors

The standout brand color is #b24926 (rgb(178, 73, 38) — a warm, earthy red-orange). It’s used for interactive elements: primary links, active button states, focus borders. This color carries a certain weight. It’s not the “startup blue” you see everywhere; it’s more grounded, almost brick-like. It suggests maturity and reliability.

Compared to competitors like React or Vue, which lean on blues and greens, jQuery’s choice feels unique. Blue says “trust” in tech branding; red-orange says “energy” but with a muted confidence. Accessibility-wise, white text on #b24926 passes WCAG AA easily. This works because high saturation is balanced by a darker tone.

The secondary accents — #7acef4 (rgb(122, 206, 244) teal-blue) and #dd1144 (rgb(221, 17, 68) strong pink-red) — are used sparingly. They add moments of brightness without overtaking the palette.

2.2 Complete Palette

2.3 Color Relationships

Lots of shades of gray here — from #666666 to #aaaaaa to #e6e6e6 — which creates a calm, readable UI. The accents (#b24926, #7acef4, #dd1144) stand out against these neutrals. Contrast is handled well: dark text on light backgrounds, light text on dark backgrounds.

Accessibility: White text on #b24926 is high contrast. Dark gray text (#333333 equivalent via rgb(51,51,51) usage) on #e6e6e6 is readable. Hover states sometimes drop contrast (e.g., link hover to #b3b3b3), which could be borderline for WCAG AA on small text.

Dark mode: Not implemented. But palette could adapt easily — swap light grays for dark, keep accents.

2.4 Usage Guide

• Works well: #b24926 with white text — strong CTA.
• Gray layering: use #e6e6e6 for background, #777777 for text.
• Avoid: pairing #b3b3b3 text with white background for body copy — too low contrast.
• Accent discipline: keep #dd1144 and #7acef4 for specific highlights — don’t flood UI with them.

3. Typography

3.1 Font Families

Two main families:

• Cairo — used for headings and heavy-weight links. Stack: Cairo, Helvetica Neue, Helvetica, Arial, Geneva. No Google Fonts import detected, so it’s likely locally hosted or system fallback.
• Helvetica Neue — body copy, captions, smaller links. Stack: Helvetica Neue, Helvetica, Arial, Geneva. Classic sans-serif, readable.
• Consolas — code snippets. Stack: Consolas, Menlo.

No variable fonts, no Adobe Fonts. This is a pragmatic choice — Cairo gives personality, Helvetica Neue keeps it neutral.

3.2 Type Scale

3.3 Hierarchy

Headings jump from 24px to 16px — no elaborate scale, just big vs small. Cairo’s bold weight makes headings stand out even at smaller sizes. Body text sits comfortably at 15px Helvetica Neue. Code text matches body size but uses Consolas for monospace clarity. The uppercase 16px Cairo heading is a nice touch for section labels.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px. Everything snaps to this grid, with occasional odd values (3.75px, 6.4px) for icon alignment.

4.2 Layout

Breakpoints: 480px, 700px, 767px, 807px. This is a minimal set — handling mobile, small tablet, and slightly larger tablet/desktop tweaks. No evidence of a max-width container token in the data, but spacing suggests a centered layout with consistent gutters.

5. Visual Elements

Border Radius

Values are small, functional:

• 0px 0px 10px 10px — bottom-rounded divs.
• 3px — code blocks.
• 4px 4px 0px 0px — top-rounded headings.
• 5px — buttons, search inputs, images.
• 10px 10px 0px 0px — nav top corners.
• 50% — circular SVG icons.

Rounded corners are restrained — no pill buttons except the full 50% case for icons.

Shadows

Mostly subtle:

• rgba(0,0,0,0.4) 0px 4px 5px — common.
• Complex inset/outset combos for buttons.
• One heavier shadow: rgba(0,0,0,0.12) 0px 12.8px 20px. Shadows are used for emphasis, not depth across the UI.

Borders & Dividers

Thin 1px borders in rgb(51,51,51) or white. Used for list items, nav dividers. Accent borders in #7acef4 for footer.

6. Components

6.1 Buttons

Variant 1 (visuallyhidden)

• Default: bg #efefef (rgb(239,239,239)), text #333333 (rgb(51,51,51)), padding 0, border-radius 0, no border, no shadow.
• Hover: bg #424141 (rgb(66,65,65)), box-shadow rgba(209,143,79,0.9) 0px 0px 25px.
• Active: bg #b24926.

Variant 2 (button large)

• Default: bg #d18f4f (rgb(209,143,79)), text white, padding 12px 20px, radius 5px, border 1px solid #999999, shadow combo with inset whites.
• Hover: bg #424141, text #b3b3b3, box-shadow glow in #d18f4f, border darkened, transform rotate(6.28rad).
• Active: bg #b24926.
• Focus: text #333333, border #b24926, bg white.

6.2 Links

Five styles:

1. #b24926 underline — hover: #b3b3b3.
2. #e6e6e6 no underline — hover underline, #b3b3b3.
3. White bold — hover underline, #b3b3b3.
4. #b3b3b3 underline — hover same color underline.
5. #aaaaaa no underline — hover underline, #b3b3b3.

6.3 Forms

Search input:

• Default: bg #0769ad (rgb(7,105,173)), text white, radius 5px, padding 12.8px 36.8px 12.8px 37.6px.
• Focus: text #333333, bg white, border 1px solid #b24926.

6.4 Cards

No explicit card component in data, but #e6e6e6 backgrounds with 5px radius and light shadows are likely used.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-gray-light: #aaaaaa;
  --color-white: #ffffff;
  --color-primary: #b24926;
  --color-gray-medium: #777777;
  --color-gray-bg: #e6e6e6;
  --color-black-35: #000000;
  --color-accent-pink: #dd1144;
  --color-gray: #808080;
  --color-gray-dark: #666666;
  --color-accent-tealblue: #7acef4;
  --color-gray-mid: #cccccc;
  --color-gray-soft: #b3b3b3;
  --color-accent-teal: #008080;
  --color-gray-button: #999999;

  /* Typography */
  --font-cairo: "Cairo", "Helvetica Neue", Helvetica, Arial, Geneva;
  --font-helvetica: "Helvetica Neue", Helvetica, Arial, Geneva;
  --font-consolas: Consolas, Menlo;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-3_75: 3.75px;
  --space-5: 5px;
  --space-5_5: 5.5px;
  --space-6: 6px;
  --space-6_4: 6.4px;
  --space-7_5: 7.5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-10_72: 10.72px;
  --space-12: 12px;
  --space-12_8: 12.8px;
  --space-13_4: 13.4px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-45: 45px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 10px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.4) 0px 4px 5px 0px;
  --shadow-button: rgba(0, 0, 0, 0.28) 0px 0px 5px 0px, rgba(255, 255, 255, 0.45) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.45) 0px -1px 0px 0px inset, rgba(255, 255, 255, 0.45) 1px 0px 0px 0px inset, rgba(255, 255, 255, 0.45) -1px 1px 0px 0px inset;
}

8. AI Coding Assistant Prompt

# jQuery Design System Specification

## System Prompt
You are a jQuery design expert. Build UIs matching their visual language exactly.

## Brand Context
jQuery’s design is pragmatic, developer-first, and stable. It uses neutral grays with warm red-orange accents, bold Cairo headings, and small-radius corners. Interactions are clear but minimal — no excessive animations.

## Color Palette
- Gray Light: #aaaaaa — muted text, secondary links
- White: #ffffff — backgrounds, text on dark
- Primary Red-Orange: #b24926 — links, active buttons, focus borders
- Gray Medium: #777777 — footer text
- Gray Background: #e6e6e6 — surface backgrounds
- Black 35%: #000000 — overlay text
- Accent Pink-Red: #dd1144 — highlights, alerts
- Gray Neutral: #808080 — dividers, neutral text
- Gray Dark: #666666 — body text
- Accent Teal-Blue: #7acef4 — borders, highlights
- Gray Mid: #cccccc — borders
- Gray Soft: #b3b3b3 — hover text
- Accent Teal: #008080 — rare highlights
- Gray Button: #999999 — button borders

## Typography
- Headings: "Cairo", "Helvetica Neue", Helvetica, Arial, Geneva
- Body: "Helvetica Neue", Helvetica, Arial, Geneva
- Code: Consolas, Menlo

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 24px | 700 | 1.00 | Page titles |
| H1 alt | 22.5px | 700 | 1.00 | Section titles |
| Link large | 22.5px | 700 | 1.00 | Prominent links |
| Link medium | 20px | 700 | 0.80 | Navigation |
| H1 small | 16px | 700 | 1.41 | Section labels (uppercase) |
| Body | 15px | 400 | 1.50 | Main text |
| Code | 15px | 400/700 | 1.10 | Code snippets |
| Caption | 14px | 700 | 1.14 | Labels |
| Small link | 13px | 400 | 1.31 | Footer links |
| Caption small | 12px | 400 | 1.00 | Metadata |
| Tiny link | 11px | 400 | 1.30 | UI microcopy |

## Spacing & Grid
Base: 8px
Scale: 1px, 3px, 3.75px, 5px, 5.5px, 6px, 6.4px, 7.5px, 8px, 10px, 10.72px, 12px, 12.8px, 13.4px, 15px, 20px, 25px, 45px

## Border Radius
- none: 0 — tables, code blocks
- sm: 3px — code blocks
- md: 5px — buttons, inputs
- lg: 10px — nav, containers
- full: 50% — icons

## Shadows & Depth
- md: rgba(0,0,0,0.4) 0px 4px 5px
- button complex inset/outset for 3D effect

## Component Specifications

### Primary Button (.button.large)
Default:
- bg: #d18f4f
- text: #ffffff
- padding: 12px 20px
- radius: 5px
- border: 1px solid #999999
- shadow: var(--shadow-button)
Hover:
- bg: #424141
- text: #b3b3b3
- border: 1px solid rgba(0,0,0,0.25)
- box-shadow: rgba(209,143,79,0.9) 0px 0px 25px
- transform: rotate(6.28rad)
Active:
- bg: #b24926
Focus:
- text: #333333
- bg: #ffffff
- border: 1px solid #b24926

### Secondary Button (.visuallyhidden)
Default:
- bg: #efefef
- text: #333333
- padding: 0
- radius: 0
Hover:
- bg: #424141
- shadow: glow rgba(209,143,79,0.9)
Active:
- bg: #b24926

### Navigation Links
Default: underline or no underline depending on variant, specific colors above
Hover: underline with color shift to #b3b3b3

### Input Field (search)
Default:
- bg: #0769ad
- text: #ffffff
- radius: 5px
- padding: 12.8px 36.8px 12.8px 37.6px
Focus:
- bg: #ffffff
- text: #333333
- border: 1px solid #b24926

## Layout & Responsive Rules
Breakpoints:
- Mobile: < 480px
- Small tablet: 700px
- Tablet: 767px
- Medium desktop: 807px

## Interaction Rules
- Transition timing: 150ms ease for hover/focus changes
- Focus indicators: 1px solid #b24926 for inputs/buttons
- No motion for core layout changes

## DO List
- Use only palette colors
- Keep to 8px grid
- Maintain small-radius corners
- Use Cairo for headings, Helvetica Neue for body
- Keep hover/focus states clear and high-contrast

## DON'T List
- Don’t introduce new colors
- Don’t mix large and small corner radii in same component
- Don’t remove underlines from text links unless specified
- Don’t add heavy shadows outside button styles

## Code Examples

Primary Button:
```css
.button.large {
  background: #d18f4f;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 20px;
  border: 1px solid #999999;
  box-shadow: var(--shadow-button);
  transition: all 150ms ease;
}
.button.large:hover {
  background: #424141;
  color: #b3b3b3;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: rgba(209,143,79,0.9) 0px 0px 25px;
  transform: rotate(6.28rad);
}

Search Input:

input[type="search"] {
  background: #0769ad;
  color: #ffffff;
  border-radius: 5px;
  padding: 12.8px 36.8px 12.8px 37.6px;
  border: none;
}
input[type="search"]:focus {
  background: #ffffff;
  color: #333333;
  border: 1px solid #b24926;
  outline: none;
}

---

## 9. Summary

**TL;DR** — jQuery’s design system is lean, functional, and developer-oriented. Small-radius corners, a warm red-orange primary color, and bold Cairo headings give it identity without overcomplication. Stick to the 8px grid and the restrained palette, and you’ll match the brand’s tone.

**Brand Keywords** — developer-pragmatic, warm-functional, retro-modern, grid-consistent