Dagger Design System

Overview

Dagger's marketing site is the most illustration-driven system in the CI/CD directory. Characters over Chrome. Where CircleCI uses pipeline diagrams, GitHub Actions uses code screenshots, and Jenkins uses configuration YAML samples, Dagger assigns each of its four architectural properties (Programmable, Local-first, Repeatable, Observable) a large flat-color illustration tile with a retro character — a monitor with a face, a robot, an astronaut, a control panel. The illustrations are the primary differentiator on the page; the color palette, typography, and spacing serve them rather than the other way around.

The warm parchment canvas ({colors.canvas} — #f8f4ef) is the ground for this illustration world. Against a cold white or dark canvas the retro character drawings would read as vintage pastiche; against warm parchment they read as a considered choice — the visual language of technical zines and software manuals from an era before SaaS dashboards. General Sans at weight 600 with tight negative tracking drives every heading (68px hero, 44px section heads, 24px card titles); Inter at weight 400 carries every paragraph. The split is cleaner than most two-family systems: if a word appears in a heading or label, it's General Sans; if it's in a paragraph, it's Inter. No exceptions visible in the captured page.

Key Characteristics:

• Parchment canvas (#f8f4ef) as the body floor — not pure white; warmth indexed to the retro illustration character.
• Deep indigo-navy ink (#131226) — not pure black; a blue-purple cast wired as --color-dark.
• Three illustration-tile accent colors: teal (#40b9bc), yellow (#fcc009), orange (#ef7b1a) — used only as illustration backgrounds, never on interactive chrome.
• General Sans 600 with negative tracking across all heading tiers; Inter 400 for all body copy.
• Uppercase tracked label tier (General Sans 600 / 14px / +0.56px / uppercase) for architectural section labels.
• 16px dominant card radius, 8px on buttons and inputs, 999px pill for community tags.
• Generous 80px section padding, 100px horizontal container margins — the widest horizontal breathing room in the dev-tools category.
• Source Code Pro for inline code displays.

Colors

Surface

• Canvas ({colors.canvas} — #f8f4ef): frequency 1 (bg). The parchment body floor. Wired as --color-bg. Not pure white — the warmth reads alongside the retro illustration tiles.
• Surface-1 ({colors.surface-1} — #ffffff): frequency 23. Card backgrounds, input fields, code block fills, and the footer-contrasted card surfaces. Wired as --color-card.
• Ink ({colors.ink} — #131226): frequency 242. Used as text (121), border (117), background (4). Deep indigo-navy, the dominant text and primary-button fill. Wired as --color-dark.
• Ink Alt ({colors.ink-alt} — #191922): frequency 6. Slightly lighter indigo for secondary dark surfaces. Wired as --color-dark-alt.

Hairlines

• Hairline ({colors.hairline} — #ede8fa): frequency 118. Used as text (58), border (59), bg (1). A pale lavender-white that serves as both the card border tone and a secondary text color for muted labels. Wired as --color-border. The lavender tint is subtle but distinguishes this hairline from neutral gray — it carries the blue-purple cast of the ink color into the border system.

Brand Accents (illustration-only)

• Accent Teal ({colors.accent-teal} — #40b9bc): frequency 3 (bg only). Illustration tile background for Programmable and Observable sections. Wired as --color-teal.
• Accent Yellow ({colors.accent-yellow} — #fcc009): frequency 1 (bg only). Illustration tile background for Local-first section. Wired as --color-yellow.
• Accent Orange ({colors.accent-orange} — #ef7b1a): frequency 1 (bg only). Illustration tile background for Repeatable section. Wired as --color-orange.
• Accent Blue ({colors.accent-blue} — #3d66ff): declared as --color-blue. Zero renders in the captured page — declared for the product surface or future use.

Typography

Font Families

The system runs two families on a strict semantic split. General Sans (wired as --font-heading: "General Sans", sans-serif) handles display, heading, label, and nav tiers. Inter (wired as --font-body: "Inter", sans-serif) handles body paragraphs and input field text. Source Code Pro (wired as --font-mono: "Source Code Pro", "IBM Plex Mono", monospace) appears in the embedded code example in the hero.

The split discipline is notable: there are no crossover uses in the captured render. Every heading token is General Sans; every paragraph token is Inter. The code voice is Source Code Pro at weight 500 and 20px.

Hierarchy

Principles

The negative tracking convention is systematic: at every display and large heading size, the letter-spacing tracks tighter in proportion to the font size. 68px heading tracks at -0.68px (approximately -0.01em), 56px at -0.56px, 44px at -0.44px, 24px at -0.24px. This is a mechanically consistent negative tracking applied as a rule rather than by optical judgment — and it reads as tighter, more confident than many heading systems that only track at the largest display size.

The uppercase label tier (+0.56px) is the system's opposite move: where headings track tight, section labels track open. The label/heading contrast — loose-spaced uppercase at 14px vs. tight-spaced uppercase at 44–68px — is the typographic signature that lets a reader scan from a section label to its heading and feel the weight shift.

Note on Font Substitutes

General Sans is available free from Fontshare. The closest freely-licensed substitute is Plus Jakarta Sans (similar geometric proportions) or Outfit (similar cap-height and optical weight at 600). For Inter, any instance of Inter is already freely available from Google Fonts or rsms.me. Source Code Pro is available from Adobe Fonts and Google Fonts.

Layout

Spacing System

• Base unit: 4px.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.2xl} 32px · {spacing.3xl} 40px · {spacing.section} 80px.
• Section vertical padding: 80px — the most common major vertical rhythm value.
• Container horizontal padding: 100px (--container-pad: 100px) — unusually wide margins that give the parchment canvas significant breathing room.
• Illustration tile padding: 48px vertical, 80px horizontal.

Grid & Container

• Max content width: 1440px (--container-max: 1440px).
• Hero: centered headline + sub-copy + dual CTA cluster + trusted-by logo strip. Wide single-column centered layout.
• Feature sections: 2-column alternating split — text column left / illustration tile right, then text right / tile left, alternating down the page.
• Community section: 3-column card grid (GitHub card, Discord card, Slack card) at the bottom.
• Footer: full-width dark indigo (#131226) band with the Dagger wordmark and links.

Rhythm

The page's vertical rhythm is defined by the 80px section padding and the alternating left/right feature layout. Each feature pairing (text + illustration tile) is a self-contained composition rather than a list item in a grid. The wide 100px horizontal margins on a 1440px max-width container create a usable content column of ~1240px, wide enough to carry the large illustration tiles without feeling compressed.

Elevation

The system uses minimal shadow:

• Flat (no shadow): hero, feature sections, community band, footer.
• Hairline cards: {colors.hairline} (#ede8fa) 1px border on white {colors.surface-1} cards provides the only card separation signal.
• Input elevation: the newsletter input ({component.text-input}) uses a 1px {colors.hairline} border with no shadow.

No box-shadow values were captured from the rendered page; elevation is entirely border-based.

Shapes

The radius scale is stepped-soft:

• {rounded.none} 0px — editorial bands and the footer.
• {rounded.xs} 4px — smallest UI chips and tag corners.
• {rounded.sm} 8px — primary button, secondary button, newsletter input, code block. The interactive-element default.
• {rounded.md} 12px — mid-size cards.
• {rounded.lg} 16px — dominant card radius. Feature tiles, illustration containers. 11 occurrences in the captured render, the most of any radius value.
• {rounded.pill} 999px — community section tags and any fully-rounded pill element.

The system skips the 20–24px tier that some consumer-brand systems use. The jump from 16px card to 999px pill is binary at the large end — either a generously-rounded card or a full pill, nothing in between.

Components

button-primary — Deep indigo {colors.ink} fill, white text, {rounded.sm} 8px, 8×20px padding, 40px height. "Quickstart" is the canonical hero instance; wired with General Sans {typography.nav-link} (17px / 500).

button-secondary — Transparent fill, indigo {colors.ink} text, 1px {colors.hairline} lavender border, same 8px radius and sizing. Used for the "Playground" secondary CTA beside the hero primary.

top-nav — Transparent background against the parchment canvas, 64px height, 0×100px padding. Dagger wordmark left, nav links (Docs / Blog / Pricing / Changelog) center, GitHub icon + "Try Dagger Cloud" CTA right.

nav-link — Transparent background, deep indigo {colors.ink} text, General Sans {typography.nav-link} (17px / 500), 25px height, no padding.

hero-heading — Indigo {colors.ink} text, {typography.display-xl} (68px / 600 / -0.68px tracking), no padding. The largest typographic element in the system.

section-heading — Indigo {colors.ink} text, {typography.display-md} (44px / 600 / -0.44px). Section h2 for each architectural property.

section-label — Indigo {colors.ink} text, {typography.label-upper} (14px / 600 / +0.56px / uppercase). The section metadata label above each heading ("PROGRAMMABLE", "LOCAL-FIRST").

body-paragraph — Indigo {colors.ink} text, Inter {typography.body-lg} (20px / 400). Hero sub-copy and section lead paragraphs.

card — White {colors.surface-1} fill, 1px {colors.hairline} border, {rounded.lg} 16px, 24px padding. Community section cards (GitHub, Discord, Slack).

illustration-tile-teal — Teal {colors.accent-teal} fill, white text, {rounded.lg} 16px radius, 48×80px padding. The Programmable and Observable illustration containers.

illustration-tile-yellow — Yellow {colors.accent-yellow} fill, indigo text, same 16px radius and 48×80px padding. The Local-first illustration container.

illustration-tile-orange — Orange {colors.accent-orange} fill, indigo text, same radius and padding. The Repeatable illustration container.

text-input — White {colors.surface-1} fill, indigo text, Inter {typography.body-md}, {rounded.sm} 8px, 12×16px padding, 46px height, 1px {colors.hairline} border. Newsletter email field.

code-block — White {colors.surface-1} fill, indigo text, Source Code Pro {typography.mono-md}, {rounded.sm} 8px, 16px padding, 1px {colors.hairline} border. Hero code-display widget.

community-section — Parchment {colors.canvas} surface, indigo text, 80px vertical / 100px horizontal padding. The community-join band above the footer.

footer — Deep indigo {colors.ink} fill, white text, Inter {typography.body-sm}, 24×100px padding. Full-width dark footer with wordmark and navigation links.

Do's and Don'ts

Do use the three illustration-tile accent colors ({colors.accent-teal}, {colors.accent-yellow}, {colors.accent-orange}) exclusively as illustration-block backgrounds. In the captured system these colors appear zero times on buttons, links, nav, or text — they are illustration-plane colors, not interactive-chrome colors.

Do apply General Sans {typography.label-upper} (14px / 600 / uppercase / +0.56px) as the section label tier above every heading. The tracked uppercase label is the system's metadata voice; removing it or replacing it with a body-weight label loses the heading/label contrast that gives the layout its scan structure.

Do maintain the negative-tracking convention across all General Sans heading sizes: -0.01em at each size point. The mechanical -0.68px at 68px, -0.44px at 44px pattern is systematic; applying tracking only at the largest heading size is a common shortcut that breaks the internal consistency.

Do preserve the parchment canvas ({colors.canvas} — #f8f4ef) as the body floor rather than substituting pure white. The warmth is integral to the illustration-character identity; cold white makes the retro drawings read as clip art rather than intentional character.

Don't use the accent colors ({colors.accent-teal}, {colors.accent-yellow}, {colors.accent-orange}) on buttons, links, or nav elements. The primary button is deep indigo on parchment; colored buttons would confuse the illustration-as-accent system.

Don't use General Sans for body paragraphs or Inter for headings. The two-family split is strict and consistent across the captured page; mixing the roles destroys the "personality vs. readability" division.

Don't reduce the 100px horizontal container padding to match a tighter dev-tools convention. The generous horizontal margins are the system's primary differentiator from dense infrastructure tool sites; compressing to 32px or 48px sides would lose the magazine breathing room.

Don't add drop shadows to cards or buttons. The system is elevation-flat; the {colors.hairline} lavender-white border is the only card separation signal. Shadows would break the editorial flatness and conflict with the illustration-forward aesthetic.

Known Gaps

• Illustration assets: the retro character illustrations (robot, computer face, astronaut, control panel) are the system's primary visual identity and are not captured as tokens. They are SVG or PNG assets loaded as img or background-image values; this DESIGN.md cannot reproduce them from hex values alone.
• Hover and focus states: the captured render is static; the full interactive state matrix (button hover, link focus, input focus ring) is not observable. The declared accent-blue (--color-blue) is the likely focus-ring color based on its CSS variable role, but no focus states are visible in the static capture.
• Dark mode: no dark mode is declared or observed on the marketing site. The footer uses the deep indigo as a localized dark surface but there is no global dark-mode token set.
• Motion: the marketing site likely uses entrance animations on the illustration tiles (scroll-triggered reveal), but the easing curves and timing are not captured.
• Dagger Cloud product surface: the dagger.io marketing site captures the product-landing surface only. The Dagger Cloud console (pipeline visualization, agent traces) would carry a richer token set with chart colors, status indicators, and pipeline-edge colors.
• Mobile breakpoints: the 100px horizontal container padding likely collapses at mobile widths, but the breakpoint-specific layout is not captured in the static render.