Styles

Typography, color, and layout tokens for the Integrity Practice Sales brand — built on the MAST Framework.

Typography

Font Family

Suisse Intl

Neo-grotesque sans serif

Weights: Regular 400 · Medium 500 · Bold 700

Regular 400 Medium 500 Bold 700

Weight Scale

Headings use Medium 500 · Body uses Regular 400

Headings

H1

Integrity

clamp(2.8rem, ..., 5.5rem) · 44.8px → 88px · weight 500 · line-height 1.0 · letter-spacing -0.02em

H2

Integrity

clamp(2.0rem, ..., 3.8rem) · 32px → 60.8px · weight 500 · line-height 1.1 · letter-spacing -0.02em

H3

Integrity

clamp(1.5rem, ..., 2.3rem) · 24px → 36.8px · weight 500 · line-height 1.2

H4

Integrity

clamp(1.3rem, ..., 1.5rem) · 20.8px → 24px · weight 500 · line-height 1.4

H5

Integrity

clamp(1.1rem, ..., 1.2rem) · 17.6px → 19.2px · weight 500 · line-height 1.4

H6

Integrity

clamp(0.9rem, ..., 1.0rem) · 14.4px → 16px · weight 500 · line-height 1.4

Body & Utility Text

text-size-xlarge

We help dentists navigate the complexities of selling their practice, ensuring the best outcome for everyone involved.

clamp(1.2rem, ..., 1.5rem) · 19.2px → 24px · weight 400 · line-height 1.4

text-size-large

Our team provides comprehensive support throughout the entire transition process, from initial valuation to final closing.

clamp(1.1rem, ..., 1.25rem) · 17.6px → 20px · weight 400 · line-height 1.5

text-size-medium

Every practice sale is unique. We recognize that the needs of our customers are different, and we adapt our approach to deliver quality results.

clamp(0.9rem, ..., 1.0rem) · 14.4px → 16px · weight 400 · line-height 1.6 · default body

text-size-small

clamp(0.8rem, ..., 0.9rem) · 12.8px → 14.4px · weight 400 · line-height 1.5

eyebrow

Practice Transitions

clamp(0.7rem, ..., 0.8rem) · 11.2px → 12.8px · weight 500 · uppercase · tracking 0.1em

Rich Text

This is a paragraph with a text link inside it.

Bold text and emphasis text for rich formatting.

Ordered item one
Ordered item two
Ordered item three

Unordered item A
Unordered item B
Unordered item C

We've built our reputation on trust, transparency, and results.

Color

Primary

Deep Ocean

#1F3268

--colors--dark2 / --primary--accent

Neutral

Charcoal

#2F3035

--colors--dark1

Lavender

#CFD2DF

--colors--bg2

Modern Gray

#F6F6F6

--colors--bg3

Off-White

#F9F8F5

--colors--bg1

Cream

#FFFBF2

--colors--light1

White

#FFFFFF

--colors--white1

Text Colors

Primary Text

#2F3035

Charcoal — default body text

Muted Text

rgba(47,48,53, 0.5)

50% opacity — secondary text

Section Themes

Six utility classes that set background, text, and accent colors for entire sections.

u-mode-light

Light Theme

Default white background for primary content areas and standard reading sections.

Button

u-mode-dark

Dark Theme

Near-black background for high-contrast sections and dramatic emphasis.

Button

u-mode-navy

Navy Theme

Deep Ocean background for hero sections, feature callouts, and brand moments.

Button

u-mode-cream

Cream Theme

Warm cream background for softer sections, testimonials, and supporting content.

Button

u-mode-gray

Gray Theme

Modern gray background for alternating sections and subtle visual separation.

Button

u-mode-contrast

Contrast Theme

Charcoal background for bold statements and high-impact content blocks.

Button

Utilities

Spacing Scale

--space--xs

0.5em

--space--sm

1em

--space--md

2em

--space--lg

3em

--space--xl

4em

Border Radius

tiny · 0.25rem

small · 0.5rem

medium · 0.75rem

large · 1.25rem

xlarge · 2rem

circle · 1000rem

Icons — Phosphor

Phosphor Icons, regular weight (v2.1.1). Used across the Integrity site for UI elements and feature callouts.

house

envelope

phone

user

chart-line-up

shield-check

handshake

calendar

arrow-right

check-circle

star

gear

Layout

Flexbox Grid

col-12

col-6

col-4

col-3

col-8

col-4

col-5

col-7

Container

.container · max-width: 1200px · padding: 0 2rem