Styleguide 1.0
Welcome to the Physera Styleguide. This guide contains all the rules for our brand and any elements you may need — logos, typefaces, colors, and more — to create a consistent and unified brand across all applications.
Colors
Primary Palette
Rely on the core palette for the majority of your needs. It is intentionally small so as to reinforce the cohesiveness of the brand and communicate a cool, soothing tone.
$physera-blue
Hex: #5A81FA
Pantone: 2726U, 2573C
$dark-slate-blue
Hex: #2B328B
Pantone: 2768U, 2768C
Complementary Palette
$mint-green
Hex: #2CD5C4
Pantone: coming soon
$magenta
Hex: #F354B4
Pantone: coming soon
$orange
Hex: #FF8E4C
Pantone: coming soon
Subdued Palette
$pale-blue
Hex: #EDF1FD
Pantone: coming soon
$cool-gray
Hex: #8A8BA1
Pantone: coming soon
$midnight-blue
Hex: #2C295B
Pantone: coming soon
Typography
By consistently tying typographic styles to appropriate functions in the interface, we create a clear visual pattern for users to follow while they’re interacting with us.
Metric
Metric is a geometric humanist. Geometric humanists are classic, versitale typefaces derived from the calligrapher's pen giving them a "human appearance". Their open forms give them a graceful, readable rhythm that leads the eye horizontally across the page making them the best sans serifs for long texts.
Styles
// Root Size (rem = 18px) Hey! This will change — disregard for now
:root {
font-size: 16px;
}
// Mobile
h1 {
font-size: 27px;
font-size: 27px;
}
// Desktop
h1 {
font-size: 27px;
font-size: 27px;
}
Heading 1
Font: Metric Light
Size: Desktop: 4.5rem / Mobile: 2.5rem (1rem = 16px)
Line-height: Desktop: 4.5rem / Mobile: 2.5rem (1rem = 16px)
Color: Dark Slate Blue
Heading 2
Font: Metric Light
Size: Desktop: 4.5rem / Mobile: 2.5rem (1rem = 16px)
Line-height: Desktop: 4.5rem / Mobile: 2.5rem (1rem = 16px)
Color: Dark Slate Blue
Heading 3
Font: Metric Light
Size: Desktop: 4.5rem / Mobile: 2.5rem (1rem = 16px)
Line-height: Desktop: 4.5rem / Mobile: 2.5rem (1rem = 16px)
Color: Dark Slate Blue
Heading 4
Font: Metric Light
Size: Desktop: 4.5rem / Mobile: 2.5rem (1rem = 16px)
Line-height: Desktop: 4.5rem / Mobile: 2.5rem (1rem = 16px)
Color: Dark Slate Blue
Paragraph: We are curious problem solvers. Utilizing technology, insights on behavior and deep healthcare expertise, we are tackling inefficiencies in healthcare in order to create meaningful advancements that improve lives.
Font: Metric Light
Size: Desktop: 4.5rem / Mobile: 2.5rem (1rem = 16px)
Line-height: Desktop: 4.5rem / Mobile: 2.5rem (1rem = 16px)
Color: Dark Slate Blue
Buttons
Rounded pill-shaped buttons