Change log - design

2018-04-10

An iterative design process requires change. This is the page that keeps track on them.

2019-09-09: Updated Alert ribbon

Change
  • New colours - Make sure you use the correct colour codes
  • We are no longer using purple as a colour. Use grey instead.
  • New alert state - "Success" (green)
  • Updated state names:
    • "Information" (grey, used to be "Whisper")
    • "Success" (green, new state)
    • "Warning" (yellow, used to be "Talk")
    • "Critical" (red, used to be "Shout")
  • New icons - The specific names are on the component page. Use FontAwesome "Solid".
  • Updated measurements
  • Added recommendation for using grey alert on grey background
Reason

Feedback from user tests and usage from several channels, saying that purple was too loud. We also learned that the description in Design Library generally was too confusing. And we hade a design synk between Bootstrap and Design Library which generated sensible updates for both.

Details

See the full specification here, especially the Styles tab:

https://designlibrary.sebgroup.com/components/alerts/alert-ribbons/#guidelines  

 


 

2019-09-04: Updated recommendation on icon use

Change
  • Use "regular" FontAwesome icons, rather than "light"
Reason

Originally the “light” version of FontAwesome icons was recommended as it aligns well with our brand. We have since then learned that the lines look too subtle in smaller icon sizes.

Details

List of FontAwesome icons:
https://fontawesome.com/icons?d=gallery&s=regular

About Icons in Design library:
https://designlibrary.sebgroup.com/patterns/icons-and-pictograms/icons/#usage

Instructions for license use:
https://github.sebank.se/seb-common/licenses/blob/master/font-awesome.md


 

2019-05-08: Dropdown multiselect (new)

What is this?

The dropdown now has another version that allows multiple selections.

Details

https://designlibrary.sebgroup.com/components/forms/dropdown/#usage

Discussion

https://github.com/sebgroup/design-library/issues/59


 

2019-04-05: Delete-button (new)

What is this?

A new button version to use when the action the user is about to do is irreversible. Use this in two ways:

1. Delete button standard. More subtle, red link that can be used with or without an icon.

2. Delete button confirm. Stands out with a solid, red background. Is used in the confirmation dialogue.

Details

https://designlibrary.sebgroup.com/components/forms/button/#styles

Discussion

https://github.com/sebgroup/design-library/issues/55


 

2019-04-04: Updated H6

Change
  • Font-size 14
  • Font-weight Regular
  • Line-height 20
  • Color #333333
Reason

This header helps differentiate between a primary and secondary headline in a supporting area or box.

Details

https://designlibrary.sebgroup.com/visual-identity/typography/

Discussion

https://github.com/sebgroup/design-library/issues/55


 

2019-03-27: Updated Accordion

Change
  • The green “tab border” is removed
  • Font in header is 20 px, with the option of a sub header (14 px)
  • Header cell height: if header only 48 px, if sub header 64 px
  • Grey hover is added on the header cell
  • Content background is still white/none, with the option to make it grey
  • Chevron (FontAwesome Light) points up/down (not right/down)
  • Guidelines now include: "Use this component mainly for text content"
Reason

Many reasons. First of all, it was time to specify the component better. We have adjusted to fit users’ need with more efficient use of space. The direction of chevron and the animation that follows a tap, are aligned.

We also noticed that the component has been (too) content-heavy and added clearer guidelines.

Details

https://designlibrary.sebgroup.com/components/accordion/

Discussion

https://github.com/sebgroup/design-library/issues/38


 

2019-02-25: Sticky bar (new)

What is this?

The sticky bar stays in view at all times, no matter how many times the user tries to scroll away. There are two types: Sticky summary bar (placed at the top) and Sticky button bar (placed at the bottom).

Sticky summary bar

https://designlibrary.sebgroup.com/components/sticky-bar/sticky-summary-bar/#usage

Sticky button bar

https://designlibrary.sebgroup.com/components/sticky-bar/sticky-button-bar/


 

2019-02-22: Breadcrumbs (new)

What is this?

Breadcrumbs are used as a secondary navigation showing the website hiearchy. We have given it the SEB design touch.

Details

https://designlibrary.sebgroup.com/components/breadcrumbs/


 

2019-02-13: Updated Ghost buttons

Change

The Ghost button is updated to two versions:

  • Ghost button light: Transparent with a "White" outline (1 px). On hover: Background and outline is "Grey 2".
  • Ghost button dark: Transparent with a "Grey 2" outline (1 px). On hover: Background and outline is "White".
Reason

The instruction for the Ghost button is clarified. It is used on coloured background and photographs. Ghost light is for darker backgrounds, and Ghost dark for lighter backgrounds.

Details

https://designlibrary.sebgroup.com/components/forms/button/

Discussion

https://github.com/sebgroup/design-library/issues/35


 

2019-01-30: Input field error indicator

Change
  • The error indicator for input fields have a 2 px line (#D81A1A) at the bottom
  • No frame or shadow
  • No error indication icon in the text field
Reason

The reasoning for changing the line from 4 px to 2 px is that the line was too hefty, especially when there were many fields lighting up at the same time.

Details

https://designlibrary.sebgroup.com/components/forms/input/

Discussion

https://github.com/sebgroup/design-library/issues/13


 

2019-01-30: Updated height on form components

Change
  • Form components (Input Field, Drop Down, Medium Button, Segmented Control and Stepper) all have the same height: 44 px
  • This applies to both desktop and mobile
Reason

When labels got bigger, form components follow in size to harmonise and match them. Also, the mobile click area needed to be bigger so we want them to be the same size, to simplify and have fewer options (=easier to do it right).

Discussion

https://github.com/sebgroup/design-library/issues/16


 

2018-12-11: Change to labels, input instructions and input errors

Change

Labels
font size: 16 px (1 rem)
weight: medium
line height: 20 px
distance from input border to label: 8 px

Input instruction
font size: 14 px (.875 rem)
weight: regular
line height: 20 px
distance from input border to instruction: 8 px

Input error text
font size: 14 px (.875)
weight: regular
line height: 20 px
distance from input border to error text: 8 px

Reason

Users gave feedback on labels being too small to read. Therefore, font sizes and weights for labels, input instructions and input errors are updated.

See component: Input fields

Change log in Github 


 

2018-09-06: Changes to button variations

Change 
  • Re-name “Alternative button” to: “Button link”
  • Re-name “White outline button” to: “Ghost button”
  • Changed guidelines for "Ghost button":
    • Outline colour = white
    • Hover colour = white
Reason

Guidelines on how to use button was not clear enough. We also need a button to use on coloured background


 

2018-03-12: New colour on disabled form elements

Change

Disabled state on Secondary button, Ghost button, Button link: Grey 9

Reason

Feedback from IBP/Version x/Minor change


 

2018-03-01: Change Inline links to font Medium

Change

Inline links have medium weight

Reason

Feedback from IBP/Version x/Minor change