Graphic Manual

This manual defines the basic rules for working with the texts and logo of STEAKGRILL Restaurant. Relevant source files for further work or printing are available for download with each example. All files are available in the Google Drive folder.

Colors

The primary colors are based on the logo and are extended by so-called complementary colors for icons and more. Apart from the listed colors, the primary colors also include black and white. No other colors can be used in accordance with the manual.

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

The basic style is plain paragraph text, from which other styles are derived. No other modifications to the listed styles are allowed, nor any other font or style. Icons are recommended to be used from Font Awesome in SVG format.

Plain Text

Font: Frank Ruhl Libre (serif)
Size font-size: default (100 %) for screens; at least 8 pt for print
Weight font-weight: 400 (normal); 500 (medium) for print typesetting; 300 (light) for the light face in print
Line height line-height: 140 %
Letter spacing letter-spacing: 0,01 %
Color color: black on white background

Headings

Size font-size: Highest level 400 %; Second level 220 %; Third level 150 %

Summary (paragraph after heading)

Size font-size: default (100 %)
Style font-style: italic

Quote

Size font-size: 120 %
Style font-style: italic

Definition term

Size font-size: 120 %
Weight font-weight: 700

Control element, button

Font: Roboto (sans-serif)
Size font-size: default (100 %)
Weight font-weight: 500
Transformation text-transform: uppercase

Technical text, code

Font: Roboto Mono (monospaced)

Logos

The logo can only be used in the specified colour combinations of the logo and background. When used, it is necessary to maintain the contrast of the logo against the background and thus its overall readability. The protective zone of the logo must be maintained without exception.

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 regular menu.
PDF SVG PNG

Watermark

An icon is defined as the top part of the logo set into the bottom right corner of the application so that the bottom right part of the circle is not visible. Unlike the logo, it is necessary to ensure low contrast for the icon so as not to visually interfere with the foreground text.

Bronze Watermark on Brown Background — Bronze Watermark on brown background

PDF SVG PNG

(Obsolete) ~~Purple Watermark on red background~~
SVG PNG

Logo Applications

For applications, slight adjustments to dimensions, including aspect ratios (business cards, folders), are possible. However, the above rules must be followed. In particular, the minimum font size requirement (above) must not be violated. The rounding of corners on print materials is optional, and for practical reasons, at least slight rounding is recommended.