# Petavue design system

- [Getting started](/work/petavue-design-system/docs): How the Petavue front end is put together, and the rules every screen follows.

- **Foundations**
- [Colour](/work/petavue-design-system/docs/foundations/colour): A blue for action, greys for structure, and three status colours. Every value here is read from tokens.css.
- [Typography](/work/petavue-design-system/docs/foundations/typography): One typeface, three weights and a nine-step scale from the Figma design system. Most interface text is 14px or 12px.
- [Spacing](/work/petavue-design-system/docs/foundations/spacing): A 4px-based scale for padding, gaps and layout. Values come from colorography/tokens.css.
- [Radius and elevation](/work/petavue-design-system/docs/foundations/radius-and-elevation): Corner radius, border widths and shadows. Flat by default; shadows only for things that float.
- [Iconography](/work/petavue-design-system/docs/foundations/iconography): Phosphor icons, in the regular weight, sized to the text beside them.
- [Logos](/work/petavue-design-system/docs/foundations/logos): The Petavue logo in its three layouts, and the logos of the tools Petavue connects to. Exported from the Figma design system.
- [Motion](/work/petavue-design-system/docs/foundations/motion): Short, quiet transitions that confirm what happened. Nothing moves for decoration.
- [Writing](/work/petavue-design-system/docs/foundations/writing): How Petavue sounds on screen. Short, specific and calm, written for marketing and revenue teams.

- **Components**
- [Button](/work/petavue-design-system/docs/components/button): Starts an action. One primary button per area, everything else quieter.
- [Text input](/work/petavue-design-system/docs/components/text-input): A labelled single-line field for short values such as names, addresses and IDs.
- [Text area](/work/petavue-design-system/docs/components/text-area): A labelled multi-line field for descriptions, briefs and instructions.
- [Mode Text Box](/work/petavue-design-system/docs/components/mode-text-box): A chat input where the person picks what kind of request they are making before they type it.
- [Dropdown](/work/petavue-design-system/docs/components/dropdown): A labelled form field that picks one value from a list.
- [Date picker](/work/petavue-design-system/docs/components/date-picker): A calendar panel for picking one date or a date range, with month and year menus.
- [Checkbox](/work/petavue-design-system/docs/components/checkbox): Turns one option on or off, or picks several items from a list.
- [Radio](/work/petavue-design-system/docs/components/radio): Picks exactly one option from a short list where every option stays visible.
- [Toggle](/work/petavue-design-system/docs/components/toggle): Switches a setting or feature on or off.
- [Dropdown menu](/work/petavue-design-system/docs/components/dropdown-menu): A list of actions or choices that opens from a button.
- [Dropdown panel](/work/petavue-design-system/docs/components/dropdown-panel): The open list of a dropdown, with search, checkboxes or radios, and a Reset, Cancel and Apply footer.
- [Cascader Item](/work/petavue-design-system/docs/components/cascader-item): A row in a cascading picker, where choosing a table opens its columns.
- [Filters](/work/petavue-design-system/docs/components/filters): Filter and group chips for a report, and the menu that edits one filter: operator, value and empty values.
- [List dropdown](/work/petavue-design-system/docs/components/list-dropdown): A borderless text trigger that opens a short list and shows the chosen value.
- [Model mode menu](/work/petavue-design-system/docs/components/model-mode-menu): Lets people pick how much reasoning Sage uses, from Pro, Standard and Mini.
- [Tooltip](/work/petavue-design-system/docs/components/tooltip): A short label that appears on hover or focus.
- [Dialog](/work/petavue-design-system/docs/components/dialog): The design-system dialog panel, with a coloured top rail, a title, a body and Cancel and Confirm buttons.
- [Dependency dialog](/work/petavue-design-system/docs/components/dependency-dialog): Explains why something can't be changed yet, and lists what depends on it.
- [Widget access dialog](/work/petavue-design-system/docs/components/widget-access-dialog): Generates a link to a widget's latest output, for use outside Petavue.
- [Modal](/work/petavue-design-system/docs/components/modal): The older MUI-based modal still used by settings, sessions and dashboards. Use Dialog for new work.
- [Tag](/work/petavue-design-system/docs/components/tag): A small coloured label for a status or category. Badge and PlannerChip are covered here too.
- [Avatar](/work/petavue-design-system/docs/components/avatar): Initials in a tinted circle, for the signed-in user and for people in lists.
- [Tabs](/work/petavue-design-system/docs/components/tabs): Underlined tabs that switch between sections of a page.
- [Tab toggle](/work/petavue-design-system/docs/components/tab-toggle): A small pill button for switching views inside a card or panel. You group several to make a switch.
- [Stepper](/work/petavue-design-system/docs/components/stepper): Shows where someone is in a short, fixed sequence of steps, across or down the page.
- [Banner](/work/petavue-design-system/docs/components/banner): A light blue message across the top of a page or panel, with an optional dismiss.
- [Notification](/work/petavue-design-system/docs/components/notification): A solid coloured bar with a one-line message, shown in place on the page. It stays until it is closed.
- [Toast](/work/petavue-design-system/docs/components/toast): A short message that confirms an action or reports a failure, then goes away on its own.
- [Spinner](/work/petavue-design-system/docs/components/spinner): An eight-dot loading indicator in primary blue, for waits where you cannot show the shape of the result.
- [Skeleton](/work/petavue-design-system/docs/components/skeleton): A pulsing grey block that holds the place of content while it loads, so the layout does not jump when it arrives.
- [Card Loader](/work/petavue-design-system/docs/components/card-loader): A stack of three cards that cycles while something takes a few seconds to load.
- [Card](/work/petavue-design-system/docs/components/card): A white box with a grey border and 12px corners that groups related content. It lifts slightly on hover.
- [Integration card](/work/petavue-design-system/docs/components/integration-card): One data source on the Integrations page: its logo, category, a line about what it does, and the action for its state.
- [Data table](/work/petavue-design-system/docs/components/data-table): A bordered table with sortable columns and a scroll cap, for small sets of rows that are already loaded.

- **Product components**
- [Agent mark](/work/petavue-design-system/docs/product/agent-mark): The filled icon, in its own colour, that stands for one agent family.
- [Source icon](/work/petavue-design-system/docs/product/source-icon): The logo or neutral glyph for an ad platform, tool or data source, looked up by its name.
- [Status dot](/work/petavue-design-system/docs/product/status-dot): An 8px dot that shows whether a chat session is connected, thinking or compacting.
- [Workflow glyph](/work/petavue-design-system/docs/product/workflow-glyph): The Workflows icon from the menu bar, as an inline glyph that takes the colour of the text around it.
- [Composer menu](/work/petavue-design-system/docs/product/composer-menu): A labelled choice, such as Output or Format, that sits under the Home composer and in toolbars and opens a list of options.
- [Recommendation card](/work/petavue-design-system/docs/product/recommendation-card): One recommendation on Home, as a card in the grid or a row in the list, with what it is, what it says, how soon and where.
- [Filter dropdown](/work/petavue-design-system/docs/product/filter-dropdown): The compact workflow filter on the Recommendations page: the chosen option on a small button, and a list with a count beside each option.
- [Decision modal](/work/petavue-design-system/docs/product/decision-modal): The small modal that asks for a note before a recommendation is put on hold or rejected.
- [Empty state](/work/petavue-design-system/docs/product/empty-state): Fills a library tab that has nothing to show, with one line on how things get there and the one action that starts it.
- [Library toolbar](/work/petavue-design-system/docs/product/library-toolbar): The row above a library grid: the scope switch on the left and its filter menus on the right.
- [Status tag and filing](/work/petavue-design-system/docs/product/status-tag): Shows whether a workspace component is a draft or published, and the folder and tags it is filed under.
- [Details dialog](/work/petavue-design-system/docs/product/details-dialog): Edits the name, description, folder and tags of a library component or template, which is what the agent reads to choose it.
- [Publish dialog](/work/petavue-design-system/docs/product/publish-dialog): Picks where a landing page goes live, shows what it goes live with, and takes a live page offline.
- [Page settings dialog](/work/petavue-design-system/docs/product/page-settings-dialog): Everything about a landing page apart from where it is published: its name, access, search and sharing previews, tracking and forms.
- [Chat pane](/work/petavue-design-system/docs/product/chat-pane): The resizable chat column beside the canvas in the page builder, the creative editor and the component editor.
- [Code view](/work/petavue-design-system/docs/product/code-view): Shows a landing page as the project it is published from: a searchable file tree, the open file with line numbers, copy and download as a zip.
- [Import brand dialog](/work/petavue-design-system/docs/product/import-brand-dialog): Reads a design system from a company's website, shows what it found on a sample section, and applies it to the workspace.

- **Patterns**
- [Forms](/work/petavue-design-system/docs/patterns/forms): Labels above fields, errors under them, one primary action at the end.
- [Menus and filters](/work/petavue-design-system/docs/patterns/menus-and-filters): Every dropdown in the product is the same menu. Filters sit at the right of a toolbar and show their current value.
- [Dialogs and confirmation](/work/petavue-design-system/docs/patterns/dialogs): Use a dialog for a decision that needs full attention, and confirm anything that cannot be undone.
- [Empty states](/work/petavue-design-system/docs/patterns/empty-states): Say what is missing and offer one way forward.
- [Loading](/work/petavue-design-system/docs/patterns/loading): Skeletons when the layout is known, a spinner when it is not, and progress on the button that started the work.
- [Chat composer](/work/petavue-design-system/docs/patterns/chat-composer): The box people type into to ask Sage or start building. Output and model choices inside it, build options in a tray below.
- [Page header and tabs](/work/petavue-design-system/docs/patterns/page-layout): Every page starts with the same header row, and splits into tabs when it holds several lists.

- **Reference**
- [Icons](/work/petavue-design-system/docs/icons): Every Phosphor icon, searchable. Pick a weight and click an icon to copy its import.
- [For AI & LLMs](/work/petavue-design-system/docs/ai): Everything on this site as Markdown, and the rules a coding agent follows when it builds Petavue UI.