Digital Basics

Logo

Three different logo sizes are available for use with desktop, app, and mobile applications. Further information on the REHAU logo and logo downloads can found in the relevant guideline: Logo

Logo L


Logo M


Logo S


Size L
Header Desktop Web
152 x 48 px


Size M
Apps
126 x 40 px


Size S
Header Mobile Web
101 x 32 px


Colors

The following colors are used in digital applications:


Colors

RGB decimals

RGB hexadecimals

white

White

255 | 255 | 255

FFFFFF

Active Red

REHAU Active Red

221 | 0 | 96

DD0060

Green

REHAU Smart Green

55 | 165 | 140

37A58C

Black

REHAU Black

0 | 0 | 0

000000

Gray

REHAU Gray

177 | 178 | 179

B1B2B3

Tint 1

Tint 1

127 | 127 | 127

7F7F7F

Tint 2

Tint 2

191 | 191 | 191

BFBFBF

Tint 3

Tint 3

229 | 229 | 229

E5E5E5

Tint 4

Tint 4

242 | 242 | 242

F2F2F2

Typography

We use the Black, Bold, Regular, and Light styles of the Brix Sans font in digital applications. Further information can be found in the relevant guideline: Typography

Definitions


Font face

Font size

Line height

Font color

H1

Brix Sans Black

36 px

40 px

#000000

H2

Brix Sans Black

28 px

32 px

#000000

H3

Brix Sans Bold

24 px

28 px

#000000

H4

Brix Sans Bold

18 px

24 px

#000000

Abstract

Brix Sans Bold

18 px

24 px

#000000

Copy

Brix Sans Regular

18 px

24 px

#000000

Copy small

Brix Sans Regular

16 px

22 px

#000000

Highlighter text

Brix Sans Light

24 px

32 px

#000000

Additional copy

Brix Sans Regular

18 px

24 px

#7F7F7F

Additional copy small

Brix Sans Regular

14 px

18 px

#7F7F7F

Label (Apps only)

Brix Sans Bold uppercase

12 px


#BFBFBF


Grid

The layout of desktop applications is based on a twelve-column grid. The space between columns is 24 px, the width of the columns corresponds to the viewport widths of 1,080 px, 1,200 px, and 1,440 px.

Grid Desktop 1200

Desktop content area 1,200px

Window width: 1,440px

Grid: 12 columns

Gutter: 24px

Grid Desktop 1440



Desktop content area 1,080 px

Window width: 1,440px

Grid: 12 columns

Gutter: 24px



Grid Picture Desktop

Desktop content area 1,440 px

Window width: 1,920px

Grid: 12 columns

Gutter: 24px

Grid Mobile Applications

Mobile applications

The layout of mobile applications is based on a two-column grid. The space between columns is 24 px, the distance to the edge is 12 px each.

Grid: 2 columns Gutter: 24 px Margin: 12 px

Engineering progress

Enhancing lives