“What matters to you?”
Invite reflection and acknowledge that context, needs and preferences can change.
Fieldwork.
A career exploration studio. Oversized grotesque type, signal orange, a technical grid and cut-paper graphics turn introspection into an active, self-directed experiment.
A palette with a purpose.
Canvas
#F1EFE7
#F1EFE7
Carbon
#222820
#222820
Signal
#F34D25
#F34D25
Acid
#DCEC8A
#DCEC8A
Olive
#5C6255
#5C6255
Primary action
var(--accent)Canvas / primary text
--bg / --inkSecondary text / borders
--muted / --lineSelected state
--wash + --progressKeyboard focus
3px var(--focus)Error text
var(--error)Use ink for readable text. Accent washes are surfaces; selection always also uses a checked control. Never communicate an error through colour alone.
Arial Bold + Courier New
System fonts keep every HTML file portable and available offline.
Display / responsive 52–88px
A direction of your own.
Heading / 36–54px
What brings you to life?
Body / 16–18px · 1.6–1.75
Good questions create room for honest reflection. Take your time; the next step is yours to choose.
Label / 11px · tracking .15em
Your working life / a new perspective
Space that supports the story.
Layout1,200px container · asymmetrical poster hero · visible rules and grids
Spacing scale
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96Shape0px · crisp corners throughout
Mobile ≤ 850px20px gutters · single column
Tap targets50px primary · 42px compact
Motion180ms lift; graphic stays still so content remains the focus.
The conversation kit.
Actions & states
Primary / secondary / disabled. Tab to see the focus ring. Primary buttons launch a working three-question preview.
Inputs & feedback
Add a reflection before continuing.
Selected response
AutonomyCompetenceRelatedness
KAGERAYOUR REFLECTION
01 / Interests
When do you become so absorbed in something that you lose track of time?
Think about a moment when the activity itself felt rewarding.
A space to be honest.
YOUR STORY, ONE THOUGHTFUL QUESTION AT A TIME.
Support the person’s agency.
Curious, direct, active. Use the language of experiments, observations and next steps. Never tell someone who they must become.
“Your perfect career.”
Do not promise a fixed identity, guaranteed match, validated score or outcome we cannot substantiate.
Research → reflection.
SDT is an established research framework. This concept’s questions and recommendations require their own validation.
- All three needs matter. Do not present autonomy, competence and relatedness as competing personality types.
- Use labelled controls, visible focus, semantic headings and text feedback. Respect reduced motion.
- Show question progress. Allow going back and exiting. Explain what happens to answers.
- Testimonials, accuracy statistics and research endorsements require real supporting evidence.
Research reference: Self-Determination Theory overview. Visual direction: an original field-guide and graphic-poster identity. The exploration metaphor reflects agency; it does not imply a validated assessment.
Working assumptions: Kagera is the placeholder brand. The landing page presents a product concept; its CTA opens an illustrative three-question flow. No backend, accounts or career-matching engine is connected.