Color Swatches

Blue

#0069D9

White

#ffffff

Eerie Black

#1a1a1a

Typography

Heading 1 with New Colors

Heading 2 with New Colors

Heading 3 with New Colors

Heading 4 with New Colors

Heading 5 with New Colors
Heading 6 with New Colors

Regular paragraph text with the new color palette. This text should be using the default text color.

Bold text within a paragraph to test contrast and readability.

This is a link within regular text to test how links appear.

Buttons

Button & CTA Color Options

Primary CTA Options

Secondary Button Options

Button Hierarchy Example

Membership Sign-up

Choose the membership option that works best for you.

Call-to-Action Examples

Primary CTA Card

This card uses the main blue as background with a contrasting button.

Dark CTA Card

This card uses Eerie Black as background with a vibrant button.

Cards

Card with Default Styling

This card uses the default border and background colors.

Card with Blue Background

This card uses the Blue color as background with white text.

Notices

Note

This is a note notice with the default styling.

Tip

This is a tip notice with the default styling.

Custom Styles (Inline CSS)

Blue Background

Text on Blue background

Eerie Black Background

Text on Eerie Black background

White Background

Text on White background

Gradient Background

Text on gradient background (Blue to Eerie Black)

Color Palette Comparison

New Palette

Primary Blue

#0069D9

Eerie Black

#1A1A1A

White

#FFFFFF

Deeper Blue

#0052AB

Vibrant Contrast

#FF5630

Sample UI Component

This is how content would appear on the primary color background.

The Mas Clinic Old

Background

#092043

Background Light

#0056B8

Banner

#2F5D7C

Orange (Primary CTA)

#f08553

Green

#86d3b7

Sample UI Component

This is how content would appear on the primary color background.

Complete The Mas Clinic Old Palette

Site Colors

Background (#1A1A1A)

Background Light (#0056B8)

Border (#E6E6E6)

Banner (#2F5D7C)

Accent Colors

Orange (#f08553)

Green (#86d3b7)

Yellow (#e3bb4c)

Content Colors

Light (#fbfaf7)

Muted (#FFFFFF)

Base (#1A1A1A)

Sophisticated Typography Examples

Gilroy + IBM Plex Sans

Optimize Your Performance

Personalized treatment plans designed to help you reach your peak physical condition and maintain optimal hormone levels.

Our evidence-based approach ensures you receive the most effective care available.

Start Your Journey Today

Take the first step toward optimizing your health and performance.

Size & Spacing Demonstration

SECTION LABEL

Primary Heading (25px)
Secondary Heading (20px)

Body text at 16px with 1.6× line height creates optimal readability. Notice how the spacing between paragraphs relates to the line height.

Proper typographic hierarchy guides the reader's eye through the content in order of importance.