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.


Branding

Logo

The Physera identity blends strength and fluidity. Composed of triangles, the strongest and most structurally sound shape, the Physera Tetrahedron is symbolic of strength and balance.


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: #010A46
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.

Metric Light
Metric Regular
Metric Medium
Metric Semibold

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






New section to come soon