Style Guide

Effektio Brand

Overview

Colors

  • Primary Brand Color: #EC2758
  • Secondary Brand Color: #23AFC2
  • Tertiary Brand Color: #5C2A80
  • Background Color: #979797
  • Dark Shade: #333540
  • Secondary Dark Shade: #2F313E
  • Divider: #4A4A4A
  • Text Color: #FFFFFF
  • Text Shade: #FEFEFE
  • Text Shade 2: #F8F8F8
  • Text Shade 3: #C2C1C0

Typeface

  • App-Wide Font: Roboto
  • Headlines: Roboto Semi-Bold
  • Regular Text: Robot Light
  • Font-Sizes:
    • H1: 18/20
    • H2: 16/Auto
    • H3 subject: 15/20
    • Body Text: 10/15
    • H4 substitles: 10/15
    • H5 Big Word: 20/25
    • H6 legal: 10/auto

Icons

We use clean, clear but slightly playful even childish Icons, to get away from a too steril style and keep things fun and social. Whenever possible we pick of the vast library of existing icons that's already embedded in the app (via flutter_icons_null_safety, usage as in flutter icons).

// Import package
import 'package:flutter_icons_null_safety/flutter_icons_null_safety.dart';
import 'package:flutter/material.dart';

// After 1.1.0, the FlutterIcons class is provided to access all Icons
// Icon name in the original basis added icon set abbreviation name as suffix
// Hereinafter referred to as the following
//Ant Design Icons -> ant,
//Entypo Icons -> ent,
//Evil Icons -> evi,
//Feather Icons -> fea,
//Font Awesome Icons -> faw,
//Foundation Icons -> fou,
//Ionicons Icons -> ion,
//Material Community Icons -> mco,
//Material Icons -> mdi,
//Octicons Icons -> oct,
//Simple Line Icons -> sli,
//Zocial Icons -> zoc,
//Weather Icons -> wea
Icon(FlutterIcons.stepforward_ant)
Icon(FlutterIcons.html5_faw)

Brandguide as PDF

Implementation Guide

TBD

Themeing / Customisastion

TBD