Six core colors plus black and white. Each color has a defined role and consistent meaning across all 22 slides. Cream (#F7F2E8) lightens the overall palette and provides the rim-light source for silhouettes placed on Navy backgrounds.
Note: Hero 64px is the production spec on the 1920 × 1080 Storyline canvas. Samples in this style guide may render at 42–48px to fit the page layout; the Storyline file renders at the full 64px.
Weight Scale
Bold (700): titles, buttons, meter labels
SemiBold (600): subtitles, scene headers
Medium (500): scene tags, journal dates
Regular (400): body text, narration
Section 03
UI Components
Core interactive elements used throughout the simulation. All components follow consistent radius, spacing, and color rules.
Dual Meter System
nooriStress30%
minaBandwidth70%
Style Guide Demo Control
Click to preview a meter-change animation. Not part of the scenario UI.
Button Types
Section 03B
Button States
Every button has Normal, Hover, and Disabled (or Selected) states with defined Shape Fill, Text Color, and Shape Outline values.
Scenario-locked progression. Distinct from Primary/Secondary action buttons. Anchored bottom-left of every slide. Home restarts the scenario; My Progress opens a read-only journey map showing the learner’s position in the 3-day arc. No “Next” button — forward motion is driven exclusively by in-panel scenario actions (Continue, Try Again, choice buttons), so learners cannot bypass decisions.
Normal State
← HomeMy Progress
Bar BG: rgba(27,42,74,0.82) | Text: rgba(255,255,255,0.88) | Font: Montserrat 11px/600
Anchor: bottom-left of every slide Offset: bottom 2% / left 2.5% Separation: sits outside navy-panel; never overlaps action buttons Role: sole navigation + scenario-position affordance — no competing progress indicator
Storyline 360 Implementation (no JavaScript required):
Set Normal / Hover / Down / Disabled as four States per button in the States panel.
For the 0.2s ease feel: add a Trigger → Change State with a 0.2s delay. Storyline does not render CSS transitions, but the Trigger + Delay combo produces the same perceived ease.
Focus ring: enable under Player Properties → Other → Show focus rectangles. This is Storyline's built-in accessibility indicator — no custom script required.
Section 03C
Component Dimensions
Exact pixel sizes for all UI elements on the 1920 x 1080 canvas. All measurements follow the 8px grid system.
Buttons
Primary / Secondary
W 280 x H 56 (min)
Choice Card Button
W 672 x H 80
Small (In-panel)
W 200 x H 48
Padding (all buttons)
16px top/bottom, 40px left/right
Panels
Navy Narrative Panel
W 672 (35%) x H auto
Title Card Overlay
W 1248 (65%) x H auto
Journal Card
W 1056 (55%) x H auto
Chat Window
W 1200 (62.5%) x H 840
Text Boxes
Narration Text Box
W 624 x H auto
Question Text Box
W 1120 x H 200
Journal Body Box
W 960 x H auto
Text Color / Fill
#333 on #FFFFFF | #F2F2F2 on Navy
Dual Meters
Meter Track
W 100% (of panel) x H 18
Track Fill (BG)
rgba(255,255,255,0.15)
Border Radius
9px (half of height)
Stack Spacing
20px between meters
Section 03D
Characters
Three characters appear in the simulation. Each has defined visual properties and interaction states for Storyline 360 implementation.
Noori
Protagonist • Korean Mixed Breed
Type: 3D Animated (Sunlit Render v2.2)
Format: I2V Clips (16:9, 4K) + Statics
Anchor: char_06 (reference image)
Clips: 9 scenes, Nano Banana 2 model
Normal: ring border #D4943A
Hover: ring border #BF8433, scale 1.05
Mina (Learner)
Silhouette + POV • No visible face
Type: Pure black silhouette (GPT Image 1.5)
Format: PNG transparent, SIL 9:16 / POV 16:9
Silhouettes: 7 total poses — 3 are I2I anchors (master refs)
POV: 4 hand shots — 1 is the I2I anchor
Fill: Solid black + Cream rim-light 40% opacity, 3px blur
Rule: No facial features ever
Counselor Jordan
AI Chatbot • devlin.ai • Slide 18 only
Type: Static profile image (headshot)
Format: .webp, circular crop
Integration: devlin.ai embed (SCORM)
Activation: QS3 Choice A only
Normal: ring border #5B8C5A
Hover: ring border #4A7A49, scale 1.05
Section 04
Spacing & Layout
Consistent spacing scale based on 8px grid. Use multiples for padding, margins, and gaps throughout Storyline slides.
8px
16px
24px
32px
48px
64px
80px
Storyline Slide Dimensions
Canvas: 1920 x 1080px (16:9). Safe margin: 80px from edges. Content area: 1760 x 920px. Navy panel max: 35% = 672px wide.
Component Spacing
Between buttons: 16px. Button to panel edge: 24px. Paragraph spacing: 16px. Meter stack spacing: 20px. Feedback text top margin: 24px. Button row top margin: 32px. Section divider margin: 48px.
Section 05
Accessibility Checklist
WCAG 2.1 AA compliance integrated from the design phase.
Color Contrast
#F2F2F2 on #1B2A4A → 11.84:1 AAA
#D4943A on #1B2A4A → 5.48:1 AA
#1B2A4A on White → 12.93:1 AAA
Min 4.5:1 for normal text, 3:1 for large text (18px+ or 14px bold)
Typography Minimums
Body: 16px minimum
Captions: 13px with bold weight
Line height: 1.5x minimum for body text. Letter spacing: default or wider, never condensed.
Interactive Elements
Keyboard: All buttons reachable via Tab
Focus: Visible focus ring (2px amber)
Touch target: Min 44 x 44px
Screen reader: Alt text on all images, ARIA labels on meters
Storyline: Set tab order explicitly in each slide
Section 06
Emotional Arc — Color Mapping
Color temperature shifts across the 3-day journey. Lighting and warmth increase as Noori settles in.
1:20 AM. You stare at the ceiling, arms crossed over your stomach. A distant siren fades. Then—from the hallway, a sharp bark. Then another. Noori's panicked barking fills the apartment. It doesn't stop.
nooriStress30%
minaBandwidth70%
Mockup 05 — Slide 5
Question (Scenario 1: The Barking)
QS1 • devlin.ai snap decision • 3 paths (A/B/C) • Sidebar meters show state before choice
Decision Point — Night 1 / QS1 • 3 choices
The Barking
It's 1:20 AM. Noori is barking at shadows moving under the front door. Your neighbors are going to be furious. You're exhausted. What do you do?
A
Yell at Noori to be quiet. You're exhausted and need sleep. A firm voice should teach him that nighttime means quiet time.
B
Move his crate closer to your bed. Maybe he's scared in the new place. Being closer to you might help him settle down.
C
Put on a white noise machine and wait. You read that dogs need time to self-soothe. Maybe if you give him space, he'll settle on his own.
Current Status
nooriStress45%
minaBandwidth60%
Hint
Your choice affects both Noori's stress level and your own confidence as a new adopter.
You lunge out of bed and yell “QUIET!” while slapping the crate. Noori drops flat on the newspaper lining, trembling. The barking stops instantly. By morning, he flinches when you reach toward the crate.
You drag the crate to the bedroom corner, away from the door's sight line. A blanket over the top blocks the shadows. You slide a chew toy through the bars. The barking stops mid-bark and becomes rhythmic chewing. Twenty minutes later, Noori is asleep.
You open the crate and scoop Noori onto the couch. He squirms free, shoots across the room, and circles frantically. Glass shatters from the coffee table. By 2 AM there are three accidents on the floor and a shredded couch cushion.
nooriStress80%
minaBandwidth30%
Mockup 09 — Slide 9
Noori's Journal — Night 1
BG-journal-night • 3 conditional versions • if QS1_Choice=A/B/C • Tabs show all versions below
VERSION B — CORRECT (Move/Cover/Redirect)QS1_Choice = “B”
Night 1
Noori's Journal
You moved my crate tonight. I don't know why. It's in a different spot now, closer to where you sit. I can hear your breathing from here. It's steady and slow.
The new sounds are strange—something ticks on the wall, and outside there are noises I haven't learned yet. But your breathing... that's the one I'm starting to know.
I'm still not sure about this place. But I'm a little less scared than I was an hour ago.
🐾 Noori | nooriStress: 20% | Trust: Growing
VERSION A — INCORRECT (Yell/Slap)QS1_Choice = “A”
Night 1
Noori's Journal
The loud voice came again tonight. I was trying to tell her about the shadows under the door—they move and I don't know what they are. But when I barked, she screamed. Something hit the crate and I went flat.
I know that sound. I heard it at the last place, too. The place before the shelter. I thought this place might be different.
I'm lying very still now. If I'm quiet enough, maybe the voice won't come back. My legs are shaking but I'm trying to stop them.
🐾 Noori | nooriStress: 75% | Trust: Broken
VERSION C — INCORRECT (Free Roam)QS1_Choice = “C”
Night 1
Noori's Journal
She opened the crate and put me on something soft. I thought she wanted me there. But then everything was too big and too open and I couldn't find a wall to press against.
I ran. I didn't mean to break the thing on the table. I didn't mean to have the accidents. I just couldn't stop moving. The open space felt like the shelter yard when the bigger dogs would circle.
She cleaned it up without looking at me. I'm back in the crate now. The apartment smells like the cleaning liquid. I'm tired but I can't close my eyes.
Morning light cuts harsh through the blinds. There's a wet spot by the front door. Noori hasn't eaten since last night. Your phone shows three missed texts from your neighbor. Your hands are starting to shake.
It's 8 AM. Noori hasn't eaten since last night. The accident is still wet on your floor. Your neighbor is talking to the building manager. Your hands are shaking. What are you going to do right now?
A
Step away. Put Noori in his crate and take a breath. You need a minute to think clearly before you do something you'll regret.
B
Clean up and text your neighbor. You can manage this. Just fix the mess and explain the situation.
C
Google 'how to return an adopted dog.' Maybe this was a mistake. You should at least know what the process looks like.
Current Status
nooriStress65%
minaBandwidth35%
Hint
Your choice affects both Noori's stress level and your own confidence as a new adopter.
You place Noori gently in the crate. Slide a chew toy across the floor toward him. Step into the hallway. The door closes softly behind you. You count to ten. By six, your hands stop shaking.
nooriStress40%
minaBandwidth60%
Mockup 13 — Slide 13
Consequence: Choice B (Clean and Text)
QS2-B • Scrubbing floor + texting neighbor • POV hands scene • Try Again / Continue
✗ Negative Outcome
Clean and Text
You grab paper towels. Spray the enzyme cleaner. Scrub the spot. Type a long explanation to your neighbor. Hit send. Wait. Your hands are still shaking. Now you're managing two crises instead of one.
nooriStress70%
minaBandwidth25%
Mockup 14 — Slide 14
Consequence: Choice C (Google Return)
QS2-C • Phone search scene • '72-hour waiting period' • Forum guilt post
✗ Negative Outcome
Google Return
You open your phone. Type into the search bar. The results appear. “Most shelters have a 72-hour waiting period.” A forum post: “I returned my dog and I still feel guilty two years later.” You close the browser. But the thought doesn't leave.
nooriStress80%
minaBandwidth15%
Mockup 15 — Slide 15
Noori's Journal — Day 3 Morning
BG-journal-day • 3 conditional versions • if QS2_Choice=A/B/C • Tabs show all versions below
VERSION A — CORRECT (Step Away)QS2_Choice = “A”
Day 3 Morning
Noori's Journal
She left the room this morning. I heard the door close. I waited. The apartment was so quiet I could hear the clock.
But then she came back. She sat on the floor next to my crate. She didn't open it. She didn't say anything. She just sat there.
I pressed my nose against the bars. She smelled like soap and coffee. I think that means morning. Her breathing was the slow kind again. The kind from the first night that I'm starting to recognize.
She's still here. I think that matters more than I understand yet.
🐾 Noori | nooriStress: 35% | Trust: Cautious but steady
VERSION B — INCORRECT (Clean/Text)QS2_Choice = “B”
Day 3 Morning
Noori's Journal
She cleaned the floor again this morning. She moves fast when she's upset—I can hear it in her footsteps. Sharp and quick. The mop makes a sound like something being dragged away.
Then her phone made noises. She typed for a long time. Her face changed while she typed. I don't know what the phone does, but it takes her somewhere I can't follow.
She didn't look at me after. I stayed in the crate. The wet spot by the door was my fault. I know that. I just don't know how to make it stop happening.
🐾 Noori | nooriStress: 65% | Trust: Uncertain
VERSION C — INCORRECT (Google Return)QS2_Choice = “C”
Day 3 Morning
Noori's Journal
She held the bright rectangle close to her face for a long time this morning. I could see the light from it moving in her eyes.
After, she sat very still. The kind of still that humans do when something heavy lands inside them. I've seen this before. At the last place, the person got very still like that right before they drove me back to the shelter.
I tried to make myself small in the crate. If I'm small enough, maybe she won't think about the accidents. Maybe she won't think about driving.
🐾 Noori | nooriStress: 80% | Trust: Afraid
Mockup 16 — Slide 16
Cinematic Transition (Day 3 Evening)
clip_16: Noori curious from crate • 3-3-3 pamphlet on kitchen table • Variable narration per QS2 path
Day 3 Evening (auto-advance)
Day 3 Evening
The afternoon passes. At 6 PM the 3-3-3 pamphlet catches your eye on the kitchen table. The shelter phone number is printed at the bottom. Noori watches you from his crate. His tail gives one slow wag.
nooriStress50%
minaBandwidth50%
Mockup 17 — Slide 17
Question (Scenario 3: The Call)
QS3 • 3 choices (Call / Don't Call / Text a friend) • Final turning point
Decision Point — Day 3 / QS3 • 3 choices
The Call
It's 6:47 PM on Day 3. Your body is tired. But your mind won't stop. Noori barks. Noori has had accidents. You're struggling. The shelter number is on the 3-3-3 pamphlet. You haven't called yet. What do you do?
A
Call the shelter. Maybe they can help. Maybe talking to someone who understands will make this easier.
B
Don't call. Not yet. Tomorrow. You'll figure it out tomorrow. You just need to get through tonight.
C
Text a friend instead. You're not ready to call the shelter, but you need to talk to someone. Anyone.
Current Status
nooriStress55%
minaBandwidth45%
Hint
This is the final decision point. There is no wrong answer—but one path opens a conversation that changes everything.
Mockup 18 — Slide 18
Counselor Jordan: AI Conversation
devlin.ai full conversation • Jordan profile + meters • 5-7 turns • Euthanasia reveal
Counselor Jordan
Toronto Paws Rescue • Behavior Specialist
Online
Current Status
nooriStress55%
minaBandwidth45%
● Live Session with Counselor Jordan
Hi, this is Jordan at Toronto Paws. Thanks for calling. How can I help?
It's been harder than I expected. He's been really anxious and I'm not sure if I'm doing things right.
That's completely normal to feel that way. Can you describe what specific behaviors you've been noticing from Noori?
He barely eats and he paces a lot. Last night he whined for almost an hour.
Those are very typical behaviors for the first 72 hours. Noori is still in his decompression phase. Can you tell me about your routine with him so far?
Mockup 19 — Slide 19
Consequence: Don't Call
QS3-B • clip_19: Noori lonely • Lamp off • Resigned tone
✗ Negative Outcome
Consequence: Don't Call
The number is on the pamphlet. You tell yourself tomorrow. You lie in bed, covers pulled to your chest, staring at the ceiling. The lamp is off. Dusky light filters through the window beyond. Somewhere in the living room, Noori whines softly.
nooriStress65%
minaBandwidth25%
Mockup 20 — Slide 20
Noori's Journal — Day 3 Evening
BG-journal-evening • 3 conditional versions • if QS3_Result=PASS/PARTIAL/FAIL • Final journal before epilogue
VERSION A — PASS (Called with Specifics)QS3_Result = “PASS”
Day 3 Evening
Noori's Journal
The person talked on the phone for a long time tonight. When she hung up, she came and sat next to my crate. She didn't open it. She just sat there. I could feel her breathing. It was slow and steady.
I pressed my nose against the bars and she reached her finger through. We stayed like that for a while.
I think we're going to be okay.
🐾 Noori | nooriStress: 15% | Trust: Anchoring
VERSION B — FAIL (Didn't Call)QS3_Result = “FAIL”
Day 3 Evening
Noori's Journal
I can hear the person in the other room. Sometimes I hear sounds that might be crying. I want to go to her, but the crate is closed.
I don't know if I'm the reason she's sad.
🐾 Noori | nooriStress: 70% | Trust: Fragile
VERSION C — PARTIAL (Called with Labels)QS3_Result = “PARTIAL”
Day 3 Evening
Noori's Journal
Someone on the phone said words I don't understand, but the person's voice changed after. Softer.
I think the phone helped. I wish she had called sooner.
🐾 Noori | nooriStress: 40% | Trust: Tentative
Mockup 21 — Slide 21
Epilogue Transition (Two Weeks Later)
Fade to black • “Two weeks later” • clip_21: Noori content
Two weeks later.
Mockup 22 — Slide 22
Conclusion (Tiered Endings)
Dog park • Noori at off-leash area • Results card • Tiered outcome • Fourth wall break • Restart
Epilogue — Day 3 Complete
A New Beginning
Through patience and compassion, you helped Noori find his footing in his new home. The first 72 hours were challenging, but your choices made all the difference.
Low
Final nooriStress
High
Final minaBandwidth
3/3
Positive Choices
Epilogue — Day 3 Complete
A New Beginning
Through patience and compassion, you helped Noori find his footing in his new home. The first 72 hours were challenging, but your choices made all the difference.
