What is Jenkins' primary brand color?

Jenkins does not have a high-frequency brand color in the traditional sense. The only color flagged as 'brand' layer with meaningful render frequency is sky blue (#168bb9), which appears six times — all as background fills on the butler-mascot spotlight banner. Every other color on the page is structural: the near-navy ink (#000c1a) dominates at 258 total occurrences (text and border), and the body canvas is pure white. This makes Jenkins closer to a monochrome-structural system than to a single-voltage brand; the mascot provides the color, not the chrome.

What typeface does Jenkins use, and what should I use as a substitute?

Jenkins uses two font families in the captured surface. The wordmark h1 ('Jenkins') at the top of the page is set in Georgia at 64px / weight 700 — a web-safe serif. Everything else (h2 through caption, body paragraphs, nav links, form labels) runs the Bootstrap 5 system-sans stack: system-ui, Segoe UI, Roboto, Noto Sans, Helvetica Neue, Arial. There is no custom web font loaded. Georgia is universally available; if you need a closer open-source match that isn't web-safe, Charter or Lora at the same weight would carry the same editorial-authority register. For the body stack, system-ui with a 400-weight body and 500/700 for h5 and strong elements matches what the page renders.

How does Jenkins use its butler mascot visually?

The butler mascot (Mr. Jenkins — a tuxedoed figure with a fork-ended tray) appears in the main feature spotlight banner below the h1 row. The banner uses sky blue (#168bb9) as the background fill, making it the only chromatic element on the page. The mascot image is displayed at full height within the banner tile. On plugin announcement cards in the blog grid, smaller mascot-derivative illustrations appear with circular or rounded avatars. The mascot is a community-created character; the visual treatment is illustration-based, not SVG icon, and the sky-blue tile is the designed home for it in the marketing surface.

What layout grid does Jenkins use?

Jenkins uses the Bootstrap 5 grid — a 12-column system with responsive breakpoints at 576px (sm), 768px (md), 992px (lg), 1200px (xl), and 1400px (xxl). The masthead runs full-width with the wordmark and navigation. Below the mascot-banner row, the blog-post grid renders in a 3-column layout at desktop that collapses to 1 column on mobile. The sponsor logo row runs a single flex row of partner logos (CloudBees, AWS, GitHub, and others). Max content width is not constrained to a custom value; it follows Bootstrap container widths (~1320px at xxl).

Can I use this DESIGN.md to build an open-source community site?

Yes — the tokens are designed for AI coding tools and direct reference. The key moves to reproduce: set the primary wordmark in a web-safe serif (Georgia) at 64px / 700, use near-navy (#000c1a) for all ink rather than pure black, hold a single sky-blue for any mascot or community-spotlight tile, and let the body stack fall to system-ui without loading a custom font. The Bootstrap 5 spacing scale (8px and 16px as dominant values) transfers cleanly to Tailwind's default spacing scale. One caveat: the 'no custom web font' choice only lands well on community or open-source sites where perceived grassroots authenticity outweighs typographic polish.

Jenkins Design System

Jenkins' marketing site uses 64px Georgia for the wordmark, sky-blue for the butler-mascot banner, and a Bootstrap 5 body stack.

About Jenkins DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source jenkins.io

Backend, Database & DevOps
Developer Tools & IDEs

Jenkins.io opens with a serif "Jenkins" wordmark at 64px that no other CI/CD brand would dare attempt in 2026. While CircleCI runs Inter at enormous scale and GitHub Actions wraps itself in a dark Primer surface, Jenkins uses Georgia — a web-safe font from the 1990s, weight 700 — for its above-fold h1. The effect is not dated; it reads as community conviction. The butler mascot (a tuxedoed figure carrying a server tray) sits in a sky-blue feature tile directly below, the only chromatic moment on an otherwise fully monochrome page. Below that: recent blog posts, plugin spotlight cards, sponsor logos, and a footer in near-navy. There is no hero gradient, no animated product screenshot, no pricing strip. The page is an open-source community hub, and it does not pretend otherwise.

The DESIGN.md file packages the system into machine-readable tokens for React and AI tools. Inside: 14 color tokens anchored by the near-navy structural ink (#000c1a) and a steely slate secondary (#476485), with one brand-layer sky-blue (#168bb9) used exclusively on the mascot-spotlight banner; 11 typography tokens spanning Georgia at the 64px display tier, system-ui at h2 through caption, and a system monospace for code; a radius scale centered on 10.56px with circle and pill variants for avatar and mascot treatments; 8 spacing tokens on a 4px base. Components cover the serif wordmark heading, the sky-blue mascot banner, blog post cards, sponsor logo chips, and the Bootstrap-style secondary navigation strip.

Feed this spec to an AI coding tool and it reproduces Jenkins' moves: serif display in a sans-dominated category, a single sky-blue accent held for the mascot rather than for the CTA, near-navy ink instead of pure black, and Bootstrap-proportion spacing. The move worth considering for community-software sites: the willingness to look like a 2014 open-source hub — because the audience trusts that signal more than a commercial SaaS surface.

What makes it distinct

Georgian serif wordmarkthe 64px / weight 700 Georgia h1 is the only serif display in the major CI/CD category, carrying old-school community credibility over commercial polish
Single sky-blue momentthe butler-mascot feature banner at sky blue is the sole chromatic element on an otherwise monochrome-structural page
Near-navy structural inkthe dominant text and border tone is a slightly-blue near-black (#000c1a), warmer and more anchored than pure black
Bootstrap 5 architecturethe page runs the full Bootstrap custom-property stack, with system-ui as the body typeface and no custom web font in use
Community-first contentrecent posts, plugin announcements, and sponsor logos fill the below-fold rather than feature-grid marketing copy

Live at jenkins.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

jenkins.io

Explore Jenkins

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Jenkins design system FAQ

Common questions about Jenkins's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Jenkins — official site

Jenkins' public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.