Designing the cusp
How a mark drawn from four circles became our logo, our spinner, our thinking voice and a small ink mascot.
· The Cusp team
In geometry, a cusp is the point where two curves meet with a shared tangent: a sharp point formed by smooth lines. The horns of a crescent moon are cusps.
That shape suits an agent. Two curves, you and a model, meet at a point. And every turn of an agent ends the same way: the work converges into an answer.
We decided early that the brand would come from that single idea, and that it would be expressed with restraint. This post is about how that went.
Four circles
The mark is drawn with a compass. There are four circles and nothing else:
- The body, the round head of the form.
- The sweep, internally tangent to the body. It forms the convex back that rises to the tip.
- The throat, externally tangent to the body. It forms the concave front that rises to meet the sweep.
- The counter, subtracted from the body. It opens the shape into a C.
Sweep and throat meet at the top right: that point is the cusp. The counter creates a second, smaller cusp at the lower horn. Every other join is tangent, so the outline stays smooth at billboard size and crisp at 16 pixels.
The silhouette reads three ways at once: a C, a cresting wave, and a forward flick, the moment of breaking through. We didn't plan all three. We started with the geometry and kept the version where they showed up.
Because the mark is geometry, it's generated rather than drawn. A script holds the circle definitions; every logo file, app icon and favicon is rendered from it. The wordmark is outlined from Inter at a fixed weight and optical size, so it never depends on an installed font.
One blue, rarely
Cusp's interface is neutral: warm grays with a hint of paper, never beige. Depth comes from a ladder of surfaces and hairline borders. Shadows are reserved for things that float.
There is one brand color, #4285f4, and the rules for it are strict. It appears on the mark, the app icon and focus rings. It does not appear on buttons, tabs, links, headings or backgrounds. Primary buttons are ink.
That sounds austere, and it is on purpose. If blue is everywhere, it means nothing. If it shows up only when something meaningful happens, it becomes a signal. Our rule for anyone adding to the design system is short: if you're unsure whether blue is allowed, it isn't.
The spinner
Most of an agent's life is spent working while you wait. That waiting state is the one place we let the brand move.
The cusp spinner draws two strokes rising from the base of the mark along opposite sides, one over the sweep and one up the throat. They meet at the tip, a small blue spark flashes, and they withdraw into the point and begin again. One loop takes 2.1 seconds.
We held it to a test before shipping it, borrowed from our research on what separates a signature from a gimmick:
- It must not be in the critical path or add latency.
- It must carry information, not just decorate.
- It must respect reduced motion.
- It must be native to each medium.
The spinner passes because it is the progress indicator; it replaces something that would be there anyway. With reduced motion, it becomes the static mark with a slowly breathing spark.
In the terminal, the same idea becomes a sequence of characters, · ◜ ◝ ◠ ✦ ◠ ◝ ◜, at about 110 milliseconds per frame. It stays gray while working. The ✦ frame turns blue only on the first token and on completion. With NO_COLOR it's plain; on a dumb terminal it falls back to ASCII.
Thinking verbs
Next to the spinner sits a verb: Converging… The verb changes every few seconds with a soft blur, along with elapsed time and tokens, and a hint that Esc interrupts.
The verbs come from three families:
- Curves and geometry. Converging, Cresting, Osculating, Inflecting, Splining, Triangulating, Zeroing in, Reaching the cusp.
- Craft. Inking, Honing, Whittling, Kerning, Burnishing, Untangling, Stitching.
- Calm thought. Pondering, Mulling, Percolating, Steeping, Crystallizing.
The rules for adding one: a present participle, one or two words, never alarming, never at the user's expense, and nothing that implies the model has feelings. "Crashing…" is out. So is "Panicking…", however tempting.
When a turn finishes, the indicator leaves a single line, for example Converged in 42s · 6 tools · ↓ 3.1k, and the cusp flashes blue once. That flash is the one recurring accent moment in a transcript. In a long session, it's how you know, out of the corner of your eye, that the agent is done.
Whimsy has a place, and it's small
The verbs are playful. Everything around them is not.
Errors say what happened, why, and how to fix it: "Rate limited by Anthropic — retrying in 8 s," never "Oops, something went wrong." Permission prompts are plain and exact: "Allow rm -rf dist?" Billing, destructive actions and security never get a joke. Whimsy lives only in waiting states, where it can make a pause feel shorter without making anything less clear.
The mascot
The mascot is the mark without its counter, given two eyes. It's a small ink creature whose crest tip is the cusp. In light mode it's ink with paper eyes; in dark mode it inverts. Its crest tip is the only part of it that ever turns blue.
The mascot has six states:
| State | What it does |
|---|---|
| Idle | Breathes slowly, blinks, can follow the pointer |
| Thinking | Leans back, looks up at its own glowing tip |
| Working | Leans in with a quick bob; the spark draws a pen-stroke arc |
| Success | A small hop with squash and stretch, happy eyes |
| Error | A small shake and a droop, worried brows, a red dot at the tip |
| Sleeping | Squashed, slow breathing, a few floating z's |
Where the mascot appears is as deliberate as how it looks. It shows up in roomy, idle places: welcome screens, empty states, onboarding, the About window, notifications when the window isn't focused, and the 404 page. It never appears inside the transcript, in diffs, on permission prompts, or anywhere near a destructive action. A mascot is good company while you wait. It's bad company while you're deciding whether to delete a directory.
The mascot is pure SVG and Motion, crisp at any size, and it honors reduced motion like everything else.
Crew, in costume
Cusp's crew members, AI teammates with a role and a schedule that we're building next, needed faces. We decided against realistic human portraits. They read as deceptive and they age badly.
Instead, every crew member is the mascot in a role costume, rendered in soft matte ink on a muted tint: a gold lapel pin for the CEO, a megaphone for the Marketer, headphones and a floating cursor for the Engineer, a beret and pencil for the Designer, wire glasses for the Analyst, a headset for Support, a stack of books for the Researcher. Names carry recall, role titles carry trust: "Ava · CEO."
Status is never shown with color alone. A working crew member gets a slow blue orbit, the only blue in a grid of avatars. Waiting for you is an amber ring with a hand badge. An error is a red ring with an info badge.
Motion, in general
The rest of the interface follows the same restraint. Motion explains; it doesn't decorate. UI transitions take 120 to 320 milliseconds. Springs handle anything spatial or interruptible; plain fades handle color and opacity, which should never bounce. Exits are faster than entrances. And the things you do a hundred times a day, such as sending a message, switching sessions, or selecting a row, don't animate at all.
Sound, off by default
There are at most three sounds, all under 400 milliseconds and all following system volume: done, a soft two-note rising interval, two curves meeting; needs you, a single neutral tick; and error, one low note. They're off unless you turn them on.
Why bother
None of this makes the agent smarter. It does make the agent easier to live with for eight hours a day. A spinner that tells you something, a single flash that tells you it's done, errors you can act on, and a quiet interface that gets out of the way of the code. We think that's worth getting right, and we'll keep refining it as Cusp grows.