Brand identity
The Oration mark, the Canon mark, app marks and the sample tenant that every demo speaks for.
The Oration mark#
A graphite tile, a paper ring and one indigo dot. It is the ledger's stamp drawn small: dark ink, a ruled circle, and the single saturated color saved for the decision.
Mark and wordmark
The mark draws with fill-foreground, stroke-background and fill-primary, so it follows the theme with no second file. The wordmark sets Oration in Geist Sans at 15px, weight 600, tracking -0.01em, 8px from the mark.
import { SegmentedControl } from "@oration/canon/components/segmented-control";import * as React from "react";export function OrationMark() { const [size, setSize] = React.useState<"16" | "24" | "32" | "48">("24"); return ( <div className="flex w-full flex-col items-center gap-8"> <div className="flex flex-wrap items-center justify-center gap-10"> <svg viewBox="0 0 24 24" role="img" aria-label="Oration" style={{ width: Number(size), height: Number(size) }} className="shrink-0" > <rect width="24" height="24" rx="6.5" className="fill-foreground" /> <circle cx="12" cy="12" r="5.25" fill="none" strokeWidth="2.5" className="stroke-background" /> <circle cx="17.25" cy="6.75" r="1.75" className="fill-primary" /> </svg> <span className="inline-flex items-center gap-2"> <svg viewBox="0 0 24 24" aria-hidden="true" className="size-6 shrink-0" > <rect width="24" height="24" rx="6.5" className="fill-foreground" /> <circle cx="12" cy="12" r="5.25" fill="none" strokeWidth="2.5" className="stroke-background" /> <circle cx="17.25" cy="6.75" r="1.75" className="fill-primary" /> </svg> <span className="text-[15px] font-semibold tracking-[-0.01em] text-foreground"> Oration </span> </span> </div> <SegmentedControl label="Mark size" value={size} onValueChange={setSize} options={[ { value: "16", label: "16px" }, { value: "24", label: "24px" }, { value: "32", label: "32px" }, { value: "48", label: "48px" }, ]} /> </div> );}- Tile. A 24-unit square with a 6.5-unit corner, in Graphite Ink (
fill-foreground). - Ring. A circle of radius 5.25 centered on the tile, stroked 2.5 units wide in White Plane (
stroke-background). It reads as an O and as a ruled line. - Dot. Radius 1.75 in Quiet Indigo (
fill-primary), centered at 17.25, 6.75: one ring radius right and up from the center, on the 45° diagonal, clear of the ring.
The product renders the mark from apps/web/src/components/brand.tsx as OrationMark and OrationWordmark. Both are aria-hidden, because the wordmark's text or the page title already names the product. When the mark stands alone as the only name, give the SVG role="img" and aria-label="Oration", as the specimen does.
The Canon mark#
The Oration mark opened into a C. The tile and ring stay; the ring parts on the right and the indigo dot moves into the opening.
Canon is the system inside the product, so its mark is the product mark with the ring opened to show what's inside. The opening makes a C without drawing a new letter, and the dot that sat in the corner now sits in the gap, where the system meets the work. Nothing new is added: same tile, same stroke, same dot, same tokens.
Canon mark and wordmark
The docs sidebar uses CanonWordmark from apps/handbook/src/components/design/site/canon-mark.tsx, with Oration design system as a 12px second line.
export function CanonMark() { return ( <div className="flex flex-wrap items-center justify-center gap-10"> <svg viewBox="0 0 24 24" role="img" aria-label="Canon" className="size-12" > <rect width="24" height="24" rx="6.5" className="fill-foreground" /> <path d="M 15.712 15.712 A 5.25 5.25 0 1 1 15.712 8.288" fill="none" strokeWidth="2.5" strokeLinecap="round" className="stroke-background" /> <circle cx="17.4" cy="12" r="1.75" className="fill-primary" /> </svg> <span className="inline-flex min-w-0 items-center gap-2"> <svg viewBox="0 0 24 24" aria-hidden="true" className="size-6 shrink-0" > <rect width="24" height="24" rx="6.5" className="fill-foreground" /> <path d="M 15.712 15.712 A 5.25 5.25 0 1 1 15.712 8.288" fill="none" strokeWidth="2.5" strokeLinecap="round" className="stroke-background" /> <circle cx="17.4" cy="12" r="1.75" className="fill-primary" /> </svg> <span className="flex min-w-0 flex-col leading-none"> <span className="text-[15px] leading-5 font-semibold tracking-[-0.01em] text-foreground"> Canon </span> <span className="truncate text-xs leading-4 text-muted-foreground"> Oration design system </span> </span> </span> </div> );}- Tile. Unchanged: 24 units, 6.5-unit corner, Graphite Ink.
- Ring, opened. An arc of the same 5.25 radius and 2.5 stroke, from 15.712, 15.712 to 15.712, 8.288: it stops 45° either side of the horizontal, leaving a 90° opening on the right, with round caps.
- Dot, in the opening. The same 1.75 radius in Quiet Indigo, moved to 17.4, 12 on the horizontal axis, just outside the ring's line.
- The Canon mark belongs to
/design, the plain-text digests and material about the system. Product chrome, auth pages and the app switcher always use the Oration mark. - Pair it with the word Canon, and with Oration design system where the reader may not know what Canon is.
- Every rule for the Oration mark below applies to the Canon mark too.
Using the marks#
Give the mark room, keep it big enough to read, let the theme recolor it, and never redraw it.
Clear space and minimum size#
Keep clear space of one third of the mark's height on every side, the same 8px that separates the mark from the wordmark at 24px. Nothing else (text, edges, other marks) enters it.
- 16px is the smallest the mark is drawn, and only on its own: a favicon or a dense row. At 16px the ring is about 1.7px and the dot about 2.3px across, the least that still reads.
- With the wordmark, the mark is 24px and the word 15px. Scale them together; never pair a 16px mark with the word.
- In a square slot such as an avatar position, use the mark alone. Don't add a second frame around the tile.
Light and dark#
The mark draws in tokens, so it inverts with the theme: a graphite tile on the light plane, a light tile on the dark one. The dot is Quiet Indigo in both, a step lighter in dark.
Use the mark on White Plane, Card White or Cool Rail. Those are the surfaces it is tuned for. On a photo, a brand color or a fill near Graphite Ink, the tile loses its edge.
Misuse#
Each one is drawn for real, so the problem is visible rather than described.
App marks#
Each app's mark is the Oration mark with one move: the same ring, stroke and dot, rearranged to say what the app is for, in tag ink on that app's tint. The tint tells apps apart in the switcher; the move says what the app does.
| App | The move | What it says |
|---|---|---|
| CRM | The ring stays closed. The dot, still radius 1.75, moves to the center. | The record. The account, held. |
| Agents Platform | The ring opens 90° toward the upper right, Canon's opening turned to the corner where the Oration dot sits. The dot rests in the opening, clear of the caps. | A voice going out. |
| Contact Center | The ring stays closed. The dot stays on the Oration diagonal, pulled just clear of the stroke so the one ink does not merge. | Someone on the line. |
| Ticketing | The ring stays closed. The right half of the interior is filled at radius 3.3, inset from the stroke: the pending mark from Ticketing's own status glyphs. | A case on its way to resolved. |
CRM
Companies, people, deals and the work around them
Agents Platform
Build, test and govern voice and chat agents
Contact Center
Live calls, chats and queues for your support team
Ticketing
Track, route and resolve customer requests
| Size | Tile | Corner | Where |
|---|---|---|---|
| xs | 16px | 5px | The command menu and What's new |
| sm | 20px | 6px | Available, not used yet |
| md | 24px | 8px | The app switcher trigger, the default |
| lg | 32px | 9px | The app switcher's list of apps |
| xl | 40px | 10px | Available, not used yet |
| 2xl | 48px | 12px | An app's placeholder page |
| Token | Used for |
|---|---|
--tag-blue | CRM tile |
--tag-blue-fg | CRM glyph |
--app-crm | CRM sidebar mark: the 3px pill beside the active nav item. Light mode lifts it above the tag ink; dark mode reuses the tag ink. |
--tag-violet | Agents Platform tile |
--tag-violet-fg | Agents Platform glyph |
--app-agents | Agents Platform sidebar mark: the 3px pill beside the active nav item. Light mode lifts it above the tag ink; dark mode reuses the tag ink. |
--tag-green | Contact Center tile |
--tag-green-fg | Contact Center glyph |
--app-contact | Contact Center sidebar mark: the 3px pill beside the active nav item. Light mode lifts it above the tag ink; dark mode reuses the tag ink. |
--tag-amber | Ticketing tile |
--tag-amber-fg | Ticketing glyph |
--app-tickets | Ticketing sidebar mark: the 3px pill beside the active nav item. Light mode lifts it above the tag ink; dark mode reuses the tag ink. |
- Every glyph draws on the Oration mark's 24-unit grid and fills its tile. Strokes are the ring's 2.5 units with round ends, and the dot keeps its 1.75 radius, so a 24px app mark draws its ring at the same weight as the 24px Oration mark.
- Each mark makes one move and keeps the silhouette its own: the dot at the center for CRM, the ring open to the upper right for Agents, the dot in the corner for Contact Center, the half-filled ring for Ticketing. Don't combine moves or add a second idea.
- The tints come from the categorical tag family, as identity tints, never from indigo. Quiet Indigo stays reserved for the decision, so the dot in an app mark is tag ink, not indigo.
- An app's hue appears in two places only: its mark and the 3px active pill in its sidebar. It never colors nav items, headings, sections or charts.
- App marks are decorative. The app's name always sits beside the mark, or in the accessible name of the control that holds it.
- Product code imports
AppIconfromapps/web/src/components/shell/app-icons.tsx. Don't redraw a glyph; a new app gets a new move on the same ring and dot in that file, and a hue no other app uses.
DESIGN.md names the four app hues and limits each to its tile and the 3px sidebar pill. The xs and lg tiles use 5px and 9px corners, outside the 6, 8, 10 and 12px ramp, the same drift recorded on Monogram tile.
Naming#
Names are written one way, everywhere. Products and apps are proper nouns; features are ordinary words.
| Name | Write | Not | Notes |
|---|---|---|---|
| Oration | Oration | ORATION, Oration AI, Oration.ai | The company and the platform. Oration GTM is this repo's name, not a product label. |
| CRM | the CRM | Oration CRM app, the Revenue app | Revenue work: companies, people, deals. |
| Agents Platform | the Agents Platform | Agent Platform, AI Studio, the agents app | Where voice and chat agents are built, tested and governed. |
| Contact Center | the Contact Center | Call Center, Contact Centre, Inbox | Live calls, chats and queues for the support team. |
| Ticketing | Ticketing | Tickets app, Helpdesk, the ticketing | No article. A single case is a ticket. |
| Copilot | Copilot, Ask Copilot | the AI, Oration Copilot, the assistant | The one chat surface, across all four apps. |
| Canon | Canon, Oration design system | Canon UI, the Canon library | The design system and these docs. |
| Features | workflows, sequences, enrichment, procedures, flows | Workflows, Smart Sequences, Magic Enrich | Lowercase in running text. Capitalize only as the first word of a label or heading. |
| Agents | Nora, the agent, it | she, our AI teammate | A name the builder chose. Agents are software; they don't take personal pronouns. |
| Providers | ElevenLabs, OpenAI, Deepgram, Twilio | Eleven Labs, Open AI, DeepGram | Spelled the way each provider spells it. |
Cedarline, the sample tenant#
Every demo speaks for Cedarline, a fictional accounts-payable automation vendor. Its data is synthetic and the product says so.
Cedarline sells software that pays suppliers. Its revenue team works in the CRM. Its voice agents, led by Nora, answer supplier calls about payments, remittances, onboarding and invoice disputes, and run outbound campaigns such as overdue W-9 collection. Calls the agent can't finish transfer to the Contact Center, and anything that needs follow-up becomes a ticket. Today is always Monday, September 28, 2026.
| Who | Role | Where you see them |
|---|---|---|
| Maya Okafor | VP of Revenue, the signed-in user | Everywhere. Home greets her by first name |
| Priya Raman | Support lead | Contact Center supervision, Ticketing, scorecards |
| Tomás, Jordan, Aisha, Wen | Support agents: Tomás Ferreira, Jordan Lee, Aisha Bello, Wen Zhou | Queues, presence, assignees |
| Nora | Cedarline's supplier voice agent | Agents Platform, call transfers, proposals |
| Northwind Freight, Halcyon, Orchard Street | Suppliers and accounts | Records, invoices, tickets, call history |
Labelled as sample data#
The workspace never passes its data off as real. Three places say so in the product's own words.
What we never invent#
Cedarline's records are fiction. Claims about Oration are not, so none are made up.
No borrowed proof
No invented numbers
No compliance claims
The trust row
Program names as plain text with one shield icon and a link to the trust center. No badge art, and no qualifiers such as Type II or certified until legal supplies the wording.
Log in to Oration
Use your work email to continue.
- SOC 2
- ISO 27001
- GDPR
import { toast } from "@oration/canon/components/toast";import { ShieldCheckIcon } from "lucide-react";export function TrustRow() { const programs = ["SOC 2", "ISO 27001", "GDPR"]; return ( <div className="flex w-full max-w-sm flex-col gap-4 rounded-xl bg-card p-5 text-left shadow-border"> <div className="flex flex-col gap-1"> <p className="text-base leading-none font-medium text-foreground"> Log in to Oration </p> <p className="text-sm text-muted-foreground"> Use your work email to continue. </p> </div> <div className="h-8 rounded-lg border border-input px-2.5 text-sm leading-8 text-muted-foreground"> maya@cedarline.com </div> <div className="flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-border pt-3 text-xs text-muted-foreground"> <ShieldCheckIcon aria-hidden="true" className="size-3.5 shrink-0" /> <ul aria-label="Compliance" className="flex items-center gap-3"> {programs.map((program) => ( <li key={program}>{program}</li> ))} </ul> <button type="button" className="font-medium text-foreground underline-offset-4 hover:underline" onClick={() => toast.add({ title: "Trust center", description: "Reports and policies live at oration.app/trust.", }) } > Trust center </button> </div> </div> );}Providers#
Speech, model, voice and telephony providers appear as options a builder can pick. They are drawn as neutral monogram tiles, never as brand logos.
Providers as monogram tiles
A gray Monogram tile with the provider's initial and its name spelled the provider's way. Pick one to see the confirmation.
import { MonogramTile } from "@oration/canon/components/monogram-tile";import { Tag } from "@oration/canon/components/tag";import { toast } from "@oration/canon/components/toast";import { cn } from "@oration/canon/lib/utils";import { CheckIcon } from "lucide-react";import * as React from "react";export function ProviderTiles() { const providers = [ { id: "elevenlabs", name: "ElevenLabs" }, { id: "azure", name: "Azure" }, { id: "google", name: "Google" }, { id: "openai", name: "OpenAI" }, ]; const [selected, setSelected] = React.useState("elevenlabs"); return ( <fieldset className="flex w-full max-w-md flex-col gap-2 text-left"> <legend className="mb-2 text-sm font-medium text-foreground"> Text-to-speech provider for Nora </legend> <div className="grid grid-cols-2 gap-2"> {providers.map((provider) => { const active = provider.id === selected; return ( <label key={provider.id} className={cn( "flex h-11 cursor-pointer items-center gap-2.5 rounded-[10px] bg-card px-2 text-13 font-medium text-foreground shadow-border transition-shadow duration-150 hover:shadow-border-hover has-focus-visible:ring-3 has-focus-visible:ring-ring/40", active && "ring-2 ring-primary", )} > <input type="radio" name="tts-provider" value={provider.id} checked={active} onChange={() => { setSelected(provider.id); toast.add({ title: `Text to speech set to ${provider.name}`, description: "Nora uses it on the next call.", }); }} className="sr-only" /> <MonogramTile name={provider.name} color="gray" size="lg" /> <span className="min-w-0 flex-1 truncate"> {provider.name} </span> {active ? ( <CheckIcon aria-hidden="true" className="size-4 text-primary" /> ) : null} </label> ); })} </div> <p className="mt-1 flex items-center gap-2 text-xs text-muted-foreground"> <Tag>Sample data</Tag> Provider names are written the way each provider writes them. </p> </fieldset> );}- Providers that may appear: Deepgram, Soniox, Azure, OpenAI, Google, ElevenLabs, Twilio, Together, OpenRouter and Mistral.
- Tiles use gray, or a tint picked from the provider's id by Provider model picker. Never indigo.
- Latency, cost and context numbers beside a model are sample values in Cedarline's workspace, not published benchmarks.
The North Star in brand terms#
The Well-Kept Ledger is the brand as much as the interface. Oration should feel like a ledger kept by someone careful: legible, calm, exact, and quietly confident.
| In the ledger | In the brand |
|---|---|
| Dark ink on white paper | A graphite tile on the plane. The mark is mostly ink, like the product. |
| One stamp, used once | The indigo dot. One saturated color in the mark, as on most screens. |
| Ruled lines, not boxes | A ring drawn as a single stroke. No frames, badges or containers around the mark. |
| Figures you can check | No invented proof. Every claim about Oration is one we can show. |
| Notes in the margin | A voice that is specific and brief. See Voice and tone. |
| Nothing decorative | No mascots, gradients, glass, confetti or emoji, in the product or about it. |
When a brand choice is unclear, ask what the careful bookkeeper would do. They wouldn't stretch the stamp, borrow someone else's letterhead or write a figure they couldn't back up. The full set of rules is in Principles.