Search
Close this search box.
Contact Us

Basic Online Style Guide

Table of Contents

BASE COLORS

Blue

Royal Blue

  • CMYK: C80 M75 Y0 K0
  • RGB: 69 65 182
  • Hex: #4541B6

Periwinkle Blue

  • CMYK: C65 M60 Y0 K0
  • RGB: 107 103 217
  • Hex: #6B67D9

Light Steel Blue

  • CMYK: C30 M20 Y0 K0
  • RGB: 172 187 239
  • Hex: #ACBBEF

Sapphire Blue

  • CMYK: C75 M70 Y0 K0
  • RGB: 95 69 232
  • Hex: #5F45E8

Twilight Blue

  • CMYK: C65 M60 Y0 K20
  • RGB: 72 64 118
  • Hex: #484076

Translucent Royal Blue

  • CMYK: C0 M40 Y80 K0
  • RGB: 248 179 80
  • Hex: #F8B350

Mint and Green

Turquoise Green

  • CMYK: C50 M0 Y35 K0
  • RGB: 122 224 188
  • Hex: #7AE0BC

Mint Cream

  • CMYK: C40 M0 Y20 K0
  • RGB: 149 225 198
  • Hex: #95E1C6

Magic Mint

  • CMYK: C35 M0 Y25 K0
  • RGB: 167 242 215
  • Hex: #A7F2D7

Gray

Space Grey

  • CMYK: C70 M65 Y60 K30
  • RGB: 36 32 52
  • Hex: #242034

Shadow Gray

  • CMYK: C60 M55 Y0 K20
  • RGB: 106 103 122
  • Hex: #6A677A

Pastel

Lavender Mist

  • CMYK: C5 M5 Y0 K0
  • RGB: 235 235 250
  • Hex: #EBEBFA

Pale Lavender

  • CMYK: C10 M10 Y0 K0
  • RGB: 217 217 248
  • Hex: #D9D9F8

Gainsboro

  • CMYK: C5 M5 Y5 K0
  • RGB: 244 244 249
  • Hex: #F4F4F9

Bright and Vivid

Vivid Orange

  • CMYK: C0 M45 Y95 K0
  • RGB: 255 153 0
  • Hex: #FF9900

Coral Blush

  • CMYK: C0 M70 Y70 K0
  • RGB: 248 127 118
  • Hex: #F87F76

Warm Gold

  • CMYK: C0 M40 Y80 K0
  • RGB: 248 179 80
  • Hex: #F8B350

Basic

White

  • CMYK: C0 M0 Y0 K0
  • RGB: 255 255 255
  • Hex: #FFFFFF

Black

  • CMYK: C0 M0 Y0 K100
  • RGB: 0 0 0
  • Hex: #000000

GRADIENTS

Global

Header

Royal to Periwinkle Fade
#Royal Blue to #Periwinkle Blue

  • Start 20%
  • End 100%
  • Linear – 25°

Footer

Periwinkle to Royal Spiral
#Periwinkle Blue to #Royal Blue

  • Start 20%
  • End 100%
  • Linear – 214°

Section

Content

Misty Lavender to White Sweep
#Lavender Mist to #White

  • Start 20%
  • End 100%
  • Linear – 177°

Section-Divider

Royal to Periwinkle Fade
#Royal Blue to #Periwinkle Blue

  • Start 20%
  • End 100%
  • Linear – 25°

Accent

Mint Accent

Turquoise to Mint Flow
#Turquoise Green to #Magic Mint

  • Start 0 %
  • End 100%
  • Linear – 153°

FONTS

Headlines

4 | Big-Headline | 4 REM | 800 Weight | 1,3 EM Line-Height

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

3 | Big-Headline | 3 REM | 700 Weight | 1,2 EM Line-Height

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

2,5 | Standard-Headline | 2,5 REM | 600 Weight

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

2 | Standard-Headline | 2 REM | 500 Weight

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

1,75 | Small-Headline | 1,75 REM | Weight 400

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

1,5 | Small-Headline | 1,5 REM  | Weight 400

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

1,25 | Sub-Heading | 1,25 REM | Weight 300

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

BODY

1,25 | Body-Header | 1,25 REM | Weight 400

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

1,125 | Body-L | 1,125 REM | Weight 400

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

1 | Body | 1 REM | Weight 400

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

0,875 | Body-S | 0,875 REM | Weight 400

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

Features

1,25 | Accordion Header | 1,25 REM | 600 Weight

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

1,125 | CTA | 1,125 REM | 600 Weight

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

1,125 | Icon-List | 1,125 REM | 400 Weight

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

Footer

1,25 | Headline-Footer | 1,25 REM | Weight 400

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

1 | Body-Footer | 1 REM | Weight 400

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

0,875 | Sub-Footer | 0,875 REM | Weight 400

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

Navigation

1,25 | Main-Menu | 1,25 REM | Weight 500 | Line-Height 1,3 REM

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

1,15 | Flyout | 1,15 REM | Weight 300

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

2,5 | Full-Search | 2,5 REM | Weight 600

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

PAGE STRUCTURE

Header-Section

Header with Image

Header-Spacer | 70 px

H1 | Typo: Standard-HL | Mint Cream | 1 Row | Caps

H2 | Typo: Big-HL | Gainsboro | 2-3 Row

P | Typo: Sub-Headline | Light Steel Blue | 3-5 Row

–

P | Gainsboro | Typo: Small-HL | 1-2 Row | Centered

CALL TO ACTION

Header-Spacer | 70 px

Header without Image

Adapt Spacer to needs the header should always fill ~85% of the first viewport.

Header-Spacer | 70 px

H1 | Typo: Standard-HL | Mint Cream | 1 Row | Caps

H2 | Typo: Big-HL | Gainsboro | 2-4 Row

CALL TO ACTION

P | Typo: Sub-Headline | Light Steel Blue | 3-5 Row

Header-Spacer | 70 px

Header CTA Centered

Adapt Spacer to needs the header should always fill ~85% of the first viewport.

Header-Spacer | 70 px

H1 | Typo: Standard-HL | Mint Cream | 1 Row | Caps | Centered

H2 | Typo: Big-HL | Gainsboro | 2-3 Row | Centered

P | Typo: Sub-Headline | Light Steel Blue | 3-5 Row

CALL TO ACTION

Header-Spacer | 70 px

Content-Section

Content-Header | Headline with Sub-Headline

Spacer 50 px

H2 | Typo: Standard-HL | Space-Grey Automate Your Installation Journey | Max. 2 Row

P | Typo: Sub-HL | Twilight Blue

Content | Text | 1 Collum

Spacer 50px

H2 | Standard-HL | 2,5 REM | Space Grey

P | Body | 1 REM | Shadow Grey |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra pharetra massa massa ultricies mi quis. Amet nulla facilisi morbi tempus iaculis. Massa ultricies mi quis hendrerit dolor magna. Et pharetra pharetra massa massa ultricies. Ultricies mi quis hendrerit dolor magna eget est lorem ipsum. Quis commodo odio aenean sed adipiscing diam donec adipiscing tristique. Placerat vestibulum lectus mauris ultrices. Id cursus metus aliquam eleifend mi in nulla posuere. Vestibulum morbi blandit cursus risus at. Rutrum quisque non tellus orci.

 

Vitae et leo duis ut diam quam nulla porttitor. Id neque aliquam vestibulum morbi blandit cursus risus at. Porttitor rhoncus dolor purus non enim praesent. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Facilisis volutpat est velit egestas dui id. Rutrum quisque non tellus orci ac auctor augue. Ut aliquam purus sit amet luctus venenatis. Ut aliquam purus sit amet luctus venenatis. Scelerisque fermentum dui faucibus in ornare quam. Id semper risus in hendrerit gravida rutrum quisque non tellus.

Content | 2 Collum+Gap | Icon/Text - Form

Spacer 50px

H3 | Typo: Standard-HL | Royal Blue

H4 | Typo: Small-HL | 1,5 REM | Space-Grey

P | Typo: Body-L | 1,125 REM | Shadow Grey.

Multi-Brand Usability

Smartmaster Pro isn't picky about brands or devices. Whether you're integrating equipment from multiple manufacturers or connecting to different energy sources, the platform's open approach ensures seamless usability and future-proof flexibility.

P | Typo: Standard-HL | 2 REM | Royal Blue

Insert Form (actual Pipedrive Form)

Content | Text | 3 Collums

H3 | Standard-HL | 2 REM | Mint Cream | Caps

H2 | Standard-HL | 2,5 REM | Gainsboro

H4 | Small-HL | 1,5 REM | Gainsboro

P | Body-L | 1,125 REM | Gainsboro

2. Quick Discovery

Visit our portal and find your Smartmaster device easily. Just scan the QR Code or enter the UUID, and you're connected.

3. Verify and Go

Confirm your Smartmaster is online and check its technical status. A quick glance ensures everything's up to spec, and you're good to go.

Features

Call-to-Action

Size: Medium | Icon: Before and Regular | Centered

Font: Typo: 1,125 CTA | Gainsboro or Vivid Orange (Hover)

Button: Vivid Orange or Gainsboro (Hover) | Radius 10 | Color #79799D80 Shadow -8-11-24

Violet Background: #00000080 Shadow -8-11-24, Hover: #79799D80 -8-11-24

Click here

Icon with Text Blue

Icon: Framed | Square | H3 | Hover Grow | 2,5 REM | Radius 20

Font: Royal Blue | BG Tranclucent Royal Blue

H3 | Typo: Small-HL | 1,5 REM | Space-Grey

P | Typo: Body-L | 1,125 REM | Shadow Grey.

Icon with Text Pink

Icon: Framed | Square | H3 | Hover Grow | 2,5 REM | Radius 20

Font: Coral Blush | BG Tranclucent Royal Blue

H3 | Typo: Small-HL | 1,5 REM | Space-Grey

P | Typo: Body-L | 1,125 REM | Shadow Grey.

Icon with Text Green

Icon: Framed | Square | H3 | Hover Grow | 2,5 REM | Radius 20

Font: Mint Cream | BG Tranclucent Royal Blue

H3 | Typo: Small-HL | 1,5 REM | Space-Grey

P | Typo: Body-L | 1,125 REM | Shadow Grey.

FAQ - Accordion

Headline: ACC-HL | 1,25 REM | Space Grey | Royal Blue 
Text: Body-L | 1,125 REM | Shadow Grey

Icon: Allignment: Start | Border: 0

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Icon List

Text: Icon-List | 1,125 REM | Space Grey | Royal Blue 
List: Space 0,8 REM | Alignment: Left 

Icon: Size 1,5 REM | Gap 0,7 REM | Alignment: Center

  • Topology-Aligned
  • Brand-Neutral
  • Cross-Platforms
  • Multi-Services
  • Open Connectivity

Feature Section | CTA Divider

P | Typo: Standard-HL | 2 REM | Mint Green | Caps | Centered

P | Typo: Big-HL | 3 REM | Gainsboro | Centered

CALL TO ACTION

NEXXT NEWS

Stay updated with our Nexxt News newsletter! Receive updates on our blog articles, event participation, company news, and other exciting announcements. Be the first to know about our latest insights and developments.