22 · Signs · Glyphs

Every glyph earns its place.

22 / 22

The Figments glyph set is small on purpose. One canvas (14×14), two families (brand marks and UI icons), plus seven kind marks — that's the whole vocabulary. Every glyph draws on the same grid, uses currentColor, and either fills or strokes — never both. Sharp corners, square line-caps, no hand-crafted curves that fight the geometry.

Proposal Candidates — the chat corner mark
idle typing
01 · I-beam cursor Directly says “type here.” Active: classic blink at 1.1s. Could be read as a typography glyph if seen alone.
idle typing
02 · Ellipsis Universal chat/typing signal. Active: staggered bounce, 1.2s loop. Very common in other AI products — less distinctive.
idle speaking
03 · Speech brackets “Conversation container.” Active: a word dot pulses between them. Reads as play/rewind controls to some eyes.
idle listening
04 · Wordmark (VU meter) Brand tie to Figments. Active: bars shift heights like a sound meter. Still brand-forward; doesn't say “chat” to a first-time user.
idle alive
05 · Single dot Maximum restraint. Active: square breathes 2→4px, 2.8s loop. May read as too quiet or disabled in idle.
idle typing
06 · Speech rect (sharp) Direct chat affordance. Active: three dots type inside the bubble. Classic speech-bubble baggage — helpdesk adjacent.
idle alive
07 · Heartbeat dot The italic red dot from Figments. — direct lift of Animation 02. Idle dims to half; active runs the two-beat rhythm. One color only — no way to signal different kinds of activity.
idle flowing
08 · Signal flow Direct verbatim lift of Animation 39 — three signal-colored particles riding an S-curve via offset-path. Idle shows the ghost track; active fades particles in/out at endpoints. Active state is wider than tall — needs a wider corner in real use, not a 32×32 square.
idle working
09 · Frozen → working Two distinct states. Mono dot at rest; three signal-colored dots bob in sequence when thinking — miniature Drift constellation. Color only when it means something. Mark visually changes — motion has to feel precisely right.
idle unread
10 · Mono + status dot Monochrome 99% of the time; a gold dot pops in when there's a waiting reply (red for error). Inbox-badge logic, done quietly. Doesn't signal “thinking” — only “something happened since you left.”
idle making
11 · Kind cycle Lift of Animation 03 — the mark becomes a figment, then a workflow, board, integration, back again. Says “I make any of these” on sight. Shape morph is busier than any other candidate — can't be running constantly.
idle orbiting
12 · Orbit train Lift of Animation 33 — two signal-colored dots orbit the core at different radii and speeds. Three-body motion, unmistakably thinking. Needs room; circular motion inside a 32×32 square feels tight.
idle thinking
13 · Constellation settle Lift of Animation 21 — nodes appear, edges draw, triangle holds, dissolves. Feels like the assistant forming an answer. Mid-complexity geometry — risks looking like a diagram loader.
idle thinking
14 · Breathing quad The seed-of-all motif: Animation 01. Four cells in signal colors pulse 3.2s apart. Reads as system alive without literal chat. Not chat-specific — could be any status indicator.
idle streaming
15 · Beat + echo Heartbeat with a memory — the pulse travels and leaves a trail of fading echoes. Rhythm is visible across time, not just one moment. Unique motion vocabulary; not a typing-dots animation. Wants horizontal space — trails compress badly at <20px width.
idle streaming
16 · Dot + anchor Two dots: static period (the Figments. quote) on the left, live heartbeat on the right. Brand tie is literal; presence is doubled without adding chrome. Two dots risk reading as typo if they're not clearly intentional pair.
idle streaming
17 · Italic period The glyph is the italic period from the Figments. wordmark — a slanted comma-shape, not a geometric circle. Typographic character baked in; asymmetric, distinctive even when static. At tiny sizes the slant compresses to a pixel smudge; harder to render crisply than a circle.
idle streaming
18 · Thread weave Two sine waves intersecting — the assistant's voice and yours, woven. Rich conceptual fit. At 16px wide the two waves merge into a blur — texture before shape.
idle streaming
19 · Taut thread A line between two endpoints. Idle: gentle sag. Streaming: snaps taut and vibrates. Physical metaphor — you read the state the way you read a clothesline. Idle sag must be subtle or it reads as "disabled."
idle streaming
20 · Endless loop A figure-eight traced by a dashed stroke — continuous processing, looped thinking. Figure-eight reads "recursion / loading spinner" more than "conversation."
idle streaming
21 · Thought stitch A dashed line sews itself left-to-right, unspools, repeats. Writing visualized. Perfect for the streaming state but static (idle) is a partial stitch — ambiguous.
idle streaming
22 · Tangled node A line enters, winds into a knot, exits cleanly. Making sense of a messy problem — the assistant's actual job. Organic/cursive geometry fights the sharp 0px language. Ceremonial, not chrome.
idle streaming
23 · Data trace An orthogonal thread routes along invisible grid lines. Logic finding structured solution — matches Figments' sharp 0px geometry perfectly. Less "conversation" and more "circuit" — cold/technical read.
idle streaming
24 · Zigzag pulse A packet (bright segment) travels along a triangular wave. Digital heartbeat — EKG-like. EKG association is strong — medical / dashboard territory.
idle streaming
25 · Cubic wrap ★ Thread chases itself around the perimeter of an isometric cube. The cube is the context the assistant is wrapping (page, figment, workflow); the thread is the conversation threading through it. Dimensional, structural, distinctive — no other AI tool uses this geometry. 32×32 floor needed for the isometric perspective to read; won't compress to 16×16 without losing depth.
idle streaming
26 · Square fold A continuous thread folds inward at 90° angles, forming a spiral. Condensing structured data — very Figments geometry. Reads like a classic tech-company logo ("enterprise chip"). Less conversation, more architecture.
idle streaming
27 · Digital meet Two orthogonal threads step toward each other, connecting at center — you and the assistant aligning. Direct conceptual map for conversation. Two-line composition reads as "connector" diagram more than identity mark.
cube idle
28 · Ghost trace Faint threads quietly patrol the top and bottom diamond faces. System is aware — not heartbeating, not floating, just watching. Subtle to the point of near-invisible at bar size.
cube idle
29 · Core breathe The internal intersection expands and contracts — heartbeat translated into the cube's geometry. Conceptually the closest to the heartbeat-dot family — loses some of the cube-specific novelty.
cube idle
30 · Cubic drift The whole cube hovers above a breathing shadow. Signals "ready to receive." Float + shadow is the most generic of the three idles — reads as loading-skeleton.
cube typing
31 · Vertex blink Top three vertices light up in sequence — the classic "…" typing indicator, translated into 3D space. Safe — it's the commodity typing pattern, just dimensional.
cube typing
32 · Edge construct Three colored segments trace the cube's outline in sequence — capturing the user's prompt by "drafting" the shape. Three-color treatment risks Google-y at a glance; needs restraint.
cube typing
33 · Step thread ★ A thread zig-zags up the faces like a staircase — stacking words, building a query. Most distinctive of the typing set. Needs the cube shape to carry it; can't be read without the structural context.
cube pending
34 · Orbit chase High-speed perimeter loop — the spinner, but rigid and cube-native. Still a loop at heart; closest to the generic spinner pattern.
cube pending
35 · Data uplink ★ Dashed packets climb the three vertical axes converging at the top — "sending your prompt to the system." Strong semantic. Requires three simultaneous animations; busier than orbit chase.
cube pending
36 · Inner gyro The three internal Y-axis lines flash in sequence — a rotor inside the cube. Mechanical, architectural. Feels more industrial than conversational.
cube streaming
37 · Data unspool Multi-colored threads wind rapidly through the structure — high cognitive load, text generating. Closest to AI-slop "magic" territory; rainbow motion is the danger zone.
cube streaming
38 · Facet fill ★ The three visible faces paint in sequence — output materializing on the structure. Cleanest streaming read. Full-color fills are the loudest state; must revert cleanly at the end.
cube streaming
39 · Hex burst Concentric hexagonal outlines ripple outward — broadcasting, output pulsing out. Ripple/broadcast pattern is familiar; less cube-specific than facet fill.

Thirty-nine candidates, each shown in cube (reference) and state (animated) at 64×64 (deploys at 32×32). 01–06 are geometric first-reads. 07–10 bring color in as status. 11–14 are §17 lifts. 15–17 are the heartbeat refinement. 18–27 are the thread family. 28–39 are the Cubic kit — twelve behaviors that all play on the same isometric cube, grouped by state: idle (28–30), typing (31–33), pending (34–36), streaming (37–39). The cube is the assistant's identity; each animation is a verb on that structure. Chosen kit (locked): 28 · Ghost trace → 33 · Step thread → 35 · Data uplink → 38 · Facet fill. See the size-survival rail below.

Locked The chosen kit · at every surface size
24px 32px 48px 88px
Idle 28 · Ghost trace
Typing 33 · Step thread
Pending 35 · Data uplink
Streaming 38 · Facet fill

The four chosen variants rendered at 22 / 32 / 48 / 88 px. 88px is where the mark lives on the first-run onboarding or large attention moments. 48px is the attention-size treatment (empty-state prompts, Arrival). 32px is the composer glyph cell inside the chat column — this is where the cube lives while a session is open. 22px is the active-session row in the sidebar (see §08 Shell) — the cube's at-rest home. The question this frame answers: at what size does the isometric cube stop reading? If 22px survives for all four states, no degenerate variant is needed — the full mark carries the whole surface range. If it breaks, the sidebar row has to grow or we design a flat-square fallback for tiny contexts.

Family A Brand marks — the voice of Figments
Figments wordmark The signature — four vertical strokes at varied heights. The voice of Figments speaking. Assistant corner · Create name input · wordmarks
Zap Studio's mark — fast thinking, generative spark. Solid fill only, never outlined. Studio empty state · Studio thread headers · generative affordances

Two marks do the brand work. The wordmark bars stand for Figments-as-voice (the system speaking as you, or to you). Zap stands for Studio specifically — the room where intent becomes output. They never share a surface; if Zap is on the page, the wordmark stays quiet.

Family B Kind marks — one shape per object
Figment Filled square · --kind-figment
Workflow Filled triangle · --kind-workflow
Board Four quadrants · --kind-board
Integration Filled hexagon · --kind-integration
Integration Identity Outlined hexagon · --kind-identity
Document Three ruled lines · --kind-document
Memory Filled disc · --kind-memory

Every object in Figments has exactly one mark. Shape is identity, color is identity. Never mix them — a figment is always a square, a workflow is always a triangle, no matter the surface. See Identity · Objects for the full semantic model.

Family C UI icons — the quiet helpers
caret-downSelects, jump menus
chevron-leftBack, history return
closePanels, dialogs, dismissals
checkSelect state, confirmation
arrow-sendSubmit, next, send message
plusCreate, add to collection
searchCommand palette, filter
attachComposer attachments
regenerateReroll name, retry run
fullscreenMaximize canvas, expand figment
canvasOpen/close Studio canvas
toggleSidebar, app chrome toggle
listHistory, transcript rows
historySidebar history toggle

All UI icons live in the same 14×14 box with stroke weight 1.4 (or 1.6 when extra presence is needed, as with check). Square line-caps for geometry that matches the 0px corners; currentColor always, so a glyph adopts its context without a palette lookup.

Detail Conventions — draw one, draw them all
01

One canvas: viewBox="0 0 14 14". Sized at render time via CSS width/height — commonly 10–14px.

02

Always currentColor. Never hard-code hex. A glyph inherits from its text ancestor so themes and kind colors pass through.

03

Fill or stroke — never both. Brand marks fill (the Zap). UI icons stroke (1.4 default, 1.6 for emphasis).

04

stroke-linecap="square" by default. Matches the 0px corner geometry; rounded caps soften the voice.

05

One shape per object kind. A figment is a square forever; a workflow is always a triangle. Identity outlives visual drift.

06

Before inventing a new glyph, reach for one here. A missing icon is a prompt to grow this set deliberately, not to paste from elsewhere.