Primary black
#050A0C
Working systemVersion 0.1
AlwaysReady4Moore.com
Pictogram system
A reusable visual language for explaining systems, workplace behavior, technical tools, creative experiments, and the human judgment connecting them.
ClearHumanSystems-mindedWarmly technicalSlightly mischievous
The pictograms are not decoration. They are evidence of how the portfolio turns complicated ideas into understandable paths.
Systems lab
Foundation
Color palette
Black and white carry the illustration. Cyan behaves like a signal, annotation, path, or moment of emphasis.
Soft page white
#F7F8F8
Electric cyan
#19D8E8
Soft cyan
#7EF3FF
Dark background
#071014
Card surface
#101820
Muted border
#26323A
Muted text
#A7B3BA
Cyan is a signal, not a flood.
Use it for data paths, dots, motion marks, focus states, divider lines, tiny emotional emphasis, and selective highlights. Avoid filling large characters, objects, cards, or backgrounds with it.
Reusable icons
Core pictograms
Each icon should communicate one recognizable idea in roughly two seconds, including at small sizes.
Notebook
Field Notes, writing, documentation
icon / notebook
Shield
Security, trust, review, boundaries
icon / shield
Experiment
Labs, prototypes, creative tests
icon / experiment
Flowchart
Systems, process, routing, structure
icon / flowchart
Search
Research, discovery, finding answers
icon / search
Automation
AI workflows, handoffs, repeatable work
icon / automation
Message
Communication, support, feedback
icon / message
Checklist
Enablement, review, completion
icon / checklist
Browser tool
Extensions, internal tooling, web systems
icon / browser
Printer
Maker work, physical products, production
icon / printer
Spark
Ideas, discoveries, emphasis
icon / spark
Contact
Collaboration, outreach, conversation
icon / contact
Scale
Size behavior
Small icons support labels and controls. Larger icons anchor cards, page introductions, and reusable visual panels.
Small
Medium
Large
Extra large
Interface language
Status pills
Status labels should feel operational and useful, not decorative.
ActiveIn productionField testedExperimentComing soonArchived
Annotations
Notebook notes
Annotations add a human editorial voice without turning every section into a scrapbook.
Built after watching people search three different systems for one answer.
Human review belongs inside the workflow, not stapled onto the end.
The cyan path shows the improved route through the system.
Version two fixed the part everyone politely worked around.
Composition
Three levels of illustration
The same visual language scales from tiny interface marks to larger editorial storytelling.
01 / Icon pictogram
One reusable symbol
Used for navigation, tags, buttons, labels, and compact interface details.
02 / Micro scene
One visual relationship
Used on project cards, article cards, and section introductions to show the problem or interaction.
03 / Editorial panel
A complete visual idea
Used sparingly for article openers, hero sections, and important visual explanations.
Placement
Contained visual surfaces
Pictograms should sit inside a clearly defined surface so their silhouettes remain readable against the surrounding page.
Dark site surface
Dark page, contained card surface, white silhouette, and a small cyan signal.
Editorial variation
Field note
Extra labels and cyan marks are reserved for moments where they clarify the concept or add editorial context.
Quality control
Before an icon ships
- The idea is clear in about two seconds.
- The silhouette remains readable at thumbnail size.
- Cyan is used sparingly and intentionally.
- The concept feels clever without becoming childish.
- The graphic explains an idea, behavior, tool, or system.
- The composition avoids generic corporate and AI imagery.
- The image still makes sense without a paragraph of explanation.
- The alt text explains the idea rather than every visual detail.
Next system task
Apply the first pictograms to the homepage.
Once this guide looks right in the browser, the first production use should be the Field Notes, Systems in Practice, and Workbench section headers.