---
version: alpha
name: Primer Developer Workflow Interface
description: "A developer-collaboration interface inspired by GitHub Primer Product UI, Primer Primitives, Octicons, and Primer accessibility guidance. It uses a light code-hosting canvas, GitHub-blue interaction accent, system typography, repository cards, issue rows, labels, code chips, branch/status metadata, visible focus states, and restrained density for pull requests, project boards, package registries, documentation, and developer operations."

colors:
  primary: "#0969da"
  primary-hover: "#0550ae"
  on-primary: "#ffffff"
  canvas: "#f6f8fa"
  surface: "#ffffff"
  surface-card: "#ffffff"
  surface-soft: "#f6f8fa"
  surface-inset: "#eef1f4"
  surface-selected: "#ddf4ff"
  ink: "#24292f"
  body: "#57606a"
  muted: "#6e7781"
  subtle: "#8c959f"
  hairline: "#d0d7de"
  hairline-strong: "#afb8c1"
  focus: "#0969da"
  success: "#1a7f37"
  success-surface: "#dafbe1"
  attention: "#bf8700"
  attention-surface: "#fff8c5"
  danger: "#cf222e"
  danger-surface: "#ffebe9"
  done: "#8250df"
  done-surface: "#fbefff"
  code-surface: "#f6f8fa"
  inverse-canvas: "#0d1117"
  inverse-surface: "#161b22"
  inverse-card: "#0d1117"
  inverse-ink: "#f0f6fc"
  inverse-body: "#c9d1d9"
  inverse-hairline: "#30363d"

typography:
  display-xl:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 48px
    fontWeight: 650
    lineHeight: 1.08
    letterSpacing: 0
  heading-lg:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 30px
    fontWeight: 650
    lineHeight: 1.18
    letterSpacing: 0
  heading-md:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 20px
    fontWeight: 650
    lineHeight: 1.28
    letterSpacing: 0
  body:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.42
    letterSpacing: 0
  caption:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 11px
    fontWeight: 650
    lineHeight: 1.32
    letterSpacing: 0
  mono:
    fontFamily: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0

rounded:
  none: 0px
  xs: 3px
  sm: 6px
  md: 6px
  lg: 8px
  xl: 12px
  pill: 9999px

spacing:
  base: 8px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  xxl: 32px
  section: 72px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 8px 14px
  button-secondary:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 8px 14px
    borderColor: "{colors.hairline}"
  repository-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 16px
    borderColor: "{colors.hairline}"
  issue-row:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.hairline}"
  label:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 2px 7px
  code-chip:
    backgroundColor: "{colors.code-surface}"
    textColor: "{colors.ink}"
    typography: "{typography.mono}"
    rounded: "{rounded.sm}"
    padding: 3px 6px

layout:
  shell: "Repository-first product shell with top navigation, scoped subnav, main issue/repo content, right-side metadata, and a compact activity timeline."
  grid: "Use a 1280px max container. Desktop commonly splits into 8/4 or 9/3 content + metadata columns. Detail pages keep rows full-width and metadata secondary."
  density: "Medium-high density. Rows and controls are compact, but focus rings, labels, comments, branch names, and status metadata must stay readable."
  interaction: "Every clickable item needs visible hover, focus-visible, selected, disabled, loading, and keyboard state. Status is conveyed by label text plus color, never color alone."

guidance:
  do:
    - "Show the real developer object first: repository, issue, pull request, check run, package, commit, branch, or project item."
    - "Use blue only for links, selected navigation, focus, and primary actions."
    - "Represent workflow state with labels, icons, text, and metadata together."
    - "Keep code, branch, commit, and command snippets in a mono token."
    - "Use tables and rows for scannable work queues instead of decorative cards."
  dont:
    - "Do not copy GitHub trademarks, Octocat, product chrome, or official repository UI wholesale."
    - "Do not turn developer workflow pages into marketing heroes."
    - "Do not hide important state inside hover-only tooltips."
    - "Do not use color as the only signal for open, merged, failed, blocked, or done."

caseStudy:
  source: "GitHub Primer, Primer Primitives, Primer Product UI, Octicons, and Primer accessibility guidance"
  urls:
    - "https://primer.style/"
    - "https://github.com/primer/primitives"
    - "https://primer.style/product/"
    - "https://primer.style/foundations/accessibility"
    - "https://primer.style/foundations/icons"
    - "https://github.com/primer/css"
  analysis: "Primer presents itself as GitHub's design system and separates Product UI, Brand UI, Octicons, accessibility, and primitives. Primer Primitives publishes color, spacing, and typography values as JSON and CSS variables under MIT for system implementation. The reusable lesson is a work-object-first interface: navigation, rows, labels, code chips, metadata, and status tokens are all designed to help developers inspect and act on repository state without decorative drift."
---

# Primer Developer Workflow Interface

Use this system for developer tools, repository browsers, pull-request review, package registries, CI dashboards, API docs, project boards, internal engineering portals, and agent workflow consoles where the product value is inspecting state and taking precise action.

The posture is practical and trustworthy. The page should feel like a workbench for technical decisions, not a launch page. The first viewport needs a real repository, issue queue, check run, or code object with visible metadata and next actions.

## Overview

Primer Developer Workflow abstracts GitHub Primer's reusable interface logic into an Interface resource. It does not reproduce GitHub's brand chrome. It captures the durable system traits: system typography, compact rows, low-radius panels, explicit labels, blue interaction semantics, mono code metadata, and accessible focus.

Use the system when the user must compare work items, trust status, navigate between technical objects, or understand what an automated agent did. Avoid it when the brief calls for emotional brand storytelling, immersive editorial layout, or expressive consumer visuals.

## Colors

### Brand & Accent

Use `primary` #0969da as the single interaction accent. It is allowed for links, selected navigation, focus-visible outlines, primary actions, and selected branch/filter states. It is not a background decoration color.

### Surface

Use `canvas` #f6f8fa for application background, `surface-card` #ffffff for cards and rows, `surface-soft` #f6f8fa for secondary cells, and `surface-inset` #eef1f4 for nested code or preview regions. The system relies on borders and row grouping more than shadows.

### Text

Use `ink` #24292f for titles and important row labels, `body` #57606a for normal copy, `muted` #6e7781 for timestamps and helper text, and `subtle` #8c959f for tertiary metadata. Preserve readable contrast at 12px.

### Hairlines & Borders

Use `hairline` #d0d7de for row boundaries, cards, inputs, and separators. Use `hairline-strong` #afb8c1 for selected row boundaries or high-importance inputs. Avoid soft floating cards; the system's depth comes from hierarchy, not material elevation.

### Semantic

Use `success`, `attention`, `danger`, and `done` only for workflow state. Always pair them with explicit text such as Open, Review required, Failing, Merged, or Done. Never encode status by color alone.

## Typography

### Font Family

Use system sans for product UI. Use `ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace` for branch names, commit SHAs, package versions, commands, and code snippets.

### Hierarchy

Display headlines stay useful and restrained at 48px/1.08 for page-level summaries. Most product surfaces should rely on 20px and 14px text, because developer workflow pages need scannability more than drama.

### Principles

Use sentence case for labels and buttons. Keep metadata short. Use tabular or mono presentation for identifiers. Do not apply negative tracking or ultra-light display type.

### Note on Font Substitutes

If a platform provides a native GitHub-like font stack, use it through `system-ui`. Do not import or depend on proprietary brand assets to achieve the feel.

## Layout

### Spacing System

Use an 8px base with 4px micro-adjustments inside labels and chips. Rows commonly use 12px vertical padding; cards use 16px; major sections use 24px to 32px.

### Grid & Container

Use a maximum container around 1280px. Repository and issue pages work best with an 8/4 or 9/3 split: main work object left, metadata and actions right. Queues and tables should keep full-width row rhythm.

### Whitespace Philosophy

Whitespace is functional, not luxurious. Leave enough room for focus rings, labels, timestamps, and status text. Do not create oversized hero gaps that push the work object below the fold.

## Elevation & Depth

Depth is made from hairlines, grouped rows, selected backgrounds, and inset code regions. Use box-shadow rarely, only for menus, popovers, and command palettes that must float above the work surface.

## Shapes

Use small radii: 6px for buttons, inputs, and cards; 9999px for labels; 0px for row joins. Do not use oversized rounded cards or pill-heavy marketing sections.

## Components

### Buttons

Primary buttons are blue with white text. Secondary buttons are white with a hairline border. Dangerous actions should remain explicit and separate, not just red text in a normal button row.

### Cards & Containers

Repository cards show title, description, language/status, stars or activity, and last update. They should be compact and comparable. Avoid decorative image cards.

### Inputs & Forms

Inputs use white surfaces, 6px radius, hairline borders, and visible focus. Search boxes should show scope, such as "Search issues" or "Filter pull requests".

### Navigation

Use a top product nav plus scoped tabs for repository or project sections. The selected tab uses text weight, underline or blue, and `aria-current` equivalent in implementation.

### Signature Components

Use issue rows, PR status labels, check-run summaries, file diff headers, code chips, branch selectors, and activity timeline items. Each signature component must expose object type, state, owner, timestamp, and next action.

## Do's and Don'ts

Do show the work object first. Do include labels, status, and metadata. Do keep code identifiers in mono. Do provide keyboard paths and visible focus.

Don't copy GitHub trademarks or product chrome. Don't use hover-only state. Don't make every surface a card. Don't use blue as decorative glow. Don't put marketing art where users need a queue, diff, or status table.

## Responsive Behavior

### Breakpoints

At 1024px, collapse side metadata below the main work object. At 720px, turn scoped tabs into a horizontally scrollable tab row. At small mobile widths, rows become stacked summaries with owner/status/timestamp on separate lines.

### Touch Targets

Interactive controls should be at least 36px high on desktop and 44px high on touch-first mobile. Labels and code chips are not standalone targets unless they meet target size.

### Collapsing Strategy

Keep object title, state, owner, and next action visible before secondary metrics. Long branch names and SHAs may truncate only when the full value is copyable or available in a detail view.

### Image Behavior

Use no stock imagery. If avatars or icons are needed, they must be supportive metadata and have text alternatives.

## Iteration Guide

1. Identify the work object and state model.
2. Define which states need semantic labels.
3. Map blue to links, selected, focus, and primary action only.
4. Create row, card, label, code chip, and timeline variants.
5. Test keyboard navigation, focus order, and status readability.
6. Add empty, loading, permission, conflict, and error states before visual polish.

## Known Gaps

This resource is a reusable abstraction, not a GitHub clone. GitHub trademarks, Octocat, exact product chrome, official icons, and brand assets need separate permission and should not be copied into unrelated products. Primer tokens and components may change, so production systems should check the current official package and documentation before implementation.