# Rogo Design System: for agents

The design system behind Rogo: the product components, the brand, and the patterns they are built from. Every page is available as plain markdown, so you never need to render this site to read it.

## How to read this site

| What you want | Where it is |
| --- | --- |
| Any page as markdown | append `.md` to its URL: `https://design.rogo.ai/product/button.md` |
| The index of every page | https://design.rogo.ai/llms.txt |
| The whole site in one fetch | https://design.rogo.ai/llms-full.txt |
| Machine-readable route list | https://design.rogo.ai/sitemap.xml |

Links inside the markdown are already rewritten to absolute `.md` URLs, so you can follow them without ever leaving markdown. Every page opens with YAML front matter carrying its title, section, description, and the address of the HTML original.

## What is here

- **Product**: the components and foundations of the Rogo product interface. Import them from `@rogo-technologies/ui`.
- **Brand**: the marks, the marketing palette and type scale, and the components built on them. Brand tokens and product tokens never mix.

## Using it

- Reach for an existing primitive before building one. If a page here documents it, it ships, and rebuilding it by hand is the most common mistake in this codebase.
- Style with the documented tokens, never raw color or shadow values.
- Each component page carries its import path, its props, and worked examples in fenced code blocks. Read the page for the component you are about to use, not just its name.

Some pages are documented publicly but serve a sign-in wall to anyone without a Rogo account; they are marked below and return `401` in markdown too.

## Every page

### Product

- [Product](https://design.rogo.ai/product.md): The visual foundations and shared language behind Rogo's product experience.
- [Colors](https://design.rogo.ai/product/colors.md): Foundational color tokens for backgrounds, borders, text and charts.
- [Typography](https://design.rogo.ai/product/typography.md): Text styles for headings and body content.
- [Icons](https://design.rogo.ai/product/icons.md): A refined library of SVG icons to reinforce actions and help scanning.
- [Illustrations](https://design.rogo.ai/product/illustrations.md): Compact illustrations for artifacts, file previews, and empty states.
- [Logos](https://design.rogo.ai/product/logos.md): Product primitives for rendering the Rogo mark in app chrome, and the co-brand slot.
- [Shadows](https://design.rogo.ai/product/shadows.md): Elevation tokens for depth and visual hierarchy.
- [Accordion](https://design.rogo.ai/product/accordion.md): A vertically stacked set of collapsible sections with coordinated open state and arrow-key navigation between triggers.
- [Alert Dialog](https://design.rogo.ai/product/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Avatar](https://design.rogo.ai/product/avatar.md): Avatars display a user's profile image or initials as fallback.
- [Badge](https://design.rogo.ai/product/badge.md): Badges highlight small pieces of information like statuses or counts.
- [Button](https://design.rogo.ai/product/button.md): Buttons trigger actions. Use the brand variant for the one main action on a surface, lower-emphasis variants for everything else.
- [Calendar](https://design.rogo.ai/product/calendar.md): Readonly calendar views (mini calendars, week strips, event grids, heatmaps) built on the headless calendar-core utilities.
- [Card](https://design.rogo.ai/product/card.md): Cards group related content and actions on a single surface.
- [Chart](https://design.rogo.ai/product/chart.md): Recharts wrapper with theme-aware series colors, tooltip, and legend.
- [Checkbox](https://design.rogo.ai/product/checkbox.md): Checkboxes allow users to select one or more items from a set of options.
- [Collapsible](https://design.rogo.ai/product/collapsible.md): A single button toggling a single panel. Unstyled by default, so use it for one-off show/hide sections.
- [Combobox](https://design.rogo.ai/product/combobox.md): Flexible input for selecting from a list with filtering.
- [Context Menu](https://design.rogo.ai/product/context-menu.md): Context menus put actions on an element itself, opened by right-click or long press instead of a visible trigger.
- [Date Picker](https://design.rogo.ai/product/date-picker.md): Form controls for choosing a single date, multiple dates, or a range: a styled calendar grid composed with Popover and Button for date fields.
- [Dialog](https://design.rogo.ai/product/dialog.md): Dialogs interrupt the user flow for focused tasks or confirmations.
- [Drawer](https://design.rogo.ai/product/drawer.md): Slide-in panel for focused tasks that don't deserve a full dialog.
- [Dropdown Menu](https://design.rogo.ai/product/dropdown-menu.md): Dropdown menus display a list of actions or options that a user can choose from, triggered by a button.
- [Fluid Avatar](https://design.rogo.ai/product/fluid-avatar.md): A WebGL identity mark whose texture drifts like suspended dust.
- [Hover Scroll Text](https://design.rogo.ai/product/hover-scroll-text.md): Truncated single-line text that scrolls horizontally on hover to reveal the full string.
- [Input](https://design.rogo.ai/product/input.md): Text inputs capture short, single-line text values for forms and user data entry.
- [Kbd](https://design.rogo.ai/product/kbd.md): Keycaps render a single key, and Kbd groups render a full shortcut.
- [Popover](https://design.rogo.ai/product/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress Bar](https://design.rogo.ai/product/progress-bar.md): Displays the status of a task that takes a long time.
- [Radio Group](https://design.rogo.ai/product/radio-group.md): Radio groups let users select a single option from a set of mutually exclusive choices.
- [Scroll Area](https://design.rogo.ai/product/scroll-area.md): Scrollable container for content that exceeds available space.
- [Select](https://design.rogo.ai/product/select.md): A dropdown for choosing a single value from a predefined list.
- [Selectors](https://design.rogo.ai/product/selectors.md): Composite picker patterns built on Dropdown Menu: model selector, datasource selector, settings toggles.
- [Separator](https://design.rogo.ai/product/separator.md): Thin rule that divides related groups of content.
- [Separator Dot](https://design.rogo.ai/product/separator-dot.md): Square dot that separates inline metadata.
- [Shimmer Text](https://design.rogo.ai/product/shimmer-text.md): Animated text effect for AI-generating and loading states.
- [Skeleton](https://design.rogo.ai/product/skeleton.md): Placeholder blocks and text lines shown while content loads.
- [Slider](https://design.rogo.ai/product/slider.md): A control that lets users select a numeric value from a range by dragging a thumb along a track.
- [Switch](https://design.rogo.ai/product/switch.md): Switches toggle a single setting on or off.
- [Tabs](https://design.rogo.ai/product/tabs.md): A set of layered panels where only one panel is displayed at a time, triggered by corresponding tab buttons.
- [Textarea](https://design.rogo.ai/product/textarea.md): Textareas capture multiline, free-form text such as messages, notes, and prompts.
- [Toast](https://design.rogo.ai/product/toast.md): Toasts are transient messages for feedback after user actions.
- [Tooltip](https://design.rogo.ai/product/tooltip.md): Tooltips display brief, informative text on hover or focus.
- [Empty State](https://design.rogo.ai/product/empty-state.md): An abstract, responsive composition for the empty, zero-results, and first-run states of any surface. _(Rogo sign-in required)_
- [File Attachment](https://design.rogo.ai/product/file-attachment.md): A composition for rendering file attachments: typed cards and image previews that zoom on click. _(Rogo sign-in required)_
- [Floating Bar](https://design.rogo.ai/product/floating-bar.md): A floating contextual action bar: a dark pill that hovers over content to act on a transient state like a multi-select or an edit mode. _(Rogo sign-in required)_
- [Input Banner](https://design.rogo.ai/product/input-banner.md): A slim status strip that attaches beneath a composer input: slotted icon, copy, and actions. _(Rogo sign-in required)_
- [Markdown Editor](https://design.rogo.ai/product/markdown-editor.md): A tiptap-based markdown editor composition with click-to-edit and always-editing modes, autosave, and a formatting toolbar. _(Rogo sign-in required)_
- [Media Controls](https://design.rogo.ai/product/media-controls.md): An overlay control bar for media viewers: bottom-left and bottom-right clusters of actions. _(Rogo sign-in required)_
- [Product Feature Banner](https://design.rogo.ai/product/product-feature-banner.md): A composition for promoting a product feature: slotted illustration, copy, and actions in a dismissible banner. _(Rogo sign-in required)_
- [Panels](https://design.rogo.ai/product/panels.md): The resizable, agent-style panel layout: a dismissible inbox, a main panel, and a mode-driven aside that reclaims inbox space when it opens. _(Rogo sign-in required)_
- [Sidebar](https://design.rogo.ai/product/sidebar.md): The collapsible app-shell sidebar: a Base UI primitive with header/content/footer, menu groups, an icon rail with tooltips, and a mobile drawer. _(Rogo sign-in required)_
- [Reasoning Trace](https://design.rogo.ai/product/reasoning-trace.md): The agent's thinking + tool-call trace: a shimmer-while-running stream that collapses to 'Worked for Ns' and expands into a dotted timeline. _(Rogo sign-in required)_
- [Pagination](https://design.rogo.ai/product/pagination.md): The data-table pagination footer: smart page slots, an editable page input, and a per-page select. _(Rogo sign-in required)_
- [Data Table](https://design.rogo.ai/product/data-table.md): The screenings data grid, abstracted: a TanStack-backed table with column reorder, resize, sorting, and a paginated footer. _(Rogo sign-in required)_
- [Breadcrumb](https://design.rogo.ai/product/breadcrumb.md): The breadcrumb trail used across project, thread, and file headers: semantic links, separators, and a current page. _(Rogo sign-in required)_
- [Thread Outline](https://design.rogo.ai/product/thread-outline.md): A floating stroke-rail table of contents for a conversation, with a hover popover. _(Rogo sign-in required)_
- [Inline](https://design.rogo.ai/product/inline.md): The agent-facing component set: design-system components an agent composes into a live, cited visual that renders inline in the chat.
- [Stat Tile](https://design.rogo.ai/product/inline/stat-tile.md): The house KPI tile - muted label, large mono figure, delta and sub-line - laid out in a StatGrid.
- [Metric Row](https://design.rogo.ai/product/inline/metric-row.md): A separator-divided list of label/value rows - the house breakdown for segments and line items.
- [Comparison Table](https://design.rogo.ai/product/inline/comparison-table.md): A compact, framed table for comparing entities side by side, with numeric columns right-aligned.
- [Chart Card](https://design.rogo.ai/product/inline/chart-card.md): A titled card wrapping the design-system chart container - the standard framed chart component.
- [Trend Tile](https://design.rogo.ai/product/inline/trend-tile.md): A KPI tile with a full-bleed sparkline - a compact metric-with-trend not in the base library.
- [Cite](https://design.rogo.ai/product/inline/cite.md): The numbered citation pill that wires a sourced figure inside a component to the app's source panel.
- [Custom](https://design.rogo.ai/product/inline/custom.md): The freeform escape hatch: an agent hand-rolls raw SVG, canvas, or a CDN library inside a component when no composition fits.
- [Inline Agent Skill](https://design.rogo.ai/product/inline/skill.md): The inline-components agent template: what to watch out for when generating good React for inline components. _(Rogo sign-in required)_
- [Confirm Dialog](https://design.rogo.ai/product/confirm-dialog.md): A packaged confirmation dialog that guarantees exactly one outcome per close: confirm, cancel, or dismiss.
- [Copyable Field](https://design.rogo.ai/product/copyable-field.md): Labelled read-only value with a copy-to-clipboard button. _(Rogo sign-in required)_
- [Form](https://design.rogo.ai/product/form.md): Form primitives that wire react-hook-form and zod validation to accessible labels and inline error messages.
- [Label](https://design.rogo.ai/product/label.md): Labels name a form control and move focus to it when clicked, for controls not managed by the Form layer.
- [Motion](https://design.rogo.ai/product/motion.md): Easing tokens for transitions and animations.
- [Page Header](https://design.rogo.ai/product/page-header.md): The one page and section header for admin surfaces. _(Rogo sign-in required)_
- [Segmented Control](https://design.rogo.ai/product/segmented-control.md): Single-select pill control for rescoping a view.
- [Settings Row](https://design.rogo.ai/product/settings-row.md): Label and description on the left, control on the right. _(Rogo sign-in required)_

### Brand

- [Brand](https://design.rogo.ai/brand.md): The identity Rogo is built with: the marks, the assets, and how to use them.
- [Guidelines](https://design.rogo.ai/brand/guidelines.md): How to use the Rogo identity: the marks, clear space and minimum sizes, voice and tone, imagery, and layout. _(Rogo sign-in required)_
- [Colors](https://design.rogo.ai/brand/colors.md): The marketing palette: the colours Rogo's brand surfaces are built from.
- [Typography](https://design.rogo.ai/brand/typography.md): The marketing type scale: ABC Arizona for display, Inter for everything else.
- [Breakpoints](https://design.rogo.ai/brand/breakpoints.md): The viewport widths brand surfaces respond at, and why they are opt-in.
- [Elevation](https://design.rogo.ai/brand/elevation.md): Shadows for brand surfaces, with the hairline baked in.
- [Patterns](https://design.rogo.ai/brand/patterns.md): The chequer, the wordmark field and the paper grain: how a brand surface gets its texture.
- [Logos](https://design.rogo.ai/brand/logos.md): The Rogo wordmark and logomark, and how to render them. _(Rogo sign-in required)_
- [Mr Rogo](https://design.rogo.ai/brand/mr-rogo.md): Meet Mr Rogo, the friendly face of Rogo.
- [Assets](https://design.rogo.ai/brand/assets.md): The wordmark and icon mark to download, in every format, with the light and dark versions of each. _(Rogo sign-in required)_
- [Button](https://design.rogo.ai/brand/button.md): The marketing call to action, from the brand package.
- [Carousel](https://design.rogo.ai/brand/carousel.md): Paged content on the marketing surfaces: one engine, composable parts.
- [CTA Headline](https://design.rogo.ai/brand/cta-headline.md): The page-closing call to action, with the arrow set into the sentence.
- [Navigation Menu](https://design.rogo.ai/brand/navigation-menu.md): The marketing site's primary navigation, with sub-link panels.
- [Popover](https://design.rogo.ai/brand/popover.md): A small floating panel anchored to a trigger.
- [Separator Dot](https://design.rogo.ai/brand/separator-dot.md): The square divider between two pieces of inline metadata, flat or on its point.
- [Sheet](https://design.rogo.ai/brand/sheet.md): A panel that slides in over the page.
- [Skeleton](https://design.rogo.ai/brand/skeleton.md): The placeholder a marketing surface holds while its content is in flight.
- [Video Player](https://design.rogo.ai/brand/video-player.md): A frame of film wearing Rogo's chrome rather than the browser's.