Brand guidelines  v1.0  September 2026

Slimme inzichten,
duurzame besparingen

Our tagline, in Dutch. It is the one piece of brand copy that is never translated — in English it means smart insights, sustainable savings.

Start reading

01

Brand

Dots Energy is a Belgian energy supplier. We pass real market prices through to households, show people what their energy is actually doing, and steer the assets in their homes so they get more out of it.

What we do

Smart energy management and delivery for people who pay attention to their energy bill. Three things make that concrete: dynamic contracts that follow the market instead of hiding it, metering insights that are legible to a non-expert, and active steering of batteries, EV chargers and heat pumps across energy and reserve markets.

We are part of the BK Investment Group, alongside Smart-E-Grid, Pips Energy and Opteco — each a separate brand with its own guidelines. Our market is Belgium.

Slimme inzichten,
duurzame besparingen

Use the Dutch. Do not translate it, do not shorten it, and do not set it in a typeface other than Noka. Smart insights, sustainable savings exists only to explain the meaning to people who do not read Dutch.

03

Colour

Purple carries the brand, green means progress and sustainability, pink is for accent and emphasis. The system follows Material Design 3 colour roles, so every colour has a defined partner to sit on. Select any bar to copy its hex.

Light mode

Primary — Purple

Primary actions, key interface elements, brand presence.

Secondary — Green

Secondary actions, success states, sustainability messaging.

Tertiary — Pink

Accents, call-to-action highlights, promotional content.

Surfaces

Page background, cards, dividers, borders, secondary text.

Dark mode

Primary — Light purple

Secondary — Light green

Tertiary — Light pink

Surfaces

Gradients

Four defined gradients, all at 135 degrees. Use them for hero areas and brand moments, not as decoration on ordinary interface elements.

Primary — purple to pink

Premium features, hero sections, promotional content.

Secondary — green spectrum

Success states, sustainability messaging, positive feedback.

Tertiary — pink spectrum

Accent elements, special offers, soft highlights.

Full brand

Hero banners, brand showcases, major announcements.

Print — CMYK

Give these values to a printer. Do not let them convert the RGB hex themselves.
ColourCMYK
Purple706600
Green600850
Light green260400
Pink126800
Light pink02420
Dark background85704860

Contrast

The role pairs above are built to meet WCAG 2.1 AA: 4.5:1 for normal text, 3:1 for large text and interface components. Keep the pairs together — “on primary” belongs on “primary”. Green and pink are bright: never set small text in either on a white background.

04

Typography

Two typefaces, both licensed from Adobe Fonts. Noka for anything that carries weight, Dorival UI for everything people read. Never introduce a third.

Noka

Headings, titles, display text, names. CSS family "noka" — not "Noka Black".

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Aa300 Light — large display
Aa600 Semibold — default titles
Aa800 Extrabold
Aa900 Black — emphasis

Dorival UI

Body text, interface copy, buttons, descriptions. CSS family "dorival-ui-variable", a variable font covering weights 200–900.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Aa300 — lighter asides
Aa400 — body default
Aa600 — titles, labels
Aa700 — emphasis

Licensing

Both typefaces are licensed from Adobe Fonts: Noka and Dorival UI. Our licence does not extend to you, and we cannot pass the font files on, so they are not included in any download on this site. If you are producing work for us, use your own Adobe Fonts subscription or a licensed desktop copy from the foundry.

If you cannot license them for a particular job, set the work in the fallback below and tell us — a consistent fallback is better than a substitute face chosen ad hoc.

Fallback stack

Poppins, then -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif. Poppins is the closest free stand-in and is what our email templates use, since mail clients cannot load webfonts at all.

Type scale

The Material Design 3 scale, shown here at actual size. Scroll a row sideways on a narrow screen.

Display large57 px / 64 · −0.25 px · Noka
Slimme energie
Display medium45 px / 52 · 0 · Noka
Slimme energie
Display small36 px / 44 · 0 · Noka
Slimme energie
Headline large32 px / 40 · 0 · Noka
Volg je verbruik
Headline medium28 px / 36 · 0 · Noka
Volg je verbruik
Headline small24 px / 32 · 0 · Noka
Volg je verbruik
Title large22 px / 28 · 0 · Dorival UI 600
Je contract in het kort
Title medium16 px / 24 · 0.15 px · Dorival UI 600
Je contract in het kort
Title small14 px / 20 · 0.1 px · Dorival UI 600
Je contract in het kort
Body large16 px / 24 · 0.5 px · Dorival UI 400
Dynamische tarieven bewegen mee met de markt.
Body medium14 px / 20 · 0.25 px · Dorival UI 400
Dynamische tarieven bewegen mee met de markt.
Body small12 px / 16 · 0.4 px · Dorival UI 400
Dynamische tarieven bewegen mee met de markt.
Label large14 px / 20 · 0.1 px · Dorival UI 600
Bekijk je inzichten
Label medium12 px / 16 · 0.5 px · Dorival UI 600
Bekijk je inzichten
Label small11 px / 16 · 0.5 px · Dorival UI 600
Bekijk je inzichten

Do

  • Use Noka for headlines and display text
  • Use Dorival UI for body copy and interface elements
  • Build hierarchy with size and weight, not with colour
  • Keep line height at 1.4 or more
  • Use sentence case for interface text

Don't

  • Add a third typeface
  • Use decorative or display faces from elsewhere
  • Set body text below 14 px
  • Tighten line height below 1.4
  • Use more weights than the page needs

05

Brand elements

A set of graphic elements built from chart geometry: rounded-cap bars, donuts, arcs, trend lines that end in a dot. They come from what we do — energy data, made friendly. Use them as supporting composition, never over the logo or behind text.

Using them

These are compositions on a 16:9 frame, so they crop well as a background band or a corner accent. Several of them run off the edge of that frame on purpose — the previews above show each file exactly as it is drawn, bleed included. Keep them in brand colours, keep the rounded caps, and keep text off them. The editable Illustrator source is in the downloads if you need to recompose.

06

Downloads

Every published asset, with a permanent address. These URLs do not change, so you can reference them directly from a document, a template or a signature.

Referencing an asset directly

If you need a logo at a fixed URL — in an email signature, a partner's site, a document template — use the address rather than a copy of the file. That way a corrected asset reaches every use at once.

https://brand.dotsenergy.be/assets/logos/dots-logo-light.svg

For email signatures use the PNG built for it: /assets/logos/dots-logo-light-email.png — 340×141, shown at 170×70. Mail clients that render through Word cannot display SVG.

Fonts are not here

Noka and Dorival UI are licensed from Adobe Fonts. We cannot redistribute the font files, so they are not in any download on this site. You need your own Adobe Fonts licence, or a licensed desktop copy from the foundry.