At a glance
24tokens
9type steps
2radius steps
8pxspacing base
Jira, in one page
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
#172B4Dfor 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
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
#172B4Dfor primary text on light — not pure black - Use neutral charcoal
#1D2125for dark mode — not true black - Brighten interactive blue to
#1868DBon 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) —#172B4Dnavy ink is correct on light - Don't use true black (
#000000) for dark mode —#1D2125Atlassian 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
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Jira design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Jira Blue: #0052cc
- Jira Blue Bold: #1868db
- Jira Blue Pressed: #09326c
- Link Blue (light): #0c66e4
- Canvas White: #ffffff
- Surface Sunken: #f7f8f9
- Surface Raised: #ffffff
- Surface Hover: #f1f2f4
- Divider: #091e42
- Border: #091e42
Type:
- families: Atlassian Sans, Atlassian Mono, Mono, Inter
- scale: 10, 11, 12, 13, 14, 15, 16, 20, 22
- weights: 400, 500, 600, 700
Shape:
- radius: 6, 8
- elevation: Focus: 2pt `#0052CC` / `#1868DB` border ring, no shadow
Spacing: 8, 10, 12, 24
Rules:
- 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
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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
| Role | Light Fill | Light Text | Dark Fill | Dark Text |
|---|---|---|---|---|
| Neutral (To Do) | #DCDFE4 | #44546F | #38414A | #9FADBC |
| Information (In Progress) | #E9F2FF | #0055CC | #092957 | #8FB8F6 |
| Success (Done) | #DCFFF1 | #216E4E | #1C3329 | #7EE2B8 |
| Warning (Attention) | #FFF7D6 | #7F5F01 | #3D3000 | #F5CD47 |
| Danger (Blocked / Error) | #FFECEB | #AE2A19 | #5D1F1A | #FD9891 |
| Discovery (Epic) | #F3F0FF | #5E4DB2 | #352C63 | #B8ACF6 |
Issue-Type Accent Colors
- Story Green (
#1F845Aicon on#FFFFFFsquare): 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 (
#DDE1E6light /#2C333Adark): Rounded point counter. - Flag/Blocker Stripe (
#E2483D): Left edge stripe on flagged cards.
Type scaleRead the full spec
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
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Atlassian Sans | 28-32pt | 700 | 1.2 | -0.4pt | "Your work", "Boards" — top nav large title |
| Board / Section Title | Atlassian Sans | 22pt | 700 | 1.25 | -0.3pt | Board name, backlog header |
| Issue Title (detail) | Atlassian Sans | 20pt | 600 | 1.3 | -0.2pt | Issue summary in the detail screen |
| Subsection | Atlassian Sans | 16pt | 600 | 1.4 | 0pt | "Details", "Activity", "Description" headers |
| Body | Atlassian Sans | 16pt | 400 | 1.5 | 0pt | Description text, comment body |
| Card Summary | Atlassian Sans | 15pt | 500 | 1.4 | 0pt | Issue card title — 2-line clamp |
| Meta / Secondary | Atlassian Sans | 14pt | 400 | 1.4 | 0pt | Timestamps, "Updated by", field values |
| Field Label | Atlassian Sans | 12pt | 600 | 1.3 | 0.4pt | UPPERCASE — "ASSIGNEE", "PRIORITY", "SPRINT" |
| Column Header | Atlassian Sans | 12pt | 700 | 1.3 | 0.6pt | UPPERCASE — "IN PROGRESS", with count badge |
| Lozenge / Label | Atlassian Sans | 11pt | 700 | 1.0 | 0.4pt | UPPERCASE — status lozenges & label chips |
| Issue Key | Atlassian Sans | 11pt | 700 | 1.0 | 0.2pt | Tabular — MOB-388 |
| Tab Label | Atlassian Sans | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Code Inline | Atlassian Mono | 13pt | 400 | 1.4 | 0pt | inline code in descriptions |
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).
Components and layoutRead the full spec
Buttons
Primary Button (Create / Save / primary CTA)
- Shape: Rounded rectangle, 6pt corner radius (Atlassian uses
3ptfor compact,6ptfor prominent — prefer 6pt on mobile touch) - Background:
#0052CClight /#1868DBdark - Text:
#FFFFFF, Atlassian Sans 15pt weight 600 - Padding: 12pt vertical, 24pt horizontal
- Pressed: background
#09326Clight /#0C66E4dark + 0.98 scale - Disabled: background
#091E420F/ text#091E424F
Subtle Button (Assign to me / secondary)
- Background:
#091E420Flight /#2C333Adark (subtle neutral) - Text:
#172B4Dlight /#C7D1DBdark, weight 500, 14pt - Padding: 10pt vertical, 18pt horizontal, 6pt radius
- Pressed: background
#091E4224/#38414A
Outline / Default Button (Add child)
- Background: transparent
- Border: 1pt
#091E4224light /#38414Adark - Text:
#172B4D/#C7D1DB, weight 500, 14pt, 6pt radius - Pressed: background
#F1F2F4/#22272B
Text / Link Button (View workflow)
- No background, no border
- Text:
#0C66E4light /#579DFFdark, weight 600, 14pt - Pressed: underline +
#F1F2F4faint background
Icon Button (overflow ⋯ / add)
- 24pt glyph in 44pt hit area, color
#626F86/#9FADBC - Pressed: circular
#091E420F/#2C333Abackground
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/#C0B6F2dark)
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
#DDE1E6light /#2C333Adark, text subtle
Issue Card
- Surface:
#FFFFFFlight /#22272Bdark - 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/#1D2125with 0.5pt top border#091E4224/#38414A - Tabs (5): Boards, Backlog, Search, Notifications, You
- Icon: 22-24pt; active fill, inactive stroke
- Active color:
#0052CClight /#1868DBdark; 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
#C9372Cwhen over limit
Sprint / Tab Strip (under title)
- Horizontal pills: active =
#0052CCfilled white text; inactive =#F1F2F4/#2C333Asubtle - "Sprint 24", "Backlog", "Filters"
Input Fields
Text Field (search / inline edit)
- Height: 40pt
- Background:
#FFFFFFwith 1pt#091E4224border light /#22272Bwith 1pt#38414Adark (Atlassian fields are bordered, not filled) - Corner radius: 6pt
- Leading icon (search):
magnifyingglass16pt subtle - Placeholder: 14pt
#626F86/#738496 - Focus: 2pt
#0052CC/#1868DBborder 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/#092957tint
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)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Board columns ~248pt; 1.x columns visible; compact card footer |
| iPhone 13/14/15 | 390pt | Standard layout; ~1.4 columns visible |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top bar |
| iPhone 15/16 Pro Max | 430pt | Wider columns (~280pt); ~1.6 visible |
| iPad (portrait) | 768pt | 3 columns no horizontal scroll; backlog can split list + detail |
| iPad (landscape) | 1024pt+ | 4-5 columns; 2-pane (board/backlog list + issue detail) persistent |
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-jira {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1d2125;
--heading-color: #1d2125;
--link-color: #0052cc;
--link-hover-color: #003d99;
--border-color: #d6d7d8;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(29,33,37,0.06);
--card-hover-shadow: 0 6px 18px rgba(29,33,37,0.12);
--header-bg: #1d2125;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6c6f71;
--button-bg: #0052cc;
--button-text-color: #ffffff;
--button-hover-bg: #003d99;
--button-border: none;
--button-border-radius: 8px;
--button-secondary-bg: #f1f2f2;
--button-secondary-text-color: #1d2125;
--button-secondary-hover-bg: #e4e4e5;
--button-secondary-border: 1px solid #d6d7d8;
--prompt-bg: #f4f4f4;
--prompt-text-color: #1d2125;
--base-font: var(--font-helvetica);
--heading-font: var(--font-mono);
--card-border-radius: 8px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- disney plus 85.6%
- paramount plus 84.4%
- monday 78.8%
- tumblr 78.5%
- zalo 78.4%
Where this came from
- Source document
ios/design-md/productivity/jira/DESIGN.md· 27.6 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.