What font does Practo use?

Practo’s website uses one typeface: Lato (headings and body text), served from www.practostatic.com.

What are Practo’s brand colours?

The main colours on practo.com are Deep Sky Blue (#199FD9), Dark Slate Blue (#28328C), Light Sky Blue (#14BEF0), Blue Violet (#9F3BFF), Dark Orange (#FF7800) and Dark Slate Grey (#34422D).

What colour is Practo’s text and background?

Body text is #414146 on a #FFFFFF background.

Where is Practo’s logo from?

The logo shown in this guide was found on practo.com’s homepage. For official logo files and usage rules, check Practo’s own brand or press page.

Is this Practo’s official style guide?

No. SiteStyleGuide made it from practo.com’s public web pages on 21 October 2026, and isn’t affiliated with Practo. Members can refresh a guide after 90 days to pick up changes.

Practo Style Guide: Colours, Fonts & Logo

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Practo | Video Consultation with Doctors, Book Doctor Appointments, Order Medicine, Diagnostic Tests; ▲ 100 / 60 characters
Meta description: Say Hello to India’s top doctors via video consultation, get digital prescriptions, order medicines, book doctor appointments & lab tests, find doctors near you, get health packages, ask a free health question to doctors; ▲ 220 / 160 characters
Site name: Practo
Language: en-us
Theme colour: #28328c

In search results

Practohttps://www.practo.com/

Practo | Video Consultation with Doctors, Book Doctor Appoint…

Say Hello to India’s top doctors via video consultation, get digital prescriptions, order medicines, book doctor appointments & lab tests, find doctors near you,…

When shared

No og:image, so no picture

practo.com

Practo | Video Consultation with Doctors, Book Doctor Appointments, Order Medicine, Diagn…

Say Hello to India’s top doctors via video consultation, get digital prescriptions, order medicines, book doc…

Back to top ↑

Logo & favicons

Found as: schema.org logo. SVG, 516 × 118.

Logo

On white

On black

On Deep Sky Blue

Favicons

1 found

32 px · ICO icon

Practo | Video Consultation with Doctors, Book Doctor Appointments, Order Medicine, Diagnostic Tests

Light browser tab

Practo | Video Consultation with Doctors, Book Doctor Appointments, Order Medicine, Diagnostic Tests

Dark browser tab

Back to top ↑

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#414146) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 30.1%
Cool Charcoal 19.6%
Cool Grey 13.7%
Deep Sky Blue 11.4%
Cool Off White 11.2%
Dark Slate Blue 6.7%
Light Sky Blue 4.3%
Blue Violet 1.1%
Dark Orange 1.1%
Dark Slate Grey 0.9%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
10.15:1 AAA

On white
—

Background, text, border · body, .practo_GlobalNavigation .navbar
Cool Charcoal

HEX

RGB

HSL

OKLCH

CMYK
7 7 0 73

On text
—

On white
10.15:1 AAA

Text, border · body, .practo_GlobalNavigation .btn-border
Cool Grey

HEX

RGB

HSL

OKLCH

CMYK
12 12 0 49

On text
2.18:1 Fail

On white
4.66:1 AA

Text, background, border · .practo_GlobalNavigation .navbar .overlay_layer, .practo_GlobalNavigation .navbar .nav-mid .product-tab__subtitle
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
2 2 0 4

On text
8.93:1 AAA

On white
1.14:1 Fail

Background, border · .c-placeholder-animated-background, .practo_GlobalNavigation .navbar .navlist .navlink.section

Colours

Brand colours and accents, most used first

Deep Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
88 27 0 15

On text
3.38:1 AA large

On white
3.00:1 AA large

Text, border, background · .practo_GlobalNavigation .navbar.mobile .nav-login-mobile.btn-border, .practo_GlobalNavigation .navbar .webpush-banner-agree
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
71 64 0 45

On text
1.07:1 Fail

On white
10.91:1 AAA

Text, background, theme · .practo_GlobalNavigation .navbar .nav-mid .product-tab.selected .product-tab__ti, .c-heading
Light Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
92 21 0 6

On text
4.66:1 AA

On white
2.18:1 Fail

Text, background, border · .btn_small, .btn-primary
Blue Violet

HEX

RGB

HSL

OKLCH

CMYK
38 77 0 0

On text
2.20:1 Fail

On white
4.62:1 AA

Text · .practo_GlobalNavigation .navbar .ic.icon-ic_done_badge
Dark Orange

HEX

RGB

HSL

OKLCH

CMYK
0 53 100 0

On text
3.84:1 AA large

On white
2.65:1 Fail

Background, text · .practo_GlobalNavigation .new, .practo_GlobalNavigation .navbar .u-d-item.product-switch:hover a div:first-chil
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
21 0 32 74

On text
1.05:1 Fail

On white
10.70:1 AAA

Text, border · .carousel-navigation, .carousel-navigation-button

Gradients

linear-gradient(90deg,#f0f0f5 8%,#e9e9f5 18%,#f0f0f5 33%)

Back to top ↑

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Lato

Aa 400 Aa 700

Lato

Served from www.practostatic.com · weights 400, 700 · body · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 2em · 32 px

Practo

Heading 6 16px

Practo | Video Consultation with Doctors, Book …

Body 14px weight 400 · Lato

Say Hello to India’s top doctors via video consultation, get digital prescriptions, order medicines, book doctor appointments & lab tests, …

Paragraph 16px

Say Hello to India’s top doctors via video consultation, get digital prescriptions, order medicines, book doctor appointments & lab tests, …

Button 0 · 0 px / 0 none

Get started

Link 12px / 12px weight 700

Sizes in use

Most common across the site

36pxline 40px · 2 rules
32px3 rules
24pxline 30px · 5 rules
20pxline 1 · 3 rules
18pxline 30px · 2 rules
16pxline 20px · 6 rules
14pxline 20px · 16 rules
12pxline 15px · 9 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

.btn-primary · #14BEF0

Corner radius

50% · 9×
2px · 6×
4px · 5×
8px · 3×
3px · 2×
20px · 1×

Shadows

0 0 4px 0 rgba(0,0,0,0.1)
0 0 0 0 rgba(170,224,0,0.6)
0 4px 8px 0 rgba(0,0,0,0.11)
0 1px 3px 0 rgba(0,0,0,0.04)

Back to top ↑

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

320

364

378

800

801

1110

1111

1240

On a scale of 0 to 1440 px.

Content widths (max-width)

1440 px

Back to top ↑

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

▲ CheckThe title is 100 characters. Google usually cuts titles near 60, so the end may not show in results.
▲ CheckThe description is 220 characters. Search results usually show about 160.
▲ CheckThere is no og:image, so links shared on social media show no picture.

Back to top ↑

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Practo use?: Practo’s website uses one typeface: Lato (headings and body text), served from www.practostatic.com.
What are Practo’s brand colours?: The main colours on practo.com are Deep Sky Blue (#199FD9), Dark Slate Blue (#28328C), Light Sky Blue (#14BEF0), Blue Violet (#9F3BFF), Dark Orange (#FF7800) and Dark Slate Grey (#34422D).
What colour is Practo’s text and background?: Body text is #414146 on a #FFFFFF background.
Where is Practo’s logo from?: The logo shown in this guide was found on practo.com’s homepage. For official logo files and usage rules, check Practo’s own brand or press page.
Is this Practo’s official style guide?: No. SiteStyleGuide made it from practo.com’s public web pages on 21 October 2026, and isn’t affiliated with Practo. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

practo-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* practo.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/practo.com) */
:root {
  /* Colours */
  --text: #414146;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-cool-charcoal: #414146;
  --colour-cool-grey: #737382;
  --colour-cool-off-white: #F0F0F5;
  --colour-deep-sky-blue: #199FD9;
  --colour-dark-slate-blue: #28328C;
  --colour-light-sky-blue: #14BEF0;
  --colour-blue-violet: #9F3BFF;
  --colour-dark-orange: #FF7800;
  --colour-dark-slate-grey: #34422D;
  --gradient-1: linear-gradient(90deg,#f0f0f5 8%,#e9e9f5 18%,#f0f0f5 33%);

  /* Typefaces */
  --font-body: 'Lato', sans-serif;

  /* Type scale */
  --text-h1: 2em;
  --text-h6: 16px;
  --text-body: 14px;
  --text-p: 16px;
  --text-button: 0;
  --leading-button: 0;
  --text-a: 12px;
  --leading-a: 12px;

  /* Shape */
  --radius-1: 50%;
  --radius-2: 2px;
  --radius-3: 4px;
  --radius-4: 8px;
  --radius-5: 3px;
  --radius-6: 20px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 320px;
  --breakpoint-2: 364px;
  --breakpoint-3: 378px;
  --breakpoint-4: 800px;
  --breakpoint-5: 801px;
  --breakpoint-6: 1110px;
  --breakpoint-7: 1111px;
  --breakpoint-8: 1240px;
  --max-width-1: 1440px;
}

{
    "site": "practo.com",
    "source": "https://sitestyleguide.com/practo.com",
    "text": "#414146",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Cool Charcoal",
            "hex": "#414146",
            "rgb": [
                65,
                65,
                70
            ]
        },
        {
            "name": "Cool Grey",
            "hex": "#737382",
            "rgb": [
                115,
                115,
                130
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#F0F0F5",
            "rgb": [
                240,
                240,
                245
            ]
        },
        {
            "name": "Deep Sky Blue",
            "hex": "#199FD9",
            "rgb": [
                25,
                159,
                217
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#28328C",
            "rgb": [
                40,
                50,
                140
            ]
        },
        {
            "name": "Light Sky Blue",
            "hex": "#14BEF0",
            "rgb": [
                20,
                190,
                240
            ]
        },
        {
            "name": "Blue Violet",
            "hex": "#9F3BFF",
            "rgb": [
                159,
                59,
                255
            ]
        },
        {
            "name": "Dark Orange",
            "hex": "#FF7800",
            "rgb": [
                255,
                120,
                0
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#34422D",
            "rgb": [
                52,
                66,
                45
            ]
        }
    ],
    "fonts": [
        {
            "name": "Lato",
            "stack": "Lato, sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Served from www.practostatic.com"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run practo.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/practo.com" title="Practo style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Practostyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Cool Charcoal

Cool Grey

Cool Off White

Colours

Deep Sky Blue

Dark Slate Blue

Light Sky Blue

Blue Violet

Dark Orange

Dark Slate Grey

Gradients

Lato

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

sears.com

tai-xiu-online.com

Sublime Text

Common Sense Media

Calculatio

Automattic

آپارات

Instructure

Practostyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Cool Charcoal

Cool Grey

Cool Off White

Colours

Deep Sky Blue

Dark Slate Blue

Light Sky Blue

Blue Violet

Dark Orange

Dark Slate Grey

Gradients

Lato

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run practo.com?

Also set in Lato

sears.com

tai-xiu-online.com

Sublime Text

Common Sense Media

Similar colours

Calculatio

Automattic

آپارات

Instructure

Title &
description