Reference catalogue for Socratic icon treatments. Production currently uses the timeline halo badge and the tuned Option D capsule. Earlier experiments are preserved below for comparison.
Current production standard: use Timeline Halo Icons for vertical timelines and Option D – Capsule + Ring Glow for all card grids. Sections marked “Historical” are archived examples only.
Original production treatment used on How I Can Help Your Institution prior to the Option D rollout. Icons live inside rounded capsules that lift and fill on hover.
Capsule lifts and mic scales.
Clipboard outline thickens on hover.
User glyph scales + fills softly.
Used in Socratic AI’s 5 Principles for Students. Icons live inside a white badge with a sky-blue border. Hover triggers a subtle inset highlight and a faint halo without moving the glyph.
Think Beyond Integrity
Static glyph with halo on hover.
Define Goals
Halo adds glow but no movement.
Do the Hard Parts
Stroke stays in place; halo appears.
Currently used in Proven strategies that transform how institutions use AI. These icons keep the original bordered style with no hover animation. They remain static inside the card.
Static badge, no hover animation.
Legacy border without glow.
Remains static on hover.
Archived blends explored before standardising on the current production styles. Useful for comparison, not for reuse.
Legacy experiment that blended the capsule container and outline-to-fill transition from style #1 with the halo glow from style #2. Retained for reference only.
Fill transition with halo glow.
No lift, just glow and fill.
Subtle halo around capsule.
Early attempt at a restrained outline treatment; superseded by Option D’s card-driven hover and refined halo.
Outline stays, halo appears.
Subtle scale with glow.
Restrained and elegant.
Prototype hybrid that introduced the ring glow but still relied on icon-level hover triggers. Use Option D instead.
Ring glows outward on hover.
Minimal icon movement.
Subtle stroke enhancement.
Use this treatment for all card-based iconography outside of the vertical timeline.
Production-ready treatment. The card wrapper drives the hover state, the capsule keeps a restrained glow, and the icon stays outline-only with a subtle stroke emphasis that aligns with our premium minimalism aesthetic.
Card hover drives the halo response.
Outline holds while ring intensifies.
Refined hover with balanced glow.
