Signal Green
Exploration · activation · discovery
FLaM visual system
Design decisions,
made visible.
A living inventory of the visual language already used across the FLaM book, website, diagrams, tables and learning assets.
StructuredExplicitEnergeticHumanExploratory
01 · Foundations
One quiet base. Two active signals.
The palette is small by design. Deep Ink and Paper carry most of the system; green and violet show function, state and transition.
Mapping Violet
Mapping · convergence · integration
Deep Ink
Text · axes · structural headers
Soft Ground
Quiet grouping · secondary surfaces
Paper
Primary reading surface
Explore. Activate. Discover.
Connect. Converge. Integrate.
02 · Surfaces & borders
The missing layer: fills, outlines and boundaries.
These samples collect the recurring treatments already visible in the diagrams and digital components.
Corner treatment
4
8
12
Small radii for diagrams; softer radii for website cards. Pills are reserved for tags and states.
03 · Typography
Architecture and explanation.
Montserrat establishes structure and identity. Source Sans Pro supports sustained reading.
Montserrat ExtraBold · 48 pt
Montserrat ExtraBold / SemiBold
A design decision has a function before it has a format.
Source Sans Pro Regular · 12 pt
04 · Components & states
The website as a component source.
Cards, tags and controls use the same structural contrast as the diagrams: quiet surfaces, dark labels and purposeful signal colours.
Interaction
What does the learner do with what is available?
View mapping →Compare & Contrast
Make distinctions visible without adding unnecessary complexity.
View pattern →defaultExplore subgoals→
Use the control to inspect the three interface states.
05 · Stick figures
A small visual vocabulary for thinking and action.
Each figure pairs one clear action with a restrained green or violet signal. The examples show how the drawing language works without turning the figures into decoration.
Thinking figure
Identify
A focused visual cue makes recognition and discovery immediately visible.
Thinking figure
Differentiate
Contrasting shapes turn comparison and distinction into a readable action.
Thinking figure
Structure
A simple hierarchy shows relationships being organised into a coherent whole.
Layer figure
Content
A held document represents material made available for thinking and action.
Layer figure
Guidance
A path and signpost express orientation without prescribing every step.
Layer figure
Feedback
A visible response makes progress, quality or correction easy to recognise.
Keep the original drawing style and line work.
Use green and violet on meaningful objects or cues.
Choose the figure by action, not by empty space.
06 · Diagram grammar
Relationships before decoration.
Sequence, mapping, divergence, convergence and comparison share one visual grammar.
Structure and connectorsExploration and activationMapping and convergenceOpen or divergent space
Show additional diagram specimens
07 · Tables
Comparison without noise.
Dark headers establish structure. Alternating neutral rows support scanning. Accent colours appear only when they carry meaning.
| Functional layer | Design question | Typical evidence |
|---|---|---|
| Content | What becomes available to think with? | Examples, concepts, distinctions |
| Interaction | What does the learner do? | Choice, construction, practice |
| Guidance | What supports progress? | Prompt, scaffold, worked example |
| Feedback | How is quality made visible? | Criteria, consequence, correction |
| Emotion | What shapes willingness and attention? | Relevance, tension, confidence |
08 · Token inventory
A working master, not a new design.
This library records what is already present. Differences between book, site and diagrams remain visible until repeated use justifies consolidation.
--flam-greenPrimary signal--flam-violetMapping signal--flam-inkPrimary dark--flam-softNeutral surface--flam-paperReading surface--flam-green-tintExploration fill--flam-violet-tintMapping fill--line-standardQuiet structure--line-emphasisFunctional emphasis--radius-diagramDiagram nodes--radius-interfaceCards and controlsStatus
Documented from current FLaM assets. Review future additions against repeated use rather than preference alone.
09 · Try the visual system
Turn the guide into a design partner.
Copy a prompt into your preferred AI design or coding tool. Replace the words in brackets, add your learning content and see how a shared visual language can guide AI-assisted production.
Start with intention.
These prompts guide the visual language—not the complete learning design. Add your topic, learning action, domain-specific sequence, interaction logic and feedback requirements. Then refine the result through testing.
Create in the FLaM∞ visual language
Create a polished learning screen about [TOPIC] for [AUDIENCE]. The learner should [LEARNING ACTION]. Use the FLaM∞ visual language: Paper (#FFFFFC) as the primary background, Deep Ink (#2B2D42) for text and structure, Signal Green (#00FD00) only for exploration, activation or discovery, and Mapping Violet (#A915FF) only for connection, convergence or integration. Use Montserrat ExtraBold for display headings and Source Sans Pro Regular for body copy. Build the layout from quiet surfaces, fine dark outlines, small corner radii and generous spacing. Use one clear focal point, concise copy and meaningful contrast. Avoid generic gradients, decorative icons, excessive shadows and colour used without a function. Make every visual element support the learner’s action.
Design a decision screen
Create a responsive learning screen in the FLaM∞ visual language where a new team leader chooses how to respond to an employee who has missed a deadline. Show three concise response options as outlined cards. Use Deep Ink and Paper as the base, Signal Green for the option currently being explored and Mapping Violet for the confirmed choice. Use Montserrat ExtraBold for the heading and Source Sans Pro for the supporting text. Keep the interface calm, structured and human. Include a short feedback panel that appears after a choice, but do not use red/green right-or-wrong signalling.
Design a comparison screen
Create a responsive compare-and-contrast learning screen in the FLaM∞ visual language. Help the learner distinguish between two easily confused concepts: [CONCEPT A] and [CONCEPT B]. Use two balanced outlined panels on a Paper background, Deep Ink for structure, Signal Green for details the learner should inspect and Mapping Violet for the relationship revealed between both concepts. Use Montserrat ExtraBold headings, Source Sans Pro body text, restrained pale tints and one simple diagram or thinking figure. End with one concise question that asks the learner to apply the distinction.
A small public experiment from the evolving FLaM∞ visual system.