Product marks

Characters: rules

The Umbra character family: every product has its own character, not one for all. The characters differ, united by shared DNA. Source files are in brand/ (moved from the products unchanged), shown on the site’s “Product marks” page (/characters, section “Characters and logos”)

Shared DNA:

• black silhouette (#0A0A0A in the mark);
• white eyes;
• product accent: a tile under the mark or a glow around the live character;
• each product’s own details, by which the character is recognized

Product characters:

Product	Character	Own details	Form
ShadeNotes	mark brand/shadenotes/mark.svg	sharp silhouette, crescent eyes, accent-colored spark	static mark on a lime tile, radius 52/256; no emotions, animation or gradients (decided in ShadeNotes on November 6, 2026)
Portfolio	live mascot brand/portfolio/mascot.svg	round head with ears, vertical ellipse eyes #FFFEF5, no spark	live: this is the portfolio’s “one live creature”, it is the product

Only ShadeNotes has the spark; do not add it in the portfolio

Live or mark. The “one live creature” rule stays: a live character only where it is the product (portfolio). In apps the character is a static mark (logo, icon, splash screen, sidebar): an animated character in a tool is distracting. The live component lives in the product (the portfolio’s assistant-avatar) and does not go into the registry

The portfolio’s live character:

• Drawing: dark body with radial gradients (#050507 to #1A132B), purple light from below (#5930AF), soft edge. Gradients and aura glow are allowed only for the live character: this is the creature’s light, not an interface surface. The character’s colors are not interface roles and are not part of the tokens
• Moods (8), by priority from top to bottom:

Mood	When	What it looks like
error	error	tilt, short shiver, drop of sweat
thinking	request sent, no answer yet	tilt and sway, eyes of different sizes, three dots light up in turn
speaking	answer in progress	squash and stretch with a small hop, sound arcs pulse
happy	answer ready, “thank you”	hop with a stretch, sparks, blush
wink	greeting	wink, nod, little star by the eye
curious	the person is typing or lingered on the greeting	tilt, searching gaze, eyes toward the input field, “?”
sleepy	40 s without activity	head lowered, deep breathing, a “z” rises; any action wakes it up curious
idle	rest	blinking, breathing, occasional glances

• Motions (7), as one figure from the bottom center: turn, lean, hop, stretch, shake, settle, twitch. One event at a time; between events only blinking, breathing and glances
• Gaze: blinking (sometimes double), microsaccades, looking around in eight directions
• Sizes: 24 and 40 (larger eyes and brows, no accessories or loops), 64 and 120 (mood accessories, scenes only at 120)
• prefers-reduced-motion: no events or loops, the character stands still
• Maybe later: gaze following the cursor. Currently tracking is off in the portfolio code; the eyes move only with moods, looking around and glances

Mark for small sizes. The live character has a flat mark for 16–24 px: silhouette without gradients, white eyes, on the product accent tile with the same 52/256 radius. For the portfolio this is the proposal brand/portfolio/mark-proposal.svg (cobalt tile), not yet shipped in the product

How to make a character for a new product (DNA checklist):

• its own silhouette, black, recognizable by outline without eyes and details;
• white eyes, legible at 16 px (at small sizes the eyes are larger, like the portfolio’s live character);
• one detail of its own that distinguishes the character from the others; do not take other characters’ details (the ShadeNotes spark, the portfolio ears);
• mark on the product accent tile, radius 52/256 (macOS icon grid 824/1024);
• no gradients, shadows, strokes or emotions in the mark;
• legible at 16, 24, 28 and 48 px on the window and on the tile in both themes;
• a live version only if the character is the product; then aura gradients as the creature’s light, and prefers-reduced-motion stops it