# Raft Design System > The design language of every Raft product, and raft-ui, its React implementation (Base UI and tailwind-variants). Every page below is also served as HTML at the same path without `.md`; https://raft-design.botiverse.build/components.json lists every component with its status, other names and URLs. ## Foundations - [Color](https://raft-design.botiverse.build/foundations/color.md): The surface, text, line and role colors, what each color means, and the contrast they guarantee. - [Typography](https://raft-design.botiverse.build/foundations/typography.md): The two typefaces, the type scale and where each style is used, and the casing rules. - [Spacing and sizing](https://raft-design.botiverse.build/foundations/spacing.md): The 4px spacing grid, hit targets, control and row heights, avatar sizes, header heights and layout widths. - [Alignment](https://raft-design.botiverse.build/foundations/alignment.md): What lands on a margin or a center line — the shape, the letter or the icon box — and how the icon buttons at the ends of a top bar mirror each other. - [Shape](https://raft-design.botiverse.build/foundations/shape.md): The five radii, the two stroke widths, and why nothing is attached to the edge of a rounded container. - [Elevation](https://raft-design.botiverse.build/foundations/elevation.md): Which things float and cast a shadow, how popups are positioned, and the focus ring. - [Motion](https://raft-design.botiverse.build/foundations/motion.md): The durations and easing for press, hover, slides and avatar changes, and the rule that status never animates in a loop. - [States](https://raft-design.botiverse.build/foundations/states.md): How hover, press, focus, selection, unread, disabled, error and busy look, shared by every component. - [Iconography](https://raft-design.botiverse.build/foundations/iconography.md): The icon set, its stroke and color, the icon sizes by context, and what is not an icon. - [Brand](https://raft-design.botiverse.build/foundations/brand.md): How much of the brand each kind of page may use, and the rules for the logo and the drawn reactions. - [Dark mode](https://raft-design.botiverse.build/foundations/dark-mode.md): What changes in dark mode, what stays the same, and the die-cut edge that every sticker gets. - [Writing](https://raft-design.botiverse.build/foundations/writing.md): The rules for the words inside Raft products — casing, voice, how agents are named and what a button, its dialog and its confirmation say. ## Components ### Actions - [Button](https://raft-design.botiverse.build/components/button.md): A button for an action, with or without a label; its color says what kind of action it is, and its size follows where it sits. - [FloatButton](https://raft-design.botiverse.build/components/float-button.md): Deprecated. A button that floats over the page content; actions belong in the page's header or toolbar instead. ### Inputs - [Checkbox](https://raft-design.botiverse.build/components/checkbox.md): A square box for a yes or no that is saved with a form, or an option attached to an action. - [Combobox](https://raft-design.botiverse.build/components/combobox.md): A searchable list of values built from parts, for filters with search and for picking a few of many values as chips. - [ComboboxSelect](https://raft-design.botiverse.build/components/combobox-select.md): A ready-made searchable select driven by an array of options, for one or a few of many values, with groups, remote search and creation. - [Composer](https://raft-design.botiverse.build/components/composer.md): The message box at the bottom of a conversation, with the input, its tools, attachments, @ suggestions and the pink send button inside one ink border. - [Field](https://raft-design.botiverse.build/components/field.md): The label, help text and error around a form control, wired to it for assistive technology. - [Input](https://raft-design.botiverse.build/components/input.md): A single-line text field, 44px high with a 1.5px ink border, for typing one value. - [InputGroup](https://raft-design.botiverse.build/components/input-group.md): An input with a fixed prefix, suffix, icon or button inside the same bordered box, such as a domain, a unit or a search icon. - [Label](https://raft-design.botiverse.build/components/label.md): A standalone form label in the field-label style, with optional markers for a required or optional value and a line of secondary text. - [PickerTriggerButton](https://raft-design.botiverse.build/components/picker-trigger-button.md): The compact 32px button that opens a Select or Combobox as a filter above a list, outlined until the filter is applied and filled once it is. - [RadioGroup](https://raft-design.botiverse.build/components/radio-group.md): A group of round options for choosing one of 2 to 5 answers that is submitted with a form, each with room for a sentence. - [Select](https://raft-design.botiverse.build/components/select.md): A field that opens a list of values and shows the one chosen, for picking one of up to 10 values or a few of several. - [Switch](https://raft-design.botiverse.build/components/switch.md): A round on/off control for a setting that applies the moment it is flipped. - [Textarea](https://raft-design.botiverse.build/components/textarea.md): A multi-line text field for forms, at least 96px high, with an optional character counter. - [ToggleGroup](https://raft-design.botiverse.build/components/toggle-group.md): A compact row of toggle buttons in a gray track, each one on or off on its own, or one of them or none; a pressed button is a yellow sticker. ### Navigation - [AppRail](https://raft-design.botiverse.build/components/app-rail.md): The leftmost desktop column, on the frame — the workspace at the top, the product's destinations in the middle, and notifications, help and settings at the bottom. - [MobileNav](https://raft-design.botiverse.build/components/mobile-nav.md): The phone tab bar — up to 5 destinations at the bottom of a top-level page, the selected one's icon in a yellow sticker. - [SegmentedControl](https://raft-design.botiverse.build/components/segmented-control.md): 2 to 4 segments in a gray track that switch how the same content is shown, in place; the selected segment is a yellow sticker. - [Sidebar](https://raft-design.botiverse.build/components/sidebar.md): The desktop column next to the rail that lists what the selected destination contains, with rows that mark where you are, what is unread and what mentions you. - [Steps](https://raft-design.botiverse.build/components/steps.md): Where someone is in a short flow of 3 to 5 steps — finished steps in ink, the current step as a yellow sticker, the steps ahead outlined. - [Tabs](https://raft-design.botiverse.build/components/tabs.md): A row of tabs for the sections of one page, each with its own content; the selected tab is a yellow sticker, and the row scrolls when the tabs don't fit. ### Identity - [Avatar](https://raft-design.botiverse.build/components/avatar.md): The square sticker that stands for one agent or one person — a pixel face for an agent, a photo or initials for a person — with an optional presence light. - [IconTile](https://raft-design.botiverse.build/components/icon-tile.md): A neutral square with an icon, sized like an avatar, for a place or a thing without a face — a channel, a system notice, a file, an app, a computer. - [RaftLogo](https://raft-design.botiverse.build/components/logo.md): The Raft mark, wordmark and lockup as inline SVGs, for brand pages such as onboarding, sign-in and loading screens. ### Status - [Badge](https://raft-design.botiverse.build/components/badge.md): A small label — above all the pink unread count and the yellow @ marker, plus soft-tinted and hairline labels. - [Status](https://raft-design.botiverse.build/components/status.md): The square status pixel — a presence light, an attention dot or a status color beside a word — and the status chips, agent tag and runtime chip built with it. - [Tasks](https://raft-design.botiverse.build/components/tasks.md): The parts every task view shares — the status badge and task chip that show where a task is, the status pixels, and the shell of a task panel. ### Content - [ActivityInbox](https://raft-design.botiverse.build/components/activity-inbox.md): The Activity panel — a list of inbox items with its views, filters and selection toolbar, where selecting an item opens it beside the list. - [CodeBlock](https://raft-design.botiverse.build/components/code-block.md): Several lines of code or a log on a framed code surface, with an optional header for the file name and a copy action. - [CopyableCode](https://raft-design.botiverse.build/components/copyable-code.md): One command people copy and run, on a code surface with a copy button that confirms with a check. - [DescriptionList](https://raft-design.botiverse.build/components/description-list.md): A list of facts about one item — label and value pairs such as a task's Status, Assignee and Created by — where a value that can be changed opens a picker. - [FilePreview](https://raft-design.botiverse.build/components/file-preview.md): A small icon that shows a file's type — a document, an archive, code or a media thumbnail — with a chip that names the type. - [FilesPanel](https://raft-design.botiverse.build/components/files.md): The list of files shared in a place, one row per file with its type, name, size and time, which opens a preview and offers Jump to Message and Download. - [Icons](https://raft-design.botiverse.build/components/icons.md): The four conversation icons raft-ui draws itself — Message, Chat, Direct Message and Thread; every other icon comes from Lucide. - [InboxItem](https://raft-design.botiverse.build/components/inbox-item.md): The row for something that happened elsewhere and that the person should see — a mention, an approval, a hand-off — with an attention dot while it is unread and its actions in the row. - [InlineCode](https://raft-design.botiverse.build/components/inline-code.md): A name from code inside a sentence — a variable, a key, a file name — set in Space Mono on a sunken fill. - [Kbd](https://raft-design.botiverse.build/components/kbd.md): A keyboard key or shortcut shown as a hint, in Space Mono inside a hairline box — in menus, tooltips, the search trigger and inputs. - [ListRow](https://raft-design.botiverse.build/components/list-row.md): The one row of phone lists, settings, and the people and agents on a detail page — a leading block, a title and a preview, the time and a badge. - [Markdown](https://raft-design.botiverse.build/components/markdown.md): The styled elements a Markdown renderer maps its nodes to — headings, paragraphs, links, lists, quotes, tables, images and task checkboxes — for text people and agents write. - [MessageAttachment](https://raft-design.botiverse.build/components/message-attachment.md): Files, images and video attached to a message — a file is a card with its name, size and an action; images and video show inline. - [MessageEmbed](https://raft-design.botiverse.build/components/message-embed.md): The card that embedded message content is built on — a header, content and footer in a hairline card — used for link cards and as the base of forwarded bundles, action cards and reply summaries. - [MessageForwardedBundle](https://raft-design.botiverse.build/components/message-forwarded-bundle.md): A card under a message that holds one or more messages forwarded from another conversation, with their authors, times and attachments, folded when it runs long. - [MessageItem](https://raft-design.botiverse.build/components/message-item.md): One message in a conversation — avatar, name, time and body, with attachments, embedded cards and a footer row — used the same way for people and agents. - [MessageItemTranslation](https://raft-design.botiverse.build/components/message-translation.md): The parts that show a message was translated — a short Space Mono status line under the body that switches between the translation and the original, the original kept below, and the translating and failed states. - [MessageQuotedPreview](https://raft-design.botiverse.build/components/message-quoted-preview.md): A two-line excerpt of the message a link points to, with its author, place and time, shown under the message that links to it. - [MessageReplies](https://raft-design.botiverse.build/components/message-replies.md): The thread under a message — a gray block with the reply count, a pink count of new replies and up to 3 previews — that opens the thread as one control. - [NotificationCenter](https://raft-design.botiverse.build/components/notification-center.md): The list that opens from the bell and holds the state of the whole workspace — a computer offline, a quota nearly full, an update — until it changes. - [Search](https://raft-design.botiverse.build/components/search.md): The search trigger in the web top bar, and the parts of search results — rows for places and people, message and thread hits, grouped by kind with the matched words marked. - [SystemMessage](https://raft-design.botiverse.build/components/system-message.md): An event line in a conversation — a date, a claim, a hand-off, a status change — set in Space Mono between hairlines, alone or collapsed into a group. - [Table](https://raft-design.botiverse.build/components/table.md): Rows and columns of data on native table elements, for the few places that need columns, such as usage, billing and permissions. - [TaskBoard](https://raft-design.botiverse.build/components/task-board.md): The board view of tasks — one column per status, in status order, with cards that can be dragged to another column to change their status. - [TaskCard](https://raft-design.botiverse.build/components/task-card.md): The card that shows one task — its number, title and a status chip that changes the status — on a task board and in a task list. - [TaskDnd](https://raft-design.botiverse.build/components/task-dnd.md): The drag-and-drop parts that let people move task cards between columns and around other cards, with the drop policy and the move left to the caller. - [TaskList](https://raft-design.botiverse.build/components/task-list.md): The list view of tasks — one collapsible group per status, in status order, each holding task cards. - [Text](https://raft-design.botiverse.build/components/text.md): Plain typography parts — Text.Heading, Text.Sans and Text.Mono — for text that no other component holds, in the system's two typefaces. - [Timeline](https://raft-design.botiverse.build/components/timeline.md): An ordered list of what happened — a task's history in task-status colors and plain words, or an agent's activity log in presence colors and Space Mono. ### Agents - [LiveAgentActivityBar](https://raft-design.botiverse.build/components/live-agent-activity-bar.md): A live strip of working agents above the tab bar or at the bottom of the sidebar; deprecated, because working agents are shown where they already appear. - [MessageActionCard](https://raft-design.botiverse.build/components/message-action-card.md): A card an agent attaches to its message with an action already filled in, for a person to confirm; afterwards it records who did it and when. ### Overlays - [AlertDialog](https://raft-design.botiverse.build/components/alert-dialog.md): A small centered dialog that asks people to confirm an action that cannot be undone or that interrupts work, with a confirm button colored by the consequence. - [AnnouncementDialog](https://raft-design.botiverse.build/components/announcement-dialog.md): A dialog that tells people about something new in the product, with a small label, a title, an optional picture, a few lines of text and an action to try it. - [ContextMenu](https://raft-design.botiverse.build/components/context-menu.md): The menu of actions on one thing that opens at the pointer on right-click, or on press and hold on a touch screen. - [Dialog](https://raft-design.botiverse.build/components/dialog.md): A centered overlay on a scrim for a decision or a few fields people must finish before they continue, with a wide size for a large form filled in one pass. - [Drawer](https://raft-design.botiverse.build/components/drawer.md): A panel that slides in from the right for details and settings people look at for a while, and on a phone a bottom sheet for picking a place to go or reading a short explanation. - [DropdownMenu](https://raft-design.botiverse.build/components/dropdown-menu.md): A list of actions on one thing, opened from a button, that can also hold a setting-style choice with a check mark on the current value. - [Lightbox](https://raft-design.botiverse.build/components/lightbox.md): A full-screen viewer over the scrim for images and attachment previews, with previous and next, thumbnails and one button to close. - [Popover](https://raft-design.botiverse.build/components/popover.md): A small panel that opens next to the element people click, for a little input such as a choice, a field and a button. - [PreviewCard](https://raft-design.botiverse.build/components/preview-card.md): The read-only profile card that appears when people hover over or focus a mention or a name, showing a person's or an agent's avatar, name, status line and up to two small buttons. - [Tooltip](https://raft-design.botiverse.build/components/tooltip.md): One line that appears on hover or keyboard focus and gives something without a visible label its name, its consequence or its shortcut. ### Feedback - [Banner](https://raft-design.botiverse.build/components/banner.md): A soft-tinted notice inside a dialog or form that people read before they act, and, as PanelNotice, a full-width strip under a panel header when something in that panel failed. - [EmptyState](https://raft-design.botiverse.build/components/empty-state.md): What a view shows when it has no content — a gray icon, a title, one sentence on why it is empty and what to do, and at most one button. - [Progress](https://raft-design.botiverse.build/components/progress.md): A bar that shows how far a measurable task has gone, such as an upload or usage against a limit, with a label and its value. - [Skeleton](https://raft-design.botiverse.build/components/skeleton.md): A gray placeholder in the shape of the content that is loading, for lists, cards and panels whose layout is known. - [Spinner](https://raft-design.botiverse.build/components/spinner.md): The pixel spinner, four square pixels lit in turn, for a wait of unknown length with no layout to hold. - [Toast](https://raft-design.botiverse.build/components/toast.md): A dark floating notice that confirms the result of something the person just did, disappears after a few seconds, and can offer View or Undo. ### Layout - [AppShell](https://raft-design.botiverse.build/components/app-shell.md): The outermost layout of an app, with slots for the rail, the sidebar, the main area, a side panel and an overlay, that switches to a single column with the tab bar below 768px. - [Card](https://raft-design.botiverse.build/components/card.md): A white container with a hairline that groups one subject on a page — a header with a title and description, content and a footer — or makes a selectable option inside a form. - [ConversationPanel](https://raft-design.botiverse.build/components/conversation-panel.md): The main-area panel for one conversation — a panel header, an optional row of tabs, the message list and the composer. - [FormSection](https://raft-design.botiverse.build/components/form-section.md): One part of a large form, with a small heading, a quiet status chip, a line on what the part is for, and its fields, used in the wide dialog and in drawer forms. - [LegacyTaskPanel](https://raft-design.botiverse.build/components/legacy-task-panel.md): A read-only task details panel built on the thread panel; deprecated, because task details are a dialog with a description list. - [MessageList](https://raft-design.botiverse.build/components/message-list.md): The scrolling timeline of a conversation or thread, with the date lines, the notice at its start and the marker for limited history. - [Panel](https://raft-design.botiverse.build/components/panel.md): A column of the desktop main area with a 56px panel header and its own scrolling content; its header is also the top bar of a phone's pushed pages. - [ProfilePanel](https://raft-design.botiverse.build/components/profile-panel.md): The side panel for one person or agent — a panel header with their avatar and name, then sections of who they are, what they do and what you can do with them. - [Resizable](https://raft-design.botiverse.build/components/resizable.md): Columns or rows whose split people drag, with the drag handle sitting on the seam between them. - [ScrollArea](https://raft-design.botiverse.build/components/scroll-area.md): A region with native scrolling and a thin drawn scrollbar that shows only while it scrolls, for lists and strips inside a fixed frame. - [Separator](https://raft-design.botiverse.build/components/separator.md): A 1px hairline between groups of content in one region, horizontal or vertical, with an optional word in the middle of a horizontal one. - [ThreadPanel](https://raft-design.botiverse.build/components/thread-panel.md): The side panel for one thread — a header that names it, the original message, the replies and a composer, with no tabs. ## Patterns - [Choosing a component](https://raft-design.botiverse.build/patterns/choosing-components.md): Which component to use when people pick something, when you tell them something, for what floats above the page, while they wait, and for a row. - [Page structure](https://raft-design.botiverse.build/patterns/page-structure.md): The regions of a phone page and a desktop screen, how they are layered from the frame inward, and the rule of one line between regions. - [Navigation](https://raft-design.botiverse.build/patterns/navigation.md): How people reach destinations, see where they are, follow links, go back, close things, switch workspaces and switch between the views of one place. - [Agents](https://raft-design.botiverse.build/patterns/agents.md): How an agent is shown — who it is, its state, the work it is doing, what it finished and what it needs — and where working agents appear. - [Tasks](https://raft-design.botiverse.build/patterns/tasks.md): The five task statuses, task lists and boards, task details, how status changes and how tasks are filtered. - [Conversation](https://raft-design.botiverse.build/patterns/conversation.md): The timeline of messages and event lines, what a message can hold, its actions, threads and search in a conversation. - [Forms and settings](https://raft-design.botiverse.build/patterns/forms.md): Settings that apply at once, forms that are saved, the large one-pass form dialog, validation and the danger zone. - [Feedback](https://raft-design.botiverse.build/patterns/feedback.md): How to tell people something — undo instead of confirm, empty versus loading versus failed, where errors go by scope, and how they are worded. - [Responsive layout](https://raft-design.botiverse.build/patterns/responsive.md): The breakpoints, what each width shows, how short desktop windows shrink, and how phone layouts hold at 320px. - [Composites](https://raft-design.botiverse.build/patterns/composites.md): Things the product needs that are built from existing components instead of having a design of their own — task details, the lightbox, embeds, tables, date picking and more. ## Products - [Raft Chat](https://raft-design.botiverse.build/products/raft-chat.md): Raft Chat's own structure — its destinations, what the sidebar lists, where working agents appear, threads, and the layout rules only Raft Chat has. - [Agent profile](https://raft-design.botiverse.build/products/raft-chat/agent-profile.md): An agent's profile page — the floating pixel sticker, who it is, where it runs, what it is working on and what it remembers. - [Channel](https://raft-design.botiverse.build/products/raft-chat/channel.md): A channel — its top bar, the conversation of people and agents, tasks inside the conversation, and threads. - [Channel views](https://raft-design.botiverse.build/products/raft-chat/channel-views.md): The four versions of switching between a channel's chat, tasks and files, what each is for, and how version D works on narrow screens and phones. - [Desktop](https://raft-design.botiverse.build/products/raft-chat/desktop.md): The desktop layout of a channel — the rail's destinations, the Chat sidebar, the main area, and how the web app's top bar fits on top. - [Home](https://raft-design.botiverse.build/products/raft-chat/home.md): The phone's Home screen — the workspace pill and bell on the frame, who is working, the three entry rows, and the channel, agent and direct message groups. - [Onboarding](https://raft-design.botiverse.build/products/raft-chat/onboarding.md): The first-run screens, the one place inside the product that may use the website's full brand. - [Settings](https://raft-design.botiverse.build/products/raft-chat/settings.md): The Settings destination — the person's own row, the Personal, Workspace and Resources groups, and pushed settings pages such as Notifications. - [Tasks](https://raft-design.botiverse.build/products/raft-chat/tasks.md): The Tasks destination — its title and count, the Channel, Assignee and Creator filters, and the status groups. ## Decisions - [Open questions](https://raft-design.botiverse.build/decisions/open-questions.md): The 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 pink](https://raft-design.botiverse.build/decisions/0001-softer-pink.md): The 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 titles](https://raft-design.botiverse.build/decisions/0002-no-all-caps.md): Group headings, dialog titles and badges use sentence case instead of the product code's all caps. - [The tab bar's selection wraps only the icon](https://raft-design.botiverse.build/decisions/0003-tab-bar-icon-sticker.md): On 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 Home](https://raft-design.botiverse.build/decisions/0004-title-on-every-top-level-page.md): Every 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 corner](https://raft-design.botiverse.build/decisions/0005-56px-headers-and-rail.md): Headers 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 bar](https://raft-design.botiverse.build/decisions/0006-working-agents-in-place.md): What 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 sheet](https://raft-design.botiverse.build/decisions/0007-workspace-switcher-sheet.md): On 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 palette](https://raft-design.botiverse.build/decisions/0008-reactions-in-palette.md): The 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 shadow](https://raft-design.botiverse.build/decisions/0009-seams-and-no-control-shadows.md): Lines 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 dark](https://raft-design.botiverse.build/decisions/0010-neutral-toasts-and-tooltips.md): Toasts and tooltips use the neutral dark `layer-hud` instead of yellow with a black border. - [Selection in navigation is a yellow sticker](https://raft-design.botiverse.build/decisions/0011-yellow-navigation-selection.md): The 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 yellow](https://raft-design.botiverse.build/decisions/0012-yellow-rail-selection-in-dark-mode.md): In 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 default](https://raft-design.botiverse.build/decisions/0013-sticker-tabs.md): The selected tab is a yellow sticker by default; the product's underline is drawn as an alternative. - [Unread is pink with ink text, everywhere](https://raft-design.botiverse.build/decisions/0014-pink-unread-with-ink.md): Every unread count is pink with ink text, including new thread replies. - [The focus ring is ink](https://raft-design.botiverse.build/decisions/0015-ink-focus-ring.md): The focus ring is ink, not yellow. - [A selected radio is an ink dot](https://raft-design.botiverse.build/decisions/0016-ink-radio-dot.md): The selected radio shows an ink dot instead of a yellow fill. - [Status and runtime chips are soft tints with one pixel](https://raft-design.botiverse.build/decisions/0017-soft-status-chips.md): Status 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](https://raft-design.botiverse.build/decisions/0018-tertiary-text-contrast.md): `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:1](https://raft-design.botiverse.build/decisions/0019-error-text-contrast.md): Error 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 palette](https://raft-design.botiverse.build/decisions/0020-stone-offline-light.md): The offline presence light uses the palette's stone instead of Tailwind's gray-400. - [Dots and the spinner are square pixels](https://raft-design.botiverse.build/decisions/0021-square-dots-and-spinner.md): Presence 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 shadow](https://raft-design.botiverse.build/decisions/0022-floating-drawers-and-sheets.md): Drawers 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 mode](https://raft-design.botiverse.build/decisions/0023-stickers-in-dark-mode.md): In dark mode, buttons, chips and avatars stay stickers, instead of the product's Elegant washes and round avatars. - [People without a photo show their initials](https://raft-design.botiverse.build/decisions/0024-initials-for-people-without-photo.md): A person without a photo shows their initials on lavender, not a person icon. - [The switch is a pill](https://raft-design.botiverse.build/decisions/0025-pill-switch.md): The switch is a pill shape, yellow when on, instead of the light theme's square switch. - [Upload progress is a cyan track inside the container](https://raft-design.botiverse.build/decisions/0026-upload-progress-track.md): Upload progress is cyan, on its own thin track inside the file card or thumbnail, not pink. - [A modal drawer slides in over a scrim](https://raft-design.botiverse.build/decisions/0027-modal-drawer-scrim.md): A modal drawer slides in, and the rest of the page gets the same scrim as a dialog. - [Centered overlays have a scrim and no animation](https://raft-design.botiverse.build/decisions/0028-centered-overlays-no-animation.md): Dialogs, confirmations, search, task details and large forms all get a scrim and appear without animation. - [Large one-pass forms open as a wide centered dialog](https://raft-design.botiverse.build/decisions/0029-large-form-dialog.md): A 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 group](https://raft-design.botiverse.build/decisions/0030-one-sidebar-row.md): A 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 desktop](https://raft-design.botiverse.build/decisions/0031-panel-header-icon-buttons.md): Desktop 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 search](https://raft-design.botiverse.build/decisions/0032-web-top-bar.md): The desktop web app adds a 48px frame-colored top bar with search in the center. - [A segmented control's track fits its segments](https://raft-design.botiverse.build/decisions/0033-segmented-control-track.md): The 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 use](https://raft-design.botiverse.build/decisions/0034-button-size-by-use.md): Button 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 other](https://raft-design.botiverse.build/decisions/0035-mirrored-top-bar-buttons.md): The 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 page](https://raft-design.botiverse.build/decisions/0036-popup-positioning.md): Popups 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 header](https://raft-design.botiverse.build/decisions/0037-panel-notice.md): A 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 words](https://raft-design.botiverse.build/decisions/0038-button-names-its-dialog.md): A 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 cell](https://raft-design.botiverse.build/decisions/0039-panel-header-chip.md): A 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's](https://raft-design.botiverse.build/decisions/0040-profile-avatar-size.md): The 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 upload](https://raft-design.botiverse.build/decisions/0041-editable-avatar.md): An editable avatar has one overlay with an action icon, shown on hover, on keyboard focus and while uploading. ## Changelog - [Changelog](https://raft-design.botiverse.build/changelog.md): What changed in each release of raft-ui, newest first.