# Robert Ritacca

> Portfolio of Robert Ritacca, Principal Product Designer: AI product case studies (Intuit, Meta, Augmenta) and robr0 DS, a fully documented one-person design system with an open React component library.

## Work

Case studies. Index at https://robertritacca.com/work.

- [TurboTax in ChatGPT & Claude](https://robertritacca.com/work/embedded-ai-turbotax)
- [Agent Chat Platform](https://robertritacca.com/work/intuit-agent-chat)
- [Construction Platform](https://robertritacca.com/work/augmenta-ai)
- [Career Profile](https://robertritacca.com/work/meta-career-profile)
- [Offer Creation Flow](https://robertritacca.com/work/meta-offers)
- [Building robr0 DS](https://robertritacca.com/work/robr0-ds)
- [FirstCaribbean](https://robertritacca.com/work/cibc-firstcaribbean)

## Design system docs

How robr0 DS works and the artifacts you can reuse. Index at https://robertritacca.com/docs.

- [Overview](https://robertritacca.com/overview)
- [Get started](https://robertritacca.com/docs/get-started)
- [Claude MD](https://robertritacca.com/blueprints/claude)
- [Design MD](https://robertritacca.com/blueprints/design)
- [Content MD](https://robertritacca.com/blueprints/content-design)
- [Skills](https://robertritacca.com/skills)
- [Loops](https://robertritacca.com/loops)
- [Project journal](https://robertritacca.com/project-journal)

## Foundations

Design tokens and language. Index at https://robertritacca.com/foundations.

- [Elevation](https://robertritacca.com/foundations/elevation)
- [Icons](https://robertritacca.com/foundations/icons)
- [Logos](https://robertritacca.com/foundations/logos)
- [Motion](https://robertritacca.com/foundations/motion)
- [Primitive colours](https://robertritacca.com/foundations/colour-primitives)
- [Semantic colours](https://robertritacca.com/foundations/colour-mode)
- [Semantic spacing](https://robertritacca.com/foundations/spatial)
- [Typography](https://robertritacca.com/foundations/typography)

## Components

React component documentation with live examples. Index at https://robertritacca.com/components.

- [Components overview](https://robertritacca.com/components)
- [Accordion](https://robertritacca.com/components/accordion): Collapsible content sections for organising related information.
- [Alert](https://robertritacca.com/components/alert): Contextual feedback with status variants, optional dismiss, and compact sizing.
- [Alert dialog](https://robertritacca.com/components/alert-dialog): Modal confirmation overlay with title, description, and confirm / cancel actions.
- [App layout](https://robertritacca.com/components/app-layout): Full-page template pairing the collapsible App sidebar with a centred content area.
- [App sidebar](https://robertritacca.com/components/app-sidebar): Collapsible navigation rail with accordion sub-items, category headings, and profile section.
- [Avatar](https://robertritacca.com/components/avatar): User profile image with initials and icon fallback, status indicator, and multiple sizes.
- [Badge](https://robertritacca.com/components/badge): Small inline status labels with info, positive, warning, error, and neutral variants.
- [Breadcrumb](https://robertritacca.com/components/breadcrumb): Hierarchical navigation trail showing the user's location within the site.
- [Button](https://robertritacca.com/components/button): Primary and secondary button variants in default and compact sizes, with icon support and multiple states.
- [Button group](https://robertritacca.com/components/button-group): Horizontal and vertical button group layouts for related actions and navigation patterns.
- [Card](https://robertritacca.com/components/card): Card components for previews, navigation, and token documentation, from content cards to colour swatches and typography specimens.
- [Carousel](https://robertritacca.com/components/carousel): Sliding content viewer with navigation arrows, dot indicators, auto-play, and keyboard support.
- [Chart](https://robertritacca.com/components/chart): Data visualisation components built on Recharts. Includes bar, line, pie, and radial chart types with design-system token integration.
- [Checkbox](https://robertritacca.com/components/checkbox): Custom checkbox with check and indeterminate states, keyboard accessible with animated transitions.
- [Chip](https://robertritacca.com/components/chip): Compact pills for attributes, filters, and inline metadata.
- [Circular button](https://robertritacca.com/components/circular-button): Round icon button with primary and secondary variants, default and compact sizes.
- [Code block](https://robertritacca.com/components/code-block): Monospace code with a header and one-click copy.
- [Colour picker](https://robertritacca.com/components/color-picker): Swatch trigger opening a saturation area, hue and alpha sliders, and a hex field; controlled or uncontrolled.
- [Combobox](https://robertritacca.com/components/combobox): A filterable select that narrows options as the user types, with multi-select chips, grouping, and async loading.
- [Command palette](https://robertritacca.com/components/command-palette): A modal Cmd+K launcher that searches a grouped command list, with keyboard navigation and shortcut hints.
- [Contact card](https://robertritacca.com/components/contact-card): Linked contact method with icon, label, and value.
- [Context menu](https://robertritacca.com/components/context-menu): Right-click menu at the pointer with groups, sub-menus, and shortcut hints.
- [Contribution graph](https://robertritacca.com/components/contribution-graph): A year of activity, one cell per day.
- [Date input](https://robertritacca.com/components/date-input): Date input with native picker, calendar icon, label, and validation states.
- [Date picker](https://robertritacca.com/components/date-picker): Inline calendar with month navigation, day selection, and today indicator.
- [Dialog](https://robertritacca.com/components/dialog): A general-purpose modal for focused tasks, with sizes, an optional footer, and full focus management.
- [Divider](https://robertritacca.com/components/divider): A thin rule separating stacked content, with optional inline label and vertical orientation.
- [Drawer](https://robertritacca.com/components/drawer): An edge-anchored modal panel that slides in from any side, for filter panels, detail views, and mobile navigation.
- [Dropdown](https://robertritacca.com/components/dropdown): Custom select dropdown with keyboard navigation, disabled options, and error states.
- [Dropdown menu](https://robertritacca.com/components/dropdown-menu): Contextual menu with sections, sub-menus, keyboard shortcuts, and inset-gap hover styling.
- [Empty state](https://robertritacca.com/components/empty-state): The placeholder for a list, table, or search with nothing to show: icon, headline, guidance, and a next action.
- [Entity card](https://robertritacca.com/components/entity-card): Compact display-only card with a centred icon or image and a label, used in the Icons and Logos galleries.
- [Field](https://robertritacca.com/components/field): The shared scaffolding for labelled form controls: label, required marker, helper and error text, and the ARIA wiring that ties them together.
- [Figure](https://robertritacca.com/components/figure): Images with captions, in the case-study frame.
- [File input](https://robertritacca.com/components/file-input): A click-or-drop upload zone paired with a controlled file list showing size, progress, and per-file errors.
- [Input](https://robertritacca.com/components/input): Text input with label, placeholder, left and right icons, helper text, and error states.
- [Instructions](https://robertritacca.com/components/instructions): Step-by-step guidance with numbered badges, connecting lines, and horizontal layout.
- [Kbd](https://robertritacca.com/components/kbd): A keyboard key rendered as a keycap, for shortcut hints in menus and prose.
- [Link list](https://robertritacca.com/components/link-list): Linked items with logo, label, and subtitle.
- [Navigation](https://robertritacca.com/components/navigation): Desktop and mobile navigation components including top-level nav bar, collapsed mobile bar, and hamburger slide-out menu.
- [Pagination](https://robertritacca.com/components/pagination): Numbered page navigation for long datasets, with ellipses, disabled end arrows, and a compact readout mode.
- [Popover](https://robertritacca.com/components/popover): Contextual overlay panel with click and hover triggers, positioned relative to its anchor.
- [Progress bar](https://robertritacca.com/components/progress-bar): Horizontal bar indicating completion progress, with an optional percentage label.
- [Quote](https://robertritacca.com/components/quote): Blockquotes and pull-quotes with attribution.
- [Radio button](https://robertritacca.com/components/radio-button): Radio button and radio group with vertical and horizontal layouts, animated dot indicator.
- [Section title](https://robertritacca.com/components/section-title): Heading with a divider line and optional trailing content for organising page sections.
- [Segmented control](https://robertritacca.com/components/segmented-control): Pill-style toggle between related views with keyboard navigation and icon support.
- [Selection card](https://robertritacca.com/components/selection-card): Large selectable option cards with radio or checkbox indicators for high-visibility choices like settings and onboarding.
- [Skeleton](https://robertritacca.com/components/skeleton): Placeholder loading indicators with text, circular, and rectangular variants.
- [Slider](https://robertritacca.com/components/slider): Range input for selecting a value between a minimum and maximum, in default and compact sizes.
- [Spinner](https://robertritacca.com/components/spinner): Animated circular loading indicator in three sizes and primary, neutral, or inherit variants.
- [Stat](https://robertritacca.com/components/stat): Headline metrics with labels and trend deltas.
- [Swatch](https://robertritacca.com/components/swatch): Clickable colour tile for preset palettes and picker triggers, with a theme-aware selection ring.
- [Table](https://robertritacca.com/components/table): Data table with flexible cell content, striped rows, compact sizing, and support for icons, inputs, buttons, and interactive controls.
- [Tabs](https://robertritacca.com/components/tabs): Tab navigation with underline indicator, icon support, compact size, and full-width mode.
- [Textarea](https://robertritacca.com/components/textarea): Multi-line text input with character counter, resize control, helper text, and error states.
- [Timeline](https://robertritacca.com/components/timeline): Ordered sequences: histories and steppers.
- [Toast](https://robertritacca.com/components/toast): Temporary notification with status variants, auto-dismiss, and stacking via ToastProvider.
- [Toggle group](https://robertritacca.com/components/toggle-group): A set of two-state buttons that can be toggled on or off, supporting text and icon items.
- [Toggle switch](https://robertritacca.com/components/toggle-switch): Binary on/off toggle control with sliding thumb and check indicator, used for settings like theme switching.
- [Tooltip](https://robertritacca.com/components/tooltip): Contextual text label that appears on hover or focus with position and delay options.

## Playground

Interactive theming for the design system.

- [Playground](https://robertritacca.com/playground): re-theme the design system live and copy the generated CSS

## About & writing

The person behind the work, and long-form writing on design and AI.

- [About](https://robertritacca.com/about): background, principles, and career history
- [Writing](https://robertritacca.com/writing): essays on design and AI (mirrored from Substack)
- [Contact](https://robertritacca.com/contact): ways to get in touch

## Optional

Raw markdown sources and machine-readable indexes.

- [CLAUDE.md](https://robertritacca.com/CLAUDE.md): the repo's agent instructions (architecture, registries, and workflows)
- [GitHub source](https://github.com/robritacca-dotcom/design-system): exact TypeScript prop types live in src/components/<Name>/<Name>.tsx
- [npm package](https://www.npmjs.com/package/@robr0/design-system): `npm install @robr0/design-system` ships complete .d.ts type declarations for every component
- [design.md](https://robertritacca.com/design.md): the full design specification (tokens, colours, typography, component rules)
- [content-design.md](https://robertritacca.com/content-design.md): the writing rules (voice, register by surface, words and patterns the project never ships)
- [Sitemap](https://robertritacca.com/sitemap.xml)