logo
UI Elements
Design System
License
Changelog
github

Tone and Voice

Clear, precise, and unapologetically human. How to eliminate corporate fluff, channel Ben Burr's dry engineer wit, and decode actionable signals in data visualizations.

Clear & Concise

Zero Corporate Jargon

The Ben Burr Doctrine

Actionable Micro-copy

Data Storytelling

The 4 Tenets of Great Enterprise Copy

Interface copy is not decoration applied after software is built; it is an equal architectural layer that directs attention, clears friction, and relieves panic during operational outages. Elementa demands concise sentences, zero procurement vocabulary, and an uncompromising bias for immediate action.

Clear & Precise

Say it in 7 words, not 27

Tell the user what happened, why it matters, and what happens next. Cut adjectives, filler preambles, and decorative fluff. If an API token died, say it died.

No Jargon

Ban corporate procurement speak

Words like "synergize", "leverage", "paradigm", and "orchestrate end-to-end" belong in satirical presentations, not product buttons. Speak like a smart engineer talking to a peer.

Inclusive to All

Global, translation-friendly, accessible

Use plain English that translates effortlessly across cultures and screen readers. Avoid American cultural sports idioms ("touch base", "ballpark") and ableist slang ("crazy fast").

Gets the Work Done

Bias for immediate action

Every sentence must signpost an immediate next step. Buttons say what they do: "Deploy to Cluster", "Delete 4 Nodes", "Renew Token". Never leave the user wondering what "Proceed" does.

Select Product Failure State:

Panic → Relief

Corporate Procurement Speak

Prohibited

“Authentication verification was unsuccessful due to anomalous credential validation lifecycle expiration in the client authorization pipeline.”

Flaw 1

Uses 19 words to say "expired"

Flaw 2

Vague corporate jargon ("lifecycle expiration")

Flaw 3

Zero next steps or call to action

Elementa Voice Architecture

Canonical

“Your API key expired yesterday. Generate a new key in Settings or copy an existing one.”

Strength 1

Instant root cause diagnosis in sentence one

Strength 2

Clear action verbs: "Generate" or "Copy"

Strength 3

Direct link to resolution

Writing for Elementa: The Burr Filter

When drafting microcopy in Elementa, run every sentence through our internal test: The Burr Filter. Ask yourself: “If Bill Burr was standing behind the user looking over their shoulder, would he roast this interface?” Strip the corporate theater, tell the truth, and respect the engineer's time.

Rule 01

Stop Apologizing Like a Fortune 500 Lawyer

Stop Apologizing Like a Fortune 500 Lawyer

Never use corporate PR boilerplate when an error occurs. State the exact breakdown plainly, explain the remedy, and skip the robotic theater of fake remorse.

““We sincerely regret any inconvenience.” No you don’t. You broke a pod. Tell me what broke and how long until I can do my job.”

Rule 02

Buttons are Contracts, Not Guessing Games

Buttons are Contracts, Not Guessing Games

Every button label is an explicit promise. Use unambiguous transitive verbs followed by specific direct objects. Eliminate "OK", "Proceed", and "Continue".

““Submit”? Submit to what? The void? Say “Delete 4 Servers” or “Charge $29”. I want to know what happens when my finger touches this glass.”

Rule 03

Ban Routine Tech Cheerleading

Ban Routine Tech Cheerleading

Reserve enthusiasm and celebration for monumental user milestones (e.g. first production deployment). Routine background transactions require calm, confident understatement.

“Three exclamation marks because I saved a webhook? Relax. I didn’t land Apollo 11 on the moon, I updated an endpoint.”

Rule 04

Call Out the Obvious with Respectful Honesty

Call Out the Obvious with Respectful Honesty

Speak to users like brilliant, capable adults. Dry, self-aware honesty builds deep brand loyalty where patronizing tech speak breeds resentment.

““Password entropy criteria suboptimal.” Just say: “Come on, my dog could guess password123. Give me eight characters and a symbol.””

Interactive Burr Filter Workbench

Inspect how the Burr Filter cuts through corporate bullshit across common enterprise failure modes and outputs crisp, actionable Elementa microcopy.

Cringe Score: 94/100

Corporate Procurement Speak

Prohibited

“Notice: Transaction velocity threshold exceeded. Your programmatic request dispatch rate has triggered proactive network throttling parameters to preserve infrastructure resilience.”

Raw Team Voice (Burr Filter)

Unfiltered

“Whoa there, speed demon. You fired 800 requests in 3 seconds. The server needs to catch its breath. Chill for 45 seconds.”

Canonical Elementa Voice

Published Copy

Too many requests too fast. We paused your API calls for 45 seconds to let the queue clear.

Why it works: Tells the user why it paused and gives an exact countdown timer.

Alt Text, Captions & Data Storytelling

Don’t describe what pixels physically represent. Decode the signal and tell the human what matters—empowering screen-reader users with exact parity on operational insights, deltas, and anomalies.

Never Describe What Data Represents. Describe What Data Tells.

Sighted engineers and executives don’t look at a chart to admire its axes or count its data points—they look at it to answer: “Is my system broken?” or “Where are our users getting stuck?”

Screen-reader users and keyboard navigators deserve that exact cognitive signal. Forcing someone to listen to “a line graph with twelve data points plotted in blue” is computational noise. Your alt text is the executive summary; your caption is the anchor.

Alt Text vs. Caption Law

Architecture

Channel

Target Audience

Core Mandate & Responsibility

ALT

Hidden Screen Reader Context

Delivers the full data deduction, delta, and root cause so non-visual users experience 100% informational parity.

CAPTION

Visible Shared Anchor

Pairs with the visual figure for all users, providing reference metadata, key takeaway, and operational source attribution.

Invariant: If the image disappeared, the reader must lose zero business knowledge.

Live Visualization Showcase

Inspect production data charts, failure topologies, and their decoded signals.

Time-Series Chart

Production Pod Autoscaling: US-East-1 Incident Analysis

Metric: US-EAST-1 · POD_UTILIZATION

CRITICAL THRESHOLD: 80% (SPIKE: 94%)

80% HPA Trigger94% @ 14:22 UTC+4 Pods Spawned

00:00 UTC

12:00 UTC

14:22 UTC (Runaway Job)

24:00 UTC

Architectural Signal Comparison

Contrast the geometric representation trap against Elementa's decoded operational signal.

Prohibited Pattern

Mechanical Trap

What it represents (Pixels & Geometry)

Forces users to parse chart axes and count plotted data points

Typical AI / Generic Alt Text

“A line graph showing 24 hours of data with a curve fluctuating between 30% and 94%, with a red line at 80% and a high peak at 14:00.”

The Flaw: Forces screen-reader users to guess what the curve means, how severe it was, or what triggered it.

“Okay, it’s a line. Did production crash? Am I on fire? What am I supposed to do with this?”

v/s

Elementa Standard

Actionable Signal

What it tells (Outcome, Cause & Delta)

Provides complete operational clarity with 100% informational parity

Elementa Decoded Alt Text

“US-East-1 cluster CPU utilization peaked at 94% at 14:22 due to runaway ETL batch workers, surpassing the 80% target and triggering 4 new worker pods before stabilizing at 46%.”

The Actionable Takeaway: Batch workers require memory bounds; HPA configuration successfully shielded API ingress.

Recommended Figcaption: Figure 3.1: US-East-1 CPU saturation at 14:22 UTC. Automatic horizontal pod autoscaling prevented cascading service degradation.

Semantic Accessible HTML Pattern

<figure> + role="img" + <figcaption>

TYPESCRIPT

Code Block

1<figure role="group" aria-labelledby="chart-title">
2    <h4 id="chart-title" className="sr-only">
3        US-East-1 CPU Utilization Anomaly
4    </h4>
5    <svg 
6        role="img" 
7        aria-label="US-East-1 cluster CPU peaked at 94% at 14:22 due to runaway ETL workers, triggering 4 autoscaled pods before stabilizing at 46%."
8        viewBox="0 0 500 180"
9    >
10        {/* Visual vector paths for sighted users */}
11    </svg>
12    <figcaption className="text-text-secondary text-xs mt-2">
13        <strong>Figure 3.1:</strong> US-East-1 CPU saturation at 14:22 UTC. 
14        Auto-scaling prevented service degradation.
15    </figcaption>
16</figure>

The Alt Text Signal Doctor

Paste or tweak any copy snippet below to test its cognitive value over mechanical noise.

Try presets:

Cognitive Signal Score

100/100

Length (122 chars)

Optimal (60-220)

Signal vs. Pixels

Insightful
Law
Principle
What to Avoid (Trap)
What to Do (Elementa Way)

The Headline First Rule

State the core finding in the first 5 words.

“Line chart displaying Q2 conversion...”

“Q2 conversions jumped 34% after checkout redesign...”

The Metric Delta Rule

Quantify the delta rather than listing raw coordinates.

“Points at 12, 14, 18, 22, 19, 31...”

“Net 58% growth from baseline over 6 months.”

The Shared Caption Rule

Keep deep contextual background visible to all in <figcaption>.

Stuffing a 500-word paragraph into alt="...".

Pair a concise alt with a visible, informative <figcaption>.