The IVR Cloud identity

Product and character

IVR Cloud helps businesses configure telephone menus, route calls, manage contacts and campaigns, and review call history and voicemail. The current application supports schedules, published IVR revisions, endpoint deployments, and rollback to an earlier ready deployment.

The character is capable, approachable, precise, and calm. Explain what the user can do and what happens next. The line “Every connection, considered.” is proposed toolkit language, not an established customer claim. The existing Romanian homepage line is “Fiecare apel ajunge unde trebuie.”

Naming and voice

Use IVR Cloud when introducing the product. Preserve uppercase IVR; do not expand it into a different product name. The public homepage is Romanian; current account screens are English. This toolkit uses English explanations with Romanian product examples. Choose one locale per surface and translate complete workflows together.

Use Romanian diacritics. Keep sentences direct. Avoid technical terms when a plain explanation works. Do not invent uptime, customer counts, security certifications, integrations, free-plan terms, or performance promises.

Publishing is not deployment. The supplied kit contains copy implying that publishing immediately changes callers’ experience. The current app exposes a separate deployment operation, so use: “Versiunea a fost publicată. O poți activa pe un număr de telefon.” Only report a route change when the application confirms deployment/activation.

Identity assets

The branching symbol suggests a caller’s path. Use the full lockup at first introduction and the symbol for established compact contexts. Lettering in supplied SVGs is outlined and requires no installed font.

• Full lockup minimum: 146px wide. Symbol minimum: 16px; inspect at actual size.
• Clear space: at least one quarter of the symbol’s height on every side.
• Use primary on light backgrounds and reversed on Ink or dark backgrounds. Use mono exports when only one ink is available.
• Preserve proportions and artwork. Never rotate, redraw, add effects, or use the routing dots as operational status indicators.
• Linked logos need an accessible destination name. Decorative repetitions may use an empty alt.

Preview and download assets. Artwork comes from the supplied generated kit; this toolkit does not establish trademark ownership or clearance.

Color

Use warm neutrals for most of the composition. Forest carries primary actions and selected navigation. Mint is a supporting fill, not a foreground text color. Semantic statuses always have written labels.

Dark mode is an extension proposed here; it was not specified by the supplied kit. Semantic tokens change in dark mode while the fixed identity colors and logos remain intact. Use data-theme="dark" on the document or a bounded demo. Compare both themes using the navigation control.

Supporting text is slightly darker than the kit’s #66736D so small text also clears 4.5:1 on the Mint supporting fill.

Drafts use an explicit “Draft” label. A publication badge records publication, and a deployment badge records the active route. Green alone cannot explain which operation has finished.

Typography

Use Inter throughout. The supplied local fonts cover weights 400, 500, 600, 700, and 800. Do not request absent italic faces; use weight and scale for emphasis. Use a system monospace stack for code and identifiers, and tabular numerals for durations, totals, and comparable records.

Layout and motion

Work on a 4px rhythm: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96. Controls have 8px corners; cards 12px; large previews 18px. Prefer quiet borders to stacked shadows. Content width is 1160px, with 16px mobile gutters and 32px desktop gutters.

Marketing pages use generous space. Product pages use compact, meaningful groupings. A 240px sidebar is available for applications, but the current app uses top navigation; choose navigation for the actual task rather than forcing a sidebar. On narrow screens, stack inspectors below the flow and allow tables to scroll inside their frame.

Use Tailwind’s default responsive breakpoints. Keep interactions around 150ms and panel transitions around 200ms. Respect reduced motion; motion must never be required to understand a status change.

Accessibility

Target accessible contrast, keyboard operation, semantic markup, and complete labels by default. Normal text pairs should reach 4.5:1; essential control boundaries and focus against adjacent backgrounds should reach 3:1. Defined palette pairs were checked in both themes during implementation; this does not certify an application.

• Use border-control for inputs and interactive nodes. border-line is decorative.
• Keep primary buttons and form controls at least 44px tall; compact close controls use a 24px square target. Provide visible keyboard focus and persistent labels.
• Associate help and errors with fields using aria-describedby; set aria-invalid on invalid fields.
• Pair color with a written state. Announce completed actions with role="status"; reserve role="alert" for urgent errors.
• Use real buttons, links, forms, table headers, and native disclosure/dialog elements.
• Verify keyboard navigation, screen readers, 200% zoom, narrow layouts, and reduced motion in consuming apps.

Provenance

Identity, light colors, local fonts, spacing, and radii derive from brand-src/ivr-brand-kit (v1.0, October 2026). Its original HTML/PDF and CSS remain in that source directory. Page structure follows ../twr-brand, with Tailwind replacing its Bootstrap styling. Product semantics and patterns derive from the current ivr-web templates and routes.

Dark colors, component implementations, toolkit prose, and example compositions are new proposals. All example names and records are illustrative. This work creates a separate toolkit; adopting it in the app requires an explicit integration change.