Style Guide
Brand colors, typography, components, and assets for anyone building with or extending the STOP&SCAN visual language.
Color Palette
Semantic tokens defined in tailwind.config.js. Use Tailwind classes (e.g. bg-primary, text-stop-red) rather than hard-coded hex values.
Brand
Primary
#004cd7
bg-primary
Primary Container
#2665fd
bg-primary-container
On Primary
#ffffff
bg-on-primary
Inverse Surface
#342b4b
bg-inverse-surface
Inverse On Surface
#f6edff
bg-inverse-on-surface
Background Paper
#fbf8f2
bg-background-paper
Surface Cream
#f6f0e4
bg-surface-cream
Lilac Accent
#b197fc
bg-lilac-accent
Framework Steps
Stop
#ef4a6b
bg-stop-red
Source
#22b8cf
bg-source-cyan
Content
#37b24d
bg-content-green
Alignment
#ea80dc
bg-alignment
Reflect
#ff922b
bg-reflect-orange
Accents
Fuel Yellow
#f3a530
bg-fuel-yellow
Turquoise
#6ae4e7
bg-turquoise
Pastel Green
#82e896
bg-pastel-green
Flamingo
#f36734
bg-flamingo
Welcome Blue
#4dabf7
bg-welcome-blue
Surfaces & Text
On Surface
#1f1635
bg-on-surface
On Surface Variant
#434655
bg-on-surface-variant
Surface Container Lowest
#ffffff
bg-surface-container-lowest
Surface Container Low
#f8f1ff
bg-surface-container-low
Surface Container
#f3eaff
bg-surface-container
Outline
#737687
bg-outline
Outline Variant
#c3c5d8
bg-outline-variant
Typography
Outfit for display and labels, Nunito Sans for body copy, Gochi Hand for Amito's speech.
Display XL
STOP&SCAN
font-display text-display-xl
Display LG
Trust calibration
font-display text-display-lg
Headline MD
Pause before you trust
font-display text-headline-md
Body LG
Scaffolded sensemaking for digital resilience.
font-body text-body-lg
Body MD
The default body text used across the site.
font-body text-body-md
Body SM
Supporting captions and metadata.
font-body text-body-sm
Label MD
Framework step
font-label-md text-label-md uppercase
Handwritten LG
Amito says hello!
font-hand text-handwritten-lg
Font Families
font-display
Outfit
font-body
Nunito Sans
font-hand
Gochi Hand
btn-primary
Filled CTA — hover:brightness-105
btn-accent
Outlined — hover fills with primary
btn-ghost
White with border — hover:bg-surface-cream
btn-inverse
Dark fill — hover:opacity-90
Disabled state (pattern)
Apply opacity-50 and cursor-not-allowed when actions are disabled.
UI Components
Reusable patterns from index.css and PageSections.
Cards & Chips
Cards use rounded-xxl, shadow-soft, and a subtle border. Chips are compact pill labels for metadata.
Lesson Options
Navigation Links
nav-link uses hover:opacity-80. Active state adds a primary bottom border.
Speech Bubble
I don't know yet is a complete answer!
Spacing & Layout Tokens
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
xxl
48px
margin-mobile
20px
margin-desktop
40px
Page content is constrained with container-page (max-w-container-max: 1152px) and margin-mobile / margin-desktop horizontal padding.
Shadows & Radius
shadow-soft
Cards, bubbles
shadow-card
Elevated panels
rounded-xxl
24px corner radius
STOP&SCAN Logo
The open-hand stop icon. Use on light backgrounds in full color, or invert on dark surfaces.
Light background
Source: /logo.png
Dark background (inverted)
Apply brightness-0 invert for footer and dark panels
App Icon
icon-512.png
Used for favicons, web manifest, and the Stop framework step icon.
Framework Step Icons
Each STOP&SCAN step has a dedicated icon, Amito pose, and background accent color.
STOP
Pause and register your gut reaction.
Amito cue: Pink-red torso glow
S
Who is really behind this?
Amito cue: Cyan right cuff
C
Does what you see actually hold up?
Amito cue: Green left cuff
A
Does everything fit together?
Amito cue: Lilac head logo
N
Has your judgment changed — and why?
Amito cue: Orange torso glow
Amito Poses
Amito is the site mascot. Each pose maps to a framework step or page context, with a matching glow color.
Component States (with glow)
greeting
stop
source
content
alignment
reflect
reward
Full Asset Library
Greeting
Stop
Source
Content
Alignment
Reflect
Reward
Learn
Comics
Project
Post Video
Comic Cover
Video Teaser
Effects & Backgrounds
Utility classes and motion patterns used across the site.
hero-gradient
Blue-to-cream gradient for page heroes
paper-texture
Subtle dot grid applied to the site layout background
aura-glow
Lilac soft glow for Amito spotlight cards
Animations
animate-float
animate-glowpulse
Common Icons
menu_book
arrow_forward
robot_2
auto_awesome
verified_user
psychology
explore
bookmark
share
language