Change log - design

2018-04-10

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

2019-10-25: Updated tab component

Change
  • States for hover and focused have been updated (see specification)
  • Overflow tab is left-aligned (used to be right-aligned)

**Mobile version**

  • The arrow is moved into the tab and a tiny line is added to look like a tab
  • Instruction is clarified: feel free to display more than one tab in a mobile. If there are too many tabs for the width that calls for an overflow menu, then only one tab is presented (with arrow).
Reason

The instructions were not clear enough.  

Details

See the full specification here: 
https://designlibrary.sebgroup.com/components/tab/#specification


 

2019-10-09: Updated table component

Change

There are two small and important changes on table design:

  • Bigger table header font: 16 px, medium, Grey 2 (#333333)
  • New sorting icon: Normal = Grey 7 (#B2B3B3), Selected= Dark Blue 2 (#007AC7), Hover = Blue (#41B0EE)
  • The sorting icon is FontAwesome solid "chevron-up" and solid "chevron-down", on top of each other, width 10 x height 16 px (together)
Reason

The table header font used to be 12 px which has been to small to achieve readability. There are more changes to come, but these are the most urgent. So the rest of what we know about tables stays the same for now. 

Details

See the full specification here: 
https://designlibrary.sebgroup.com/components/table/


 

2019-10-01: Updated form components

Change

The following components has an updated height (44 px):

  • Radio buttons 
  • Checkboxes
  • Stepper (updated design description)
  • Segmented control (updated design description)
Reason

This synk makes all form components' height at 44 px (the first round was 2019-01-30). 

Details

See the full specification here:


 

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