--- name: ivr-ui description: Create or adapt IVR Cloud web pages and Rails app views using Tailwind CSS v4, local Inter fonts, and the IVR semantic theme. --- # IVR Cloud UI Use independently. IVR Cloud configures telephone menus, phone routes, contacts, campaigns, call history, and voicemail. Design for a clear caller path and explicit draft, publication, and deployment states. ## Resources and compilation Use **Tailwind CSS v4** with the IVR theme and component layer. Do not substitute Bootstrap or require a JavaScript framework. The current app uses Rails, Propshaft, Importmap, Turbo, and Stimulus; preserve those conventions. The resource links below are absolute; this skill works as a single supplied file. Resources use the fixed https://brand.ivr.ro/ address, independently of local preview settings. In a local toolkit checkout, use `brand/` from the root. Download only needed sources/fonts, preserving this layout: ```text design-system/ theme.css components.css fonts.css assets/fonts/Inter-400.ttf ... Inter-800.ttf assets/fonts/LICENSE.txt ``` - [theme.css](https://brand.ivr.ro/brand/theme.css), [components.css](https://brand.ivr.ro/brand/components.css), [fonts.css](https://brand.ivr.ro/brand/fonts.css) - [Inter 400](https://brand.ivr.ro/brand/assets/fonts/Inter-400.ttf), [500](https://brand.ivr.ro/brand/assets/fonts/Inter-500.ttf), [600](https://brand.ivr.ro/brand/assets/fonts/Inter-600.ttf), [700](https://brand.ivr.ro/brand/assets/fonts/Inter-700.ttf), [800](https://brand.ivr.ro/brand/assets/fonts/Inter-800.ttf), [license](https://brand.ivr.ro/brand/assets/fonts/LICENSE.txt) - [Primary logo](https://brand.ivr.ro/brand/assets/logos/ivr-cloud-primary.svg), [reversed logo](https://brand.ivr.ro/brand/assets/logos/ivr-cloud-reversed.svg), [symbol](https://brand.ivr.ro/brand/assets/logos/ivr-symbol-green.svg) Create an entrypoint and scan the consuming application's complete class names: ```css @import "tailwindcss" source(none); @import "./design-system/theme.css"; @import "./design-system/fonts.css"; @import "./design-system/components.css"; @source "../views"; @source "../javascript"; ``` ```sh tailwindcss -i app/assets/ivr-tailwind.css \ -o app/assets/stylesheets/ivr.css --minify ``` Paths are illustrative; source paths are relative to the input CSS. Use the installed standalone CLI or the project's existing Tailwind integration. No npm installation is required for the standalone CLI. Do not assume compiled guide CSS includes arbitrary new utility classes. Never build dynamic class-name fragments that Tailwind cannot scan. Official details: [CLI](https://tailwindcss.com/docs/installation/tailwind-cli), [theme variables](https://tailwindcss.com/docs/theme), [source detection](https://tailwindcss.com/docs/detecting-classes-in-source-files). ## Roles and themes Use `bg-canvas` for the page/navigation surface, `bg-surface` for cards, controls, and dialogs, `bg-tint` for supporting fills, `text-ink` for main copy, and `text-muted` for supporting copy. Use `border-line` for decoration and `border-control` for essential boundaries. Primary controls use `bg-brand text-on-brand`; links use `text-brand-link`. Light identity: Forest #1F7558, Ink #14231F, Canvas #FBFCFA, Mint #EDF6F1. Dark semantic colors are a proposed companion implemented by the theme, not a change to fixed logo artwork. Set `data-theme="light"` or `data-theme="dark"` on the root. Primary and reversed logos are separate assets. The consuming app owns theme state and persistence. Documentation files `site/site.css` and `site/site.js` are not app dependencies. ## Repeated components | Need | Component / utility | |---|---| | Main action | `ivr-btn` | | Supporting action | `ivr-btn ivr-btn-secondary` | | Destructive action | `ivr-btn ivr-btn-danger`, explicit consequence | | Labeled field | `ivr-label`, `ivr-input`, `ivr-help` | | Grouped content | `ivr-card` | | Status | `ivr-badge`, plus `ivr-badge-neutral`, `-warning`, `-danger`, or `-info` | | Context or error | `ivr-alert`, plus `ivr-alert-warning` or `ivr-alert-danger` | | Comparable records | `ivr-table` inside `ivr-table-frame` | | Empty content | `ivr-empty` | | Selectable flow step | `ivr-node` with `aria-pressed` | | Close control | Empty `ivr-close` button with an accessible name; 24px target, 16px cross | | Selected view | `ivr-tab` with tab/panel semantics and keyboard behavior | | Loading percentage | Native `progress` with `ivr-progress` and a real value | | Supplementary tooltip | `ivr-tooltip`; show on hover/focus and dismiss with Escape | The guide covers all 24 TWR component categories with Tailwind equivalents. Use native details for disclosure/dropdown navigation, native dialog for modal/drawer decisions, and native popovers for supplementary context. Carousels should be manual unless the actual task requires autoplay. Tabs need arrow/Home/End navigation and matching panels; pagination needs real URLs/counts in the application. Loading, progress, and toast copy must reflect actual state. Keep important errors persistent rather than toast-only. ```html

Asistență clienți

Ciornă · v4

Ultima publicare: v3. Activ pe rută: v2.

Exemplu fictiv; editarea nu salvează date.

``` Use one primary action per decision. A failed, loading, empty, or permission-limited state needs its own explanation. Add native semantic behavior or the app's Stimulus controllers; CSS does not provide persistence, filtering, modal behavior, or authorization. ## Product behavior and copy Publishing creates an immutable version. Deployment activates a published version on a phone route. Keep those states distinct; show the endpoint/number and version in deployment/rollback actions. A rollback requires an earlier ready deployment, not just an older publication. A flow editor names the root, reachable branches, outcome labels, selected inspector, and unconnected steps. Handle invalid-key/no-answer/transfer outcomes explicitly according to the app's actual model. Provide a keyboard-readable path or list; a diagram alone is insufficient. Call history separates session state, call result, duration, timestamp/timezone, and recording availability. Voicemail recording and transcription have independent states. A campaign run's scheduling or progress does not establish completion. The public homepage is Romanian; current account screens are English. Match the target locale consistently and preserve Romanian diacritics. Avoid unsupported integrations, prices, certifications, uptime, or invented metrics. Label fictional examples. ## Rails integration Compile CSS before Propshaft serves it. Use the real account-scoped route helpers and forms; preserve methods, CSRF protection, Turbo updates, tenant boundaries, and controllers. Copy/adapt font paths for the asset pipeline and inspect successful font requests after precompilation. Tailwind Preflight changes global element defaults. Migrate templates deliberately rather than blindly layering the new stylesheet over `.account-*` styles. Use existing layout and behavior instead of inserting a second HTML document or copying the guide's JavaScript. ## Check and deliver Inspect light/dark surfaces, narrow layouts, 200% zoom, keyboard focus, labels/errors, dialog Escape/focus behavior, and reduced motion. Primary buttons and form controls are at least 44px tall; compact close controls use a 24px square target; normal text needs 4.5:1 contrast and essential boundaries 3:1. Associate errors with fields using `aria-describedby` and `aria-invalid`. Use words alongside color and live status only for actual updates. Keep tables inside their scroll frame and put the inspector below the flow on narrow screens. Use tabular numerals for comparable records. Logo minimums: 146px lockup, 16px symbol; clear space is a quarter of symbol height. Deliver the requested HTML/app changes and state unavailable checks. The companion `ivr-brand` skill is optional for broader brand decisions. [Component specimens](https://brand.ivr.ro/components.html) and [product specimen](https://brand.ivr.ro/workspace.html) are optional examples, not dependencies.