\DESIGNSORCERY>_

PlayOn: Tickets, Streaming, Stats & Sites for High School Sports

PlayOn: Tickets, Streaming, Stats & Sites for High School Sports — Desktop · Light

Desktop · Light · scroll within frame to see full page

Design System Inspiration

Playonsports — extracted via DESIGN.md

Media · High school sports platform

corporate bold clean dark-theme typographic data-heavy sticky navigation card-based layout scroll-triggered animations dark mode toggle

Typography

Druk

Heading

Aa Aa Aa Aa

Siro

Body

Aa Aa Aa Aa

Color palette

TL;DR

Playonsports utilizes a high-contrast, "sports-broadcast" aesthetic defined by the heavy, condensed serif **Druk** for display headlines and the versatile sans-serif **Inter** and **Siro** for functional UI. The palette is strictly achromatic (#000000, #ffffff) with a single primary brand color, **Electric Cyan** (#00c9d2), used for high-priority CTAs and interactive accents. Layouts feature aggressive section transitions, including deep black bands with large-scale white type and rounded "pill" geometry for buttons and decorative containers.

Target audience

The site targets high school sports enthusiasts, athletes, coaches, and administrators seeking a comprehensive platform for tickets, streaming, stats, and team management.

Full tech stack

Ada Font Awesome Google Tag Manager HubSpot HubSpot Analytics HubSpot CMS Hub jQuery ZURB Foundation

Analytics

HubSpot Analytics Google Tag Manager

Meta description

Digital tickets, live streaming, stats, coaching tools, social content, and team sites. Everything your high school sports program needs in one place.

Brand Voice

PlayOn is an evocative and authoritative voice that celebrates the emotional weight and community impact of high school sports.

Positioning

PlayOn is a unified platform of trusted brands providing ticketing, streaming, and visibility for high school sports. It serves athletic directors, coaches, and the broader community of fans and families.

Voice principles

  • Narrative: Focuses on the "story" and "moments" of the game rather than just the technical utility.
  • Inclusive: Addresses every stakeholder from the student section and grandparents to the athletic director.
  • Momentum-driven: Uses active language to show how the game continues to "work" before, during, and after the buzzer.
  • Authoritative: Employs short, punchy sentences and all-caps headings to signal scale and proven reliability.

More SaaS Designs

← Back to Gallery