View Static Version
Loading

GYMNASTICS NOW Design System

Style Guide

Logos

Primary Logo

Secondary Logos

ACCEPTABLE USES:

  • Profile images
  • Watermarks,
  • Site/app titles
  • Merch

UNACCEPTABLE USES:

  • Avoid stretching or compressing logos
  • Avoid rotating logos
  • Avoid using the logo on busy backgrounds (using a solid background behind logo as a solution is acceptable)

Mission

Our mission: provide comprehensive coverage of gymnastics to fans through engaging, journalistic based content.

Voice

Professional | Ethical | Journalistic | Approachable | Inclusive | Savvy

Tagline

Your go-to source for gymnastics news!

About our audience

Our target market are gymnastics fans who follow the sport more than every four years – what many call "The Gymternet" – but, we break things down in order to be inclusive and welcoming to new fans, as we strive to help grow the sport!

primary color palette

Secondary color palette

For highlighting, tags, and pops of color on social media.

Typography

Imagery: Quality, quality, quality

Our audience and sport as a whole thrives off of artistry, and the imagery we use to convey this is no different. We use high quality imagery of athletes sourced from a team of photographers instead of bland, subjectless, and low quality (read: pixelated) images.

DO: High quality imagery sourced from expert photographers THAT EVOKES EMOTION

DON'T: LOW QUALITY IMAGERY WITH NO SUBJECTS, BLAND, AND OVERALL NOT IMPACTFUL

Component Library

Header

This is the header element that will be used in the four main sections of the Gymnastics Now IOS app. It features: a settings menu (hamburger icon), logo/section title, and a search feature.

Main nav

The main navigation provides users with quick and easy access to the four main content sections of the app, including the home feed (articles), watch feed (training videos and other video features), photos (photo galleries from events and for special occasions), and listen (podcast home).

Article header

The article header will be featured at the top of all articles in the app and features a comment icon, save icon, display settings icon, and share icon. In addition, users will be able to navigate back to the previous page with the back arrow.

display settings

The display settings component is a straightforward way for users to customize their experience while using the app, specifically while reading articles. It includes a display theme section to select from light, dark, or system, text size adjustment, and brightness adjustment.

comments pop-up

The comments pop-up is accessible via the comments icon and is a place for users to respond, react, and engage with the Gymnastics Now community.

Toolstack

The Gymnastics Now toolstack is simple but powerful and includes:

  • Design: Canva, Adobe Spark
  • Prototype: Figma
  • Develop: SwiftUI via Xcode

Pattern Library

News listing

This news listing component includes: a hero image/icon (depending on placement), headline, and byline.

Navigation Pairing

The navigation pairing features the Header and Main Nav components or the Article Header and Main Nav components. This pairing is featured on the home feed, main sections, and in all articles.