LUN-259: Define Design Basics (Typo, Spacings, Icon Sizes)

[jira-to-github-migrator[bot]]

f1sh1918 - 19.2.2022, 12:38:52

As a designer i want to have define design basics like typography, spacings and icon sizes for lunes.

These are just example sizes we currently use, you can extend or suppose new ones

(Baseline is a 400px mobile device)

Spacings

xxs: `${wp('1%')}px`, // 4px
xs: `${wp('2%')}px`, // 8px
sm: `${wp('4%')}px`, // 16px
md: `${wp('6%')}px`, // 24px
lg: `${wp('8%')}px`, // 32px
xl: `${wp('10%')}px`, // 40px
xxl: `${wp('12%')}px` // 48px 

Typo

contentFontBold: 'SourceSansPro-SemiBold',
contentFontRegular: 'SourceSansPro-Regular',
defaultFontWeight: 600,
lightFontWeight: 400,
capsLetterSpacing: '0.4px',
listTitleLetterSpacing: '0.11px',
smallFontSize: `${wp('3%')}px`, // 12px
defaultFontSize: `${wp('4%')}px`, // 16px
largeFontSize: `${wp('4.5%')}px`,  // 18px
headingFontSize: `${wp('5%')}px` // 20px

Icons

sm: `${wp('6%')}px` // 24px 
md: `${wp('7%')}px` // 28px 
lg: `${wp('8%')}px` // 32px 
xl: `${wp('9%')}px` // 36px 

Environment: - Linked issues: