Primary black
#050A0C
Working systemVersion 0.1
AlwaysReady4Moore.com
Pictogram system
A reusable visual language for systems, workplace behavior, technical tools, creative experiments, and human judgment.
ClearHumanSystems-mindedWarmly technicalSlightly mischievous
The pictograms explain a tool, behavior, relationship, or system. They are not decorative filler.
Systems lab
Foundation
Color palette
Black and white carry the illustration. Cyan marks a signal, annotation, path, or result.
Soft page white
#F7F8F8
Electric cyan
#19D8E8
Soft cyan
#7EF3FF
Dark background
#071014
Card surface
#101820
Muted border
#26323A
Muted text
#A7B3BA
Use cyan as a signal, not a fill
Use cyan for data paths, dots, focus states, dividers, and small highlights. Do not fill large characters, objects, cards, or backgrounds with it.
Reusable icons
Core pictograms
Each icon should communicate one idea within about two seconds, even at a small size.
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
Use small icons for labels and controls. Use large icons for cards, page introductions, and visual panels.
Small
Medium
Large
Extra large
Interface language
Status pills
Use status labels to communicate state, not decoration.
ActiveIn productionField testedExperimentComing soonArchived
Annotations
Notebook notes
Use annotations for brief context or editorial notes.
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
Use three illustration levels
The system scales from small interface marks to larger editorial scenes.
01 / Icon pictogram
Use one reusable symbol
Use for navigation, tags, buttons, labels, and compact interface details.
02 / Micro scene
Show one visual relationship
Use on project cards, article cards, and section introductions to show a problem or interaction.
03 / Editorial panel
Show one complete visual idea
Use sparingly for article openers, hero sections, and important explanations.
Placement
Keep pictograms on contained surfaces
Place pictograms on a defined surface so their silhouettes stay readable.
Dark site surface
Dark page, contained card surface, white silhouette, and a small cyan signal.
Editorial variation
Field note
Add labels and cyan marks only when they clarify the concept or add useful context.
Quality control
Check each icon before use
- The idea is clear in about two seconds.
- The silhouette remains readable at thumbnail size.
- Cyan communicates a specific state, path, or result.
- The concept feels clear and professional without becoming stiff.
- The graphic explains one idea, behavior, tool, or system.
- The composition avoids generic corporate art and AI imagery.
- The image still makes sense without a paragraph of explanation.
- The alt text explains the idea rather than every visual detail.
Current use
Apply the system consistently across new pages
New pictograms should follow this guide and be reviewed before they appear on the site. Generated artwork stays outside the source until it is approved.