OPL company

brand kit

logo

meaning

Brackets

As we have evolved from a pure tournament organiser to a platform provider, programming is now our main task. In programming, functions are indicated with brackets, which ultimately symbolises what we do and our core idea of automation.

Arguments

An argument of a function is a value provided to obtain the function's result. A star in programming often means 'everything', which is abstractly represented as a circle in our logo. By 'everything' we not only mean our own ideas which lead to innovative software that we programme as OPL, but also the feedback from players and organisers that strongly influence our products and features.

Function name

OPL is still our shorthand for 'Opportunity League' and a vital part of our logo. The wordmark now comes before the icon because it is the way a function is declared in most programming language.

variations

Logos may be used by anyone as long as the conditions of use are met.

Negative logo

This variation should be used on dark and colored backgrounds while ensuring contrast.

Positive logo

This variation should be used on light backgrounds while ensuring contrast.

Colored logo

The use of this variation is to be used exclusively by OPL personnel or in consultation with OPL.

The use of OPL icons is to be left exclusively to OPL personnel or in consultation with OPL.

Negative icon

This variation should be used on dark and colored backgrounds while ensuring contrast.

Positive icon

This variation should be used on light backgrounds while ensuring contrast.

Colored icon

The use of this variation is to be used exclusively by OPL personnel or in consultation with OPL.

clearspace

Clearspace for both the logo and the icon is equal to the diameter of the center dot.

minimum size

minimum icon width

= 25px (screen)
= 12mm (print)

minimum icon width

= 25px (screen)
= 12mm (print)

colors

primary colors

opl red

rgb: 166, 36, 36
hex: #a62424
hsl: 0, 64%, 40%

opl grey

rgb: 5, 10, 15
hex: #050a0f
hsl: 210, 50%, 4%

white

rgb: 255, 255, 255
hex: #ffffff
hsl: 0, 0%, 100%

black

rgb: 0, 0, 0
hex: #000000
hsl: 0, 0%, 0%

functional colors

grey

10%

rgb:

hex: #f3f3f3

hsl:

20%

rgb:

hex: #e6e6e6

hsl:

30%

rgb:

hex: #d9d9d9

hsl:

40%

rgb:

hex: #cccccc

hsl:

50%

rgb:

hex: #c0c0c0

hsl:

60%

rgb:

hex: #b3b3b3

hsl:

70%

rgb:

hex: #a6a6a6

hsl:

80%

rgb:

hex: #999999

hsl:

90%

rgb:

hex: #8d8d8d

hsl:

100%

rgb:

hex: #808080

hsl:

110%

rgb:

hex: #737373

hsl:

120%

rgb:

hex: #666666

hsl:

130%

rgb:

hex: #5a5a5a

hsl:

140%

rgb:

hex: #4d4d4d

hsl:

150%

rgb:

hex: #404040

hsl:

160%

rgb:

hex: #333333

hsl:

170%

rgb:

hex: #262626

hsl:

180%

rgb:

hex: #1a1a1a

hsl:

190%

rgb:

hex: #0d0d0d

hsl:

red

20%

rgb:

hex: #ffd9d9

hsl:

40%

rgb:

hex: #ffb2b2

hsl:

60%

rgb:

hex: #ff8c8c

hsl:

80%

rgb:

hex: #ff6565

hsl:

100%

rgb:

hex: #ff3f3f

hsl:

120%

rgb:

hex: #cc3232

hsl:

140%

rgb:

hex: #992626

hsl:

160%

rgb:

hex: #661919

hsl:

180%

rgb:

hex: #330d0d

hsl:

orange

20%

rgb:

hex: #ffeeda

hsl:

40%

rgb:

hex: #ffddb6

hsl:

60%

rgb:

hex: #ffcc91

hsl:

80%

rgb:

hex: #ffbb6d

hsl:

100%

rgb:

hex: #ffaa48

hsl:

120%

rgb:

hex: #cc883a

hsl:

140%

rgb:

hex: #99662b

hsl:

160%

rgb:

hex: #66441d

hsl:

180%

rgb:

hex: #33220e

hsl:

yellow

20%

rgb:

hex: #fef7cd

hsl:

40%

rgb:

hex: #fdee9b

hsl:

60%

rgb:

hex: #fde66a

hsl:

80%

rgb:

hex: #fcdd38

hsl:

100%

rgb:

hex: #fbd506

hsl:

120%

rgb:

hex: #c9aa05

hsl:

140%

rgb:

hex: #978004

hsl:

160%

rgb:

hex: #645502

hsl:

180%

rgb:

hex: #322b01

hsl:

green

20%

rgb:

hex: #dff4df

hsl:

40%

rgb:

hex: #bfe9bf

hsl:

60%

rgb:

hex: #a0dea0

hsl:

80%

rgb:

hex: #80d380

hsl:

100%

rgb:

hex: #60c860

hsl:

120%

rgb:

hex: #4da04d

hsl:

140%

rgb:

hex: #3a783a

hsl:

160%

rgb:

hex: #265026

hsl:

180%

rgb:

hex: #132813

hsl:

blue

20%

rgb:

hex: #dff0f9

hsl:

40%

rgb:

hex: #bfe2f3

hsl:

60%

rgb:

hex: #9ed3ec

hsl:

80%

rgb:

hex: #7ec5e6

hsl:

100%

rgb:

hex: #5eb6e0

hsl:

120%

rgb:

hex: #4b92b3

hsl:

140%

rgb:

hex: #386d86

hsl:

160%

rgb:

hex: #26495a

hsl:

180%

rgb:

hex: #13242d

hsl:

purple

20%

rgb:

hex: #eee5f6

hsl:

40%

rgb:

hex: #ddcbec

hsl:

60%

rgb:

hex: #cdb2e3

hsl:

80%

rgb:

hex: #bc98d9

hsl:

100%

rgb:

hex: #ab7ed0

hsl:

120%

rgb:

hex: #8965a6

hsl:

140%

rgb:

hex: #674c7d

hsl:

160%

rgb:

hex: #443253

hsl:

180%

rgb:

hex: #22192a

hsl: