Jira DESIGN.md

1. Visual Theme & Atmosphere

Jira's iOS app is a work-tracking instrument — dense, structured, and deliberately utilitarian. Where consumer apps chase delight, Jira chases legibility under load: a single sprint board can hold dozens of issue cards across five columns, each card carrying an issue type, key, summary, labels, story points, and an assignee avatar. The design system exists to make that density scannable. The atmosphere is "clean engineering tool" — Atlassian's neutral grays, generous internal padding, hairline dividers, and exactly one saturated brand color (Jira Blue #0052CC) used sparingly so it always means "primary action."

The signature surface is the board — horizontally-scrolling status columns (To Do, In Progress, In Review, Done) each containing a vertical stack of issue cards. The issue card is Jira's atomic unit: an 8pt-radius rounded rectangle on a lifted surface, with a one-to-two-line summary in 15pt medium, a row of colored label chips, and a footer row pairing the issue-type icon + issue key (e.g. MOB-388) on the left with story points and a circular assignee avatar on the right. Tapping a card pushes the issue detail — a full scrollable record with a status lozenge dropdown, fields panel (Assignee, Priority, Sprint, Story points), description, and an activity/comment timeline. Board ⇄ issue detail is the loop the entire app orbits.

The color system is semantic, not decorative. Atlassian's design language assigns meaning to color: blue = information / primary, green = success / done, yellow = warning / in-progress-attention, red = blocked / error, purple = epics, plus a neutral gray ramp for everything structural. These appear as status lozenges (small uppercase rounded chips: TO DO, IN PROGRESS, DONE, BLOCKED), issue-type icons (green square = Story, red circle = Bug, blue check = Task, purple lightning = Epic), and label chips on cards. The brand blue is reserved for the Create button, links, selected tabs, and primary CTAs — it is never used as a background fill for content.

Typography is Atlassian Sans (Atlassian's 2023 proprietary humanist sans; falls back to SF Pro on iOS, with Inter as the closest free analog). Hierarchy is product-UI, not editorial: screen titles at 28-32pt bold, section/board titles at 20-22pt bold, issue summaries at 15-16pt medium, metadata at 12-14pt regular, and the distinctive 11-12pt uppercase letter-spaced labels used for column headers and field names. Numerals are tabular so story-point totals and counts align in columns.

Key Characteristics:

• Neutral-gray system — Jira Blue (#0052CC) is the only saturated brand color, used only for primary actions
• Board + issue card as the atomic surface — horizontal status columns of vertical card stacks
• Issue card: issue-type icon + key + summary + label chips + story points + assignee avatar
• Status lozenges — small uppercase rounded chips with semantic color (blue / green / red / yellow / neutral)
• Issue-type iconography — green square Story, red circle Bug, blue check Task, purple lightning Epic, gray Sub-task
• Light mode is near-white (#FFFFFF / #F7F8F9); dark mode is Atlassian neutral charcoal (#1D2125), never true black
• Warm-neutral ink #172B4D for primary text on light — Atlassian's signature "Navy/ink"
• Uppercase letter-spaced micro-labels (11-12pt) for column headers and field names
• Field-panel + activity-timeline issue detail — status dropdown, assignee, priority, comments
• Backlog list view — sprint sections with collapsible groups and inline issue rows
• Minimal chrome: bottom tab bar (Boards / Backlog / Search / Notifications / You), top breadcrumb + filter row

2. Color Palette & Roles

Primary (Interactive)

• Jira Blue (#0052CC): Primary brand & action color — Create button, primary CTA fill, selected states, links (light mode).
• Jira Blue Bold (#1868DB): Brighter interactive blue used on dark surfaces — links, active tab, focus ring.
• Jira Blue Pressed (#09326C): Pressed state of primary buttons.
• Link Blue (light) (#0C66E4): Inline hyperlinks and tappable text in light mode.

Canvas & Surfaces (Light Mode)

• Canvas White (#FFFFFF): Primary light canvas — issue detail, modals.
• Surface Sunken (#F7F8F9): Board background, list background — subtle gray behind cards.
• Surface Raised (#FFFFFF): Issue cards (white on sunken gray, lifted by 1px border + soft shadow).
• Surface Hover (#F1F2F4): Pressed/selected rows and hovered cards.
• Divider (#091E4224): Hairline dividers between rows, fields, and sections (≈14% navy).
• Border (#091E420F): Card and input borders (≈6% navy).

Canvas & Surfaces (Dark Mode)

• Dark Canvas (#1D2125): Primary dark canvas — Atlassian neutral, NOT pure black.
• Dark Surface 1 (#22272B): Issue cards, raised surfaces.
• Dark Surface 2 (#2C333A): Columns, input fields, hovered rows.
• Dark Surface 3 (#38414A): Pressed states, neutral lozenge fill.
• Dark Divider (#38414A): Hairline dividers between rows and sections.

Text

• Text Primary Light (#172B4D): Primary body text — Atlassian Navy ("ink"), NOT pure black.
• Text Subtle Light (#44546F): Secondary text, field labels, metadata.
• Text Subtlest Light (#626F86): Placeholder, timestamps, low-emphasis.
• Text Disabled Light (#091E424F): Disabled labels.
• Text Primary Dark (#C7D1DB): Primary body on dark.
• Text Subtle Dark (#9FADBC): Secondary text on dark.
• Text Subtlest Dark (#738496): Placeholder/timestamps on dark.

Semantic / Status

Issue-Type Accent Colors

• Story Green (#1F845A icon on #FFFFFF square): Stories.
• Bug Red (#C9372C): Bugs.
• Task Blue (#1868DB): Tasks.
• Epic Purple (#8270DB / #6E5DC6): Epics.
• Sub-task Blue-Gray (#5E6C84): Sub-tasks.

Label / Avatar Palette

Avatars and labels rotate through Atlassian's accent set: Purple #5E4DB2, Teal #1D7F8C, Magenta #943D73, Orange #A54800, Lime #4C6B1F, Blue #0C66E4.

Accent Functional

• Sprint Active (#0052CC): Active sprint pill.
• Story-Point Badge (#DDE1E6 light / #2C333A dark): Rounded point counter.
• Flag/Blocker Stripe (#E2483D): Left edge stripe on flagged cards.

3. Typography Rules

Font Family

• Primary: Atlassian Sans (Atlassian, 2023) — humanist sans engineered for product UI density and tabular numerals.
• Mono: Atlassian Mono — used in code blocks and inline code within descriptions/comments.
• iOS Fallback: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display'
• Closest Free Analog: Inter (by Rasmus Andersson, SIL OFL) — geometric humanist with tabular figures and excellent small-size hinting.
• Fallback Stack: 'Atlassian Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif

Hierarchy

Principles

• Tabular numerals everywhere: story points, counts, issue keys, and totals must align — enable font-variant-numeric: tabular-nums.
• Uppercase micro-labels are structural: 11-12pt uppercase with +0.4-0.6pt tracking signals "this is a field/column/status", not content.
• Weight ladder 400 / 500 / 600 / 700: regular body, medium card summaries, semibold subsection/field labels, bold titles & lozenges. No thin, no black.
• 2-line clamp on card summaries: never let a card grow unbounded — truncate at 2 lines with ellipsis.
• Dynamic Type on content, fixed on chrome: titles, body, descriptions scale; lozenges, issue keys, column headers, tab labels stay fixed (column layout is width-sensitive).

4. Component Stylings

Buttons

Primary Button (Create / Save / primary CTA)

• Shape: Rounded rectangle, 6pt corner radius (Atlassian uses 3pt for compact, 6pt for prominent — prefer 6pt on mobile touch)
• Background: #0052CC light / #1868DB dark
• Text: #FFFFFF, Atlassian Sans 15pt weight 600
• Padding: 12pt vertical, 24pt horizontal
• Pressed: background #09326C light / #0C66E4 dark + 0.98 scale
• Disabled: background #091E420F / text #091E424F

Subtle Button (Assign to me / secondary)

• Background: #091E420F light / #2C333A dark (subtle neutral)
• Text: #172B4D light / #C7D1DB dark, weight 500, 14pt
• Padding: 10pt vertical, 18pt horizontal, 6pt radius
• Pressed: background #091E4224 / #38414A

Outline / Default Button (Add child)

• Background: transparent
• Border: 1pt #091E4224 light / #38414A dark
• Text: #172B4D / #C7D1DB, weight 500, 14pt, 6pt radius
• Pressed: background #F1F2F4 / #22272B

Text / Link Button (View workflow)

• No background, no border
• Text: #0C66E4 light / #579DFF dark, weight 600, 14pt
• Pressed: underline + #F1F2F4 faint background

Icon Button (overflow ⋯ / add)

• 24pt glyph in 44pt hit area, color #626F86 / #9FADBC
• Pressed: circular #091E420F / #2C333A background

Core Atoms

Status Lozenge

• Shape: 3pt corner radius pill-rect
• Size: auto-width, 4pt vertical / 8pt horizontal padding
• Text: 11pt weight 700 UPPERCASE, +0.4pt tracking
• Color: semantic pair from §2 table (Neutral / Information / Success / Warning / Danger / Discovery)
• Dropdown variant: trailing 12pt chevron, tap opens status transition menu

Issue-Type Icon

• 16pt glyph in a 16-20pt rounded container (3pt radius)
• Story = white square on #1F845A; Bug = white circle on #C9372C; Task = white check on #1868DB; Epic = white lightning on #8270DB; Sub-task = link glyph on #5E6C84

Label Chip

• 3pt radius, 2pt/7pt padding, 10pt weight 700 UPPERCASE
• Tinted pastel background + saturated text from the label palette (e.g. design = #3B2C5E/#C0B6F2 dark)

Avatar

• Circle, 22-26pt on cards, 32pt in detail header
• Initials in 10-12pt weight 700 white on a palette color, or photo
• Overlapping stack: -8pt overlap, 2pt canvas-colored border, "+N" overflow chip

Story-Point Badge

• Rounded pill (500pt radius), min 18pt, 11pt weight 700
• Background #DDE1E6 light / #2C333A dark, text subtle

Issue Card

• Surface: #FFFFFF light / #22272B dark
• Corner radius: 8pt
• Border: 1pt #091E420F / #38414A
• Shadow: 0 1px 1px rgba(9,30,66,0.13), 0 0 1px rgba(9,30,66,0.16) light / 0 1px 2px rgba(0,0,0,0.4) dark
• Padding: 12pt all
• Structure (top → bottom): optional cover/epic-color top stripe → summary (15pt/500, 2-line clamp) → label chips row (8pt gap above) → footer row (12pt gap above): left = issue-type icon + issue key (11pt/700 subtle); right = story-point badge + assignee avatar
• Flagged variant: 3pt left edge stripe #E2483D + flag glyph
• Drag state: lifts to elevation 200 (0 8px 12px rgba(9,30,66,0.15)), 2° tilt, ghost placeholder in source column

Navigation

Bottom Tab Bar

• Height: 56pt + safe area
• Background: #FFFFFF / #1D2125 with 0.5pt top border #091E4224 / #38414A
• Tabs (5): Boards, Backlog, Search, Notifications, You
• Icon: 22-24pt; active fill, inactive stroke
• Active color: #0052CC light / #1868DB dark; inactive #626F86 / #738496
• Labels: 10pt weight 500, always shown

Top Bar (board/issue)

• Height: 44pt + safe area
• Leading: back chevron OR project breadcrumb (12pt subtle)
• Center: board/issue title (compact when scrolled)
• Trailing: filter icon + overflow ⋯ + (board) avatar stack

Board Column Header

• 12pt UPPERCASE weight 700 column name + count badge (rounded, subtle bg)
• Sticky at top of each column while its cards scroll
• WIP-limit variant: count turns red #C9372C when over limit

Sprint / Tab Strip (under title)

• Horizontal pills: active = #0052CC filled white text; inactive = #F1F2F4/#2C333A subtle
• "Sprint 24", "Backlog", "Filters"

Input Fields

Text Field (search / inline edit)

• Height: 40pt
• Background: #FFFFFF with 1pt #091E4224 border light / #22272B with 1pt #38414A dark (Atlassian fields are bordered, not filled)
• Corner radius: 6pt
• Leading icon (search): magnifyingglass 16pt subtle
• Placeholder: 14pt #626F86 / #738496
• Focus: 2pt #0052CC / #1868DB border ring, no shadow

Field Row (issue detail Details panel)

• Label: 12pt UPPERCASE weight 600 subtle, fixed ~110pt leading column
• Value: 14-16pt primary; tappable values open a picker (assignee, priority, sprint, status)
• 44pt row height, hairline divider between fields

Dropdown / Select

• Trigger looks like a value with a trailing 12pt chevron
• Menu: 8pt radius card, elevation 300, 40pt rows, selected row checkmark + #E9F2FF/#092957 tint

Comment Composer

• Multi-line, bordered, 6pt radius, "Add a comment…" placeholder
• Trailing Save (primary) + Cancel (subtle) on focus; @-mention picker on @

Distinctive Components

Board (horizontal status columns)

• Columns scroll horizontally; each column is a fixed ~232-280pt wide vertical card stack
• Column header sticky; "+ Create" affordance at bottom of each column
• Drag-and-drop: long-press a card → lifts → drag across columns → drop transitions issue status with haptic + status lozenge update

Issue Detail

• Header: issue-type icon + issue key + breadcrumb, status lozenge dropdown, title (20pt/600), action row (Assign, Watch, Share, ⋯)
• Details panel: collapsible field grid (Assignee, Status, Priority, Sprint, Story points, Labels, Reporter)
• Description block: rich-text body 16pt
• Activity tab strip: All / Comments / History / Worklog
• Comment timeline: avatar + name + timestamp + body, newest-first or oldest-first toggle

Backlog List

• Collapsible sprint sections ("Sprint 24 · 12 issues · 34 pts") with chevron
• Inline issue rows: issue-type icon + key + summary + status lozenge + assignee + points
• "Start sprint" / "Complete sprint" primary action per sprint section

Priority Indicator

• Up/down chevron stack: Highest (double-up red #C9372C), High (up red), Medium (equals orange #E2B203), Low (down blue), Lowest (double-down blue) — 14pt glyph

Filter / Quick Filter Bar

• Horizontal scroll of toggleable pills (Only my issues, Recently updated, Type, Epic) — selected = #0052CC outline + tint

Sprint Progress Bar

• Segmented bar: Done (green) / In Progress (blue) / To Do (neutral) proportional to points, with legend

5. Layout Principles

Spacing System

• Base unit: 4pt (Atlassian's space scale)
• Scale: 2, 4, 8, 12, 16, 24, 32, 40, 48, 64
• Card internal padding: 12pt
• Card-to-card gap: 8pt
• Column gap: 12pt
• Screen horizontal inset: 16pt
• Field row height: 44pt; section gap: 24pt

Grid & Container

• iPhone: 16pt horizontal insets; board columns ~232-280pt fixed width, horizontal scroll
• iPad: board shows 3-4 columns without scroll; issue detail uses a 2-pane split (list + detail) at ≥768pt
• Issue detail content: max 700pt centered on large screens
• Backlog rows: full-width, 16pt insets

Whitespace Philosophy

• Density with breathing room: cards are dense internally but separated by clear 8pt gaps and sit on a sunken gray so each reads as a discrete object
• Hairlines over boxes: field rows and list rows are separated by 1px dividers, not nested cards
• Color is rationed: the canvas and chrome are neutral gray so the few semantic colors (lozenges, type icons, blue CTA) pop and carry meaning
• Sticky structure: column headers and the status lozenge stay pinned so context never scrolls away

Border Radius Scale

• Square (0pt): full-bleed dividers, sprint progress segments
• Tight (3pt): status lozenges, label chips, issue-type icon containers
• Standard (6pt): buttons, input fields, dropdown triggers
• Card (8pt): issue cards, menus, bottom sheets
• Comfortable (12-16pt): modals, large sheets
• Pill (500pt): story-point badges, sprint pills, avatars-as-buttons
• Circle (50%): avatars

6. Depth & Elevation

Jira uses Atlassian's restrained elevation system — shadows communicate interaction layers, never decoration.

Shadow Philosophy: On light mode shadows are tinted with Atlassian Navy (rgba(9,30,66,…)) rather than pure black, keeping them cool and crisp. On dark mode shadows are nearly invisible, so elevation is signaled by a lighter surface step (#22272B → #2C333A → #38414A) plus a 1px border on overlays/menus.

Motion

• Card drag: long-press 200ms → card lifts (scale 1.02, elevation 200, 2° tilt) following finger 1:1; sibling cards reflow over 200ms ease-out; drop snaps with 150ms ease-out + medium haptic; status lozenge cross-fades to the new column's status
• Status transition (lozenge dropdown): menu fades + 4pt slide-down 150ms ease-out; on select, lozenge color cross-fades 200ms
• Screen push (board → issue): iOS native push, 300ms horizontal slide
• Column scroll: native momentum horizontal scroll with rubber-band; column headers stay pinned
• Section collapse (backlog): chevron rotates 90° in 150ms; rows expand/collapse height 0↔auto 200ms ease-out
• Pull-to-refresh: Atlassian spinner; 250ms settle
• Filter pill toggle: instant tint + 100ms scale 0.97 tap feedback
• Sprint progress bar: segments animate width on load over 400ms ease-out
• Haptics: medium impact on card drop & status change; light impact on filter toggle and section collapse
• Reduce Motion: replace drag tilt and slide transitions with crossfades; keep instant state changes

7. Do's and Don'ts

Do

• Use Jira Blue (#0052CC) ONLY for primary actions, links, and selected states — never as a content background
• Keep the canvas and chrome neutral gray so semantic colors carry meaning
• Render status as a lozenge — uppercase, tracked, semantic-colored, 3pt radius
• Use the correct issue-type icon + color (green Story / red Bug / blue Task / purple Epic / gray Sub-task)
• Pair every card footer with issue-type icon + key on the left, points + assignee on the right
• Clamp card summaries to 2 lines with ellipsis
• Use tabular numerals for points, counts, and issue keys so they align
• Use uppercase 11-12pt tracked micro-labels for columns and field labels
• Use Atlassian Navy #172B4D for primary text on light — not pure black
• Use neutral charcoal #1D2125 for dark mode — not true black
• Brighten interactive blue to #1868DB on dark surfaces for AA contrast
• Make the board horizontally scrollable with sticky column headers and per-column Create

Don't

• Don't use Jira Blue as a card or section background — it must read as "action only"
• Don't introduce new accent colors — the semantic set (blue/green/red/yellow/purple/neutral) is the whole palette
• Don't show status as plain text — always a colored lozenge
• Don't let issue cards grow unbounded — 2-line summary clamp is mandatory
• Don't use pure black text (#000000) — #172B4D navy ink is correct on light
• Don't use true black (#000000) for dark mode — #1D2125 Atlassian neutral is correct
• Don't mix issue-type colors (e.g. a red Story) — the type→color mapping is fixed
• Don't nest cards inside cards — field/list rows use hairline dividers, not boxes
• Don't proportional-space numerals — points and counts must align in columns
• Don't animate aggressively — Atlassian motion is 150-300ms ease-out, functional
• Don't drop shadows with pure black on light — tint them with rgba(9,30,66,…) navy
• Don't hide the issue key — it is the primary reference users speak and search by

8. Responsive Behavior

Device Sizes

Dynamic Type

• Scales: screen titles, issue title, body/description, comment text, field values
• Fixed: status lozenges, label chips, issue keys, column headers, tab labels (column width-sensitive)
• Code blocks scale to XL but stay monospace

Orientation

• iPhone: portrait-primary; landscape shows more columns
• iPad: split-view controller — primary backlog/board list + secondary issue detail; both rotate freely

Touch Targets

• Issue card: full-card tap (≥64pt tall), long-press to drag
• Status lozenge dropdown: 32pt tall, 44pt hit
• Tab bar icons: 24pt glyph, 44pt hit
• Field row: 44pt full-row tap
• Overflow / icon buttons: 24pt glyph, 44pt hit

Safe Area Handling

• Top: top bar + breadcrumb respect safe area and Dynamic Island
• Bottom: tab bar + home indicator respected
• Keyboard: comment composer and inline edit lift above keyboard; board scroll preserved
• Sides: 16pt content inset; board columns can bleed to edge on scroll

9. Agent Prompt Guide

Quick Color Reference

• Primary / Jira Blue: #0052CC (light) · #1868DB (interactive on dark)
• Link blue: #0C66E4 (light) · #579DFF (dark)
• Canvas: #FFFFFF light · #1D2125 dark
• Sunken board bg: #F7F8F9 light · card surface #22272B dark
• Surface raised (card): #FFFFFF light · #22272B dark
• Divider: #091E4224 light · #38414A dark
• Text primary: #172B4D (Atlassian Navy) light · #C7D1DB dark
• Text subtle: #44546F light · #9FADBC dark
• Story green icon: #1F845A · Bug red: #C9372C · Task blue: #1868DB · Epic purple: #8270DB
• Lozenge Information: #E9F2FF/#0055CC light · #092957/#8FB8F6 dark
• Lozenge Success: #DCFFF1/#216E4E light · #1C3329/#7EE2B8 dark
• Lozenge Danger: #FFECEB/#AE2A19 light · #5D1F1A/#FD9891 dark

Example Component Prompts

• "Build the Jira issue card in SwiftUI: #FFFFFF surface (#22272B dark), 8pt corner radius, 1pt #091E420F border, elevation-100 navy-tinted shadow, 12pt padding. Top: summary in Atlassian Sans (Inter fallback) 15pt weight 500 #172B4D, clamped to 2 lines. Below: 8pt gap then a wrapping row of label chips (3pt radius, 2/7pt padding, 10pt weight 700 uppercase, tinted bg). Footer 12pt above: HStack — leading issue-type icon (16pt, green #1F845A rounded square for Story) + issue key MOB-388 in 11pt weight 700 #626F86; trailing story-point pill (#DDE1E6, 11pt/700) + 22pt circular assignee avatar with white initials."

• "Create the Jira status lozenge: auto-width pill, 3pt corner radius, 4pt vertical / 8pt horizontal padding, text 11pt weight 700 uppercase +0.4pt tracking. Variants by semantic pair — To Do #DCDFE4/#44546F, In Progress #E9F2FF/#0055CC, Done #DCFFF1/#216E4E, Blocked #FFECEB/#AE2A19 (dark: #38414A/#9FADBC, #092957/#8FB8F6, #1C3329/#7EE2B8, #5D1F1A/#FD9891). Dropdown variant adds a trailing 12pt chevron and opens a status-transition menu on tap with a 200ms color cross-fade."

• "Render the Jira board: horizontally scrolling columns, each ~248pt fixed width with a sticky header — column name in 12pt weight 700 uppercase #738496 + count badge (rounded, #2C333A bg). Vertical stack of issue cards with 8pt gaps on a #F7F8F9 sunken background (#1D2125 dark). Long-press a card to lift it (scale 1.02, elevation 200, 2° tilt) and drag across columns; on drop, snap with 150ms ease-out, medium haptic, and cross-fade the card's status lozenge to the destination column's status."

• "Build the Jira issue detail header: issue-type icon + breadcrumb (Mobile Apps / MOB) in 12pt #626F86, a tappable status lozenge dropdown (semantic-colored), issue summary in Atlassian Sans 20pt weight 600 #172B4D, then an action row of subtle buttons: Assign, Watch, Share, ⋯ (#091E420F bg, 6pt radius, 14pt weight 500)."

• "Create the Jira Details field panel: a list of 44pt rows separated by 1px #091E4224 dividers. Each row: leading fixed ~110pt label in 12pt weight 600 uppercase #44546F, trailing tappable value 14-16pt #172B4D. Fields: Assignee (avatar+name), Status (lozenge), Priority (chevron indicator), Sprint, Story points, Labels (chips), Reporter. Tapping a value opens an elevation-300 dropdown (8pt radius card, 40pt rows, selected row checkmark + #E9F2FF tint)."

• "Render the Jira bottom tab bar: 56pt + safe area, #FFFFFF/#1D2125, 0.5pt top divider. Five tabs — Boards, Backlog, Search, Notifications, You — 22-24pt icons (active filled, inactive stroked), labels 10pt weight 500 always shown. Active tint #0052CC (light) / #1868DB (dark); inactive #626F86/#738496. No pill indicator — just icon fill + color change."

Iteration Guide

1. Canvas is neutral — #FFFFFF/#F7F8F9 light, #1D2125 dark (Atlassian charcoal, NOT true black)
2. Text primary is Atlassian Navy #172B4D light / #C7D1DB dark — never pure black/white
3. Jira Blue #0052CC is action-only; brighten to #1868DB for interactive elements on dark
4. Status is ALWAYS a semantic lozenge — uppercase, tracked, 3pt radius, color-paired
5. Issue-type icon→color is fixed: green Story / red Bug / blue Task / purple Epic / gray Sub-task
6. The issue card footer pattern is mandatory: type-icon + key (left), points + avatar (right)
7. Clamp card summaries to 2 lines; use tabular numerals for all counts/points/keys
8. Board = horizontal columns of vertical card stacks with sticky headers + drag-to-transition
9. Field/list rows use 1px hairline dividers — never nested cards
10. Motion is functional Atlassian ease-out 150-300ms; shadows are navy-tinted on light, surface-step on dark