One look for the website, the office dashboards and everything staff and patients see: calm teal, slab-serif headlines, rounded sans text, plenty of white space. Use the switch in the header to see every sample in light and dark.
Teal, black and quiet grays
Click a swatch to copy its hex value. Brand colors are the same in both modes; the role colors below change with the mode.
Brand teal
Neutrals
Roles in light and dark
Teal 500 is 3.9:1 on white, so use it for marks, borders and large or bold text. For small teal text on white use Teal 700.
Bitter Pro for headlines, Open Runde for everything else
Headlines are bold with tight tracking. Section labels and buttons are all caps with wide letter spacing.
Nearly square, all caps
4px corners, never pills. The outlined button fills with teal on hover. In dark mode a filled teal button takes dark text.
White cards on a light gray ground
12px corners and a soft shadow. No colored accent borders or stripes. Photo on top or to the left.
714-530-7888
949-262-1300
Horizontal and stacked lockups
Horizontal for navigation, footers and signatures. Stacked for centered, hero and print layouts.
- Use the logo files as supplied. Do not redraw, recolor or stretch the mark.
- On dark grounds use the inverted version with white lettering.
- No emoji and no decorative illustrations. Photography and type carry the brand.
Generous space, soft edges
Sections on the website take 80 to 120px of vertical padding. Cards take 24 to 32px inside, with 24 to 32px between them.
Spacing scale
Corner radius
Shadows
Warm, reassuring and professional
"Our caring team works hard to make sure your visit is as easy and comfortable as possible."