Graphic Manual

Materials Folder

Colors

Apart from the listed colors, use only black and white.

Red

Red — HEX

`#BF0000`

RGB

`191,0,0`

PANTONE

`7620 C`

CMYK

`0,96,96,20`

Pink

Bronze

Brown

Yellow (obsolete)

Purple (obsolete)

Text Styles and Fonts

Use only the listed typefaces, sizes and weights on the web and in print alike, never smaller text and never italics.

Typefaces

Text and headings font-family: Frank Ruhl Libre (serif)
Buttons, controls and small text font-family: Roboto (sans-serif)
Weight font-weight: 300 (light) for text and headings; 500 (medium) for emphasis
Letter spacing in print: 1 %

Body Text

Size font-size: 100 % (default), 10 pt in print
Line height line-height: 140 %, the maximum for any text
Color color: black to dark gray #333 on white background

Headings

Page title: up to 400 %, smaller on narrow screens
Section: 150 %, red, uppercase, thin red underline
Subsection: 130 %, emphasized, red, regular case, no underline
Item name: as a subsection, in black

Button

Size font-size: 85 %, emphasized, uppercase

Small Text

Size font-size: 90 %, the minimum for any text except buttons
Use: badges, counters and samples (samp)

Logos

Use the logo only in the listed color combinations and always with its clear space.

Centered Logo

Red logo on white or very light background (min. 95 % brightness HSB)
PDF SVG PNG

Black and white logo on light background (min. 80 % brightness on HSB)
PDF SVG PNG

White logo on brown background
PDF SVG PNG

Logo protective zone

(Obsolete) ~~Original red and yellow logo on white or very light background (min. 95 % brightness HSB)~~
SVG PNG

(Obsolete) ~~Yellow and white logo on red background~~
SVG PNG

Red banner logo on white or very light background (min. 95 % brightness HSB)
PDF SVG PNG

Black banner logo on light background (min. 80 % brightness on HSB)
PDF SVG PNG

White banner logo on brown background
PDF SVG PNG

Banner logo protective zone

Simplified Logo

Single-color simplified logo for use as the app icon, favicon, and signature dish mark in the main menu.
PDF SVG PNG

Watermark

The top part of the logo in the bottom right corner, cropped so that the bottom right part of the circle is not visible. Keep the contrast low so it does not interfere with the text.