# Inkbox design system

> Components, tokens and instructions for building Inkbox interfaces.

## Start here

- [Agent instructions](https://inkbox-ds.vercel.app/agents.md): setup, choosing components, composing pages and verification.
- [Registry JSON](https://inkbox-ds.vercel.app/r/index.json): complete inventory including dependencies.
- [Complete reference](https://inkbox-ds.vercel.app/llms-full.txt): guide, examples and source for every item. Prefer individual references when possible.

## Components and tokens

- [Inkbox theme](https://inkbox-ds.vercel.app/r/theme.md): The Inkbox tokens and the Tailwind names that read them.
- [Accordion](https://inkbox-ds.vercel.app/r/accordion.md): Sections that open in place: 14px ink labels with a caret at the right, ruled by the faint lilac line.
- [Alert Dialog](https://inkbox-ds.vercel.app/r/alert-dialog.md): The console's dialog for a question that must be answered: title, a secondary line and two pills.
- [Alert](https://inkbox-ds.vercel.app/r/alert.md): The vault box on the lilac, the pale cyan info note, the sand warning banner with a note at the right, and a red error.
- [Aspect Ratio](https://inkbox-ds.vercel.app/r/aspect-ratio.md): A frame that holds media at a fixed shape.
- [Attachment](https://inkbox-ds.vercel.app/r/attachment.md): A white file card with the field edge: the file in a pink tile, its name in 14px medium ink and its size in IBM Plex Mono.
- [Avatar](https://inkbox-ds.vercel.app/r/avatar.md): The rail's 22px blue initial tile with 4px corners, and the round agent portrait, with a fallback, status dot and group.
- [Badge](https://inkbox-ds.vercel.app/r/badge.md): The pink BETA and ADMIN marks, the green Included pill, the pale webhook tags, and the tunnel's status wells.
- [Breadcrumb](https://inkbox-ds.vercel.app/r/breadcrumb.md): A trail of 14px muted links ending in the current page in ink, with faint carets between.
- [Bubble](https://inkbox-ds.vercel.app/r/bubble.md): A message bubble: incoming on the lilac, outgoing in the action purple, 16px corners with a 4px tail corner.
- [Button Group](https://inkbox-ds.vercel.app/r/button-group.md): Buttons, fields and text segments joined into one bar with shared edges and outer corners only.
- [Button](https://inkbox-ds.vercel.app/r/button.md): The purple pill for the main action, the lilac pill, the white outline key, the soft lilac key, ghost glyphs and text links.
- [Calendar](https://inkbox-ds.vercel.app/r/calendar.md): A month grid of 36px keys: today in purple, selected days as purple keys, a range on a lilac band.
- [Card](https://inkbox-ds.vercel.app/r/card.md): The white card with the field edge and 8px corners, the raised white panel, and the lilac channel card.
- [Carousel](https://inkbox-ds.vercel.app/r/carousel.md): A row of slides that snap into place, with white round previous and next keys outside it.
- [Chart](https://inkbox-ds.vercel.app/r/chart.md): Line, area, bar and pie charts in SVG with lilac rules, 12px muted labels and a white floating tooltip.
- [Checkbox](https://inkbox-ds.vercel.app/r/checkbox.md): An 18px box with 4px corners and a gray edge that fills purple with a white check.
- [Code Block](https://inkbox-ds.vercel.app/r/code-block.md): The event catalog's code viewer: a gray head with the language and a copy glyph over an off-white body with line numbers.
- [Collapsible](https://inkbox-ds.vercel.app/r/collapsible.md): A part that shows and hides in place, opening with its height.
- [Combobox](https://inkbox-ds.vercel.app/r/combobox.md): The select trigger that opens a searchable list, for one value or several shown as lilac chips.
- [Command](https://inkbox-ds.vercel.app/r/command.md): A search row over grouped 36px results with purple group headings, in a panel or a dialog.
- [Context Menu](https://inkbox-ds.vercel.app/r/context-menu.md): The dropdown menu's panel and rows, opened with a right click or a long press on an area.
- [Data Table](https://inkbox-ds.vercel.app/r/data-table.md): The console's table with a filter field, sortable heads, row checkboxes, a Columns menu and the lilac pagination bar.
- [Date Picker](https://inkbox-ds.vercel.app/r/date-picker.md): The select trigger with a calendar glyph that opens the calendar in a white panel, for one date or a range, with optional presets.
- [Dialog](https://inkbox-ds.vercel.app/r/dialog.md): A centered white panel with 16px corners over the blurred, ink-tinted page.
- [Direction](https://inkbox-ds.vercel.app/r/direction.md): Sets left-to-right or right-to-left for every component inside it.
- [Drawer](https://inkbox-ds.vercel.app/r/drawer.md): A panel pulled up from the bottom edge with a handle, dragged away with a flick or a pull.
- [Dropdown Menu](https://inkbox-ds.vercel.app/r/dropdown-menu.md): A raised white menu of 36px rows with filled glyphs, lilac highlight, purple section labels and checks.
- [Empty](https://inkbox-ds.vercel.app/r/empty.md): The centered empty state: the 3D octopus under an arc of glyph circles, a 22px bold title, a short description and a purple pill.
- [Field](https://inkbox-ds.vercel.app/r/field.md): A field's label, control, description and error stacked 4px apart, fields 12px apart, with the 'or' hairline between two ways in.
- [Form](https://inkbox-ds.vercel.app/r/form.md): react-hook-form fields laid out as the console's forms: a 14px label, the control, a muted description and a 12px red message.
- [Hover Card](https://inkbox-ds.vercel.app/r/hover-card.md): A raised white preview card that opens after a short pause on a link or handle.
- [Input Group](https://inkbox-ds.vercel.app/r/input-group.md): The console's field with addons inside it: glyphs, text, a lilac suffix segment, buttons, or the handle check's state glyph.
- [Input OTP](https://inkbox-ds.vercel.app/r/input-otp.md): Joined 40px slots in the field's edge with a purple active slot and a blinking caret.
- [Input](https://inkbox-ds.vercel.app/r/input.md): The 40px field with 8px corners, the lilac-gray edge and a light purple placeholder.
- [Item](https://inkbox-ds.vercel.app/r/item.md): A row of content: an email in the inbox, a webhook event, or a rail row, washing lilac when hovered or selected.
- [Kbd](https://inkbox-ds.vercel.app/r/kbd.md): A 20px lilac key cap with 4px corners and 12px medium text.
- [Label](https://inkbox-ds.vercel.app/r/label.md): A field's 14px regular ink label on a 24px line.
- [Marker](https://inkbox-ds.vercel.app/r/marker.md): A 12px muted marker in a conversation or list, alone, between two hairlines, ruled underneath, or as the purple unread line.
- [Menubar](https://inkbox-ds.vercel.app/r/menubar.md): A lilac tab track of medium triggers whose menus are the dropdown menu's raised panels.
- [Message Scroller](https://inkbox-ds.vercel.app/r/message-scroller.md): A conversation's scroll area that opens at the newest message, stays pinned to it as messages arrive, and offers a white Jump to latest pill once the reader scrolls up.
- [Message](https://inkbox-ds.vercel.app/r/message.md): One message in a conversation: a 32px avatar tile, the sender and time in 14px, the bubbles, and a 12px muted footer.
- [Native Select](https://inkbox-ds.vercel.app/r/native-select.md): The browser's own select dressed as the console's: a white 40px field with the Shadow/S ring and an ink caret.
- [Navigation Menu](https://inkbox-ds.vercel.app/r/navigation-menu.md): Nav-row triggers and links with panels that open in a raised white viewport.
- [Pagination](https://inkbox-ds.vercel.app/r/pagination.md): Muted Previous and Next with carets around ink page numbers; the current page is a white key with Shadow/S.
- [Popover](https://inkbox-ds.vercel.app/r/popover.md): A raised white panel with 8px corners and the floating shadow that grows out of the control that opened it.
- [Progress](https://inkbox-ds.vercel.app/r/progress.md): An 8px lilac pill track filled with the purple.
- [Questionnaire](https://inkbox-ds.vercel.app/r/questionnaire.md): Questions asked one at a time: white choice cards with the brand's radio or checkbox and a shortcut key, a typed answer, a progress count and Previous, Skip and Next pills.
- [Radio Group](https://inkbox-ds.vercel.app/r/radio-group.md): 18px circles; the chosen one takes a thick pink ring around a white center.
- [Resizable](https://inkbox-ds.vercel.app/r/resizable.md): Panels split by the console's 1px lilac rule, which can be dragged or moved with the arrow keys.
- [Scroll Area](https://inkbox-ds.vercel.app/r/scroll-area.md): A region that scrolls inside the page with a thin lilac-gray bar.
- [Select](https://inkbox-ds.vercel.app/r/select.md): A white 40px field with the Shadow/S ring and an ink caret that opens the console's white menu.
- [Separator](https://inkbox-ds.vercel.app/r/separator.md): A 1px rule in the faint lilac, across or down.
- [Sheet](https://inkbox-ds.vercel.app/r/sheet.md): A white panel that slides from an edge over the blurred, ink-tinted page, with the dialog's title and close glyph.
- [Sidebar](https://inkbox-ds.vercel.app/r/sidebar.md): The console's rail: 288px of white with a hairline edge, the lockup, 38px rows with filled glyphs, purple group labels and a ruled foot; the lilac second rail for an agent's workspace.
- [Skeleton](https://inkbox-ds.vercel.app/r/skeleton.md): A lilac placeholder with 8px corners that breathes softly while content loads.
- [Slider](https://inkbox-ds.vercel.app/r/slider.md): A 6px lilac-gray track filled purple to the value, with the switch's white knob.
- [Sonner](https://inkbox-ds.vercel.app/r/sonner.md): Toasts as white floating panels with a filled status glyph, an ink title, a muted description and a purple action.
- [Spinner](https://inkbox-ds.vercel.app/r/spinner.md): The console's turning eight-spoke glyph, in the color of the text around it.
- [Surface](https://inkbox-ds.vercel.app/r/surface.md): A white or lilac ground that also keeps the dialogs, menus and tooltips opened inside it.
- [Switch](https://inkbox-ds.vercel.app/r/switch.md): A 44 by 24 pill: off gray, purple when on, with a white knob that slides across.
- [Table](https://inkbox-ds.vercel.app/r/table.md): The console's table: a lilac head with muted labels, a separate white body with Shadow/S and 64px rows, and a lilac foot.
- [Tabs](https://inkbox-ds.vercel.app/r/tabs.md): A lilac track of medium labels; the selected tab is a white key with Shadow/S.
- [Textarea](https://inkbox-ds.vercel.app/r/textarea.md): The field's 8px corners and lilac-gray edge around several lines of 14px text, 72px tall to start.
- [Toast](https://inkbox-ds.vercel.app/r/toast.md): The Radix toast API in the same white floating look, with an outline action and a red edge for destructive toasts.
- [Toggle Group](https://inkbox-ds.vercel.app/r/toggle-group.md): The segmented choice: a lilac track of 38px choices where the chosen one is a white key with Shadow/S.
- [Toggle](https://inkbox-ds.vercel.app/r/toggle.md): A 38px key with a glyph or a medium label that holds the lilac (or turns white in outline) while pressed.
- [Tooltip](https://inkbox-ds.vercel.app/r/tooltip.md): A short ink label with white 13px text, 6px corners and a small arrow.
- [Trace](https://inkbox-ds.vercel.app/r/trace.md): An agent's steps as quiet 14px lines with a glyph, a running step that breathes and steps that open to their detail on a hairline.
- [Typography](https://inkbox-ds.vercel.app/r/typography.md): The console's type as components: regular titles, 14px body copy, muted lines, lists, quotes and inline keys.
- [cn](https://inkbox-ds.vercel.app/r/utils.md): Merges class names and resolves conflicts between the brand's own scales (text-body, rounded-control, shadow-s).