Color System
Color at Padel-Point is functional, not emotional. As much as needed, as little as possible.
01
CI Core Colors
Dark Gray – Text, structural elements, base contrast
Padel Blue – Accents, CTAs, active states
Black – Maximum contrast, headlines, dark surfaces
Color values only from the system
The values on this page and the brand tokens derived from them are binding. Never pick colors with an eyedropper from screenshots, photos, PDFs or existing assets: anti-aliasing, compression and screen rendering distort the value, a blue measured that way easily ends up next to #0071EA. If a value is missing, ask Brand Management instead of estimating.
Do not compare digital and print against each other
The hex value applies on screen, in print the CMYK values from the Print tab apply (Padel Blue C100 M50 Y0 K0). Screen and print versions of the same file carrying different values is normal, not an error. Compare only digital with digital and CMYK with CMYK.
02
Three Color States
Neutral State (Default)
Black (#333), white, gray tones. Neutrality is the starting point – color is the exception.
Brand State (Accent)
PP Blue (#0071EA). Only for CTAs, active states, links. Brand color is a signal, not a look – punctual, never as surface.
Image-Driven State
Color derived from imagery (court blue, environment). For hero areas, campaigns. The image carries the color.
03
Color Ratio 60 : 10 : 30
Base, calm, orientation – the default state
Brand color as signal – CTAs, links, highlights
Image-driven color – emotion comes from the sport, not from the CI
The ratio is a guideline, not a formula. It emerges naturally when the three states are applied correctly.
04
Blue appears in / not in
| Appears in | Not in | |
|---|---|---|
| Website | CTAs, links, active states, accent bar | Header, hero areas, nav bar, footer |
| Social | Accent line, CTA button | Full-surface blue slides |
| Retail / Space | Category showcard as the only blue surface, accent line and indicator triangle, price lines, screen UI | Blue walls, shelves, floors and any other blue signs (exception: padel court itself) |
| Merch | Wordmark label, accent stitching | Entire shirt in blue |
| Packaging | Seal, accent stripe, tab | Entire packaging in blue |
Rule of thumb: squint your eyes. Does the blue dominate? Too much. Blue is punctuation, not a paragraph.
05
Accent Line
The blue accent line is the key recurring accent element. It derives geometrically from the P. monogram and scales proportionally to the reference element.
Optional, not mandatory. Max. 1 per composition.
Recommended when headline or monogram needs a visual anchor. Omit when the composition works better without accent.
Abridged rendering. Full version with scopes, definitions and rationale: phase-1/1-4_farblogik.md in the MD sources (single source of truth).
- Thickness: 10% of cap height
- Length under text: 25–35% of headline width
- Length under monogram: 100% of rendered character width (ends at the period)
- Length under the wordmark: 100% of the width of the "PADEL POINT" word block, not of the full lockup. For the horizontal lockup that is 64.5% of the lockup width, measured on the ink bbox (not the SVG viewBox). The line underlines the word, not the sign. Stacked lockup: value not yet measured
- Alignment: the line inherits the alignment of its reference element. Centred text gets a centred line, left-aligned text a left-aligned one
- Spacing: 0.5× cap height, equals 5× line thickness
- Cut: ends sheared at 9° (P. monogram italic angle, parallelogram, line itself horizontal)
- Color: always #0071EA
- Placement: only on calm, near-black ground (solid or a darkened gradient zone), never floating on imagery. If the motif supplies the blue accent itself (e.g. a blue court), omit the line
- Long viewing distance: on carriers read from about 15 m (tent valance, large beach flags) the line is omitted. There the wordmark leads on its own and the surface stays black and white. Mid-distance surfaces on the same object keep their line
- No absolute values (px, mm), always proportional
Under headline
PLAY
Thickness: 4.8px (10% Cap Height)
Length: 0px (30%)
Spacing: 9.6px (2×)
Under monogram
P.
Thickness: 4.8px (10%)
Length: 0px (100%)
Spacing: 9.6px (2×)
06
Indicator Triangle
The asymmetric triangle is the second recurring accent element next to the accent line. It marks, the accent line underlines.
Marker for lists and notes. Multiple per surface only as a list marker.
Do not replace with generic triangles or arrows and do not confuse with the accent line.
Abridged rendering. Full version: phase-1/1-4_farblogik.md in the MD sources (single source of truth). File under Downloads → Design Elements.
- File: asymmetrisches-dreieck.svg, do not alter shape or color
- Shape: right triangle, rotated 45° clockwise
- Orientation: the tip always points to the text it marks. Two positions, no others: before the line (default) rotated 90° clockwise relative to the file, tip pointing right, including the large display. Above the line (e.g. in centred layouts or narrow portrait formats) rotated 180°, tip pointing down, centred above the text (align the tip, not the triangle edge, because the shape is asymmetric). A tip pointing left or up does not exist
- Color: always #0071EA
- Size: visible height (after rotation) = cap height of the line it marks, in both positions, keep the file's proportions
- Count: once per list item, otherwise not repeated. The limit "max. 1 per surface" applies to the accent line only
- No decoration, no pattern, not on the same element as the accent line
Example
07
No-Gos
- Color as image substitute – color cannot compensate or replace imagery
- Multi-color as style – the system is based on reduction, not variety
- Emotional color dramaturgy – emotion comes from imagery, not from CI color
- Campaign colors as system – no temporary color worlds as CI extensions
- Black text on blue – always use white on blue surfaces, never black or dark gray. Readability first.
- Blue text on dark – Padel Blue on dark surfaces only at 18 pt / 24 px or above. No blue body text below this threshold on dark backgrounds.
08
Text on Blue
On blue surfaces, only white text is used. Black or dark text on Brand Blue is forbidden. The contrast is insufficient and readability breaks down.
Do
- White on Brand Blue: maximum contrast, clear readability
Don't
- Black on Brand Blue: insufficient contrast, not readable
09
Brand Blue Scale
10
Gray Scale
11
Charts
Colour follows the message, not the number of categories. The steps are checked in this order, the first match applies.
Does the data show a status?
Black for done, Padel blue for active, grey for open. No traffic-light colours, open is not bad.
Does it carry a judgement?
Deadline, budget, plan: add a functional colour, only where it applies.
Does the slide name one category explicitly?
In headline or key figure: that one in Padel blue, all others in black and grey.
Otherwise equal, at most 4 categories?
Blue ramp. More categories: sorted bars in one colour, labelled directly.
Steps from low to high, at most 4?
Blue ramp. More steps: grey scale.
Chart slide?
Accent line under the headline, as on every presentation slide.
Blue ramp
On light backgrounds
On dark backgrounds
Exception to blue as punctuation, only within the chart area and at most 4 steps. Text in ramp fills only from 500, then white.
Functional colours for judgements
Positive
+12 %Negative
-8 %Warning
!Neutral
±0 %A judgement, not the brand. Also for shop states: in stock positive, notice warning, error negative. Padel blue never means positive.
Always
- On dark backgrounds white takes the role of black.
- Values placed consistently at the end of the bar, bars on a baseline in black, on dark backgrounds in white.
- Plus and minus as chips in functional colours, never in Padel blue.