What font does OK use?

OK’s website uses two typefaces: Onest (headings and body text), served from st-ok.cdn-vk.ru; Montserrat Bold, served from st-ok.cdn-vk.ru.

What are OK’s brand colours?

The main colours on ok.ru are Light Orange (#FF7700), Tomato (#FF5555), Deep Sea Green (#27AA66), Dodger Blue (#0099FF), Deep Chocolate (#D76200) and Light Chocolate (#EB722E).

What colour is OK’s text and background?

Body text is #000000 on a #F0F0F0 background.

Where is OK’s logo from?

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

Is this OK’s official style guide?

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

Unofficial A style guide made by SiteStyleGuide from ok.ru’s public web pages. Not affiliated with or endorsed by OK. The real site is ok.ru ↗

Unofficial style guide

OKstyle guide

OK’s website (ok.ru) uses Onest for its headings and body text. Its palette is led by Light Orange (#FF7700), Tomato (#FF5555) and Deep Sea Green (#27AA66), with #000000 text on #F0F0F0. Captured from the live site on 23 October 2026.

Website: ok.ru
Typefaces: Onest, Montserrat Bold
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 23 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the ok.ru homepage on a desktop screen — Screenshot of ok.ru on a 1440 px desktop screen, 23 Oct 2026.

Screenshot of the ok.ru homepage on a phone — On a phone, 390 px.

Identity & metadata

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

Title &
description

Page title: OK social network. Communication with friends on OK. Your meeting place with classmates; ▲ 87 / 60 characters
Meta description: OK is a social network where you can find your old friends. Communication, online games, send gifts and cards to friends. Come to OK, and share your emotions with friends, colleagues and classmates.; ▲ 198 / 160 characters
Site name: OK | OK.ru
og:title: OK social network. Communication with friends on OK. Your meeting place with classmates
og:description: OK is a social network where you can find your old friends. Communication, online games, send gifts and cards to friends. Come to OK, and share your emotions with friends, colleagues and classmates.
Language: en

In search results

OK | OK.ruhttps://ok.ru/

OK social network. Communication with friends on OK. Your mee…

OK is a social network where you can find your old friends. Communication, online games, send gifts and cards to friends. Come to OK, and share your emotions wit…

When shared

ok.ru

OK social network. Communication with friends on OK. Your meeting place with classmates

OK is a social network where you can find your old friends. Communication, online games, send gifts and cards…

Logo & favicons

Found as: SVG in the header. SVG, 18 × 18.

Logo

On white

On black

On Light Orange

Favicons

8 found

192 px · PNG apple-touch-icon
159 px · SVG icon
128 px · PNG manifest
96 px · PNG manifest
42 px · PNG icon
32 px · ICO shortcut icon
32 px · PNG icon
16 px · PNG icon

OK social network. Communication with friends on OK. Your meeting place with classmates

Light browser tab

OK social network. Communication with friends on OK. Your meeting place with classmates

Dark browser tab

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 (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 38%
Dark Grey 24.8%
Black 13.1%
Light Orange 7.3%
Off White 7.1%
Tomato 1.5%
Deep Sea Green 1.3%
Dodger Blue 1.3%
Deep Chocolate 1.1%
Light Chocolate 1%
Deep Orange 0.8%
Red 0.6%
Orange 0.6%
Light Sea Green 0.5%
Dark Magenta 0.5%
Sea Green 0.5%

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
21.00:1 AAA

On white
—

Background, text, border · .button-pro.__gray, .button-pro.__wide.__sec.__ext_registration_faces_button.__selected
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 69

On text
2.60:1 Fail

On white
8.06:1 AAA

Text, background, border · h3, .external-oauth-login_title-tx
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · body, .button-pro.__black
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 6

On text
18.43:1 AAA

On white
1.14:1 Fail

Background, text, border · html, .vpclu.__fake .vpclu-title

Colours

Brand colours and accents, most used first

Light Orange

HEX

RGB

HSL

OKLCH

CMYK
0 53 100 0

On text
7.89:1 AAA

On white
2.66:1 Fail

Text, background, border · .button-pro.__outline.__active, .button-pro
Tomato

HEX

RGB

HSL

OKLCH

CMYK
0 67 67 0

On text
6.68:1 AA

On white
3.14:1 AA large

Text, background, border · --tag-custom-background-color, .ext-registration_img_icon.__lock
Deep Sea Green

HEX

RGB

HSL

OKLCH

CMYK
77 0 40 33

On text
7.03:1 AAA

On white
2.99:1 Fail

Background, text, border · .button-pro.__wide.__sec.__ext_registration_faces_button.__selected, .header-action-menu .button-pro.__sec .svg-ic.__success
Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
100 40 0 0

On text
7.00:1 AAA

On white
3.00:1 AA large

Border, background, text · .iblock-cloud, .toolbar_search_bubble
Deep Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 54 100 16

On text
5.64:1 AA

On white
3.73:1 AA large

Text, graphic · .button-pro.__light, .button-pro.__light .tico_img
Light Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 51 80 8

On text
6.98:1 AA

On white
3.01:1 AA large

Text, background, border · .vkuiAvatar__gradientOrange, .notifyPanel_Error .panelLayer_h_title
Deep Orange

HEX

RGB

HSL

OKLCH

CMYK
0 47 100 8

On text
7.47:1 AAA

On white
2.81:1 Fail

Background, text, border · .button-pro:hover, .html5-link_w:hover .button-pro
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 0

On text
5.25:1 AA

On white
4.00:1 AA large

Text, border, background · .timestamp.__highlight, .input-e .il
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 30 93 0

On text
11.71:1 AAA

On white
1.79:1 Fail

Text · .discussion-best-answer_heading svg, .comments_current__best-answer
Light Sea Green

HEX

RGB

HSL

OKLCH

CMYK
84 0 55 27

On text
8.29:1 AAA

On white
2.53:1 Fail

Background, text · .ucard-v.__music .novelty-label, .navMenuCount.__bubble
Dark Magenta

HEX

RGB

HSL

OKLCH

CMYK
14 85 0 38

On text
2.65:1 Fail

On white
7.93:1 AAA

Background · .button-pro.__violet, .toolbar_search_button-core.toolbar_search___eye-catching
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
74 0 36 29

On text
8.07:1 AAA

On white
2.60:1 Fail

Used · --tag-custom-background-color, --counter-custom-background-color

Gradients

linear-gradient(,)
linear-gradient(to right,,),linear-gradient(to right,,)
linear-gradient(to right,rgba(0,0,0,0.08),rgba(0,0,0,0.08)),linear-gradient(to right,rgb(255,255,255),rgb(255,255,255))

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.

Onest

Aa 400 Aa 700

Onest

Served from st-ok.cdn-vk.ru · weights 400, 500, 600, 700 · buttons, headings, body · shown in a stand-in if you don’t have it

Aa 300 Aa 800

Montserrat Bold

Served from st-ok.cdn-vk.ru · weights 300, 800 · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 1 2.2em · 35 px weight 300

Heading 2 1.2em · 19 px weight 300

OK social network. Communication with friends o…

Heading 3 1.2em · 19 px weight 300

OK social network. Communication with friends o…

Heading 4 1.2em · 19 px weight 300

OK social network. Communication with friends o…

Body 12px Onest

OK is a social network where you can find your old friends. Communication, online games, send gifts and cards to friends. Come to OK, and s…

Small 10px / 13px

OK is a social network where you can find your old friends. Communication, online games, send gifts and cards to friends. Come to OK, and s…

Button 12px Onest

Get started

Link 12px / 30px weight 500

Sizes in use

Most common across the site

20pxline 26px · 33 rules
17pxline 24px · 35 rules
16pxline 21px · 88 rules
15pxline 20px · 47 rules
14pxline 1.5 · 272 rules
13pxline 16px · 41 rules
12pxline 16px · 241 rules
11pxline 16px · 33 rules

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

.button-pro.__wide.__sec.__ext_registration_faces_button.__selected · #27AA66

Corner radius

4px · 240×
50% · 239×
8px · 189×
16px · 123×
inherit · 80×

Shadows

0 0 0 1px
0px 12px 24px 0px rgba(0,0,0,0.16)
0 0 0 1px rgba(0,0,0,0.12)

Layout

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

Grid

Breakpoints

767

768

1023

1024

1274

1280

1365

1366

On a scale of 0 to 1440 px.

Content widths (max-width)

640 px

548 px

480 px

440 px

420 px

350 px

Notes

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

Notes

▲ CheckThe title is 87 characters. Google usually cuts titles near 60, so the end may not show in results.
▲ CheckThe description is 198 characters. Search results usually show about 160.

Questions

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

Questions

What font does OK use?: OK’s website uses two typefaces: Onest (headings and body text), served from st-ok.cdn-vk.ru; Montserrat Bold, served from st-ok.cdn-vk.ru.
What are OK’s brand colours?: The main colours on ok.ru are Light Orange (#FF7700), Tomato (#FF5555), Deep Sea Green (#27AA66), Dodger Blue (#0099FF), Deep Chocolate (#D76200) and Light Chocolate (#EB722E).
What colour is OK’s text and background?: Body text is #000000 on a #F0F0F0 background.
Where is OK’s logo from?: The logo shown in this guide was found on ok.ru’s homepage. For official logo files and usage rules, check OK’s own brand or press page.
Is this OK’s official style guide?: No. SiteStyleGuide made it from ok.ru’s public web pages on 23 October 2026, and isn’t affiliated with OK. Members can refresh a guide after 90 days to pick up changes.

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

ok-ru-tokens.css

Download

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

/* ok.ru design tokens, from SiteStyleGuide (https://sitestyleguide.com/ok.ru) */
:root {
  /* Colours */
  --text: #000000;
  --background: #F0F0F0;
  --colour-white: #FFFFFF;
  --colour-dark-grey: #505050;
  --colour-black: #000000;
  --colour-off-white: #F0F0F0;
  --colour-light-orange: #FF7700;
  --colour-tomato: #FF5555;
  --colour-deep-sea-green: #27AA66;
  --colour-dodger-blue: #0099FF;
  --colour-deep-chocolate: #D76200;
  --colour-light-chocolate: #EB722E;
  --colour-deep-orange: #EB7D01;
  --colour-red: #FF0000;
  --colour-orange: #FFB311;
  --colour-light-sea-green: #1EBB55;
  --colour-dark-magenta: #87189D;
  --colour-sea-green: #2FB675;
  --gradient-1: linear-gradient(,);
  --gradient-2: linear-gradient(to right,,),linear-gradient(to right,,);
  --gradient-3: linear-gradient(to right,rgba(0,0,0,0.08),rgba(0,0,0,0.08)),linear-gradient(to right,rgb(255,255,255),rgb(255,255,255));

  /* Typefaces */
  --font-buttons: 'Onest', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
  --font-headings: 'Onest', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
  --font-body: 'Onest', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
  --font-other: 'Montserrat Bold';

  /* Type scale */
  --text-h1: 2.2em;
  --text-h2: 1.2em;
  --text-h3: 1.2em;
  --text-h4: 1.2em;
  --text-body: 12px;
  --text-small: 10px;
  --leading-small: 13px;
  --text-button: 12px;
  --text-a: 12px;
  --leading-a: 30px;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 767px;
  --breakpoint-2: 768px;
  --breakpoint-3: 1023px;
  --breakpoint-4: 1024px;
  --breakpoint-5: 1274px;
  --breakpoint-6: 1280px;
  --breakpoint-7: 1365px;
  --breakpoint-8: 1366px;
  --max-width-1: 640px;
  --max-width-2: 548px;
  --max-width-3: 480px;
  --max-width-4: 440px;
  --max-width-5: 420px;
  --max-width-6: 350px;
}

{
    "site": "ok.ru",
    "source": "https://sitestyleguide.com/ok.ru",
    "text": "#000000",
    "background": "#F0F0F0",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#505050",
            "rgb": [
                80,
                80,
                80
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Off White",
            "hex": "#F0F0F0",
            "rgb": [
                240,
                240,
                240
            ]
        },
        {
            "name": "Light Orange",
            "hex": "#FF7700",
            "rgb": [
                255,
                119,
                0
            ]
        },
        {
            "name": "Tomato",
            "hex": "#FF5555",
            "rgb": [
                255,
                85,
                85
            ]
        },
        {
            "name": "Deep Sea Green",
            "hex": "#27AA66",
            "rgb": [
                39,
                170,
                102
            ]
        },
        {
            "name": "Dodger Blue",
            "hex": "#0099FF",
            "rgb": [
                0,
                153,
                255
            ]
        },
        {
            "name": "Deep Chocolate",
            "hex": "#D76200",
            "rgb": [
                215,
                98,
                0
            ]
        },
        {
            "name": "Light Chocolate",
            "hex": "#EB722E",
            "rgb": [
                235,
                114,
                46
            ]
        },
        {
            "name": "Deep Orange",
            "hex": "#EB7D01",
            "rgb": [
                235,
                125,
                1
            ]
        },
        {
            "name": "Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        },
        {
            "name": "Orange",
            "hex": "#FFB311",
            "rgb": [
                255,
                179,
                17
            ]
        },
        {
            "name": "Light Sea Green",
            "hex": "#1EBB55",
            "rgb": [
                30,
                187,
                85
            ]
        },
        {
            "name": "Dark Magenta",
            "hex": "#87189D",
            "rgb": [
                135,
                24,
                157
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#2FB675",
            "rgb": [
                47,
                182,
                117
            ]
        }
    ],
    "fonts": [
        {
            "name": "Onest",
            "stack": "Onest, Arial, Helvetica Neue, Helvetica, sans-serif",
            "weights": [
                400,
                500,
                600,
                700
            ],
            "source": "Served from st-ok.cdn-vk.ru"
        },
        {
            "name": "Montserrat Bold",
            "stack": "\"Montserrat Bold\"",
            "weights": [
                300,
                800
            ],
            "source": "Served from st-ok.cdn-vk.ru"
        }
    ]
}

Other websites using Onest as their main typeface

Lever

lever.co · set in Onest
Save
analog digitalagentur

analog.de · set in Onest
Save

Websites whose lead colour is closest to OK’s

ADSCHEMIST

adschemist.com · 6 days ago
Save
overcast.fm

overcast.fm · 2 days ago
Save
Resurf

resurf.so · 2 days ago
Save
ICICI Bank

icicibank.com · 4 days ago
Save

Captured from ok.ru on 23 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by OK; this guide describes the public website for reference.

OKstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Dark Grey

Black

Off White

Colours

Light Orange

Tomato

Deep Sea Green

Dodger Blue

Deep Chocolate

Light Chocolate

Deep Orange

Red

Orange

Light Sea Green

Dark Magenta

Sea Green

Gradients

Onest

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run ok.ru?

Also set in Onest

Lever

analog digitalagentur

Similar colours

ADSCHEMIST

overcast.fm

Resurf

ICICI Bank

Title &
description