HUMMBL / Presentation kit / 0.1

Make the system visible.

A working visual language for clear boundaries, deliberate actions, and evidence people can inspect.

Three aligned frames around a narrow path, with a small stack of evidence tiles beside them.
Boundary study 01. Original Blender geometry. An explanatory illustration of the ideas behind governed action.

One identity.
Room to adapt.

The bird, editorial typography, and forest palette hold the identity together. Use space and hierarchy to make the next step obvious.

HUMMBL bird markHUMMBL

Preserve the original mark and its proportions. Keep generous clear space and use a light field when the green mark would disappear.

Say what changes.

  • Lead with the reader’s decision or task.
  • Use concrete language and one primary action.
  • Put the source and scope beside evidence.
  • Give each related property room for its own identity.

A small set.
Used with intention.

These values follow the current hummbl.io web profile. Semantic roles keep text, surfaces, and interaction states readable in both themes.

Color has a job.

Canvas--paper
Primary text--ink
Action--green
Quiet surface--mint-soft
Secondary text--muted
Structure--border-strong

Choose a complete foreground/background pair. A palette color alone does not establish contrast.

Crimson Pro · Editorial headings

Give good ideas
a clear form.

Inter · Reading and interaction

Set the scope. Make the action understandable. Show what happened.

JetBrains Mono · Data and code

scope: one workflow
decision: inspectable

A clear next step.

Pair a visible action with a legible state. Keep useful labels when color is unavailable. The examples here are specimens, not live system status.

Actions

One primary action per decision. Visible keyboard focus and a 48px minimum component height.

States

✓ Permitted× Blocked◷ Needs review

Labels explain the meaning; color reinforces it. A green badge is never a substitute for a verifiable source.

01 / Authority

Who may act?

Name the actor, permitted action, and scope.

02 / Containment

Where does it stop?

Make the execution boundary explicit.

03 / Evidence

What can we inspect?

Keep the decision and its outcome reviewable.

Form follows
the explanation.

Use original, editable geometry to make a system easier to understand. Keep interface text in HTML. Pair every concept image with a plain-language explanation.

Boundary sculpture on a pale mineral plinth.
Light study · Paper, mineral ceramic, forest metal.
The same boundary sculpture on a dark forest plinth, with pale evidence tiles.
Dark study · Same geometry, adjusted material separation.

Concept art does not establish runtime behavior, security, or certification. Use the proof page and its scoped sources for evidence.

A little movement.
Only when invited.

A five-second camera study made with Higgsfield from the light Blender render. The illustration remains available without motion.

Video loads only after you choose to play. No audio or automatic looping.

Download the motion study (MP4)

Still preview of the boundary sculpture motion study.

Make it useful.

Start with these assets and the current web tokens. Check the result at its actual size, in both themes, and with a keyboard.

Original geometry and component source: Apache-2.0. The HUMMBL name and bird identify HUMMBL; using these assets does not imply endorsement. Related properties retain their own brand decisions.