Decisions
Why the system chose one option over another, and the questions still open.
- Open questionsThe places where the system has drawn more than one version and the choice is still open, with the current default for each.
- Pink is lighter than the product's pinkThe attention pink is lighter than the product code's pink, so that ink on it reaches the same contrast as the other sticker colors.
- No all caps, including group headings and dialog titlesGroup headings, dialog titles and badges use sentence case instead of the product code's all caps.
- The tab bar's selection wraps only the iconOn the phone tab bar, the yellow selection sticker wraps only the icon of the selected item, not the whole cell.
- Every top-level page shows its title, including HomeEvery phone top-level page shows a large title with its name, and Home is titled Home.
- Headers and the rail are 56px, with a square top-left cornerHeaders are 56px high and the icons-only rail is 56px wide plus a 1px seam, so the top-left corner stays a 56px square.
- Working agents are shown where they appear, not in a live barWhat agents are doing is written in the places they already appear, instead of in a live bar above the tab bar or at the bottom of the sidebar.
- The phone workspace switcher is a bottom sheetOn a phone, the workspace list rises from the bottom instead of opening as a popup next to the pill.
- The drawn reactions use the system's paletteThe 7 drawn quick reactions keep their subjects and shapes but take their colors from the palette, with square white highlights.
- Regions are separated by a 45% ink seam, and controls have no shadowLines between regions are 1px `line-seam` at 45% ink instead of 2px black, and only brand illustration has a hard shadow.
- Toasts and tooltips are neutral darkToasts and tooltips use the neutral dark `layer-hud` instead of yellow with a black border.
- Selection in navigation is a yellow stickerThe selected sidebar row and settings navigation item is a yellow sticker instead of pink with a hard shadow.
- In dark mode the frame is neutral, but the rail's selection stays yellowIn dark mode the frame is a neutral dark, and the selected rail item is still a yellow sticker.
- Tabs are selected with a yellow sticker by defaultThe selected tab is a yellow sticker by default; the product's underline is drawn as an alternative.
- Unread is pink with ink text, everywhereEvery unread count is pink with ink text, including new thread replies.
- The focus ring is inkThe focus ring is ink, not yellow.
- A selected radio is an ink dotThe selected radio shows an ink dot instead of a yellow fill.
- Status and runtime chips are soft tints with one pixelStatus chips and runtime chips are soft tints with one pixel or icon, instead of saturated fills with an ink border.
- Tertiary text passes 4.5:1 on every surface`foreground-hint` is slightly darker in light mode and lighter in dark mode than the product's, so it passes 4.5:1 everywhere.
- Error text is a dark red that passes 4.5:1Error text uses `danger-strong`, a dark red at 6.1:1, instead of the product's brighter reds.
- The offline light is stone from the paletteThe offline presence light uses the palette's stone instead of Tailwind's gray-400.
- Dots and the spinner are square pixelsPresence lights, attention dots and the loading spinner are square pixels instead of round dots and rings.
- Drawers and bottom sheets float with a seam and the soft shadowDrawers and bottom sheets have a seam edge and `shadow-float` instead of a 2px ink border and a hard shadow.
- Stickers and square avatars stay the same in dark modeIn dark mode, buttons, chips and avatars stay stickers, instead of the product's Elegant washes and round avatars.
- People without a photo show their initialsA person without a photo shows their initials on lavender, not a person icon.
- The switch is a pillThe switch is a pill shape, yellow when on, instead of the light theme's square switch.
- Upload progress is a cyan track inside the containerUpload progress is cyan, on its own thin track inside the file card or thumbnail, not pink.
- A modal drawer slides in over a scrimA modal drawer slides in, and the rest of the page gets the same scrim as a dialog.
- Centered overlays have a scrim and no animationDialogs, confirmations, search, task details and large forms all get a scrim and appear without animation.
- Large one-pass forms open as a wide centered dialogA large form filled in one pass opens as an 896px centered dialog with a section list, sections and a footer, instead of a 640px drawer.
- A sidebar row looks the same in every groupA sidebar row is one line with an ellipsis in every group, and the description gives way to the name.
- Panel header icon buttons are 32px on desktopDesktop panel header icon buttons are 32px with an 18px icon and a 44px hit area; phones keep 44px.
- The web app has a 48px frame top bar with searchThe desktop web app adds a 48px frame-colored top bar with search in the center.
- A segmented control's track fits its segmentsThe segmented control's track hugs its segments, and fills the width only as the sole choice in a form.
- A button's size follows its useButton sizes are set by use: 44px in footers and forms, 32px in rows, cards, banners, toolbars and panel headers, 52px for the sign-in call to action.
- The icon buttons at both ends of a phone top bar mirror each otherThe Back button and the right-hand icon buttons of a phone top bar sit 3px from the screen edge, mirrored, and Back uses arrow-left.
- Popups float, stay inside the window and don't move the pagePopups open against their trigger above the page, move or flip at the window edge, and never shift the page.
- A problem in one panel is a full-width notice under its headerA problem inside one panel is shown as a full-width notice under the panel header, with a seam above and below.
- A button and the dialog it opens say the same wordsA button's label is the title of what it opens, an edit is titled Edit and the item's name, and the confirm button repeats the verb.
- A chip next to a panel header's name sits in its own cellA chip beside the name in a panel header sits in its own cell on the name's line, centered by its shape.
- A person's profile avatar is 99px, like an agent'sThe avatar on a person's profile is 99px, the same as on an agent's profile.
- An editable avatar shows its overlay on hover, focus and uploadAn editable avatar has one overlay with an action icon, shown on hover, on keyboard focus and while uploading.