Migros Bank

Border Radius / mdx / sys / borderRadius
0px
0px
none
default
6px
6px
sm
default
8px
8px
default
default
16px
16px
md
24px
24px
lg
32px
32px
xl
4px
4px
xs
Border Width / mdx / sys / borderWidth
0px
none
1px
default
1.5px
md
2px
lg
3px
xl
4px
2xl
fullyTransparent
rgba(0,0,0,0)
fullyTransparent
rgba(0,0,0,0)
default
#144b3c
onDefault
#ffffff
subtle1
#eff2f1
subtle2
#dce4e2
subtle3
#c4d2ce
subtle4
#92a59e
subtle5
#5a8176
onSubtle
#144b3c
bold1
#103c32
bold2
#0d3228
bold3
#07281e
onBold
#ffffff
default
#333333
onDefault
#ffffff
subtle0
#ffffff
subtle1
#f5f5f5
subtle2
#ededed
subtle3
#e0e0e0
subtle4
#cccccc
onSubtle
#333333
bold1
#999999
bold2
#666666
bold3
#333333
bold4
#333333
bold5
#000000
onBold
#ffffff
default
#14873c
onDefault
#ffffff
subtle1
#eff7f1
subtle2
#d9ece0
subtle3
#c4e1ce
onSubtle
#005a1f
bold1
#005a1f
onBold
#ffffff
default
#c70517
onDefault
#ffffff
subtle2
#fbebec
subtle1
#fceeef
subtle3
#f6d7da
onSubtle
#6b000a
bold1
#6b000a
onBold
#ffffff
onDefault
#ffffff
default
#ee750c
subtle1
#fff7f0
subtle3
#fbddc2
subtle2
#fce9d8
onSubtle
#803300
bold1
#803300
onBold
#ffffff
scrim
rgba(51,51,51,0.5)
default
#4f1c68
onDefault
#ffffff
subtle1
#f3eff4
subtle2
#e5dde8
subtle3
#d3c6d9
subtle4
#b099bb
subtle5
#846095
onSubtle
#2b1038
bold1
#2b1038
onBold
#ffffff
default
#d9007e
onDefault
#ffffff
subtle1
#d9007e
onSubtle
#6b0f3c
bold1
#ae0065
onBold
#ffffff
default
#6b7a6c
onDefault
#ffffff
subtle5
#6b7a6c
onSubtle
#ffffff
Font Weight / mdx / sys / font / weight
Ag
Regular
none
Ag
Regular
emphasisLight
Ag
Medium
emphasis
Ag
Bold
emphasisStrong
mdx / sys / color / neutral / gradient / vertical
Linear Gradient, #ffffff, 0.00%, #ffffff00, 100.00%)
subtle0ToTransparent
Line Height / mdx / sys / font / lineHeight
100%
100%
100percent
Sizing / mdx / sys / sizing / flex
360px
360px
screenWidthDefault
640px
640px
breakpoint
0px
0px
bodyMargin
0px
0px
paneGap
100%
100%
auto
Sizing / mdx / sys / sizing / flex / small
360px
360px
screenWidthDefault
640px
640px
breakpoint
100%
100%
auto
width sizes to content [hug contents] on anything larger than mobile. Mobile will be displayed at 100%/100vw/100vh.
Sizing / mdx / sys / sizing / flex / medium
720px
720px
screenWidthDefault
768px
768px
breakpoint
0px
0px
auto
width sizes to content [hug contents] on anything larger than mobile. Mobile will be displayed at 100%/100vw/100vh
Sizing / mdx / sys / sizing / flex / large
1024px
1024px
screenWidthDefault
1024px
1024px
breakpoint
0px
0px
auto
width sizes to content [hug contents] on anything larger than mobile. Mobile will be displayed at 100%/100vw/100vh
Sizing / mdx / sys / sizing / flex / xlarge
1280px
1280px
screenWidthDefault
1280px
1280px
breakpoint
0px
0px
auto
width sizes to content [hug contents] on anything larger than mobile. Mobile will be displayed at 100%/100vw/100vh
Sizing / mdx / sys / sizing / flex / 2xlarge
1920px
1920px
screenWidthDefault
1536px
1536px
breakpoint
0px
0px
auto
width sizes to content [hug contents] on anything larger than mobile. Mobile will be displayed at 100%/100vw/100vh
Sizing / mdx / sys / sizing / fix
0px
0px
auto
100%
100%
fullWidth
4px
4px
2xs
fix 3xs
8px
8px
xs
fix 2xs
12px
12px
s
fix xs
16px
16px
m
fix s
20px
20px
l
fix s
24px
24px
xl
fix m
32px
32px
2xl
fix l
40px
40px
3xl
fix xl
48px
48px
4xl
fix 4xl
56px
56px
5xl
fix 5xl
64px
64px
6xl
fix 6xl
72px
72px
7xl
fix 7xl
80px
80px
8xl
fix 8xl
88px
88px
9xl
fix 9xl
96px
96px
10xl
fix 10xl
104px
104px
11xl
fix 11xl
112px
112px
12xl
fix 12xl
120px
120px
13xl
fix 13xl
128px
128px
14xl
fix 14xl
136px
136px
15xl
fix 15xl
144px
144px
16xl
fix 16xl
152px
152px
17xl
fix 17xl
160px
160px
18xl
fix 18xl
168px
168px
19xl
fix 19xl
176px
176px
20xl
fix 20xl
184px
184px
21xl
fix 21xl
192px
192px
22xl
fix 22xl
200px
200px
23xl
fix 23xl
208px
208px
24xl
fix 24xl
216px
216px
25xl
fix 25xl
224px
224px
26xl
fix 26xl
232px
232px
27xl
fix 27xl
240px
240px
28xl
fix 28xl
248px
248px
29xl
fix 29xl
256px
256px
30xl
fix 30xl
264px
264px
31xl
fix 31xl
272px
272px
32xl
fix 32xl
280px
280px
33xl
fix 33xl
288px
288px
34xl
fix 34xl
296px
296px
35xl
fix 35xl
304px
304px
36xl
fix 36xl
312px
312px
37xl
fix 37xl
320px
320px
38xl
fix 38xl
328px
328px
39xl
fix 39xl
336px
336px
40xl
fix 40xl
344px
344px
41xl
fix 41xl
352px
352px
42xl
fix 42xl
360px
360px
43xl
fix 43xl
368px
368px
44xl
fix 44xl
640px
640px
78xl
Spacing / mdx / sys / spacing / flex
8px
8px
2xs
flex 2xs
16px
16px
xs
flex xs
24px
24px
s
flex s
32px
32px
m
flex m
48px
48px
l
flex l
56px
56px
xl
flex xl
80px
80px
2xl
flex 2xl
Spacing / mdx / sys / spacing / flex / small
8px
8px
2xs
flex 2xs
16px
16px
xs
flex xs
24px
24px
s
flex s
32px
32px
m
flex m
48px
48px
l
flex l
56px
56px
xl
flex xl
80px
80px
2xl
flex 2xl
Spacing / mdx / sys / spacing / flex / medium
16px
16px
2xs
flex 2xs
24px
24px
xs
flex xs
32px
32px
s
flex s
48px
48px
m
flex m
56px
56px
l
flex l
80px
80px
xl
flex xl
96px
96px
2xl
flex 2xl
Spacing / mdx / sys / spacing / flex / large
16px
16px
2xs
flex 2xs
24px
24px
xs
flex xs
32px
32px
s
flex s
56px
56px
m
flex m
80px
80px
l
flex l
96px
96px
xl
flex xl
128px
128px
2xl
flex 2xl
Spacing / mdx / sys / spacing / flex / xlarge
16px
16px
2xs
flex 2xs
24px
24px
xs
flex xs
32px
32px
s
flex s
56px
56px
m
flex m
80px
80px
l
flex l
96px
96px
xl
flex xl
128px
128px
2xl
flex 2xl
Spacing / mdx / sys / spacing / flex / 2xlarge
16px
16px
2xs
flex 2xs
24px
24px
xs
flex xs
32px
32px
s
flex s
56px
56px
m
flex m
80px
80px
l
flex l
96px
96px
xl
flex xl
128px
128px
2xl
flex 2xl
Spacing / mdx / sys / spacing / fix
0px
0px
none
fix 3xs
2px
2px
4xs
fix 4xs
4px
4px
3xs
fix 3xs
8px
8px
2xs
fix 2xs
12px
12px
xs
fix xs
16px
16px
s
fix s
24px
24px
m
fix m
32px
32px
l
fix l
40px
40px
xl
fix xl
48px
48px
2xl
fix 2xl
56px
56px
3xl
fix 3xl
mdx / sys / font / case
Hello world
lowercase
lowercase
Hello world
capitalize
capitalize
Hello world
none
none
Hello world
uppercase
uppercase
mdx / sys / font / decoration
Hello
Underline
default
Hello
None
none
Hello
Strikethrough
line-through
mdx / sys / font / flex
Ag
Helvetica Now Text, Helvetica Fallback Regular 16px/22px
custom6
Custom 6
Ag
Helvetica Now Text, Helvetica Fallback Regular 16px/22px
custom7
Custom 7
Ag
Helvetica Now Text, Helvetica Fallback Regular 16px/22px
custom8
Custom 8
Ag
Helvetica Now Text, Helvetica Fallback Regular 16px/22px
custom9
Custom 9
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Light 60px/120%
display1
Display 1
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Light 52px/130%
display2
Display 2
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Light 52px/130%
display3
Display 3
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Light 44px/130%
headline1
Headline 1
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Light 32px/130%
headline2
Headline 2
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Light 24px/130%
headline3
Headline 3
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 18px/150%
body1
Body 1
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 16px/150%
body2
Body 2
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 14px/150%
body3
Body 3
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 16px/22px
custom1
custom1
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 16px/22px
custom2
custom2
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 16px/22px
custom3
custom3
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 16px/22px
custom4
custom4
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 16px/22px
custom5
custom5
mdx / sys / font / fix
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Light 28px/140%
title1
Title 1
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Medium 28px/140%
title1_medium
Title 1
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Light 24px/140%
title2
Title 2
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Medium 24px/140%
title2_medium
Title 2
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Light 20px/140%
title3
Title 3
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Medium 20px/140%
title3_medium
Title 3
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 18px/150%
body1
Body 1
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Medium 18px/150%
body1_medium
Body 1
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Bold 18px/150%
body1_bold
Body 1
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 16px/150%
body2
Body 2
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Medium 16px/150%
body2_medium
Body 2
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Bold 16px/150%
body2_bold
Body 2
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 14px/150%
body3
Body 3
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Medium 14px/150%
body3_medium
Body 3
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Bold 14px/150%
body3_bold
Body 3
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 12px/140%
label1
Label 1
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Medium 12px/140%
label1_medium
Label 1
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Regular 10px/140%
label2
Label 2
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Medium 10px/140%
label2_medium
Label 2
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Medium 12px/16px
label3
Label 3
Ag
Migrosbank Kievit, Migrosbank Kievit Fallback Medium 10px/12px
label4
Label 4
mdx / sys / shadow
0 0 6px 0 rgba(51,51,51,0.1)
mdx / sys / shadow / default
0 0 12px 0 rgba(0,0,0,0.2)
mdx / sys / shadow / elevated
0 0 12px 0 rgba(0,0,0,0.3)
mdx / sys / shadow / top
inset 0 0 0 0 rgb(0,0,0)
mdx / sys / shadow / none

© 2025 MDX. Page last updated on Aug 25, 2025, 11:42