---
title: Style Guide | Clinic to Cloud
description: Everything you need to know about the CTC brand and its usage can be found below, including downloadable logo and font files.
---

### 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](https://www.clinictocloud.com/contact) with the team if you have any questions.

Last updated 22nd October 2020.

![Vector (1)](https://www.clinictocloud.com/hubfs/Vector%20(1).svg)

#### Expedite design process

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

![Vector (2)](https://www.clinictocloud.com/hubfs/Vector%20(2).svg)

#### Cohesive design language

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

---

## Logo

![Primary (Full Colour)-1](https://www.clinictocloud.com/hubfs/Primary%20(Full%20Colour)-1.svg)

![Mark (Full Colour)](https://www.clinictocloud.com/hubfs/Mark%20(Full%20Colour).svg)

[Download Download Logos 

](https://www.clinictocloud.com/hubfs/Clinic%20to%20Cloud%20Logos.zip)

---

## 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 

](https://www.clinictocloud.com/hubfs/Sora.zip)

---

## Iconography

![Vector-Sep-24-2020-06-55-06-35-AM](https://www.clinictocloud.com/hubfs/Vector-Sep-24-2020-06-55-06-35-AM.svg)

![Vector-3-1](https://www.clinictocloud.com/hubfs/Vector-3-1.svg)

![Vector-1-1](https://www.clinictocloud.com/hubfs/Vector-1-1.svg)

![Vector-4-1](https://www.clinictocloud.com/hubfs/Vector-4-1.svg)

![Vector-2-1](https://www.clinictocloud.com/hubfs/Vector-2-1.svg)

![Vector-5-1](https://www.clinictocloud.com/hubfs/Vector-5-1.svg)

[Download Icon set 

](https://www.clinictocloud.com/hubfs/Clinic%20to%20Cloud%20Icons.zip)

---

## Button styles

 50px

#### Button

 Primary Button

 40px

#### Button

 Primary Button

 50px

#### Secondary

 Secondary Button

 40px

#### Secondary

 Secondary Button

 40px

#### Icon Button

 Icon button

 20px

#### Text Button

 Text Button

---

## Inputs

 Dropdown Placeholder Option 1 Option 2 Option 3

 Base

 Message

 Floating Label

[ Back to top](https://www.clinictocloud.com/style-guide#introduction)

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