Jenkins Design System

Overview

Jenkins' marketing site leads with a serif wordmark no other automation platform would use. Community Serif Authority. The 64px Georgia h1 at the top of jenkins.io reads as an artifact of the open-source community rather than a brand decision — which is exactly the point. Where CircleCI uses Space Grotesk at 170px in a stadium-type treatment and GitHub Actions wraps everything in Primer dark surfaces, Jenkins plants a web-safe serif from the early web era and signals: this is community software, not a commercial product.

The sole chromatic moment is the sky-blue mascot-spotlight tile ({colors.primary} — #168bb9) directly below the wordmark. Mr. Jenkins — a tuxedoed butler with a server tray — occupies this tile exclusively. Every other surface on the page is either pure white canvas or near-navy ink. The structural bones come from Bootstrap 5's custom-property stack, so the spacing, radii, and typeface defaults follow Bootstrap's conventions rather than a bespoke design system.

Key Characteristics:

• 64px Georgia serif wordmark — the only serif display headline in the CI/CD category among major hosted platforms.
• Near-navy structural ink ({colors.ink} — #000c1a) as the dominant text and border tone, slightly blue rather than pure black.
• Sky-blue mascot banner ({colors.primary} — #168bb9) — the sole chromatic element, appearing 6 times as background fills around the butler illustration.
• Bootstrap 5 system-sans body: system-ui / Segoe UI / Roboto, no custom web font loaded.
• Steely slate secondary tone ({colors.ink-secondary} — #476485) for body text and de-emphasized borders.
• Blog-first below-fold: plugin announcements, community posts, and sponsor logos occupy the scroll depth that product-led brands give to feature grids.
• No primary CTA button in the captured render — the community downloads rather than converts.
• Radius scale centered on 10.56px (Bootstrap's border-radius default of 0.375rem) with 50% circles for avatar thumbnails.

Colors

Brand

• Sky Blue ({colors.primary} — #168bb9): frequency 6, all as background fills. The butler-mascot spotlight banner background. The only chromatic brand element on the page — every occurrence wraps the mascot illustration. Undeclared as a CSS custom property in the captured surface; rendered via a direct color value on the banner element.

Structural Text and Border

• Near-Navy Ink ({colors.ink} — #000c1a): frequency 258 (text 129, border 129). The dominant color of the system — all body text, all borders, the wordmark character. Wired as --color in CSS. Slightly blue-shifted rather than pure black, carrying a subtle anchored warmth.
• Steely Slate ({colors.ink-secondary} — #476485): frequency 54 (text 27, border 27). Body paragraph text and secondary borders. Wired as --color--secondary. A mid-tone blue-gray that makes body copy feel less stark against the white canvas while keeping it clearly legible.

Surface

• Canvas ({colors.canvas} — #ffffff): the body floor. All blog cards, sponsor logo areas, and the top-nav sit on pure white. Wired as --background and --bs-body-bg.
• Warm Gray ({colors.surface-1} — #dad1c6): frequency 1 (background). A warm beige declared as --bs-gray-400 and --bs-dark-bg-subtle. Appears as a subtle chip or tag background; the warmest surface in the system.

Shadow

• Shadow Ink ({colors.shadow} — #000028): frequency 9, all as shadow ink. A deep navy used for element drop shadows — darker and bluer than the body ink, producing a perceptible depth rather than a gray shadow.

Hairline

• Hairline ({colors.hairline} — #000000): frequency 10 (text 8, bg 1, border 1). Pure black appearing in small annotation and separator contexts, distinct from the slightly-blue near-navy body ink.

Typography

Font Families

The system runs two families: Georgia for the primary wordmark h1, and the Bootstrap 5 system-sans stack for every other typographic surface. Georgia is web-safe (no load cost, universally available). The system-sans stack cascades: system-ui → Segoe UI → Roboto → Noto Sans → Ubuntu → Cantarell → Fira Sans → Droid Sans → Helvetica Neue → Arial. No custom web font is loaded on the marketing site.

The serif-plus-system-sans split is the defining typographic choice. The wordmark in serif signals community age and authority; everything below it in system-sans signals pragmatic utility. The two families do not mix within body content.

Hierarchy

Principles

The wordmark is the only moment where weight 700 meets a serif. Below it, headings use 600–700 in the system-sans stack, and body text settles at 400–450 — a soft mid-weight rather than the usual 400 / 600 binary. There is no display size between 28px and 64px; the jump is intentional and creates visual distance between the wordmark tier and the content tier.

Note on Font Substitutes

Georgia is freely available and universally installed — no substitute is necessary. For a more contemporary editorial serif at the same weight, Lora or Source Serif 4 at weight 700 transfer the intent. For the body stack, Inter at the same weight values is a drop-in that narrows slightly; the system-ui default renders acceptably across every major OS without any trade-off.

Layout

Spacing System

• Base unit: 4px, with 16px and 20px as the dominant content values.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.2xl} 32px · {spacing.3xl} 48px.
• Top-nav padding: 8px vertical, 16px horizontal.
• Card internal padding: 20px on blog cards; blog post thumbnails fill edge-to-edge within the card.
• Mascot banner padding: 20px vertical, 24px horizontal.
• Footer padding: 48px top, 24px horizontal.

Grid and Container

• Architecture: Bootstrap 5 12-column grid with standard breakpoints (576 / 768 / 992 / 1200 / 1400px).
• Max container width: approximately 1320px at the xxl breakpoint.
• Masthead: full-width navigation with wordmark flush left, plugin-download link and sign-in CTA flush right.
• Feature row: 2-column split — mascot banner tile on the left, text-and-download panel on the right.
• Blog grid: 3-column post grid at desktop, collapsing to 2-column at md and 1-column at sm.
• Sponsor row: single flex row of partner logos (CloudBees, DSL, od, AWS, GitHub) at uniform height.

Rhythm

The page follows a content-first rhythm rather than an editorial band structure. Each section is a grid of cards or a list of posts; there is no alternating full-bleed section. The mascot banner is the only full-width decorative moment. Below it, the page returns immediately to card-grid content and maintains that pattern to the footer.

Elevation

The system uses subtle box shadows rather than tonal surface lifts. Blog cards at desktop sit on the pure-white canvas with a box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) — the Bootstrap default shadow tier. The shadow ink is {colors.shadow} (#000028), a deep navy rather than gray, giving shadows a cool depth tone. There are three declared shadow tiers from Bootstrap 5 (--bs-box-shadow-sm, --bs-box-shadow, --bs-box-shadow-lg) but only the standard box-shadow renders on the captured surface.

Shapes

The radius scale follows Bootstrap 5's defaults:

• {rounded.none} 0px — the mascot banner and the masthead are square-edged, no rounding.
• {rounded.sm} 5px — small UI chrome (buttons, inputs), corresponding to Bootstrap's border-radius-sm.
• {rounded.md} 10.56px — the dominant card radius (Bootstrap border-radius = 0.375rem at 16px base, rendered as ~6px; the captured 10.56px corresponds to a larger element). Appears 12 times.
• {rounded.full} 50% — avatar thumbnails, mascot illustration chips in the blog grid. Appears 7–8 times.
• {rounded.pill} 9999px — Bootstrap pill variant for badge-style labels.

The system does not have a generous-soft ladder; rounding is either tight-square (0–5px) or fully circular (50%). The mid-radius at 10.56px covers the blog post cards.

Components

button-primary — Sky-blue {colors.primary} fill, white text, {rounded.sm} 5px radius, 8×18px padding, 40px height. Appears on the mascot banner as the download CTA ("Download Jenkins"). The only rendered button instance on the page that uses the brand color.

button-secondary — White {colors.canvas} fill, near-navy text, 1px near-navy border, {rounded.sm} radius. Used for secondary actions like "Get started" links in the feature row.

top-nav — Pure-white surface, 56px height, near-navy ink. Jenkins wordmark flush left; navigation links and a right-aligned CTA cluster. The Bootstrap navbar renders in the system-sans stack at 14px / 450 weight.

nav-link — Transparent background, near-navy ink text, 0×15px horizontal padding. Standard Bootstrap nav-link treatment.

hero-heading — 64px Georgia at weight 700, near-navy ink on transparent background. The wordmark element. The only Georgia instance on the page.

mascot-banner — Sky-blue {colors.primary} full-bleed tile, 20×24px padding. Contains the butler-mascot illustration, a section heading in white system-sans, a body paragraph, and the primary download button. The branded centerpiece of the page.

section-heading — White text in {typography.display-md} (28px / 700 system-sans) — appears inside the dark mascot-banner background.

body-paragraph — Steely-slate {colors.ink-secondary} text at {typography.body-md}. Body copy sits at a slightly-blue medium gray rather than near-navy, softening the reading contrast.

card — White canvas, 1px {colors.ink-secondary} border, {rounded.md} 10.56px radius, 20px internal padding. The blog post card pattern — holds a thumbnail image, h5 card title, metadata (date + author), and a body excerpt.

card-heading — Near-navy ink text in {typography.heading-sm} (20.8px / 650). The blog card h5 title style.

text-input — White canvas, 1px {colors.ink-secondary} border, {rounded.sm} 5px radius, 8×12px padding, 38px height. The site-search input in the top-nav.

sponsor-chip — White canvas, {rounded.full} circular, small body text. Partner-logo chips rendered in the sponsor acknowledgment row.

avatar — Fully circular ({rounded.full} — 50%), 48px square. Author avatars and mascot-derivative plugin illustrations in the blog card grid.

footer — Near-navy {colors.ink} background, white text, 48×24px padding. Four-column footer links in system-sans at {typography.body-sm}.

Do's and Don'ts

Do use Georgia exclusively for the top-level wordmark h1 and let the system-sans stack handle every other typographic tier. The two families create a clear hierarchy signal: serif = identity, sans = content. Bleeding Georgia into section headings would dilute the distinction.

Do reserve sky blue ({colors.primary} — #168bb9) for the mascot-spotlight context only. The page's visual identity depends on this color appearing exactly where the community-facing mascot lives. Using it for generic CTAs or section accents would flatten the emphasis.

Do let blog content and plugin announcements carry the below-fold scroll depth. The community-software convention is to show real activity (posts, releases, PRs) rather than marketing feature grids; replacing the blog grid with a commercial feature section would read as out-of-character.

Do render author and mascot avatars as fully circular ({rounded.full} — 50%). The community-contributor identity relies on avatar circles; rectangular thumbnail crops would feel like a product catalog, not a community hub.

Don't load a custom web font. The system's "no-web-font" stance has a real-world benefit for a community server: the page loads without a font FOUT and renders on any network quality. Adding a custom font would require a build pipeline change and introduce a load dependency that contradicts the open-source-server audience's expectations.

Don't use the steely-slate secondary tone ({colors.ink-secondary} — #476485) for borders on interactive elements. At 27 frequency it reads as a body-text and passive-border color; interactive borders should use the near-navy {colors.ink} (#000c1a) to signal clear affordance.

Don't introduce a gradient on the mascot banner. The sky-blue tile is a flat, unadorned background. Gradients would signal a commercial redesign rather than a community announcement page.

Don't swap the near-navy ink ({colors.ink} — #000c1a) for pure black (#000000). The barely-blue shift in the near-navy is consistent across text, borders, and shadow; swapping to pure black loses the slight warmth that keeps the high-contrast white-on-near-navy from feeling clinical.

Known Gaps

• Primary CTA button: the captured render does not include a primary button outside the mascot banner; the general download-page flow exists at get.jenkins.io and is not represented here.
• Dark mode: the site has no dark-mode surface in the captured marketing pages; the Jenkins UI/UX itself ships a dark theme inside the CI/CD dashboard, not represented here.
• Plugin directory surface: the plugin.jenkins.io subdomain carries its own card layout and search interface with a distinct token set not captured here.
• Mobile navigation: the Bootstrap collapsed navbar menu pattern is not captured; the hamburger menu, off-canvas panel, and mobile nav-link spacing are inferred from Bootstrap defaults, not measured.
• Form validation states: no form submit is visible on the marketing surface; error and success states from Bootstrap's validation system are declared as custom properties but not captured in render.
• Motion: the page does not use scroll animations or transition effects on the captured surface; the Jenkins UI ships entrance animations in its dashboard that are not represented here.