Länsförsäkringar Design System

Welcome to Länsförsäkringar's design system. The design system (known as LFDS) is the heart of digital design at Länsförsäkringar. Here you should be able to find all common resources, no matter whether you are a designer, writer or developer.

Our components are the building blocks which we build all design upon.

Visual identity

Our digital adaptation of the Länsförsäkringar brand guidelines.

Our most frequent patterns of putting components together as well as templates.

New to the digital team at Länsförsäkringar?

Start here to learn what LFDS has in offer for you.

You’re just one click away from the starting point for designers!

To get introduced to what you should know about LFDS as a developer, go here.

Guiding principles

In this section you'll find our different guiding principles; CX-principles, design corner stones and design principles.

Accessibility

Making sure that our services provide good accessibility isn't only the right thing to do, it's also the law.

Customer insights

This section describes how we work with customer insights in various ways, from explanatory interviews to usability testing.

Release info

What's new

New month picker
Bump LF Icons from 2.2.0 to 3.3.0
Buttons in alerts now drop down below in full width on mobile
Fix font stack issue

Full Changelog: v10.1.11...v10.2.0

Fix asset link issue + update component status version numbers.

What's New

Shortcut component rewrite. See it in action.
- Bringing a cleaner API and improved visual details.
- Removing the "alert" ("glasspinne") version.
- Adding on-the-fly and in-context config with CSS variables. For example, the Öppna Sidorna team could set --shortcut-border-color to a light blue, instead of a light gray, when Shortcuts are used on a light blue background. This is a pattern that we'll explore further coming up, in the form of theme classes.
Custom radio and checkbox card rewrite. See it in action here and here.
- Fixing visual bugs and syncing design with Shortcuts.
- The pricing box, which is built using radio cards, was also updated.
LFUI-Icons 2.2.0 released
- Removing the 20x20 icon set, as the design team is moving away from it. The 24x24 icon set is to be used instead.
- Adding a new "warning" icon.
LFUI available publicly in the npm registry. Finally!
- npm install @lansforsakringar/components
- npm install @lansforsakringar/icons
Alerts updated again (!) but this only visually. See it in action.
- Adding shadow options
- Removing the dark temporary versions
- Tweaking colors
Navbar has been removed. The navbar in LFUI has been out of sync with reality for years and hasn't been recommended for implementation. It might be brought back when it has been updated with a synced design (likely in collaboration with the Mina Sidor team).
New easing variables. Instead of the built-in CSS easings keywords, these CSS props are recommended instead: --ease,--ease-in, --ease-out.
Improving build scripts.
Improved HTML examples for most components. This is an ongoing project to find undocumented features.

Bug fixes

Fixed button issue with rounded corners
Fixed primary link issue, causing the arrow to jump a few pixels on hover

Migrating from 10.0.0

Installing the latest versions from npm, note the updated package names that should be reflected in your app.
- from @LF-digitala-kanaler/lfui-components to @lansforsakringar/components
- from @LF-digitala-kanaler/lfui-icons to @lansforsakringar/icons
Shortcuts require a new implementation. Documentation.
- Look for shortcut, shortcut-alert, and shortcut-block to see if this affects you.
Radio/checkbox cards require a new implementation. Documentation (radio button, checkbox)
- Look for checkbox-card, radio-card, and price-container to see if this affects you.
For icons, see the LFUI-Icons v2.2.0 release notes
Optionally, check your CSS for ease, ease-in, and ease-out and replace them with the new CSS properties. For example, var(--ease-in)
custom-multi-select class was removed – undocumented and we don't know what it is. Do let us know if you depend on it, thanks!

View complete Changelog

Links you can´t live without