The colours, letters and pieces we build every screen from. One set, used by the club website, the workout app on the web, and the iPhone and Android apps.
Colours
Colours from our snail shell
Swirl blue, shell yellow and an amber edge, on a warm off-white. Green only ever means done.
Aa
Swirl blue
brand
Main buttons, links, picked things and page tops.
Aa
Shell yellow
sun
The loudest colour. Visit buttons and bright bands.
Aa
Amber edge
amber
Amber bands and the small dot on something new.
Aa
Ink
ink
Text and icons.
Ground
ground
Surface
surface
Subtle
subtle
Muted
muted
Blue tint
brand-tint
Yellow tint
sun-tint
Success
success
Danger
danger
Letters
One font, three weights
Google Sans in regular, medium and bold. Lines stay tall enough for Khmer to fit without being cut off.
Display · 48
Train with us
Title · 30
Swimming Lessons
Heading · 20
Gym + Swim
Lead · 18
Everything you need under one roof
Body · 16
A clean gym with free weights, machines and cardio, open every day.
Label · 15
Phone number
Caption · 14
45 min · Beginner
Overline · 12
What we offer
Aa
Regular 400 · Medium 500 · Bold 700
English and Khmer
Book Your First Visit
កក់ការមកលេងដំបូង
Shapes
Soft corners everywhere
Buttons and chips are pills. Fields, rows and cards get rounder as they get bigger.
Pill
Buttons, chips and switches
Field · 16
Text boxes
Row · 24
List rows (28 on Android)
Card · 32
Cards and sheets
Pieces
The pieces every screen is built from
Try them. They are the same pieces the website and the app use.
Buttons
Blue for the main thing on a screen, yellow on the website, outlined for the rest.
Chips
A picked chip is brand blue, never pink.
Fields and switches
Your name
Rest alert sound
Choose one
Day
Week
Month
For two to four choices that change what shows below.
List rows
Upper Body
6 exercises · 45 min
Swimming
Outdoor pool · open every day
Done and problems
Workout saved
Please enter your phone number.
Green shows something is done. Red only for a problem to fix.
Website
Pages are made of wide coloured bands
Each band holds one idea. Plain and light grey bands take turns, and one bright band asks you to visit.
Plain
Most sections
Light grey
Every other section
Blue
Page tops
Yellow
Visit us
Amber
Special news
Dark
Footer
Come and see the club
Open every day, 7:00 to 21:00. Pay at the front desk.
Book Your First Visit
Workout app
One app that feels at home on every device
The same pieces, dressed for each device: the iPhone look in the browser, Liquid Glass on iPhone and Material on Android.
Workout
Today
Upper Body
6 exercises · about 45 min
Start Workout
My Workouts
Ready-Made Workouts
Workout
Exercises
Me
Web
The iPhone look in every browser
Workout
Today
Upper Body
6 exercises · about 45 min
Start Workout
My Workouts
Ready-Made Workouts
Workout
Exercises
Me
iPhone
Liquid Glass
Workout
Today
Upper Body
6 exercises · about 45 min
Start Workout
My Workouts
Ready-Made Workouts
Workout
Exercises
Me
Android
Material 3 Expressive
Words
Plain words, in English and Khmer
Many members are new to the gym. Say what they get, in everyday words.
Say
Remember what you lifted
ចងចាំទម្ងន់ដែលអ្នកបានលើក
See how much stronger you get
ឃើញថាអ្នកខ្លាំងឡើងប៉ុណ្ណា
Not
Log every set
Track your PRs and volume
Buttons start with a verb and use Title Case. A button and the screen it opens use the same words.
Kara, our snail
Her pictures cheer people on. Her name only appears on the app welcome and Ask Kara.
Caracol Sports Club
Your Step to Healthy Life!
#146B Cuba Street, Sangkat Niroth, Khan Chbar Ampov, Phnom Penh