Housecall style guide
Colors, type, buttons, tags and form fields. Every value here is a variable or a style in the Webflow project.
Colors
Surface/Paper
#FFFFFF
Surface/Page
#FFFFFF
Surface/Tint
#F3F6F9
Surface/Band
#A3BFDB
Surface/Band Soft
#EEF3F8
Surface/Ink Soft
#E3EDF5
Surface/Footer
#353F49
Surface/Notice
#FFF5B2
Brand/Ink
#1A6083
Brand/Ink Deep
#15394C
Brand/Signal
#CA9352
Brand/Signal Soft
#F4E8D6
Text/Heading
#1A6083
Text/Primary
#2F2F2F
Text/Body
#575757
Text/Muted
#80888C
Text/On Dark
#FFFFFF
Text/On Dark Muted
#C2C8CE
Text/Signal
#775732
Border/Default
#E1E4E8
Border/On Dark
#4B545D
Border/Ink
#1A6083
Typography
Instrument Sans for headings and buttons, Mulish for body text.
Display
Housecall
H1
H2
Heading two, 48 px
H3
Heading three, 32 px
H4
Heading four, 24 px
H5
Heading five, 20 px
H6
Heading six, 18 px
Body L
Body large, 18 px. Same-day sick visits every weekday morning.
Body
Body, 16 px. Bring your ID, insurance card and a list of medicines.
Small
Small, 14 px. Not an emergency service.
Label
Label, 14 px
Link
Text links look like this: Book a visit
List
- Photo ID
- Insurance card
- A list of your medicines
Numbered
- Pick a clinic and a time
- We text you to confirm
- Arrive ten minutes early
Quote
The portal actually works. I can see my results, message my doctor and get refills without calling.
Figure
