Orthopedic care for the way you move
This direction preserves the original OSM design system and adds only a restrained interaction layer: soft depth, subtle green hover blooms, true hexagon responses and purposeful directional movement.
One practice. Two visual modes.
The clinical system leads with OSM green. Black and approved Trail Blazers assets create the partnership-specific campaign layer.
Confident. Clear. Human.
Green, charcoal and warm white support the full website, including physician, specialty, condition and patient-resource pages.
United in performance.
Black, white and official Trail Blazers assets create a campaign layer while the typography, spacing and interface accents remain recognizably OSM.
Restrained by design.
Green carries the clinical brand. OSM orange-red provides limited directional emphasis. Official partner artwork always retains its native brand colors.
Strong display. Quiet support.
Acumin Pro Condensed establishes the voice. Open Sans keeps longer medical content familiar and easy to read.
Every treatment plan should reflect the patient’s condition, function, lifestyle and individual goals.
Labels remain small but high contrastConsistent at every turn.
The original component language remains intact. Hover and keyboard-focus states add feedback only where an element is genuinely interactive.
Clinical actions
Care pathways
Sports Medicine
Evaluation and treatment for sports-related injuries and active patients of all ages.
02Shoulder Care
Care for rotator cuff tears, instability, arthritis and other shoulder conditions.
03Hip & Knee Care
Care for ligament, cartilage, meniscus, hip and joint conditions.
04Spine Care
Evaluation and treatment for neck, back and nerve-related symptoms.
05Foot & Ankle Care
Care for injuries, structural conditions and problems affecting mobility.
06Hand, Wrist & Elbow
Specialty care for upper-extremity pain, injury and loss of function.
Provider directory cards
Physician Name, MD
Use one concise clinical summary before the profile action.
View profilePhysician Name, DO
Keep awards and team roles subordinate to clinical identity.
View profileProvider Name, PA-C
Use the same crop, title hierarchy and action treatment across the team.
View profilePatient resources
Your goals shape the path forward.
OSM’s visual system should reinforce the same idea as its care: thoughtful, coordinated and specific to the person. Professional experience supports the story without overtaking it.
Request an Appointment- PrecisionClear evaluation and treatment planning
- CollaborationCoordinated care and communication
- Return to activityA considered path toward personal goals
Clear answers without clutter.
Native disclosure controls remain accessible and reliable while receiving the same editorial styling as the rest of the site.
Do I need to be a professional athlete to receive care at OSM?
No. OSM physicians care for patients with a wide range of orthopedic needs. Evaluation and treatment are based on each patient’s condition, function and goals.
Does OSM provide nonsurgical as well as surgical care?
Treatment recommendations depend on the individual diagnosis and may include surgical or nonsurgical options.
How should appointment calls to action be written?
Use “Request an Appointment” consistently unless a specific scheduling workflow has been verified.
What keeps it cohesive.
These constraints preserve the premium, established feel as the system expands to the rest of the site.
Production page coverage
System rules
Use consistently
- Acumin Pro Condensed for hero and section titles
- Open Sans for body copy and functional labels
- OSM green for clinical calls to action
- OSM orange-red for sparing directional accents
- Hexagons as a controlled structural motif
- Warm white and mist sections for visual pacing
- White-to-soft-green bloom only on interactive surfaces
- Two- to three-pixel lift as the maximum hover movement
Avoid
- Using partner colors as general clinical interface colors
- Multiple competing card or button styles
- Persistent decorative gradients or gratuitous animation
- Hover movement on static information that implies a false action
- Tiny, widely spaced or low-contrast body text
- Recreating or approximating either organization’s logo