Onos - Design Guidelines

Branding and colors

Primary Colors:

#4644FF
Onos Ultramarine
#16205B
Deep Insight

Secondary Colors:

#30D1FF
Vital Signal
#B9E7CE
Mint Circuit
#FE4F49
Alert Red

Neutrals Colors:

#2C2727
Carbon Code
#9B9B9B
Dark Grey
#D2D2D2
Light Grey
#F6F4E7
Cloud White
#FFFFFF
White

Text color

Primary Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Secondary Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibu.

Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibu.

Accent Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibu.

Typescale

Display Bold

Display Regular

Desktop – 60px/66px

Tablet – 54px/60px

Mobile – 48px/54px

H1 Heading 1

Desktop – 46px/54px

Tablet – 44px/48px

Mobile – 40px/44px

H2 Heading 2

Desktop – 36px/40px

Tablet – 32px/36px

Mobile – 28px/32px

H3 Heading 3

Desktop/Tablet/Mobile – 24px/32px

Subtitle

Desktop – 24px/32px

Tablet – 20px/28px

Mobile – 16px/24px

Body

Body 1

Desktop/Tablet/Mobile – 18px/28px

Body 2

Desktop/Tablet – 16px/24px

Mobile – 14px/24px

Body 3

Desktop/Tablet/Mobile – 14px/24px

Support Text

Static Text

Desktop/Tablet/Mobile – 24px/32px

Button Text

Desktop/Tablet/Mobile – 16px/24px

Navigation Text

Desktop/Tablet/Mobile – 16px/24px

Field Text

Desktop/Tablet/Mobile – 14px/24px

Copyright/ Field/ Field Label/ Feedback Text

Desktop/Tablet/Mobile – 12px/16px

Normal Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet consectetur adipisicing elit. A laborum ratione asperiores, cupiditate iste fuga ex modi placeat maiores sequi unde culpa dolore necessitatibus quod eum optio aperiam iusto obcaecati.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet consectetur adipisicing elit. A laborum ratione asperiores, cupiditate iste fuga ex modi placeat maiores sequi unde culpa dolore necessitatibus quod eum optio aperiam iusto obcaecati.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

List

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.

 

Icon lists

Forms

Reusable components

Buttons

Primary
Button Text
Secondary
Button Text
Tertiary
Button Text
Tertiary Small
Start now
Header
Button Text
Launch modal

Typewriter Animation

Supercharge your behavioral health

Marquee

lottie

Distinguish necessary from wasteful care
Get members to the right clinical pathway
Proactively detect cost leakage
Take action at scale
Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Distinguish necessary from wasteful care

Outside Elementor - Development Guidelines

Branding and colors

#6EC1E4
Primary
#54595F
Secondary
#7A7A7A
Text
#61CE70
Accent

Text color

Primary Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Secondary Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibu.

Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibu.

Accent Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibu.

Typography

H1 Heading 1

Desktop(lg/xl) – 40px/48px

Mobile(lg/xl) – 40px/48px

 

H2 Heading 2

Desktop(lg/xl) – 32px/38px

Mobile(lg/xl) – 32px/38px

 

H3 Heading 3

Desktop(lg/xl) – 28px/34px

Mobile(lg/xl) – 28px/34px

 

H4 Heading 4

Desktop(lg/xl) – 24px/29px

Mobile(lg/xl) – 24px/29px

Body

Body

Desktop(lg/xl) – 40px/48px

Mobile(lg/xl) – 40px/48px

Normal Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet consectetur adipisicing elit. A laborum ratione asperiores, cupiditate iste fuga ex modi placeat maiores sequi unde culpa dolore necessitatibus quod eum optio aperiam iusto obcaecati.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet consectetur adipisicing elit. A laborum ratione asperiores, cupiditate iste fuga ex modi placeat maiores sequi unde culpa dolore necessitatibus quod eum optio aperiam iusto obcaecati.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

List

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam animi iste laboriosam repudiandae.

 

Icon lists

Reusable components

Primary(Info) Button
Primary
Secondary Button
Secondary
Tertiary Button
Tertiary
Outline Button
Click here
Accent Button
Accent
Warning Button
Warning
Danger Button
Danger

Forms

Launch modal

lottie

Backed and designed by industry professionals, Onos empowers Health Plans with the tools they need to solve their two biggest priorities simultaneously (member outcomes and cost containment) – without ever compromising security.

Onos © 2024    |    All Rights Reserved