pn-design-assets
v1.8.3
Published
Icons, SCSS, and more for PostNord Graphical Guidelines
Downloads
10,457
Maintainers
Readme
PostNord, Sass Guidelines
PostNords colors, fonts and resets used across our apps.
SCSS
// resets 1 rem to 10px to make it easier to work with (mandatory if you want to use our web components)
@import "node_modules/pn-design-assets/pn-assets/styles/_pn-resets";
// import PostNord-Sans and apply it
@import "node_modules/pn-design-assets/pn-assets/styles/_pn-fonts";
// this is all of the font sizes that we've decided on in the design team. In short it's sensible default sizes for all text elements and a bunch of helper classes to align our typography standards cross site (we have a more in depth guide in the left panel of this site).
@import "node_modules/pn-design-assets/pn-assets/styles/_pn-typography";
// Our color palette, you can get an overview of this if you look in our Storybook
@import "node_modules/pn-design-assets/pn-assets/styles/_pn-colors";
// You can import all of our SCSS files in one go.
@import "node_modules/pn-design-assets/pn-assets/styles/pn-styles";
SVG & colors assets
You can import our SVG icons and illustrations from this repo. The raw SVG files can be found in pn-design-assets/pn-assets/illustrations/circle/
and pn-design-assets/pn-assets/icons/
.
We have provied typed exports of all SVG content with declaration typescript maps.
Icons
All icons are exported from pn-design-assets/pn-assets/icons.js
file, we also provide a camelCase version named iconsCamel.js
import { arrow_right } from 'pn-design-assets/pn-assets/icons'
import { arrowRight } from 'pn-design-assets/pn-assets/iconsCamel'
// or
import {
arrow_right,
arrowRight
} from 'pn-design-assets/pn-assets/icons/arrow_right'
Flags
All flags are exported from pn-design-assets/pn-assets/flags.js
file, we also provide a camelCase version named flagsCamel.js
import { se_flag } from 'pn-design-assets/pn-assets/flags'
import { seFlag } from 'pn-design-assets/pn-assets/flagsCamel'
// or
import { se_flag, seFlag } from 'pn-design-assets/pn-assets/flags/se_flag'
Illustrations
All illustrations are exported from pn-design-assets/pn-assets/illustrations.js
file, we also provide a camelCase version named illustrationsCamel.js
import { company_settings } from 'pn-design-assets/pn-assets/illustrations'
import { companySettings } from 'pn-design-assets/pn-assets/illustrationsCamel'
// or
import {
company_settings,
companySettings
} from 'pn-design-assets/pn-assets/flags/company_settings'
Colors
We have all of our colors in the SCSS files mentioned above, but sometimes you need them in your javascript code.
import { blue700 } from 'pn-design-assets/pn-assets/colors'
Typography classes
| Class | Desktop/Mobile | Line height | Element |
| ------ | -------------- | ----------- | ------------ |
| pn-2xl | 48px / 32px | 1.1 | |
| pn-xl | 32px / 30px | 1.1 | <h1>
|
| pn-l | 24px / 24px | 1.1 | <h2>
|
| pn-m | 20px / 20px | 1.1 | <h3>
|
| pn-s | 16px / 16px | 1.5 | <p>
/<h4>
|
| pn-xs | 14px / 14px | 1.5 | |
| pn-2xs | 12px / 12px | 1.5 | <small>
|
Optimize SCSS in your application
Many build tools allow you to append SCSS variables that are exposed to to all your SCSS files/components.
Make sure you only import _pn-colors.scss
, as it is the only one containing our SCSS variables.
Including pn-styles.scss
in that step would import the variables, fonts, resets and typography rules in every single component/SCSS file in your project.