---
title: The IVR Cloud identity
nav: guide
kicker: Brand / Guidelines
subtitle: A calm, clear system for the calls that matter. Shared rules for identity, language, and visual decisions.
---

# 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.

| Principle | Romanian example | English equivalent |
|---|---|---|
| Start actions with verbs | Creează flux | Create flow |
| Describe the saved object | Salvează ciorna | Save draft |
| Name the consequence | Publică versiunea | Publish version |
| Describe route activation separately | Activează pe acest număr | Deploy to this number |
| Explain failure and recovery | Nu am putut salva ciorna. Încearcă din nou. | Could not save the draft. Try again. |

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

<div class="demo grid gap-6"><div class="flex flex-wrap items-center gap-8 rounded-control bg-white p-6"><img src="brand/assets/logos/ivr-cloud-primary.svg" width="260" height="64" alt="Primary IVR Cloud wordmark"><img src="brand/assets/logos/ivr-symbol-green.svg" width="64" height="64" alt="Green routing symbol"></div><div class="rounded-control bg-[#14231f] p-6"><img src="brand/assets/logos/ivr-cloud-reversed.svg" width="260" height="64" alt="Reversed IVR Cloud wordmark"></div></div>

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](assets.html). 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.

| Role | Light | Dark proposal | Tailwind utility |
|---|---|---|---|
| Canvas | #FBFCFA | #101C17 | `bg-canvas` |
| Surface | #FFFFFF | #192B23 | `bg-surface` |
| Main text | #14231F | #EDF6F1 | `text-ink` |
| Supporting text | #65726C | #A6B9AE | `text-muted` |
| Primary action | #1F7558 | #8BDBB5 | `bg-brand text-on-brand` |
| Primary hover | #195F47 | #A6E8C7 | `hover:bg-brand-hover` |
| Primary active | #173E30 | #74CAA1 | `active:bg-brand-active` |
| Tint | #EDF6F1 | #223D30 | `bg-tint` |
| Decorative divider | #E4EBE7 | #344A3F | `border-line` |
| Essential control boundary | #829088 | #80988B | `border-control` |
| Keyboard focus | #1F7558 | #8BDBB5 | `outline-focus` |

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.

| State | Light foreground / fill | Dark foreground / fill |
|---|---|---|
| Active / success | #1F7558 / #EDF6F1 | #8BDBB5 / #223D30 |
| Attention | #8A4B0F / #FFF4DF | #F2CB87 / #3B2C19 |
| Failed | #B42318 / #FEF3F2 | #FFADA4 / #452521 |
| Information | #245E91 / #EDF4FC | #A8D0F2 / #1B3349 |

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

<div class="demo"><p class="text-4xl font-semibold tracking-tight md:text-5xl">Fiecare apel ajunge<br><span class="text-brand-link">unde trebuie.</span></p><p class="mt-6 text-lg">Clear steps. Useful context. Considered connections.</p><p class="mt-5 font-mono text-xs text-muted">REVISION 004 / DRAFT / ROUTE 02</p></div>

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.

| Context | Size | Weight | Guideline |
|---|---|---|---|
| Marketing hero | 40–68px | 600–700 | Short point; responsive size |
| Page title | 32–40px | 600 | Clear task or object name |
| Section heading | 24–32px | 600 | Sentence case |
| Reading text | 16–18px | 400 | About 60–75 characters per line |
| Product UI | 14px | 400–600 | Comfortable density |
| Helper / metadata | 12px | 400–600 | Never the only place for critical instructions |

# 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.