What is Dagger's primary brand color?

Dagger's brand voltage is teal (#40b9bc), wired as --color-teal. It appears 3 times in the captured page, all as background fills on the illustration tiles that carry the 'Programmable' and 'Observable' feature sections. The teal is not used on buttons, links, or nav elements — the primary button is deep indigo (#131226) on parchment, not teal. Alongside teal, the system declares --color-yellow (#fcc009) and --color-orange (#ef7b1a) as additional illustration-block backgrounds; all three brand colors appear exclusively as illustration-tile fills rather than on interactive chrome. The interaction system is ink-on-parchment with no brand-color CTA.

What typefaces does Dagger use, and what should I use as substitutes?

Dagger runs two families: General Sans (wired as --font-heading: 'General Sans', sans-serif) for display headings, section labels, nav links, and card headings; Inter (wired as --font-body: 'Inter', sans-serif) for body paragraphs, small labels, and the newsletter input. General Sans is a geometric sans by Fontshare (free for personal and commercial use). The display tier at 68px / 600 uses -0.68px letter-spacing; the section label tier at 14px / 600 uses +0.56px letter-spacing and uppercase transform. For General Sans substitutes, Plus Jakarta Sans or Outfit are geometrically close; for Inter, any variable-weight grotesque will serve. Source Code Pro appears in --font-mono (wired as 'Source Code Pro', 'IBM Plex Mono', monospace) and is rendered in the code-display widget.

How does Dagger's illustration system work?

Dagger's four feature sections (Programmable, Local-first, Repeatable, Observable) each pair a text column with a large flat-color illustration tile. The illustration tiles use three background fills from the brand color set: teal (#40b9bc) for Programmable and Observable, yellow (#fcc009) for Local-first, and orange (#ef7b1a) for Repeatable. The illustrations themselves are retro-style character drawings — a computer monitor with a face, a robot figure, an astronaut, a control panel — rendered in the same bold line-weight and flat-fill style. The illustrations are the primary visual differentiator on the page; they are not tokenizable as CSS values but their background colors are captured as --color-teal, --color-yellow, and --color-orange in the CSS variable system.

Why does Dagger use a warm off-white canvas instead of pure white?

Dagger's body canvas is #f8f4ef — a warm parchment tone wired as --color-bg. The warmth indexes to the retro illustration aesthetic: flat-color character drawings in teal, yellow, and orange read as warmer objects on a warm background than on cold pure white. The parchment also differentiates the page from the cool-white or dark-canvas aesthetics of infrastructure peers like HashiCorp (white), CircleCI (dark), or GitHub Actions (dark). The difference from pure white (#ffffff) is subtle at a glance but intentional — the same warmth move that Cloudflare makes with cream (#fffbf5) over white, applied to a tool-branded context rather than an enterprise one.

What corner-radius system and spacing scale does Dagger use?

Dagger runs a clear four-step radius scale: 4px (--radius-xs) for small UI elements, 8px (--radius-sm) for buttons and inputs, 12px (--radius-md) for cards, 16px (--radius-lg) for large feature tiles, and a 999px pill (--radius-pill) for the footer community pill and any pill-shaped tag. The dominant rounding in the captured render is 16px (11 occurrences) followed by 8px (6 occurrences). The spacing system centers on generous section padding: 80px vertical section padding and 100px horizontal container padding (--container-pad: 100px) give the parchment canvas its wide, magazine-like breathing room. Interior card padding runs at 12px–24px.

Dagger Design System

Dagger's CI/CD marketing-site design system as a DESIGN.md file.

About Dagger DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source dagger.io

Backend, Database & DevOps
Developer Tools & IDEs

Dagger's marketing site opens on a parchment-colored canvas (#f8f4ef) with a 68px General Sans headline — "A better way to ship" — set in deep indigo-navy (#131226) at weight 600, -0.68px tracking. Below the hero paragraph a pair of pill CTAs sit in the same indigo at 8px radius. The page's decorative work is done entirely by large flat-color illustrations: a retro computer character on a teal tile, a robot on a yellow tile, an astronaut figure on an orange tile. These illustrations are drawn in a consistent bold-line, flat-fill style that reads closer to a 1960s technical manual than to a modern SaaS illustration library. Where most CI/CD brands (CircleCI, GitHub Actions, Jenkins) use pipeline diagram screenshots or terminal output as their visual language, Dagger uses illustrated characters as stand-ins for the system's four architectural properties: Programmable, Local-first, Repeatable, Observable.

The type system runs two families on a clear division: General Sans for every heading, label, and navigation element; Inter for every paragraph and body text surface. The split assigns the "personality" to the display family (General Sans's geometric, contemporary proportions) and the "readability" to Inter (the body workhorse). The uppercase tracked label tier — General Sans 600 at 14px, 0.56px letter-spacing, text-transform uppercase — is the system's metadata voice. Section labels like "PROGRAMMABLE" and "LOCAL-FIRST" use this tier to frame each illustration block.

The spacing is generous by dev-tools standards: 80px section padding, 100px horizontal container padding declared as --container-pad: 100px. The wide horizontal margins give the parchment canvas a magazine-like breathing room that separates Dagger from the tight, dense layouts of infrastructure tools like Terraform, Ansible, or Puppet. Built by the creators of Docker, Dagger uses visual restraint to signal that pipeline-as-code is worth designing around, not just configuring in YAML.

What makes it distinct

Parchment canvasthe body background is a warm off-white (#f8f4ef) wired as --color-bg, not pure white; the warmth ties the page to the retro illustration character
Bold illustration identityflat-color retro robot and character drawings in teal, yellow, and orange carry all decorative work on a system with no hero gradient or photography
Tight negative tracking at displayGeneral Sans 600 at 68px has -0.68px letter-spacing; the negative tracking tightens large headings without an additional weight bump
Deep indigo not true blackthe canvas ink is #131226, a near-black with a blue-purple cast, wired as --color-dark; pure black (#000000) appears only twice in the entire capture
Uppercase spaced label tierGeneral Sans 600 at 14px with 0.56px letter-spacing and text-transform uppercase creates the section label style; the only uppercase treatment in the system

Live at dagger.io

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

dagger.io

Explore Dagger

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.

Dagger design system FAQ

Common questions about Dagger'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.

Dagger — official site

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