---
version: alpha
name: Atlassian Team Ops Interface
description: "A team collaboration and work-management interface inspired by current Atlassian Design System foundations. It uses a neutral app canvas, restrained blue primary actions, semantic status roles, compact 8px spacing, accessible typography, side navigation, task cards, tables, lozenges, flags, and predictable workflow surfaces for teams planning, tracking, and resolving work."

colors:
  primary: "#1868db"
  primary-hover: "#1558bc"
  on-primary: "#ffffff"
  link: "#1868db"
  canvas: "#f7f8f9"
  surface: "#ffffff"
  surface-card: "#ffffff"
  surface-soft: "#f1f2f4"
  surface-sunken: "#f4f5f7"
  surface-selected: "#e9f2ff"
  ink: "#292a2e"
  body: "#44546f"
  muted: "#626f86"
  subtle: "#8590a2"
  hairline: "#dcdfe4"
  hairline-strong: "#b6c2cf"
  success: "#216e4e"
  success-surface: "#dcfff1"
  warning: "#9e4c00"
  warning-surface: "#fff7d6"
  danger: "#ae2e24"
  danger-surface: "#ffedeb"
  discovery: "#803fa5"
  discovery-surface: "#f3e5f5"
  information: "#1558bc"
  information-surface: "#e9f2ff"
  inverse-canvas: "#1d2125"
  inverse-surface: "#22272b"
  inverse-ink: "#f7f8f9"

typography:
  display-xl:
    fontFamily: "Atlassian Sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 48px
    fontWeight: 653
    lineHeight: 1.08
    letterSpacing: 0
  heading-lg:
    fontFamily: "Atlassian Sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 28px
    fontWeight: 653
    lineHeight: 1.16
    letterSpacing: 0
  heading-md:
    fontFamily: "Atlassian Sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 20px
    fontWeight: 653
    lineHeight: 1.2
    letterSpacing: 0
  heading-sm:
    fontFamily: "Atlassian Sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 16px
    fontWeight: 653
    lineHeight: 1.25
    letterSpacing: 0
  body:
    fontFamily: "Atlassian Sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
  body-lg:
    fontFamily: "Atlassian Sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "Atlassian Sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0
  caption:
    fontFamily: "Atlassian Sans, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 11px
    fontWeight: 653
    lineHeight: 1.3
    letterSpacing: 0
  mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0

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

spacing:
  base: 8px
  none: 0px
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  xxl: 32px
  section: 64px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  button-neutral:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  side-nav-item:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 10px
  task-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 12px
    borderColor: "{colors.hairline}"
  table-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.body}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 12px
    borderColor: "{colors.hairline}"
  lozenge-success:
    backgroundColor: "{colors.success-surface}"
    textColor: "{colors.success}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 2px 6px
  lozenge-warning:
    backgroundColor: "{colors.warning-surface}"
    textColor: "{colors.warning}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 2px 6px
  flag-info:
    backgroundColor: "{colors.information-surface}"
    textColor: "{colors.information}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 12px 14px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 10px
    borderColor: "{colors.hairline-strong}"

layout:
  shell: "Persistent app chrome with top navigation, collapsible side navigation, and a main work surface."
  grid: "8px base spacing. Work pages use a 12-column responsive grid; boards use stable equal-width columns; details use a two-column content plus activity layout."
  density: "Medium to high density. Most controls are 32px to 40px high, with whitespace used to separate tasks, not to create marketing drama."
  interaction: "Hover, selected, pressed, focus, disabled, and drag states need explicit tokens. Color role and status wording must match."

guidance:
  do:
    - "Start with the team's work object: issue, task, project, sprint, goal, incident, request, or decision."
    - "Use blue only for brand-level primary action, selected state, links, and information."
    - "Use lozenges for quick status recognition, not as decorative tags."
    - "Keep side navigation and page actions predictable across pages."
    - "Use flags, section messages, and inline validation when a workflow changes state."
  dont:
    - "Do not use saturated accent colors for semantic status without a matching role."
    - "Do not copy Atlassian product names, marks, logos, illustrations, or proprietary Jira screen layouts."
    - "Do not make a marketing hero the first viewport of a work-management app."
    - "Do not rely on color alone for priority, status, or ownership."

caseStudy:
  source: "Atlassian Design System foundations and components"
  urls:
    - "https://atlassian.design/"
    - "https://atlassian.design/foundations/color"
    - "https://atlassian.design/foundations/spacing"
    - "https://atlassian.design/foundations/typography/applying-typography"
    - "https://atlassian.design/components"
    - "https://atlassian.design/components/lozenge"
    - "https://atlassian.design/components/navigation-system"
  analysis: "The current Atlassian Design System frames team software as tokenized product experience: foundations define color, spacing, typography, motion, iconography, elevation, border, and radius; components solve specific interaction needs; color roles distinguish neutral, brand, information, success, warning, danger, discovery, accent, inverse, and input; typography guidance emphasizes accessible hierarchy and body text inside components; spacing builds from an 8px base; lozenges provide quick status recognition; navigation organizes app work. This resource abstracts those rules into a reusable Team Ops Interface for non-Atlassian products."
---

# Atlassian Team Ops Interface

Use this system for team collaboration products, issue tracking, project planning, request queues, incident coordination, roadmap triage, approval flows, and internal work-management dashboards.

The interface should feel like a reliable team workspace: neutral, legible, responsive to state, and optimized for scanning work. The value comes from status clarity, predictable navigation, recoverable forms, and compact workflow surfaces.

## Overview

Atlassian Team Ops is a practical product interface for teams coordinating many moving pieces. It treats the work item as the atomic object and organizes pages around backlog, board, list, detail, activity, and decision states.

The first viewport should show real work objects: a queue, board, issue detail, release plan, incident timeline, approval list, or goal tracker. Do not begin with an oversized brand hero. A user should immediately know what changed, what is blocked, who owns it, and what action is available.

## Colors

### Brand & Accent

Blue is the primary interaction color. Use `primary` (#1868db) for the most important action, selected navigation, active tabs, links, and information roles. Use `primary-hover` (#1558bc) for pressed or hovered primary actions. Blue should not be reused for success, warning, danger, or discovery.

### Surface

The default canvas is a soft app gray (`canvas` #f7f8f9). Cards and lists use white (`surface-card` #ffffff). Inset surfaces use `surface-soft` or `surface-sunken` for side navigation, board columns, quiet empty states, and filter rows.

### Text

Use `ink` (#292a2e) for headings and important labels. Use `body` (#44546f) for normal content. Use `muted` (#626f86) and `subtle` (#8590a2) for metadata, placeholders, timestamps, and helper copy. Avoid low-contrast gray on gray combinations.

### Hairlines & Borders

Use `hairline` (#dcdfe4) for card boundaries, row dividers, and input outlines. Use `hairline-strong` (#b6c2cf) when a control boundary must remain visible at small sizes.

### Semantic

Use semantic roles consistently:

- Success: completed, merged, healthy, available.
- Warning: at risk, needs attention, due soon.
- Danger: failed, blocked, destructive, overdue.
- Discovery: new, beta, insight, recommendation.
- Information: in progress, informational, selected system context.

Do not use accent colors when the meaning is semantic. Pair every status color with text, icon, or label.

## Typography

### Font Family

Use Atlassian Sans when available. Otherwise use Inter, system UI, and platform sans-serif fallbacks. Do not depend on proprietary font availability; the fallback must preserve medium density, open counters, and readable 14px body text.

### Hierarchy

The largest display token is intentionally modest at 48px. Team products need clear page titles and work object labels more than expressive hero typography. Use 28px for page titles, 20px for section headings, 16px for card headings, 14px for product copy, and 12px or 11px for metadata.

### Principles

Use body typography inside buttons, inputs, menus, lozenges, and table cells. Use headings only for structural titles. Avoid tiny dense copy below 12px, except for compact metadata with redundant context.

### Note on Font Substitutes

If Atlassian Sans is not available, Inter or system UI is acceptable. Keep font weight near 400 for body and 600-653 for headings. Letter spacing should remain 0.

## Layout

### Spacing System

Use an 8px base unit. Small UI details can use 2px and 4px increments. Common gaps are 8px, 12px, 16px, 24px, 32px, and 64px. Avoid arbitrary spacing because work-management layouts rely on repeated rhythm.

### Grid & Container

Use app-shell layouts: top navigation, side navigation, and a primary work surface. Boards use stable columns with equal widths. Lists use full-width rows. Detail pages use a main content column and a secondary activity or metadata rail.

### Whitespace Philosophy

Whitespace separates groups of work and reduces scanning cost. It should not be inflated into a marketing composition. Use compact pages with enough breathing room for repeated daily use.

## Elevation & Depth

Depth is quiet. Most surfaces use hairlines and subtle surface changes instead of large shadows. Reserve elevation for menus, dropdowns, modals, drawers, tooltips, and drag previews. A dragged work card can use a clearer shadow and slight lift, but the rest of the board should remain flat.

## Shapes

Use low radii: 4px for buttons and nav items, 6px for inputs, 8px for cards and flags, and pill radius only for avatars or tightly scoped count badges. Do not make the product feel bubbly; this system is friendly but operational.

## Components

### Buttons

Primary buttons trigger the main next action: create issue, start sprint, assign owner, resolve incident, approve request. Neutral buttons support filtering, sorting, editing, or secondary actions. Destructive actions need danger styling and confirmation.

### Cards & Containers

Task cards must include a title, key metadata, status or priority, owner, and one clear next action or affordance. Board columns should show counts and a stable drop zone. Use dividers instead of heavy card nesting.

### Inputs & Forms

Forms should be inline, recoverable, and explicit. Labels stay visible. Validation appears near the field and can be summarized in a flag or section message for longer forms. Focus states must be clearly visible and not rely on subtle color shifts alone.

### Navigation

Use consistent top navigation for workspace-level actions and side navigation for product areas. Selected navigation uses blue or selected surfaces. Keep page actions near the page title or primary work object.

### Signature Components

Lozenges communicate status at a glance. Flags communicate workflow outcomes or cross-page events. Tables support dense comparison and triage. Activity streams explain what changed, who did it, and when.

## Do's and Don'ts

Do:

- Build from real work objects and states.
- Use semantic roles for status, priority, and destructive action.
- Keep 14px body text readable and 8px spacing consistent.
- Show owner, due state, priority, and next action close to each work item.
- Provide keyboard focus, selected, hover, pressed, loading, disabled, and drag states.

Don't:

- Do not copy Atlassian logos, product names, illustrations, or proprietary app screens.
- Do not use blue for every interactive element if a semantic role is needed.
- Do not hide status in hover-only tooltips.
- Do not create nested card stacks inside cards.
- Do not turn operational software into a decorative landing page.

## Responsive Behavior

### Breakpoints

Use one-column layouts below 720px. Collapse the side navigation into a drawer or compact rail. Keep page title, primary action, and current object visible at the top.

### Touch Targets

Interactive controls should be at least 40px tall on touch screens. Compact 32px controls are acceptable on desktop tables and boards only when keyboard and pointer states are clear.

### Collapsing Strategy

Boards become horizontally scrollable or switch to grouped lists. Detail pages stack the activity rail below the main content. Filter bars wrap into compact chips and menu buttons.

### Image Behavior

This system should mostly use product UI, icons, avatars, and workflow diagrams. Avoid decorative photography. If screenshots appear, crop them to reveal actual work state and labels.

## Iteration Guide

1. Name the work object and its states before designing the page.
2. Build the shell: top navigation, side navigation, page title, primary action, and work surface.
3. Create the status matrix with semantic colors, lozenge text, and non-color cues.
4. Design the list, board, or detail surface that users will scan repeatedly.
5. Add hover, selected, focus, pressed, loading, disabled, empty, and error states.
6. Validate mobile collapse and keyboard navigation before adding visual polish.

## Known Gaps

- Exact Atlassian Sans and Charlie Display licensing is not bundled; use fallbacks unless licensed.
- This resource abstracts current public Atlassian Design System guidance and does not include private product-specific design decisions.
- Dark mode tokens are approximated for Interface previews and should be checked against final product theme tokens.
- It does not include Atlassian logos, Jira layouts, product illustrations, or proprietary screen patterns.