A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
8type steps
2radius steps
8pxspacing base
Trello, in one page
Trello's iOS app is a tactile, board-first workspace where the content *is* the layout. Unlike most apps, Trello has no single canvas color — the board background sets the mood. A board can be a solid Trello Blue (#0079BF), a gradient, or a photo, and the entire screen takes on that backdrop. On top of it float pale, near-white lists (#F1F2F4) holding white cards. The feeling is of physical index cards pinned to a colored corkboard: you scroll the board horizontally through columns, you drag cards between them, and everything has a slight lift. There is no bottom tab bar — navigation lives in a top bar and the board itself is the primary surface, scrolled left-to-right.
The accent system is restrained against a backdrop that may be loud. Trello Blue for actions sits at #0C66E4 (the modern Atlassian-era blue, distinct from the classic board blue #0079BF), used for the primary button, links, and the active state. Card label colors (a fixed palette of green/yellow/orange/red/purple/blue swatches) are the one place color runs free — they're functional tags, not decoration. Everything else is neutral ink (#172B4D) on white cards so cards stay readable regardless of how vivid the board behind them is.
Typography is the system font (SF Pro on iOS; Inter is a clean substitute) — Trello leans on platform type for legibility at small sizes, because a card title must be readable over any backdrop. The hierarchy is compact and weight-driven: 11–24pt at 400 / 600 / 700. The most expressive moment is a card lifting on drag — it scales up slightly, gains a strong shadow, and the list beneath shows a placeholder gap as you move it.
Key Characteristics:
- No fixed canvas — the board background (solid
#0079BF, gradient, or photo) sets the screen - Pale lists (
#F1F2F4) of white cards floating on the board backdrop - Horizontal board scroll through columns — no bottom tab bar
- Trello Blue (
#0C66E4) for actions; the classic#0079BFis the default board color - Card label color row — a fixed functional swatch palette (the one place color is free)
- Card lift on drag — scale up, strong shadow, placeholder gap in the list
- Top navigation bar (board name + members + menu) — board is the primary surface
- System font (SF Pro / Inter), weights 400 / 600 / 700
- Card detail opens as a sheet over the dimmed board
Do's and don'ts
Do
- Let the board background (solid
#0079BF, gradient, or photo) define the screen — there is no fixed canvas - Float pale lists (
#F1F2F4) of white cards on the backdrop - Use Trello Blue
#0C66E4for actions/links; reserve the classic#0079BFfor the default board color - Keep navy ink (
#172B4D) on white cards so they read over any backdrop - Use the fixed six-color label palette as functional tags — the one place color is free
- Lift the card dramatically on drag (scale 1.03 + strong navy-tinted shadow) and open a placeholder gap
- Scroll the board horizontally through lists; do not add a bottom tab bar
- Apply a subtle scrim over photo backdrops so white content keeps contrast
- Use the system font for card titles — legibility on any backdrop is the point
Don't
- Don't impose a single canvas color — the board backdrop owns the screen
- Don't add a bottom tab bar — Trello navigates via the top bar and the horizontal board
- Don't tint card text with label colors — labels are bars/chips; titles stay navy ink
- Don't use pure black shadows — use the navy
rgba(9,30,66,…)tint so they work on color and pale surfaces - Don't make the drag lift subtle — picking up a card must feel like lifting a physical card
- Don't use full-pill buttons — Trello buttons are 8pt rounded rects
- Don't let lists be transparent — they're pale solid islands so cards stay readable
- Don't use a custom display font for card content — system font is intentional for legibility
- Don't animate the board scroll with custom easing — native momentum only
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 Trello design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Trello Blue (Action): #0c66e4
- Action Blue Pressed: #0055cc
- Action Blue Tint: #e9f2ff
- Classic Board Blue: #0079bf
- Board Blue: #0079bf
- Canvas White: #ffffff
- List Surface: #f1f2f4
- Surface Sunken: #ebecf0
- Divider: #dfe1e6
- Border Strong: #c1c7d0
Type:
- families: SF Pro Text, SF Pro Display, Numerals
- scale: 11, 12, 13, 15, 16, 17, 20, 24
- weights: 400, 600, 700
Shape:
- radius: 8, 12
- elevation: Card lift on drag — scale up, strong shadow, placeholder gap in the list | Shadow at rest: `rgba(9,30,66,0.13) 0 1px 1px, rgba(9,30,66,0.06) 0 0 1px` | Card shadow tint: `rgba(9,30,66,…)`
Spacing: 8
Rules:
- Let the board background (solid `#0079BF`, gradient, or photo) define the screen — there is no fixed canvas
- Float pale lists (`#F1F2F4`) of white cards on the backdrop
- Use Trello Blue `#0C66E4` for actions/links; reserve the classic `#0079BF` for the default board color
- Keep navy ink (`#172B4D`) on white cards so they read over any backdrop
- Use the fixed six-color label palette as functional tags — the one place color is free
- Lift the card dramatically on drag (scale 1.03 + strong navy-tinted shadow) and open a placeholder gap
Avoid:
- Don't impose a single canvas color — the board backdrop owns the screen
- Don't add a bottom tab bar — Trello navigates via the top bar and the horizontal board
- Don't tint card text with label colors — labels are bars/chips; titles stay navy ink
- Don't use pure black shadows — use the navy `rgba(9,30,66,…)` tint so they work on color and pale surfaces
- Don't make the drag lift subtle — picking up a card must feel like lifting a physical card
- Don't use full-pill buttons — Trello buttons are 8pt rounded rects
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Trello Blue (Action) (
#0C66E4): Primary CTA, links, active tab/segment, focus ring, "Create" button. The modern Atlassian-era action blue. - Action Blue Pressed (
#0055CC): Pressed/active state for blue actions. - Action Blue Tint (
#E9F2FF): Selected-row wash, info banners, blue chip background (on white surfaces). - Classic Board Blue (
#0079BF): The default board background color (the heritage Trello blue) — a backdrop, not an action color.
Board Backgrounds (Backdrop)
- Board Blue (
#0079BF): Default solid backdrop. - Board Surface Scrim (
rgba(0,0,0,0.16)): A subtle dark scrim laid over photo backgrounds so white lists/cards keep contrast. - Board Header Tint (
rgba(255,255,255,0.16)): Translucent white used for header chips/buttons sitting directly on a colored board.
Surfaces & Text
- Canvas White (
#FFFFFF): Card fill, sheet backgrounds, the readable surface on top of any board. - List Surface (
#F1F2F4): The pale list/column container that floats on the board. - Surface Sunken (
#EBECF0): Pressed list area, skeleton placeholders, card-composer field. - Divider (
#DFE1E6): Hairline rules between card sections and within sheets. - Border Strong (
#C1C7D0): Input outline at rest, checklist separators. - Text Primary (
#172B4D): Card titles, list titles, primary ink (a deep navy-charcoal). - Text Secondary (
#5E6C84): Metadata, badges, due dates, member counts, helper text. - Text Tertiary (
#8993A4): Disabled labels, placeholders, low-emphasis captions. - Text on Board (
#FFFFFF): The board name and header controls sitting directly on a colored backdrop.
Card Label Palette (Functional — the one free-color zone)
- Label Green (
#4BCE97) / subtle#BAF3DB - Label Yellow (
#F5CD47) / subtle#F8E6A0 - Label Orange (
#FEA362) / subtle#FEDEC8 - Label Red (
#F87168) / subtle#FFD5D2 - Label Purple (
#9F8FEF) / subtle#DFD8FD - Label Blue (
#579DFF) / subtle#CCE0FF
Semantic
- Success Green (
#1F845A): Completed checklist, "done" badges. - Due Soon Amber (
#B65C02): Due-date badge approaching. - Overdue Red (
#C9372C): Overdue due-date badge. - Info Blue (
#0C66E4): Informational emphasis (same as action blue).
Dark Mode (Supported)
Trello has a real dark mode for the UI chrome; board backgrounds still drive the board area.
- Dark Canvas / Sheet (
#1D2125) - Dark List Surface (
#22272B) - Dark Card (
#2C333A) - Dark Text (
#B6C2CF) - Action Blue (dark-adjusted) (
#579DFF)
Type scaleRead the full spec
Font Family
- Primary: System font —
SF Pro Text/SF Pro Displayon iOS (Trello uses the platform font for maximum legibility on any backdrop) - Fallback / Web Substitute:
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: Proportional in most UI; tabular only where counts align (checklist progress)
- CJK/Non-Latin: System stack handles all scripts — Trello ships globally
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen / Sheet Title | SF Pro Display | 24pt | 700 | 1.2 | -0.3pt | Card detail title, modal title |
| Board Name | SF Pro Display | 20pt | 700 | 1.2 | -0.2pt | In the top bar, on the board backdrop |
| Section Header | SF Pro Text | 17pt | 700 | 1.3 | -0.1pt | "Checklist", "Activity" in card detail |
| List Title | SF Pro Text | 15pt | 600 | 1.3 | 0pt | Column header ("To Do", "Doing") |
| Card Title | SF Pro Text | 15pt | 600 | 1.35 | 0pt | The text on a card, up to ~4 lines |
| Body | SF Pro Text | 15pt | 400 | 1.45 | 0pt | Card description, comments |
| Button (Primary) | SF Pro Text | 16pt | 600 | 1.0 | 0pt | "Create", "Save" pill/button |
| Meta / Badge | SF Pro Text | 12pt | 600 | 1.2 | 0pt | Due date, member count, checklist x/y |
| Subtitle | SF Pro Text | 13pt | 400 | 1.3 | 0pt | "Updated 2h ago", list card count |
| Label (UPPER) | SF Pro Text | 11pt | 700 | 1.2 | 0.4pt | "MEMBERS", section labels in detail |
| Card Composer | SF Pro Text | 15pt | 400 | 1.4 | 0pt | The "Add a card" inline input |
| Caption | SF Pro Text | 11pt | 400 | 1.3 | 0pt | Timestamps, low-emphasis legal |
Principles
- Legibility over personality: System font is intentional — a card title must read over a photo or a vivid color
- Compact, weight-driven: 11–24pt, hierarchy via 400/600/700, not big size jumps — boards pack many cards
- Navy-charcoal ink, not black: Primary text is
#172B4Don white cards - Color is functional, not typographic: Label colors carry meaning; type stays neutral ink
- On-board text is white with a scrim: The board name and header controls use white plus the dark scrim for contrast
- Dynamic Type respected on card titles, body, sheet content; badges and labels fixed
Components and layoutRead the full spec
Buttons
Primary CTA ("Create" / "Save")
- Background:
#0C66E4 - Text:
#FFFFFF, SF Pro Text 16pt weight 600 - Height: 44pt; corner radius 8pt (rounded rect — Trello buttons are not full pills)
- Pressed: background
#0055CC, subtle scale 0.98 - Disabled: background
#091E420F(faint), text#8993A4
Secondary / Subtle Button ("Cancel")
- Background:
#091E420F(a faint neutral wash on white) or transparent on sheets - Text:
#172B4D, weight 600 - Height: 44pt, radius 8pt
- Pressed:
#091E4224
On-Board Button (header chips: Filter, Members)
- Background:
rgba(255,255,255,0.16)(translucent over the colored board) - Text/icon:
#FFFFFF - Height: 32pt, radius 8pt
- Pressed:
rgba(255,255,255,0.28)
Text Link
- SF Pro Text 15pt weight 600, color
#0C66E4, no underline; pressed#0055CC
Icon Button (card actions, overflow)
- 20–24pt glyph, 44pt hit area
- Default
#5E6C84on white;#FFFFFFon board - Active
#0C66E4
Cards & Containers
Card (the core object)
- Background:
#FFFFFF, corner radius 8pt - Shadow at rest:
rgba(9,30,66,0.13) 0 1px 1px, rgba(9,30,66,0.06) 0 0 1px - Structure (top→bottom): label color row (4pt-tall pills or full chips) → title (15pt w600
#172B4D, up to 4 lines) → badge row (due date, checklist x/y, comments, member avatars) - Pressed: background
#F1F2F4 - Dragging: scale 1.03, shadow
rgba(9,30,66,0.25) 0 12px 24px, slight rotation optional; a placeholder gap (#091E4224dashed/filled) opens in the list
List / Column
- Background:
#F1F2F4, corner radius 12pt, width ~272pt, top-aligned - Header: list title 15pt w600
#172B4D+ card count + overflow (⋯) - Body: vertically stacked cards with 8pt gaps, scrolls vertically within the column
- Footer: "+ Add a card" composer (tap expands an inline
#FFFFFFfield with a#0C66E4"Add card" button) - Lists scroll horizontally as a row across the board
Label Chip / Row
- Compact mode: 8pt-tall colored bars across the card top (color only)
- Expanded mode: full chips with label text in dark ink on the subtle tint (e.g., text on
#BAF3DB) - Tap a label in card detail to toggle; the six-color functional palette
Card Detail Sheet
- Bottom sheet
#FFFFFF(or full-screen on compact), top grabber, radius 16pt top corners, presented over a dimmed board (rgba(0,0,0,0.4)) - Sections: cover/labels, title (24pt w700), description, checklist (with a
#1F845Aprogress bar), activity/comments - Action row: Members, Labels, Checklist, Due date, Attachment, Move
Board Header
- Sits on the board backdrop: board name 20pt w700
#FFFFFF, member avatars (28pt circles), Filter chip, overflow — all using the translucent-white on-board style with the scrim ensuring contrast
Navigation
Top Bar (no bottom tab)
- Trello deliberately has no bottom tab bar; the board is the primary surface
- On a board: back chevron, board name (20pt w700 white on backdrop), member avatars, search/filter, overflow menu
- App-level: a top bar with Boards / Home / Notifications / Search reached via the menu or a segmented header — but inside a board, the board owns the screen and scrolls horizontally
- Board switching: a left-edge drawer or a "Boards" list screen
Board Horizontal Scroll
- The defining navigation: lists are a horizontally-paged/scrolling row; the last list shows a peek + an "+ Add list" affordance
- Smooth horizontal momentum scroll; vertical scroll happens inside each list
Card Composer
- Inline at the list footer: tapping "+ Add a card" expands a white multiline field with a
#0C66E4"Add card" button and a close (×); Enter adds and keeps the composer open for rapid entry
Input Fields
Card Composer Field
- Background:
#FFFFFF, radius 8pt, 1pt#DFE1E6 - Placeholder "Enter a title for this card…" 15pt
#5E6C84 - Focus: 2pt
#0C66E4ring - Multiline, grows with content
Search Bar
- Background:
rgba(255,255,255,0.16)on board /#F1F2F4on white screens - Height 40pt, radius 8pt
- Leading
magnifyingglass18pt (white on board,#5E6C84on white)
Text Field (card detail / settings)
- Filled, background
#EBECF0, height 44pt, radius 8pt - Rest: no border; focus: 2pt
#0C66E4 - Error: 2pt
#C9372C, helper#C9372C
Distinctive Components
Horizontal Kanban with Drag
- The signature interaction: lists arranged left-to-right, cards drag vertically within and horizontally across lists. While dragging, the card lifts (scale 1.03 + strong shadow), the source position collapses, and a destination placeholder opens — the whole model is "move the physical card".
Board-Background Header
- The board's background (solid
#0079BF, gradient, or photo) bleeds behind the header and lists; a subtle scrim keeps white content readable. The backdrop *is* the board's identity.
Card Label Row
- The fixed six-color functional palette shown as bars or chips on the card top — the one place Trello lets color run, because here color is data.
Card Detail Sheet
- The card expands into a structured sheet (title, description, checklist with progress, activity) over the dimmed board — the "open the card" moment.
Inline List Add / Card Composer
- Add-a-list and add-a-card are inline, rapid, and keep focus — boards are built fast, in place.
Spacing System
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | ~1.1 lists visible, list width ~256pt, card detail full-screen |
| iPhone 13/14/15 | 390pt | ~1.2 lists visible, list width ~272pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the on-board top bar |
| iPhone 15/16 Pro Max | 430pt | ~1.4 lists visible, more peek of the next list |
| iPad | 768pt+ | Multiple full lists visible at once; card detail as a centered modal, not full-screen |
Dynamic Type
- Card titles, body, sheet content: full scale (cards grow taller to fit)
- Badges, label chips, list count: fixed
- Board name: scales modestly, truncates with ellipsis
Orientation
- iPhone: board supports both, but is primarily portrait; landscape shows more lists
- iPad: landscape ideal — many lists across; card detail centered modal
Touch Targets
- Card: full card is tappable (open detail); long-press initiates drag
- Drag handle: the whole card; 44pt minimum effective grab
- On-board chips/buttons: 32pt height with 44pt effective hit
- Checklist checkboxes: 24pt glyph, 44pt hit
- Overflow / icon buttons: 44pt hit area
Safe Area Handling
- Top: the on-board header respects safe area / Dynamic Island; the board scrolls beneath
- Bottom: no tab bar — the board and the card composer respect the home indicator
- Sides: 8pt board padding; card detail sheet uses 16pt content margins
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-trello {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #172b4d;
--heading-color: #172b4d;
--link-color: #0055cc;
--link-hover-color: #004099;
--border-color: #d5d9df;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(23,43,77,0.06);
--card-hover-shadow: 0 6px 18px rgba(23,43,77,0.12);
--header-bg: #172b4d;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #68758b;
--button-bg: #0055cc;
--button-text-color: #ffffff;
--button-hover-bg: #004099;
--button-border: none;
--button-border-radius: 12px;
--button-secondary-bg: #f1f2f4;
--button-secondary-text-color: #172b4d;
--button-secondary-hover-bg: #e3e6ea;
--button-secondary-border: 1px solid #d5d9df;
--prompt-bg: #f3f4f6;
--prompt-text-color: #172b4d;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 12px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- dropbox 85.1%
- robinhood 82.5%
- microsoft teams 81.8%
- things 3 81.8%
- mastodon 81.5%
Where this came from
- Source document
ios/design-md/productivity/trello/DESIGN.md· 21.4 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.