“What matters to you?”
Invite reflection and acknowledge that context, needs and preferences can change.
Resonance.
A familiar conversion-led journey with a more grounded promise. Apt’s near-black canvas, gold headline, purple actions and rounded visual panels meet a science-first career story.
A palette with a purpose.
Midnight
#0D0C11
#0D0C11
Starlight
#F9C943
#F9C943
Orchid
#8540AC
#8540AC
Cloud
#F6F2FA
#F6F2FA
Lilac
#C5BBCE
#C5BBCE
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 + 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 · split conversion hero · rounded result preview
Spacing scale
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96Shape20px cards · 30px hero panel · 10px buttons · pill tags
Mobile ≤ 850px20px gutters · single column
Tap targets50px primary · 42px compact
Motion180ms buttons; no looping or distracting effects.
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.
Warm, optimistic and clear. Invite exploration; avoid perfect matches, accuracy claims or invented social proof.
“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 reference: Apt, reviewed 30 September 2026. Original Kagera layouts and illustrations; no copied brand assets.
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.