Style Guide
Manage the look and feel of the entire website from our style guide. Style and components used on the site are documented here, and any changes made will be immediately visible across all pages.
Colors
The different weights of greys and colours used throughout the website.
Primary
primary-soft
primary-light
primary-main
primary-dark
primary-hard
Neutral
background
layer
divider
border
text-title
text-primary
text-secondary
text-tertiary
text-placeholder
text-disabled
Typography
Styles for heading tags (H1-H6).
Global Typography
Global Tag
HTML tags define default Heading styles.
All H1 Headings
All Heading 1
All H2 Headings
All Heading 2
All H3 Headings
All Heading 3
All H4 Headings
All Heading 4
All H5 Headings
All Heading 5
All H6 Headings
All Heading 6
All Links
All Block Quotes
Block Quote
All Unordered Lists
- No bullet list
- No bullet list
All Unordered Lists
- No bullet list
- No bullet list
All Ordered Lists
- No bullet list
- No bullet list
Customize Typography
Customize Tag
These are all of Typography used in the design system and components.
Heading
h1-heading-regular
Heading 1
h1-heading-medium
Heading 1
h1-heading-bold
Heading 1
h2-heading-regular
Heading 2
h2-heading-medium
Heading 2
h2-heading-bold
Heading 2
h3-heading-regular
Heading 3
h3-heading-medium
Heading 3
h3-heading-bold
Heading 3
h4-heading-regular
Heading 4
h4-heading-medium
Heading 4
h4-heading-bold
Heading 4
h5-heading-regular
Heading 5
h5-heading-medium
Heading 5
h5-heading-bold
Heading 5
h6-heading-regular
Heading 6
h6-heading-medium
Heading 6
h6-heading-bold
Heading 6
Body
b1-body-regular
Body 1
b1-body-medium
Body 1
b1-body-bold
Body 1
b2-body-regular
Body 2
b2-body-medium
Body 2
b2-body-bold
Body 2
Label
l1-label-regular
Label
l1-label-medium
Label
l1-label-bold
Label
l2-label-regular
Label
l2-label-medium
Label
l2-label-bold
Label
Caption
c1-caption-regular
Caption
c1-caption-medium
Caption
c1-caption-bold
Caption
c2-caption-regular
Caption
c2-caption-medium
Caption
c3-caption-bold
Caption
Structure Page
Defined and flexible core structure we can use on all or most pages.
Section
section
section
small
section
none
Container
container-default
container-sm
container-md
container-lg
Padding
padding-2xs
padding-sm
padding-md
padding-lg
padding-xl
padding-2xl
Align
align-left
align-center
align-right
Collumn
The 12 column grid system to make it easy to align sections across different screen sizes.
1 Col
2 Col
3 Col
4 Col
5 Col
6 Col
7 Col
8 Col
9 Col
10 Col
11 Col
12 Col
Grids
Different grid layouts to use across your site
4 Grid
3 Grid
2 Grid
2-1 Grid
1-2 Grid
2.5-1 Grid
1-2.5 Grid
Spacing
Spacer elements using the 8-pt grid to give sections more room to breathe.
spacing-xs
spacing-sm
spacing-md
spacing-lg
spacing-xl
spacing-2xl
spacing-3xl
spacing-4xl
spacing-5xl
spacing-6xl
Max width
Use the max-width CSS property to contain inner content to a maximum width.
max-width-2xs
max-width-xs
max-width-sm
max-width-md
max-width-lg
max-width-xl
max-width-2xl
Effect
The distance between two surfaces on the z-axis
Box Shadow
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis
shadow-2xs
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-2xl
Icons
Icons are visual symbols used to represent ideas, objects, or actions.
Icon Sizing
Components typically use icons on 16px artboards
icon-height-2xs
icon-height-xs
icon-height-sm
icon-height-md
icon-height-lg
icon-height-xl
Icon library
Logo
Button
Button allows users to take actions, and make choices, with a single tap.
Filled buttons
Use the most visual impact, and should be used for important.
Outline buttons
are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action
Tonal buttons
Is an alternative middle ground between filled and outlined buttons. They’re useful in contexts where a lower-priority button requires slightly more emphasis than an outline would give
Text buttons
used for the lowest priority actions, especially when presenting multiple options.
Elevated buttons
Use when absolutely necessary, such as when the button on dark or color background.
Card
Button allows users to take actions, and make choices, with a single tap.
Service Card
Architectural design
Lorem ipsum dolor sit amet, consectetur adipis elit. Sit enim nec, proin faucibus nibh et sagittis a. Lacinia purus ac amet.
Blog Card
Oct 22, 2023
Heading
Form
Form block group form element
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Rich text
Suitable for long-term content, like blog posts, product descriptions with various text styles, images, and video all in once.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Tabs
Tab component organize related content.
Badge
Use tags to label, categorize, or organize items using keywords that describe them.
badge
Our service
Tags
Use tags to manage and organzing blog posts, making the categorization and search process more convenient.
tag
tag
Section Component
Reuse these section on all Site Pages.
CTA
Let's Workout With Us.
Testimonial
TESTIMONIAL
Real Client’s Results
Joining GymPal has been a transformative experience for me. The personalized training sessions have helped me achieve.
Judy May
Powerlifter
GymPal truly delivers on its promise, providing a comprehensive and effective approach to fitness.
Mark Michel
Powerlifter
I highly recommend GymPal to anyone looking for a holistic and results-driven fitness experience.
Amy Rhine
HIIT Class
I highly recommend GymPal to anyone looking for a holistic and results-driven fitness experience.
Amy Rhine
HIIT Class
I highly recommend GymPal to anyone looking for a holistic and results-driven fitness experience.
Amy Rhine
HIIT Class