<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=140756219714189&amp;ev=PageView&amp;noscript=1">

Introduction

Welcome to the Clinic to Cloud website style and brand guidelines.

Everything you need to know about the CTC brand and its usage can be found below, including downloadable logo and font files.

Go ahead and explore or get in touch with the team if you have any questions.

Last updated 22nd October 2020.

Vector (1)

Expedite design process

By abstracting our base styles layer, now developers can churn out UIs with minimal design input.
Vector (2)

Cohesive design language

Refine our visual language to be simpler, more fun and more communicative.

Brand Colours

Primary / 200
#007DA5
Secondary / 200
#00426B
400
#043B54
400
#011827
300
#00648B
300
#022E4A
100
#77B8CD
100
#5896B5
50
#CCE6EE
50
#94C7E0
25
#EDF6F9
25
#CCE7F4

System Colours

Accent (Green) / 50
#BAE1D3
Accent (Green) / 100
#4CA686
Accent (Green) / 200
#235B47
UI / 900
#0B0B0C
800
#343437
700
#505055
600
#9B9B9B
500
#C2C2C2
400
#D9D9D9
300
#E1E1E1
200
#EAEAEA
100
#F3F3F3
50
#F9F9F9
25
#FFFFFF

Typography

H1 - Heading The quick brown fox jumps over the lazy dog.
H2 - Heading The quick brown fox jumps over the lazy dog.
H3 - Heading The quick brown fox jumps over the lazy dog.
H4 - Heading The quick brown fox jumps over the lazy dog.
H5 - Heading The quick brown fox jumps over the lazy dog.
H6 - Heading The quick brown fox jumps over the lazy dog.
Body - XS The quick brown fox jumps over the lazy dog.
Body - S The quick brown fox jumps over the lazy dog.
Body - Base The quick brown fox jumps over the lazy dog.
Body - M The quick brown fox jumps over the lazy dog.
Body - L The quick brown fox jumps over the lazy dog.
Body - XL The quick brown fox jumps over the lazy dog.
Download Sora Font Family

Button styles

50px

Button

40px

Button

50px

Secondary

40px

Secondary

40px

Icon Button

20px

Text Button

Inputs

Back to top
© Clinic to Cloud Style Guide 2020. All Rights Reserved.