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 Not available yet Not available yet Not available yet
Typography foundation illustration
TypographyTypography is used to present content as clearly and efficiently as possible.
Design
Development Not available yet Not available yet
Elevation foundation illustration
ElevationIt provides visual differentiation between elements by simulating physical depth through shadows.
Design
Development Not available yet Not available yet Not available yet
Background foundation illustration
BackgroundThis documentation outlines how to correctly apply background colors to UI components across different layers and contexts in an application.
Design
Development Not available yet Not available yet Not available yet
Layout foundation illustration
LayoutThe usage of layout within a design system is to provide a consistent and cohesive structure for how visual elements are arranged on a page or screen.
Design
Development Not available yet Not available yet Not available yet
Spacing foundation illustration
SpacingIn a design system, spacing refers to the consistent amount of empty space between elements.
Design
Development Not available yet Not available yet Not available yet
Micro-interaction foundation illustration
Micro-interactionMicro-interactions are crucial because it's fluidity helps bringing the interface to life, providing feedback, instruction and enriching the visual experience of the digital products.
Design
Development Not available yet Not available yet Not available yet
Transition foundation illustration
TransitionTransitions are short animations that connect individual elements or full-screen views of an app. They are fundamental to a great user experience because they help users understand how an app works. Well-designed transitions makes an experience feel high quality and expressive. They should be the top priority for a strong motion implementation.
Design
Development Not available yet Not available yet Not available yet
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 Not available yet Not available yet Not available yet
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 Not available yet Not available yet Not available yet
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 Not available yet Not available yet Not available yet
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 Not available yet Not available yet Not available yet
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 Not available yet Not available yet Not available yet
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 Not available yet Not available yet Not available yet