Introduction

Source: introduction.md

Hafslunds digital design system (HDD) is a common framework to keep the design consistent with the brand across project. The classes and naming follows the BECM convention. You can find more information about this in the BECM.

For every used front-end framework a separate 'components' library should be created. Listed below are the already existing libraries. If you want to add your library to this list, please create a pull request.

Framework Version Repo
Angular 5.x hal-components Github
Design document (Figma)

Getting started

There are multiple ways of using HDD:

  • Cloning the git repository: git clone git@github.com:hafslundnett/hdd-style.git
  • Add it as an npm dependency: yarn add @hafslundnett/hdd-style
    • Import main.sass in your stylesheet: @import '~@hafslundnett/hdd-style/main';
    • Use the bundled and minified file: dist/bundle.min.css

Contribute

Do you wish to change, remove or add something? Please read our contribution guide and code of conduct. Check for related open issues, and if none exist please open a new one: Github Issues.

Open the styleguide locally

In order to get started you will need to have node and npm installed. You can get it at https://nodejs.org. When those are installed run:

  • yarn
  • yarn start

This will open the styleguide in your browser and refresh on changes.

Changelog

Please read the changelog here to keep up to date with breaking changes released with new updates.

Layout Grid

Source: grid.md

We provide two grids you can use. The first (.hdd-grid) is meant for sites that support mobile + desktop, and the second (.hdd-grid-desktop) is for websites that only support desktop. The grid uses a 12 or less point/column system that changes based on windows size. Rows have no inherit min or max height, as can be seen in the example.

Columns for .hdd-grid (mobile and desktop)

  • 4 for small-size (< Earth)
  • 8 for mid-size (> Earth < Jupiter)
  • 12 for big-size (> Jupiter)

Columns for .hdd-grid-desktop (desktop)

  • 8 for mid-size (< Jupiter)
  • 12 for big-size (> Jupiter)
Example

You should use grid-column and grid-row to position your elements on the grid. Remember to add new positions for the breakpoints. Elements will have a width based on the grid, but no height as rows have no default height.

Naming guidelines

Source: naming-guidelines.md

We make use of the BECM naming guidelines. These guidelines define how class names are constructed and used.

🚧 The prefix of this project is: hdd

Badge

Source: badge.md

Badges contain numeric values and indicate a number.

All the colors in the design system can be used on hdd-badge. signal-red is the default color. The colors are used with the class is-$color. For example for primary: <span class="hdd-badge is-primary"></span>. Badges contain numeric values and indicate a number. Multiple colors can be used on hdd-badge and hdd-badge-icon. signal-red is used as the default color.

✅ When to use:

Use badges to mark new, updated or removed content. Use badges with the item they represent, so it's clear which item is indicated.

⛔ When not to use:

Badges should not be used alone. Do not display information status in a badge and to visually mark UI objects.

Badge

hdd-badge

Example

Button

Source: buttons.md

The buttons are to be used across the various internal systems. If there is only one button on the current screen, this should always be a primary button. When you use multiple buttons, the primary button appears on the right and any secondary buttons appear on the left. Secondary buttons should not be used alone on a screen. Action buttons are specially designed for the user to take an action that will affect something else.

Changing the color of a button to convey purpose is not ideal as people with vision impairments may struggle. Usage of other colors should be properly discussed and the context clear.

✅ When to use:

The buttons should be used for clickable actions.

⛔ When not to use:

When an action does not require a button. For example, during navigation a link should be used instead.

Primary button

hdd-button

If only one button exists on a page, it should always be a primary button.

Example

Secondary button

hdd-button

The secondary button should never be used alone on a page.

Example

Buttons with icon

hdd-button

The buttons are all the same size.

NB! The danger buttons should only be used for deleting/removing purposes.
Example

Icon only buttons

hdd-button-icon

NB! The danger buttons should only be used for deleting/removing purposes.
Example

Mutations

hdd-button:

class description
is-primary Sets the color of the given button to the primary color
is-secondary Sets the color of the given button to the secondary color
is-loading Sets the given button to it's loading state
is-danger A red button to be used for delete / removing actions, should be used together with the fa-trash-alt icon
has-icon Adds padding to the right of icon in a button with text

hdd-button-icon:

class description
is-transparent Sets background and border to transparent
is-no-padding Removes all padding from icon-button, should only used together with is-transparent
is-danger A red button to be used for delete / removing actions, should be used together with the fa-trash-alt icon

Cards

Source: cards.md

A card is composed of several elements (eg title, description, icon, illustration). Combined, these elements are related to a single theme or to a destination. A card does not have an active / selected state. Cards contain interactive content, like function or other action points. Since cards are the starting point for more detailed info, they should contain a limited number of actions.

✅ When to use:

Cards are used when you want to view content related to a theme. The text of the card is recommended to be kept at a maximum of 70 characters per line to improve the readability for the user. The content should be short and kept to a minimum. A header-icon in the top left corner can be used to improve the recognition of content. A card can also have an icon prompting the user to go to settings for this specific content.

⛔ When not to use:

A card should only encapsulate one type of content.

🖋️ For designer:

Padding inside the card is recommended to have spacing-3. If there are multiple cards in a row, the cards should have the same height. The icon in the label should be inside a circle, aligned to the H1 element. The icon should clearly be connected to the title, and be relevant to content. If a card is clickable, this should be displayed with a light border, view more and an arrow.

Card

hdd-card

Example

Card with full width button

hdd-card

Example

Card with header action

hdd-card

Example

Card with action button

hdd-card

Example

Mutations

hdd-card:

class description
is-full-height Sets the height of the given card to 100%

hdd-card_title:

class description
is-center Sets the given content of card title centered

hdd-card_subtitle:

class description
is-center Sets the given content of card subtitle centered

hdd-card_actions:

class description
no-hover Disable the :hover state

Divider

Source: divider.md

Divider to seperate content from each other. Apply the hdd-divider class to a horizontal row <hr> tag.

Divider

hdd-divider

Example

Mutations

hdd-divider:

class description
is-light Sets the divider in a light colored theme, light color is --hdd-color-grey-light

Feedback message

Source: feedback-message.md

A feedback message convey information that is important or urgent.

✅ When to use:

Feedback message should be used to guide or inform the user of critical information. For an error the message should inform the user of what went wrong and why.

⛔ When not to use:

A feedback message should not be used unnecessarily

Info feedback

feedback-container, is-info, is-success, is-warn, is-error

Usage of icons in feedback messages should be kept to an absolute minimum, since they usually don't serve any purpose and may be considered as visual "noise".

Example

Mutations

feedback-container:

class description
is-info Sets the given feedback to the info state
is-success Sets the given feedback to the success state
is-warn Sets the given feedback to the warn state
is-error Sets the given feedback to the error state

Header

Source: header.md

The header hdd-header should be used on each page, at the top before any content. It should cover the entire with of the screen. The header may contain the logo, page/site title and the active user if any. There are two header user alternatives, one with, and one without a user image. Remove the user part if the site has no login. Clicking on the user image should open the hdd-user-menu if possible.

✅ When to use:

When not using a component library.

⛔ When not to use:

The sign out button should only be used if the user menu can't be used.

Header with image

Example

Header without image

Example

Links

Source: links.md

Links are for prompting a user action that will affect another part.

hdd-link

Example

Mutations

hdd-link:

class description
no-active Disable the :active state
no-focus Disable the :focus state
no-hover Disable the :hover state
is-active Set the given link to it's active state
is-focus Set the given link to it's focus state
is-hovering Set the given link to it's hovering state

Notification dot

Source: notification-dot.md

The hdd-notification-dot class adds a small red dot with a white border to the top right side of an icon to signalize notifications.

Notification

hdd-notification-dot

Example

Small menu

Source: small-menu.md

A small menu can hold a list of choices. It can be hidden and shown on the hover and active state.

Small menu

hdd-small-menu

Clicking the icon toggles the is-active state of the small menu.

Example

Mutations

hdd-small-menu_list_item:

class description
is-active Set the given small menu item to it's active state
no-hover Disable the :hover state

Table

Source: table.md

A table can consist out of data, buttons and icons. A table row can also have a small color bar at the beginning of the row, all color subclasses can be used.

Table

hdd-table

Example

Table width sticky header

hdd-table

Example

Mutations

hdd-table:

class description
has-shadow Add a light shadow to the table
is-sticky-header Table header sticks when scrolling table
is-striped Adds zebra-stripes to the table, needs to have <thead> and <tbody> defined in table
is-aligned-top Sets the vertical-align of all cells to top
is-aligned-bottom Sets the vertical-align of all cells to bottom
no-wrap Sets the white-space property of all th/td elements to nowrap
no-row-padding Removes the extra left-padding on the first column in a table

hdd-table tr | hdd-table_row:

class description
is-stripe Mark the given row as a stripe
is-selected Mark the given row as selected

Tags

Source: tags.md

Tags are interactive elements presented with a keyword or phrase that allows the user to move quickly to the selected point. Tags can be grouped together and are useful for filtering.

✅ When to use:

Use tags to help the user categorize content.

⛔ When not to use:

Tags should not be used alone.

Tags

hdd-tags, hdd-tags_item

Example

Tooltip

Source: tooltip.md

A tooltip can give context to a given icon/piece of text. Tooltips are usually hidden and become visible on hovering, focus or on touch.

Attach the hdd-tooltip class to the element which the tooltip content should be relative to. Then within the attached element, add a <span> tag with the hdd-tooltip_content class. Fill inn the content of the tooltip within the <span> tag. Examples and mutation classes are described below:

✅ When to use:

Tooltips can be used to provide the user with brief and useful information related to a feature as a hover over/mini popup

⛔ When not to use:

Tooltips should not contain necessary and critical information needed by the user to complete a task. Tooltips does not work on mobile devices as they use the hover class, which only works with a mouse.

Tooltip

hdd-tooltip

Example

Mutations

hdd-tooltip:

class description
is-light Tooltip with hdd-color-white background and standard font color

hdd-tooltip_content:

class description
is-right Set to tooltip to appear on the right side of the element
is-left Set to tooltip to appear on the left side of the element
is-top Set to tooltip to appear on top of the element
is-bottom Set to tooltip to appear on the bottom of the element. This is the default position for a tooltip with no direction class set to it

User menu

Source: user-menu.md

⚠️ This is a low level building block, and should be automated in a component library, but can be used directly if you want full control.

This is the user menu to be shown when clicking on your image in the header. This component should be linked to the header in a component library.

User Menu with image

Example

User Menu without image

Example

Checkbox

Source: checkbox.md

A checkbox component lets a user select one or more options of a limited number of choices. Checkbox classes are assigned to the corresponding checkbox label.

Checkbox

hdd-form_checkbox

Example

Toggle Checkbox

A toggle checkbox component lets a user toggle between true or false state. The toggle checkbox slider class are assigned to the corresponding span beneath the checkbox input tag.

hdd-form_toggle & hdd-form_toggle slider

Example

Mutations

hdd-form_checkbox:

class description
is-invalid Set the checkbox to it's invalid state
is-checked Set the checkbox style to it's checked class

Dropdown

Source: dropdown.md

⚠️ This is a low level building block, and should be automated in a component library, but can be used directly if you want full control.

The dropdown lets the user search for and choose between a set of options. The dropdown aligns to the bottom by default. Dropdown should be used if the user wants a recommended selection out of all the options (then this choice should be the default), or if the list of choices is longer than 5 (then placeholder text should be used). In a long dropdown list, it must be possible for the user to start typing to filter.

hdd-form_input.hdd-dropdown

Example

hdd-form_input.hdd-dropdown

Only use is-aligned-top when there are enough room from the top and not enough from the bottom.

Example

Mutations

hdd-dropdown_content:

class description
is-active Sets the given dropdown-content to it's active state
is-aligned-bottom Sets the given dropdown-content to be aligned at the bottom of the input field
is-aligned-top Sets the given dropdown-content to be aligned at the top of the input field

hdd-dropdown_content_item:

class description
no-hover Disable the :hover state
is-active Sets the given dropdown-item to it's active state

Form fields

Source: form-fields.md

Form fields is a component used to wrap several HDD components, such as input fields, checkboxes, radio and select. Form elements should be wrapped within a hdd-form_field, along with a descriptive hdd-form_field_label, or hdd-form_field_title for checkboxes and radio buttons.

Form fields

hdd-form_field

Example

Mutations

hdd-form_field:

class description
hdd-form_field_label Set style for a form field label
hdd-form_field_title Set style for title above the form field
hdd-form_field_error Set style for an error message below the input field
hdd-form_field_info Set style for an info message below the input field
is-line Sets the form field to display: block, default display for all form-fields
is-inline Sets the form field to display: inline-block
is-active Activates the form fields error and info blocks

Input fields

Source: input-fields.md

An input should encourage action by the user. If the text / content cannot be changed, it should not appear in an input field of any kind (displayed as static text). For text-areas min-height is set to standard input-field height. The height is adjustable for the user, while the width is not.

Input fields should always be placed within a hdd-form_field, along with a descriptive hdd-form_field_label.

✅ When to use:

An input should have a descriptive prompt and contain: container, label, placeholder/input text, error text/helper. An textarea should be used if a longer text is needed.

⛔ When not to use:

An input should not stand alone without a label or information about what is requested. An textarea should not be used if there no need for a longer text.

Input fields

hdd-form_input

Example

Mutations

hdd-form_input:

class description
is-focus Set the input field to its active state
is-disabled Set the input field to its disabled state
is-invalid Set the input field to its invalid state

Radio button

Source: radiobuttons.md

A radiobutton component lets a user select only one of a limited number of choices.

Radiobutton

hdd-form_radiobutton

Example

Mutations

hdd-form_radiobutton:

class description
is-checked Set the radiobutton style to it's checked class

Search fields

Source: searchfields.md

Search box allows the user to locate content quickly and efficiently and can be seen as a conversation between the user and the web page.

✅ When to use:

It is important to set the user context for the search with the correct placeholder text.

Search field

hdd-form_input

Example

Select

Source: select.md

A select component lets a user choose between a set of options.

Select

hdd-form_select

Example

Mutations

hdd-form-select:

class description
is-disabled Set the select to it's invalid state
is-invalid Set the select to it's invalid state

Colors

Source: using-colors.md

Hafslund Nett has its own distinct groups of colors. All colors that are being used in this project are defined in the colors map. Every color can be used directly by using the css-variable for a color: var(--hdd-color-$name). For example for primary: color: var(--hdd-color-primary).

Using CSS-variables

The css-variables can be accessed anywhere when importing hdd into your application. All colors, as well as their contrast color is available for use. A color can be selected by it's color name or label.

  • var(--hdd-color-$name)
  • var(--hdd-color-contrast-$name)
.hdd-element {
  background: var(--hdd-color-primary); // using the primary color, blue
  color: var(--hdd-color-contrast-primary); // using the contrast color of primary 
}

Colors preview

Source: colors.md

Hafslund Nett has two different palettes of colors, primary colors and support colors, and they should be used in all communication to create identity. In this section all the available colors with their corresponding contrast-color is visualized.

Primary colors

The primary color is blue and work as an important element for building the identity of Hafslund Nett. Blue symbolize credibility and stability. The associated shades of blue provide contrast, flexibility and airiness. This limited color scheme provides visual continuity throughout the user interface. When using estimates, pay particular attention to creating contrasts that are approved in WCAG.

  • --hdd-color-blue --hdd-color-contrast-blue
  • --hdd-color-blue-dark --hdd-color-contrast-blue-dark
  • --hdd-color-blue-light1 --hdd-color-contrast-blue-light1
  • --hdd-color-blue-light2 --hdd-color-contrast-blue-light2
  • --hdd-color-blue-light3 --hdd-color-contrast-blue-light3
  • --hdd-color-blue-light4 --hdd-color-contrast-blue-light4
Example

Support colors

Support colors are all colors which are not considered primary colors. These colors include greys, signaling colors, data visualization colors, and shadows.

Grayscale

The grayscale should be used in addition to the primary colors of non-printable items. The darkest gray is text color and should be used on all titles, paragraphs, and content. If text appears on a dark surface, contrast requirements must be maintained and white text must be used (#FFFFFF).

  • --hdd-color-black --hdd-color-contrast-black
  • --hdd-color-font-color --hdd-color-contrast-font-color
  • --hdd-color-grey-dark --hdd-color-contrast-grey-dark
  • --hdd-color-grey-medium --hdd-color-contrast-grey-medium
  • --hdd-color-grey --hdd-color-contrast-grey
  • --hdd-color-grey-border --hdd-color-contrast-grey-border
  • --hdd-color-grey-light --hdd-color-contrast-grey-light
  • --hdd-color-grey-background --hdd-color-contrast-grey-background
  • --hdd-color-white --hdd-color-contrast-white
Example

Signal colors

Signal colors should only be used in meaningful (never being identity-bearing or the only color appearing on a screen) situations and should only mean one thing per platform.

  • --hdd-color-signal-green --hdd-color-contrast-signal-green
  • --hdd-color-signal-yellow --hdd-color-contrast-signal-yellow
  • --hdd-color-signal-red --hdd-color-contrast-signal-red
Example

Data visualization

These colors are chosen to be used for infographics. If necessary, these colors can also be used in varying degrees of opacity (eg heat maps).

  • --hdd-color-data-navy --hdd-color-contrast-data-navy
  • --hdd-color-data-marine --hdd-color-contrast-data-marine
  • --hdd-color-data-blue --hdd-color-contrast-data-blue
  • --hdd-color-data-turquoise --hdd-color-contrast-data-turquoise
  • --hdd-color-data-seagreen --hdd-color-contrast-data-seagreen
  • --hdd-color-data-green --hdd-color-contrast-data-green
  • --hdd-color-data-orange --hdd-color-contrast-data-orange
  • --hdd-color-data-yellow --hdd-color-contrast-data-yellow
Example

Shadows

Source: using-shadow.md

HDD contain 3 different types of shadows, that goes from light to strong. Every shadow can be used directly by using the css-variable for that shadow: var(--hdd-shadow-$name). For example for the light shadow: box-shadow: var(--hdd-shadow-light).

Using shadows as CSS-variables

The css-variables can be accessed anywhere when importing hdd into your application. All shadows are available for use. A shadow can be selected by it's name.

  • var(--hdd-shadow-light)
  • var(--hdd-shadow-medium)
  • var(--hdd-shadow-strong)
.hdd-element {
  box-shadow: var(--hdd-shadow-light); // using the light shadow
  box-shadow: var(--hdd-shadow-medium); // using the medium shadow
  box-shadow: var(--hdd-shadow-strong); // using the strong shadow
}

Using hdd-shadow-classes

Setting the shadow attribute directly on elements are also possible with the following classes. All shadows can be used.

  • hdd-shadow-light
  • hdd-shadow-medium
  • hdd-shadow-strong
Example

Accessibility

Source: a11y.md

Visibility

Sometimes there is a need to hide content on a page for various reasons. It is important that it still conveys the correct meaning to people who use screen readers. We should follow these principles regarding the situation to keep everything accessible, whether you are visually impaired or not:

Hide from everyone

Use the hidden attribute to hide content from everyone.

Hide from screen readers

Use the attribute aria-hidden="true" to hide content from screen readers. It will still appear visually on the page.

Hide visually only

Use the class .is-visually-hidden to hide content visually only. This will still be read by screen readers.

Breakpoints

Source: breakpoints.md

The breakpoints uses the names of the planets in the solar system. This is done on purpose as opposed to names like "phone" and "desktop". This is due to the changing nature of screen sizes and we don't want to have a strong link between our sizes and real devices.

@import "~@hafslundnett/hdd-style/utilities/breakpoints";

Using the sizes

We are using a mobile first philosophy which means you first create the styling for the smallest supported screen size. Then you add breakpoints for larger screens (a given size and up) where further changes are specified.

.element {
    // less than 576px (Venus)
    background: blue; 

    // 576px and up
    @include breakpoint-up(Venus) {
        background: red; // will overwrite default color 
    }

    // 768px and up
    @include breakpoint-up(Earth) {
        background: green; // will overwrite Venus color
    }
}

Available breakponts

  • Venus 576px
  • Earth 768px
  • Mars 1024px
  • Jupiter 1200px
  • Saturn 1440px
  • Uranus 1920px

The first and last planet is not used and reserved for future use.

Icons

Source: icons.md

HDD-style uses Font Awesome icon library, and is implemented with the <i> </i> tags, along with the corresponding class for an icon, see the examples for some of the icons that are available. A full list of all of Font Awesome icons can be found here: https://fontawesome.com/icons?d=gallery

Icons are visual symbols used to represent ideas, objects or actions. They convey messages at a glance, provide interactivity and draw attention to important information. The icons are recommended to be designed for between 20 and 24 dp to make the pixel perfect. See Google's Material Icon for details. Icons are usually placed to the left of the text, but can also be placed above and to the right if the special use case fits it.

✅ When to use:

Icons can be used in several contexts. In input fields they are used both to visually show what the user fills in and to show status (pass / fail). They should follow set spacing values.

⛔ When not to use:

Icons should not be larger than 48px. It should also be avoided to have icons less than 8px. Also, icons should not be used alone in menus without text, as it may be difficult for the user to know what the icon should represent.

Example

Spacing

Source: spacing.md

Spatial system that follows multiplication of 0.5rem (1rem = 16px). This provides predictability and is visually more comfortable to look at. Every spacing can be used directly on margins and paddings by using the css-variable for a spacing: var(--hdd-spacing-$name). For example for primary: padding: var(--hdd-spacing-primary)

All spacing sizes

  • 0.5rem (8px): --hdd-spacing-1 / --hdd-spacing-primary
  • 1.0rem (16px): --hdd-spacing-2
  • 1.5rem (24px): --hdd-spacing-3
  • 2.0rem (32px): --hdd-spacing-4
  • 2.5rem (40px): --hdd-spacing-5
  • 3.0rem (48px): --hdd-spacing-6
  • 3.5rem (56px): --hdd-spacing-7
  • 4.0rem (64px): --hdd-spacing-8
Example

Spacing in practice

Standard spacing should be used when possible to standardized the separation between elements, as seen in the example below. Exceptions from this should be pre-approved by designer.

Example

Typeface

Source: typography.md

The typeface should be kept consistent in all mediums, physical and digital. The typography of Hdd is based on the rem unit. The body is set to the browsers default font size. All typography blocks are defined in the $typography variable found in the typography variables file.

Default font

Roboto is default font for all text. These tags are automatically styled: h1, h2, h3 and p.

Example

Hafslunds digitale designsystem

Getting started
Introduction Layout Grid Naming guidelines
Components
Badge Button Cards Divider Feedback message Header Links Notification dot Small menu Table Tags Tooltip User menu
Form-Components
Checkbox Dropdown Form fields Input fields Radio button Search fields Select
Colors
Colors Colors preview Shadows
Utilities
Accessibility Breakpoints Icons Spacing Typeface
No matches.
Generated by Stylemark