Design

Bringing emotional illustration into a data interface without obscuring facts

Illustration can give an interface room to breathe, but it must follow hierarchy, semantics, and accessibility.

Data interfaces drift towards two extremes. One is all tables and numbers: accurate, but tense. The other is filled with illustrations and encouragement: friendly, but vague. treetree’s emotional patterns sit between the two. They adjust rhythm; they do not speak on behalf of the data.

Establish the factual layer first

Titles, key values, status explanations, and primary actions form the factual layer. They must remain complete if every illustration disappears. Emotional artwork can then occupy space that carries no measurement: the lower half of an empty state, the pause after completion, or a quiet background area away from a chart scale.

The order matters. Drawing a beautiful image first and squeezing data around it quickly sacrifices readability to composition. When the information hierarchy is settled first, an illustration behaves like punctuation—a pause, an ending, or a new beginning.

Never make an image the only meaning

A breeze, folded leaves, or a small lamp can suggest quiet, completion, and readiness to reflect, but none can be the sole evidence of state. Colour, text, and control state must communicate independently so that cultural interpretation, colour-vision differences, or a failed image request do not change the result.

“Everything is complete today” is therefore a readable status before it is a relaxed botanical picture. The artwork gives the page breathing room without changing the facts available to a screen reader or keyboard user.

Control density instead of decorating every card

An emotional pattern is not a brand sticker that belongs on every surface. High-frequency task screens stay restrained. Reviews and empty states can expand. When one region already contains strong imagery, the next deliberately becomes quieter.

The final check is simple: look away, then return. The eye should land first on what needs to be understood or acted upon. If decoration wins that first moment, it has crossed the boundary. Emotion can enter a data interface, but facts must speak first.