The Wellframe logo
Primary lockup
Our horizontal logo lock-up is the primary and preferred version to use across most instances, from digital to print.
Minimum safe area
A minimum safety area surrounding the logotype has been established to give it breathing room and to ensure its legibility. The minimum safety area around the lock-up is 1/4 of the width of the icon. No graphic elements or text may enter the safety area.
Secondary lockup
Our vertical logo lock-up can be used when there is limited horizontal space.
Minimum safe area
A minimum safety area surrounding the logotype has been established to give it breathing room and to ensure its legibility. The minimum safety area around the lock-up is 1/4 of the width of the icon. No graphic elements or text may enter the safety area.
Logomark
Our logo mark can be used as a graphic element but should not be used to represent the Wellframe brand in the absence of our full logo.
Minimum safe area
A minimum safety area surrounding the logotype has been established to give it breathing room and to ensure its legibility. The minimum safety area around the lock-up is 1/4 of the width of the icon. No graphic elements or text may enter the safety area.
Wellframe colors
Primary colors
Logo Blue
HEX #19566a
R25 G86 B106
C91 M57 Y43 K22
Medium Blue
HEX #0080a3
R0 G128 B163
C86 M39 Y24 K1
Dark Accent Blue
HEX #00aad5
R0 G170 B213
C74 M13 Y8 K0
Dark Accent Green
HEX #09bfb1
R9 G191 B177
C72 M0 Y39 K0
Secondary colors
Medium Green
HEX #059d96
R5 G157 B150
C81 M17 Y46 K1
Accent Green
HEX #0ad7c8
R10 G215 B200
C64 M0 Y32 K0
Purple
HEX #9a71c2
R154 G113 B194
C43 M63 Y0 K0
Magenta
HEX #cc61ad
R204 G97 B173
C19 M75 Y0 K0
Pink
HEX #f05588
R240 G85 B136
C0 M82 Y19 K0
Red
HEX #f05b60
R240 G91 B96
C0 M79 Y56 K0
Orange
HEX #fb9259
R251 G146 B89
C0 M52 Y70 K0
Yellow
HEX #f3b31f
R243 G179 B31
C4 M31 Y100 K0
Neutral colors
Slate
HEX #d9e3e7
R217 G227 B231
C15 M5 Y6 K0
Pale Slate
HEX #f2f5f7
R242 G245 B247
C4 M2 Y1 K0
Dark Blue
HEX #0f3541
R15 G253 B65
C92 M66 Y54 K50
Blue Tint
HEX #a6d3df
R166 G211 B223
C34 M4 Y10 K0
Grayscale
Grayscale 5
HEX #a9b5ba
R169 G181 B186
C35 M22 Y22 K0
Grayscale 7
HEX #76858e
R118 G133 B142
C57 M40 Y37 K5
Grayscale 9
HEX #4a5861
R74 G88 B97
C72 M56 Y48 K26
Grayscale 11
HEX #262e35
R38 G46 B53
C79 M67 Y57 K59
Fonts
Merriweather
Merriweather was designed to be a text face that is pleasant to read on screens. It features a very large x height, slightly condensed letterforms, a mild diagonal stress, sturdy serifs and open forms.
Merriweather can be downloaded on Google Fonts.
Roboto
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
Roboto can be downloaded on Google Fonts.
Type hierarchy
Digital
Header 1
Font: Merriweather Bold
Size: 46px
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Header 2
Font: Merriweather Bold
Size: 38px
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Header 3
Font: Merriweather Bold
Color: HEX #0080a3
Size: 28px
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Header 4
Font: Roboto Bold (All caps)
Size: 20px
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Large Paragraph
Font: Roboto Regular
Size: 20px
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Small Paragraph
Font: Roboto Regular
Size: 16px
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
For print
Large title
Font: Merriweather Bold
Color: C86 M39 Y24 K1
Size: 40pt
Leading: 48pt
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Title
Font: Merriweather Regular
Color: C86 M39 Y24 K1
Size: 32pt
Leading: 40pt
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Large Paragraph / Subheader
Font: Roboto Light
Color: C71 M62 Y58 K47
Size: 12pt
Leading: 18pt
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Section header 1 | Quote
Font: Merriweather Regular
Color: C74 M13 Y8 K0
Size: 16pt
Leading: 22pt
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Section header 1
Font: Merriweather Regular
Color: C74 M13 Y8 K0
Size: 12pt
Leading: 18pt
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Section header 2
Font: Roboto Bold (All caps)
Color: C74 M13 Y8 K0
Size: 10pt
Leading: 14pt
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Paragraph
Font: Roboto Light
Color: C71 M62 Y58 K47
Size: 10pt
Leading: 16pt
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Meta text
Font: Roboto Light
Color: C71 M62 Y58 K47
Size: 7pt
Leading: 12pt
Far out in the uncharted backwaters of the unfashionable end of western spiral arm of the Galaxy lies a small, unregarded yellow sun.
Photography
Stock photography
We aim to make healthcare more human. Our photography usage reflects that ambition, and always appears authentic and empathetic.
Do
Use photography that captures individuals in their everyday lives, where Wellframe is able to support them as they go about their tasks.
Don't
Use images that appear staged and unnatural, such as those on a white background or with the subject looking into the camera.
Product feature images
We show our product in context to underscore the human connections our platform enables.
Staff dashboard
Member mobile app
Image overlays
Overlays can be used on images used as backgrounds for text. Be sure to convert the image to black and white before applying the overlay.
Illustration
We use ownable illustrations to visually express complex concepts and showcase our personality.
Don't
Use 3-dimenstional and overly detailed illustrations.
Do
Use flat illustrations with sparks of relatable personality. Only use Wellframe brand colors and colors that complement them.
Visual elements
Text "frame"
Use the frame sparingly as a text callout that adds emphasis.
Dark Accent Green – HEX #09bfb1 | R9 G191 B177 | C72 M0 Y39 K0
Be sure to leave space between the frame and copy.
Iconography
Use iconography sparingly to aid scanability in lists. Do not use to convey complex concepts.
Medium Blue – HEX #0080a3 | R0 G128 B163 | C86 M39 Y24 K1
