OneDS
Foundation

The core of the design system

The core of the design system

Explore the fundamental decisions that shape every Roche experience—tokens, color, typography, spacing, motion, and more.

Explore the fundamental decisions that shape every Roche experience—tokens, color, typography, spacing, motion, and more.

Colors foundation illustration
ColorsColour is integral to the Roche brand language. The vibrant, warm blue of the Roche logo combined with a selection of warm natural tones, inspired by nature, create a consistent meaningful brand with an emotional appearance.
Design
Development
Typography foundation illustration
TypographyTypography is used to present content as clearly and efficiently as possible.
Design
Development
Spacing foundation illustration
SpacingIn a design system, spacing refers to the consistent amount of empty space between elements.
Design
Development
Roche brand illustration
RocheThe Roche logo is a unique and iconic symbol of the company. The modernised Roche logo provides optimal impact and legibility across all media – we are focusing here in digital.
Design
Development
navify brand illustration
navify®The evolution of the navify® logo has resulted in a modernised, up-to-date mark. The new mark connects with the Roche brand through the use of the same angle. The angle or the Roche hexagon and the navify® arrow is the same.
Design
Development
cobas brand illustration
cobas®The cobas® logo represents Roche's expertise in professional IVD solutions. To visualize this important relationship, a combination of the Roche and cobas® logos are always used as specified in the guidelines.
Design
Development
VENTANA brand illustration
VENTANAThe VENTANA® logo represents Roche's expertise in pathology solutions. To visualize this important relationship, a combination of the Roche and VENTANA logos should always be used as specified in the guidelines.
Design
Development
ACCU-CHEK brand illustration
ACCU-CHEKThe Accu-Chek logo is a unique and iconic symbol in diabetes care. The modernized logo provides optimal impact and legibility across all media while respecting the legacy and heritage of the original Accu-Chek logo.
Design
Development
mySugr brand illustration
my-sugrThe mySugr monster holds a prime position in the logo. It is a fun and likeable metaphor for diabetes. As a symbol, it represents all the diabetes monsters our users have to tame on a daily basis. With its reference to Hypo (-) and Hyper (+) the monster embodies main aspects of diabetes and comes alive at the same time.
Design
Development
Axelios brand illustration
AxeliosThe AXELIOS logo represents Roche’s expertise in research and clinical next-generation sequencing (NGS) lab solutions.
Design
Development Not available yet Not available yet Not available yet