Styles

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

Logos

Wordmark

The Integrity wordmark without descriptor text. Used in navigation, compact placements, and branded UI elements.

Deep Ocean

#1F3268

Charcoal

#2F3035

White

#FFFFFF

Primary Logo

The full Integrity Practice Sales logo with stacked descriptor text. Used in hero sections, print materials, and formal brand placements.

Deep Ocean

#1F3268

Charcoal

#2F3035

White

#FFFFFF

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

Accent

Energy Blue

#524EE9

--colors--accent

Neutral

Charcoal

#2F3035

--colors--dark1

Lavender

#CFD2DF

--colors--bg2

Modern Gray

#F6F6F6

--colors--bg3

Off-White

#F9F8F5

--colors--bg1

Warm White

#FFFDF9

--colors--warm-white

Cream

#FFFBF2

--colors--light1

White

#FFFFFF

--colors--white1

Text Colors

Primary Text

#2F3035

Charcoal — default body text

Muted Text

rgba(47,48,53, 0.7)

70% opacity — secondary text

Section Themes

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

u-mode-light

Light Theme

Warm 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

Visual Rules

When in doubt, default to less. Allow adequate space between items so content can breathe.

Backgrounds

Use Warm White or Cream as the primary background. Keep surfaces flat — Charcoal and Deep Ocean for dark sections. Avoid gradients, noise textures, and repeating patterns. Never use pure white (#fff) as a page background.

Shadows

All shadows are tinted with Deep Ocean — never neutral black. Three levels for depth hierarchy.

Hairline

0 1px 2px rgba(31,50,104, 0.06)

Subtle separation

Card

0 2px 8px rgba(31,50,104, 0.08)

Default card elevation

Lifted

0 8px 24px rgba(31,50,104, 0.12)

Modals, popovers, hover

Shadow Scale

Tinted with Deep Ocean (rgba 31, 50, 104). Tokens: --shadow--hairline · --shadow--card · --shadow--lifted

Iconography

Phosphor Icons Regular weight v2.1.1

All iconography uses the Phosphor icon pack at regular weight. Consistent 24px stroke-based icons for UI elements, navigation, feature callouts, and status indicators. Icons inherit currentColor from their parent. Do not mix icon packs or use filled/bold weights.

CDN: @phosphor-icons/web@2.1.1/src/regular/style.css

Icon Pack

Phosphor Regular — consistent stroke weight across all glyphs. Class pattern: ph ph-{name}

Common Icons

house

envelope

phone

user

chart-line-up

shield-check

handshake

calendar

arrow-right

check-circle

star

gear

Corners

Use 0.5rem–0.75rem on cards and panels. Pill (fully rounded) on buttons, chips, and tags. 0.125rem–0.25rem on inputs. Never exceed 12px (0.75rem) border-radius on cards. No sharp 0px corners on any element.

tiny · 0.125rem

Inputs

small · 0.25rem

Inputs, badges

medium · 0.5rem

Cards

large · 0.75rem

Cards, panels

pill · 1000rem

Buttons

circle · 1000rem

Avatars