Designing Nib
How a mark drawn from four circles became our logo, our spinner, our thinking voice and the face of Nib.
· The Nib team
We first published this post when the product was called Nib. The design hasn't changed; the name has, and this version tells the story with it.
A nib is the point of a pen. Two tines curve in and meet at one tip, ink runs down the slit between them, and at that point it becomes a line on paper. Everything before the nib is intention. At the nib it becomes something you can read.
That's the job of an agent. You and a model meet at a point, and every turn ends the same way: the work converges and becomes something you can run, review and ship. Nib is the point where thought becomes work.
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 hook.
Sweep and throat meet at the top right, the way a pen's two tines close into its point. That point is the nib of the mark. The counter creates a second, smaller point 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 pen's point mid-stroke, a cresting wave, and a forward flick, the moment a thought becomes a mark. We didn't plan all three. We started with the geometry and kept the version where they showed up. The mark has no letters in it, so when the product's name changed, the mark didn't have to.
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 doesn't depend on an installed font.
One blue, rarely
Nib's interface is neutral: warm grays with a hint of paper, not 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 when something meaningful happens and stays away otherwise, 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 spinner draws two strokes rising from the base of the mark along opposite sides, one over the sweep and one up the throat, like ink running down both tines of a pen. 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 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:
- Craft, the pen's family. Inking, Sketching, Drafting, Honing, Kerning, Burnishing, Untangling, Stitching.
- Curves and geometry. Converging, Cresting, Osculating, Inflecting, Splining, Triangulating, Zeroing in, Finding the point.
- Calm thought. Pondering, Mulling, Percolating, Steeping, Crystallizing.
The rules for adding one: a present participle, one or two words, nothing alarming, nothing 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 point 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," not "Oops, something went wrong." Permission prompts are plain and exact: "Allow rm -rf dist?" Billing, destructive actions and security get no jokes. Whimsy lives in waiting states, where it can make a pause feel shorter without making anything less clear.
The face of Nib
The mascot was called Nib before the product was. It's the mark without its counter, given two eyes: a small ink creature whose crest tip is a pen's point. When we renamed the product, we kept the creature's name and made it the face of Nib. In light mode it's ink with paper eyes; in dark mode it inverts. Its crest tip turns blue; the rest of it keeps its ink and paper.
Nib 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 Nib appears is as deliberate as how it looks. Nib 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 stays out of the transcript, diffs, permission prompts and anything 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.
Nib is pure SVG and Motion, crisp at any size, and it honors reduced motion like everything else.
Crew, in costume
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 Nib 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."
Each status pairs its color with a shape. A working crew member gets a slow blue orbit, which stands out 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 don't 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 lines meeting at a point; 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 Nib grows.