Topserve Tennis — Design System & Content Style Guide

menu_book

How this design system is grounded

This design system is derived from Topserve Tennis's existing logo and brand presence, combined with proposed creative direction from Sales Savvy Online built around the brief: bold, sporty, high-energy.

Documented: Logo colours, product catalogue (strings, rackets, grips, overgrips, ball hoppers), physical location (141 Victoria Ave, Chatswood NSW), heritage (since 1986), Shopify platform.

Proposed (pending validation): Typography pairing (Barlow Condensed + Barlow), extended colour palette, CTA animation system, voice and tone direction, photography style, motion system.

Design direction

Australia's court since 1986

Topserve Tennis has been Australia's leading tennis specialist for nearly 40 years. The new site needs to reflect that authority while feeling fresh, modern, and bold. This isn't a generic sporting goods store. It's a specialist pro shop run by certified Master Racquet Technicians.

The visual direction takes cues from the sport: the vivid green of a tennis ball, the sharp contrast of court lines, the speed and energy of a well-struck serve. Bold condensed type, high-contrast colour, and clean product presentation.

Design principles

Specialist, not generic

Every design decision reinforces that Topserve is a specialist pro shop. Curated and knowledgeable.

Bold and sporty

High-energy visuals. Strong type. Confident colour. No timid pastels, no corporate grey.

Product-first

Clean photography, technical specs front and centre. Players want string gauge, racket weight, grip thickness.

Fast and findable

Strong filtering, fast load times, clear navigation so players find what they need without rallying through pages.

Brand palette

Court Green

#7CB342

Primary / brand

Black

#1A1A1A

Headings / dark surfaces

Ball Yellow

#D4E157

Accent / highlights

Red

#E53935

Alerts / sale badges

Court Green Dark

#5B8C2A

Hover / pressed states

Green Light

#E8F5D9

Soft surfaces

Surface

#FAFAF7

Page background

Deep Black

#111111

Hero / footer

Court Green (#7CB342) extracted from the logo. Leads identity for CTAs, eyebrows, active states. Ball Yellow (#D4E157) sparingly for highlights on dark. Red (#E53935) for sale badges and errors only.

Usage rules

CTAs

Primary: Court Green with diagonal wipe to black on hover. Dark: black with green wipe. Outline: bottom-fill sweep. Ghost: underline draw.

Text on light

Black (#1A1A1A) for body/headings. Court Green for eyebrows. Grey for secondary.

Text on black

White for headings. rgba(255,255,255,0.75) for body. Court Green for eyebrows.

Ball Yellow

Sparingly. Accent lines on dark surfaces, badges. Never as CTA or body text colour.

Red

Sale badges, stock alerts, form errors only. Never decorative.

Shopify theme tokens

Token	Value	Usage
--color-background	#FAFAF7	Page background
--color-foreground	#1A1A1A	Body text / headings
--color-brand	#7CB342	Primary CTAs, eyebrows, links
--color-brand-dark	#5B8C2A	Hover, pressed states
--color-brand-soft	#E8F5D9	Soft tinted surfaces
--color-deep	#111111	Hero / footer
--color-accent	#D4E157	Badges on dark
--color-danger	#E53935	Sale / errors

Type system

Display & headings

Serve. Rally. Win.

Barlow Condensed · Extra-Bold 800 · uppercase · letter-spacing: -0.01em · line-height: 1.0

Body

Topserve Tennis has been Australia's leading tennis specialist since 1986. Our certified Master Racquet Technicians bring decades of on-court experience to every string job, racket recommendation, and grip fitting.

Barlow · Regular 400 / Medium 500 · line-height: 1.7

Labels and eyebrows

Rackets · Strings · Grips · Ball Hoppers · Services

Barlow 700 · uppercase · letter-spacing: 0.12em · 12px

Type in context

New arrival

Toalson Sweet Area
Training Racquet

Designed for players who want to sharpen their technique. The reduced sweet spot forces cleaner contact, building consistency with every swing.

Shop now arrow_forward

Type scale

Element	Font	Wt	Desktop	Mobile	Tracking
H1 / Hero	Condensed	800	64px	40px	-0.01em
H2 / Section	Condensed	700	44px	30px	-0.01em
H3 / Card	Condensed	700	28px	22px	0
Body	Barlow	400	15px	14px	0
Eyebrow	Barlow	700	12px	11px	0.12em

Icon library

Material Symbols Outlined

Google Material Symbols (Outlined). Free, 2,500+ glyphs, weight-variable.

sports_tennissports_tennis

shopping_cartshopping_cart

searchsearch

personperson

favoritefavorite

menumenu

closeclose

arrow_forwardarrow_forward

filter_listfilter_list

local_shippinglocal_shipping

storefrontstorefront

verifiedverified

buildbuild

mailmail

phonephone

location_onlocation_on

scheduleschedule

tunetune

Sizing

sports_tennis16px

sports_tennis20px

sports_tennis24px

sports_tennis32px

sports_tennis48px

Section architecture

Every section follows a two-layer container model. Outer section spans viewport for backgrounds. Inner container constrains content to max-width.

<section class="section-name">
  /* Full viewport width. Background, padding-block, padding-inline */

  <div class="container">
    /* max-width: 1280px. margin-inline: auto. */
    <div class="section__content">
      /* Text group: flex-direction: column; gap */
    </div>
  </div>
</section>

Pre-build checklist

Section spans full viewport width

Inner container has max-width (1280px)

Texts grouped in flex-column parent with gap

Accent and heading tightly grouped

Section spacing via padding-block, not margins

Padding-inline on section, not container

CTA has slight margin-top for breathing room

Single-line accent has line-height: 1

Shopify section spacing

Section gaps

Desktop: 96px. Tablet: 72px. Mobile: 56px padding-block.

Horizontal gutter

Desktop: 40px. Tablet: 32px. Mobile: 20px padding-inline on section.

Container

max-width: 1280px, margin-inline: auto, no padding.

Border radius

12px cards. 8px buttons. 6px tags. 100px pills.

Sitemap

01Home

02Shop All

03Rackets

04Strings

05Grips & Overgrips

06Ball Hoppers

07Services

08About Us

09Contact

10Product (PDP)

11Cart & Checkout

12Account

Product categories

Tennis Racket String

6 products · Racquetfuel, Toalson

Tennis Rackets

3 products · Macro Spin, Toalson

Ball Hoppers & Carts

2 products · Ballmate

Replacement Grips

1 product · Tourna

Overgrips

4 products · Tourna, Toalson

Services

Stringing, customising, analysis, demos

Key page templates

Home

Hero · Featured products · Category cards · Services callout · Heritage block · Contact CTA · Footer.

Product (PDP)

Gallery (left) · Name, brand, price, variants, specs (right) · Add to cart · Description · Related products.

Collection

Category hero · Filter sidebar (brand, price, gauge) · Product grid (3-col) · Pagination.

Services

Stringing, customising, analysis, demo programme. Each with pricing and booking CTA.

Motion principles

Motion serves comprehension, not decoration. If it doesn't help the user, it doesn't belong.

Fast, then slow

Ease-out for appearing. Ease-in for leaving.

Short durations

UI: 150-200ms. Sections: 300-400ms. Over 600ms feels sluggish.

Respect reduced motion

Always check prefers-reduced-motion: reduce.

GPU-only properties

Animate transform and opacity only.

Interactive demos (hover to preview)

visibilityFade in

Section reveals on viewport entry.

opacity 1 → 0.3 · 300ms

arrow_forwardSlide in

Card reveals, hero text staggers.

translateX(0 → 20px) · 300ms

zoom_inScale

Image zoom on product cards.

scale(1 → 1.15) · 300ms

arrow_upwardLift

Product cards and buttons.

translateY + shadow · 200ms

swipe_rightCTA diagonal wipe

Primary CTA hover. Dark fill sweeps in at -12deg skew.

skewX(-12deg) wipe · 400ms aggressive

view_timelineStaggered reveal

Grid items cascade in. 60ms offset per item.

60ms stagger · 400ms each

sports_tennisBall bounce

Add-to-cart confirmation. Spring easing pop.

spring(0.34, 1.56, 0.64, 1) · 400ms

vertical_align_topOutline fill sweep

Secondary CTA hover. Fill rises from bottom.

height 0 → 100% · 350ms

Easing functions

Curve	Value	Use for
Standard	cubic-bezier(0.4, 0, 0.2, 1)	Default UI
Ease out	cubic-bezier(0, 0, 0.2, 1)	Elements entering
Aggressive	cubic-bezier(0.86, 0, 0.07, 1)	CTA wipes, dramatic reveals
Spring	cubic-bezier(0.34, 1.56, 0.64, 1)	Bouncy confirmations

Key effects

Primary CTA: diagonal wipe fill with skew, icon slides right on hover

pseudo-element translateX(-101%) skewX(-12deg) to translateX(0); 400ms aggressive

Secondary CTA: outline with bottom-to-top fill sweep

pseudo-element height: 0% to 100%; 350ms aggressive

Ghost CTA: underline draws left-to-right on hover

pseudo-element width: 0% to 100%; 350ms aggressive

Product grid: staggered fade-in with 60ms offset per card

translateY(20px) to 0; opacity 0 to 1; 400ms ease-out; IntersectionObserver

Add-to-cart: Ball Yellow circle bounces with spring easing

scale(0) to scale(1); cubic-bezier(0.34, 1.56, 0.64, 1); 400ms

Product card hover: lift with expanding shadow

translateY(-4px); box-shadow expand; 200ms ease

Image hover zoom inside overflow-hidden container

scale(1.04); 500ms ease; parent overflow: hidden

Sticky nav with backdrop blur, shadow on scroll

backdrop-filter: blur(16px); box-shadow on .scrolled; 300ms

Hero text stagger: heading words animate in sequence

split into spans; translateY(100%) to 0; 50ms delay per word; overflow hidden

Anti-patterns

Animating layout properties (width, height, top)

Animations longer than 600ms

Auto-playing video on page load

Carousels for primary product content

Modal popups on page entry

Auto-scrolling marquees

Generic bounce on every element

Parallax that fights scroll direction

Hover effects that obscure product info

Decorative tennis ball clipart animations

Neon green (stay with logo green)

Transitions without prefers-reduced-motion

Compliance target

WCAG 2.2 Level AA

Covers colour contrast, keyboard navigation, screen reader support, and motion preferences.

Contrast checks

White on Black
Dark section body

16.9:1

PASS AAA

Black on Surface
Body on light

16.9:1

PASS AAA

Green Dark on White
Links, eyebrows

5.1:1

PASS AA

Black on Court Green
CTA buttons

5.8:1

PASS AA

White on Ball Yellow
Avoid for text

1.4:1

FAIL

Checklist

Every form input has a <label>

All images have alt attributes

Focus rings visible on interactive elements

Skip-to-content link at top of body

Heading hierarchy doesn't skip levels

Buttons use <button>, not <div>

CTA pseudo-elements don't break focus

Icon-only buttons have aria-label

All animations respect reduced-motion

Tested with VoiceOver / NVDA

Lighthouse Accessibility score 95+

Site usable with JS disabled

Voice and tone

Topserve's voice should feel like getting advice from a mate who happens to be a certified Master Racquet Technician. Knowledgeable but never stuffy.

Voice

Expert and approachable. Like your club's best player who also knows the science behind every string tension.

Tone

Confident and direct. Short sentences. Active voice. "Gear talk with your stringer" not "product information sheet".

Audience

Club players, competitive juniors, weekend social players, coaches. Australian market.

Spelling

Australian English. Colour, favourite, customise, organisation.

CTA pattern

"[Verb] [object]" format. "Shop now", "Browse rackets", "Book a stringing", "Get in touch".

Content don'ts

Corporate speak ("best-in-class solutions")

Superlatives without proof ("world's finest")

Unexplained jargon

Generic claims ("quality you can trust")

Stock phrases ("take your game to the next level")

Long paragraphs on landing pages

Emoji as UI elements

Exclamation marks in headlines

Copy examples

Tone and structure examples. Final copy developed with Topserve during content phase.

HERO HEADLINE

Strung by experts. Played by you.

Specialist service USP, connects to the player.

HERO SUBLINE

Australia's leading tennis specialist since 1986. Rackets, strings, grips, and expert stringing from certified Master Racquet Technicians in Chatswood, Sydney.

CATEGORY INTRO

The right string changes everything. We stock Racquetfuel and Toalson in gauges from 1.19mm to 1.30mm. Not sure what suits your game? Ask us.

PRODUCT DESCRIPTION

Toalson HD Aster Poly 1.25mm/200m. A firm co-poly with crisp response and reliable durability. Built for baseliners who want spin and control.

SERVICES

Every racket that leaves our shop is strung by a certified Master Racquet Technician. Same-day turnaround on most jobs. Drop in or book ahead.

CTA BUTTON VARIANTS (hover to preview)

Four CTA tiers, each with a unique hover signature.

Shop now arrow_forward Browse rackets arrow_forward Book a stringing build View all strings arrow_forward

CTA system

Primary

Court Green + diagonal wipe. Dark fill sweeps at -12deg, text flips to green, icon slides right. Main conversions: "Shop now", "Add to cart".

Dark

Black + green wipe. Same diagonal mechanic, reversed. High-contrast on light surfaces.

Outline

Border + bottom-fill sweep. Fill rises from bottom, text flips to green. Secondary: "Book a stringing", "Learn more".

Ghost

Text + underline draw. Underline extends from left, icon nudges right. Tertiary/inline links.

Icon behaviour

Arrows slide 4px right on hover with spring easing cubic-bezier(0.34, 1.56, 0.64, 1).

Don't

Mix CTA tiers on the same row. Use more than one Primary per section. Skip hover states.

Photography direction

Mood

Clean, high-contrast, energetic. Sports brand lookbook, not department store. Natural light.

Products

Clean shots on white/grey. Multiple angles for rackets. Detail crops for strings, grips.

Lifestyle

On-court action for heroes. Real players, real courts. Gear in action.

Services

Behind-the-scenes of stringing, the workshop, the team. Candid over posed.

Composition

Strong compositions. Generous whitespace. Heroes can push diagonal energy.

Colour grading

Lifted shadows, clean whites. Product shots colour-accurate. Consistent site-wide.

Image specs

Asset	Format	Max	Dimensions
Hero banners	WebP/JPEG	250KB	1920×800
Product images	WebP/PNG	120KB	1200×1200
Category hero	WebP/JPEG	180KB	1600×600
Card thumbnails	WebP/JPEG	60KB	800×800
Brand logos	SVG	20KB	Vector

All via Shopify CDN. Alt text on every image. Decorative: alt="".