Terra UI/UX Style Guide

1.0 What's new (Changelog)

2.0 General

2.1 Introduction

This style guide

This style guide will show you how to develop in terra according to our UI and UX guidelines. It is an evolving and changing document.

Our vision

Our vision for a good UI consists of the following pillars.

  • Intuitive: Comprehensive user interface without the need for documentation.
  • Consistent: Same solutions for same challenges.
  • Efficient: As little as possible, as much as necessary.

    • Basic principles

    Some basic principles before you dive deep into the best practices section.

  • Old but gold: Use existing components before creating new ones.
  • Bilingual: Every piece of text should be available in German and English (British) language.
  • Wrap it: Most elements should be wrapped in portlets or tables.
  • Responsive: All components should be responsive and work on various devices.
  • No Customisation Don't customise existing components in your view since they are created like that for a reason.

    • Mockups & Prototypes

    We provide a collection of our components to create mockups and interactive prototypes using Adobe XD. Use it before starting development to avoid unnecessary workload.

    2.2 Colours

    Function Groups

    Add

    var(--color-group-add)

    #6AD26A

    Alert

    var(--color-group-alert)

    #F11539

    Warning

    var(--color-group-warning)

    #ff873e

    Action

    var(--color-group-action)

    #ffdb4c

    Active

    var(--color-group-active)

    #24B3E0

    Info

    var(--color-group-info)

    #3f54d0

    Transfer

    var(--color-group-info)

    #e468f3

    Navigation

    var(--color-group-navigation)

    #636671

    Disabled

    var(--color-group-disabled)

    #D7D8DB

    Structure colours

    Color Structure 0

    var(--color-structure-0)

    #FFFFFF

    Color Structure 1

    var(--color-structure-1)

    #F5F5F5

    Color Structure 2

    var(--color-structure-2)

    #E9EAEC

    Color Structure 3

    var(--color-structure-3)

    #E5E5E5

    Color Structure 4

    var(--color-structure-4)

    #D7D8DB

    Color Structure 5

    var(--color-structure-5)

    #C6C7CA

    Color Structure 6

    var(--color-structure-6)

    #ACADB2

    Color Structure 7

    var(--color-structure-7)

    #95989D

    Color Structure 8

    var(--color-structure-8)

    #7B7E85

    Color Structure 9

    var(--color-structure-9)

    #636671

    Color Structure 10

    var(--color-structure-10)

    #5B5D66

    Color Structure 11

    var(--color-structure-11)

    #494C56

    Color Structure 12

    var(--color-structure-12)

    #2F323A

    Color Structure 13

    var(--color-structure-13)

    #000000

    2.3 Typography

    Font Families

    Roboto is set globally as standard font. Icons can be set by following this instruction: Icon tutorial. For a complete list of all icons see here: Icon-List

    Roboto - var(--font-family)

    Icons ☆ - var(--font-family-icons)

    Font sizes

    Font Size 1 (11px) - var(--font-size-1)

    Font Size 2 (12px) - var(--font-size-2)

    Font Size 3 (13px) - var(--font-size-3)

    Font Size 4 (14px) - var(--font-size-4)

    Font Size 5 (16px) - var(--font-size-5)

    Font Size 6 (20px) - var(--font-size-6)

    Font Size 7 (28px) - var(--font-size-7)

    Font Size 8 (48px) - var(--font-size-8)

    Font weights

    Font Weight 1 (400) - var(--font-weight-1)

    Font Weight 2 (500) - var(--font-weight-2)

    Font Weight 3 (700) - var(--font-weight-3)

    2.4 Spaces

    Almost all paddings, margins and heights should have these variables as values. Consider that in compact mode these values will be cut in half.

    Paddings & Margins

    Space XS (2px) - var(--space-xs)

    Space SM (4px) - var(--space-sm)

    Space MD (8px) - var(--space-md)

    Space LG (12px) - var(--space-lg)

    Space XL (24px) - var(--space-xl)

    Heights

    Height SM (24px) - var(--space-SM)

    Height MD (36px) - var(--space-MD)

    Height LG (48px) - var(--space-LG)

    2.5 Important variables

    These are the standard values for the following parameters and they should suffice for almost any case.

    Border Radius (2px) - var(--border-radius)

    Box Shadow (0 1px 2px 0 rgba(0,0,0,0.2)) - var(--box-shadow)

    z-Index (100, 200... - 900) - var(--zIndex-1) - var(--zIndex-9)

    Transition (0s) - var(--transition-0)

    Transition (ease 0.2s) - var(--transition-xs)

    Transition (ease 0.3s) - var(--transition-sm)

    Transition (ease 0.4s) - var(--transition-md)

    Transition (ease 0.6s) - var(--transition-lg)

    Transition (ease 1.2s) - var(--transition-xl)

    Transition Delay (0s) - var(--transition-delay-0)

    Transition Delay (0.2s) - var(--transition-delay-xs)

    Transition Delay (0.3s) - var(--transition-delay-sm)

    Transition Delay (0.4s) - var(--transition-delay-md)

    Transition Delay (0.6s) - var(--transition-delay-lg)

    Transition Delay (1.2s) - var(--transition-delay-xl)

    3.0 Best Practices

    3.1 Introduction

    Usually, the solution for an existing problem just requires a quick look at the existing approaches. These selected case studies will help you not to reinvent the wheel every day and at the same time they enable our users a consistent working method within our interfaces.

    3.2 Headings

    Heading position and size

    Do

    Headings consist of h1 elements and should be aligned left to their content.

    Don't

    h2 elements are reserved for portlet header.

    3.3 Toolbar

    Content in toolbars

    Do

    Buttons look awesome inside the toolbar!

    Don't

    Most other elements clearly do not. (Also check button-toggle)

    Toolbar position

    Do

    Always on top, always visible!

    Don't

    Just don't use it anywhere else.

    Save and delete button

    Do

    Save goes left and is always first. Delete goes right and is always last.

    Don't

    Don't group, don't swap positions.

    Button order and groups

    Do

    Order your buttons. Use groups where it makes sense.

    Don't

    Don't place buttons randomly.

    3.4 Portlet

    Nested portlets

    Do

    Portlet in portlet is fine.

    Don't

    Portlet in portlet in portlet is not.

    3.5 Input

    Input wrapping

    Do

    Always wrap input elements in a portlet.

    Don't

    Never place inputs on plain background.

    3.6 Table

    Buttons within table

    Do

    Group buttons in the last column.

    Don't

    Don't spread them over the entire table.

    3.7 Overlay

    Overlay content

    Do

    Use overlays to draw attention and display important stuff!

    Don't

    Don't use overlays to display functionality that you couldn't fit anywhere else. (Also check #input-wrapping).

    3.8 Button

    Toggle button

    Do

    Use the toggle element to display different button states.

    Don't

    Don't abuse regular buttons to achieve different states.

    Icons

    Do

    Try to use self-explanatory icons. Always use tooltips.

    Don't

    Don't use similar icons for different functionalities. Never use an icon twice within the same toolbar.

    3.9 Cards

    Card Icons

    Do

    Resolution: 160px × 160px

    Format: svg or png with a transparent background

    For functional icons (like upload) we recommend the use of plentyicons with #494c56 (color-structure-11) as icon color.

    Don't

    Please, don't do this.

    3.10 mat-select

    Card Icons

    Do

    All 'inputListBoxValues' have to be sorted.

    Use the selectSort pipe in order to sort in the template or use the SortHelper for sorting in the TypeScript file.

    Don't

    Don't use in-place array operations like push() or pop().

    These operations don't update the array instance and angular's change detection doesn't recognize it. Instead, you have to use methods that return a new array reference, e.g. concat().