Design Tokens
All visual values in the CR4FT Design System are defined as tokens and synced automatically from Figma.
Tokens are available as:
- JSON —
tokens/tokens.json(Style Dictionary format, used by build tools) - CSS Custom Properties —
tokens/tokens.css(ready to import in any component)
Colors
color.mgrey
400#bfbfbf
600#808080
700#737373
color.overlays
app-overlay#00000066
brand.migros
black#000000
brand.denner-red
denner-red#ff0000
overlays.web
web#747474a8
overlays.app
app#00000066
none.key
color-&-opacity#ffffff00
none.ambient
color-&-opacity#ffffff00
low.key
color-&-opacity#3333330f
low.ambient
color-&-opacity#3333331a
medium.key
color-&-opacity#3333330f
medium.ambient
color-&-opacity#3333331a
high.key
color-&-opacity#33333314
high.ambient
color-&-opacity#3333331f
highest.key
color-&-opacity#33333314
highest.ambient
color-&-opacity#33333324
✅-morange.100
100#ffeadb
✅-morange.200
200#ffddc7
✅-morange.300
300#ffd1b3
✅-morange.400
400#ffb380
✅-morange.500
500#ff944c
✅-morange.600
600#ff6600
✅-morange.700
700#e55c00
✅-morange.800
800#b24800
✅-morange.900
900#803300
✅-morange.transparent-1
transparent-1#ff66001a
✅-morange.transparent-2
transparent-2#ff6600bf
✅-mgrey.100
100#f0f0f0
✅-mgrey.200
200#e3e3e3
✅-mgrey.300
300#d9d9d9
✅-mgrey.400
400#bfbfbf
✅-mgrey.500
500#a6a6a6
✅-mgrey.600
600#808080
✅-mgrey.700
700#737373
✅-mgrey.800
800#595959
✅-mgrey.900
900#404040
✅-mgrey.transparent-1
transparent-1#8080801a
✅-mgrey.transparent-2
transparent-2#808080bf
✅-myellow.100
100#fff3d6
✅-myellow.200
200#ffedc2
✅-myellow.300
300#ffe8b2
✅-myellow.400
400#ffd980
✅-myellow.500
500#ffc233
✅-myellow.600
600#e5a100
✅-myellow.700
700#cc8f00
✅-myellow.800
800#b27d00
✅-myellow.900
900#805a00
✅-myellow.transparent-1
transparent-1#ffc2331a
✅-myellow.transparent-2
transparent-2#ffc233bf
✅-mred.100
100#ffe1db
✅-mred.200
200#fdd0c8
✅-mred.300
300#febfb4
✅-mred.400
400#fc9683
✅-mred.500
500#fa5738
✅-mred.600
600#e02905
✅-mred.700
700#c82404
✅-mred.800
800#ae1f04
✅-mred.900
900#7d1703
✅-mred.transparent-1
transparent-1#e029051a
✅-mred.transparent-2
transparent-2#e02905bf
✅-mgreen.100
100#e6f3e2
✅-mgreen.200
200#d8eed3
✅-mgreen.300
300#ceeac8
✅-mgreen.400
400#addca2
✅-mgreen.500
500#7cc76b
✅-mgreen.600
600#52a63f
✅-mgreen.700
700#499438
✅-mgreen.800
800#408131
✅-mgreen.900
900#2e5c23
✅-mgreen.transparent-1
transparent-1#52a63f1a
✅-mgreen.transparent-2
transparent-2#52a63fbf
✅-mblue.100
100#ddf3fd
✅-mblue.200
200#caebfc
✅-mblue.300
300#b7e5fa
✅-mblue.400
400#87d2f7
✅-mblue.500
500#57c1f4
✅-mblue.600
600#0fa6f0
✅-mblue.700
700#0e95d8
✅-mblue.800
800#0b74a8
✅-mblue.900
900#085378
✅-mblue.transparent-1
transparent-1#0fa6f01a
✅-mblue.transparent-2
transparent-2#0fa6f0bf
✅-neutrals.mblack
mblack#333333
✅-neutrals.mwhite
mwhite#ffffff
✅-neutrals.mtransparent
mtransparent#ffffff00
⏱️-cumulus.100
100#e3f2fd
⏱️-cumulus.200
200#b8dbf1
⏱️-cumulus.300
300#90caf9
⏱️-cumulus.400
400#88c2e9
⏱️-cumulus.500
500#42a5f5
⏱️-cumulus.600
600#003d8d
⏱️-cumulus.700
700#002e6b
⏱️-cumulus.800
800#001f4a
⏱️-cumulus.900
900#001233
⏱️-cumulus.transparent-1
transparent-1#003d8d1a
⏱️-cumulus.transparent-2
transparent-2#003d8dbf
⏱️-denner.100
100#ffe5e5
⏱️-denner.200
200#ffb8b8
⏱️-denner.300
300#ff8a8a
⏱️-denner.400
400#ff5c5c
⏱️-denner.500
500#ff2e2e
⏱️-denner.600
600#ff0000
⏱️-denner.700
700#cc0000
⏱️-denner.800
800#990000
⏱️-denner.900
900#660000
⏱️-denner.transparent-1
transparent-1#ff00001a
⏱️-denner.transparent-2
transparent-2#ff0000bf
⏱️-other.preissturzyellow
preissturzyellow#ffde00
⏱️-other.wek-purple
wek-purple#541c4b
Sizing Scale
0 — 0px
1 — 4px
2 — 8px
3 — 16px
4 — 24px
5 — 32px
6 — 40px
7 — 48px
8 — 56px
9 — 64px
10 — 72px
11 — 80px
12 — 88px
13 — 96px
14 — 104px
15 — 112px
16 — 120px
17 — 128px
disabled.default — 60px
navigation-bar.regular.size — 17px
navigation-bar.regular.line-height — 24px
navigation-bar.bold.size — 17px
navigation-bar.bold.line-height — 24px
inset.none — 0px
inset.sm — 0px
inset.md — 0px
inset.lg — 0px
inset.xl — 0px
stack.xs — 0px
stack.sm — 0px
stack.md — 0px
stack.lg — 0px
stack.xl — 0px
page.margin — 0px
page.gutter — 0px
page.section — 0px
full — 9999px
none.key.offset-x — 0px
none.key.offset-y — 0px
none.key.blur — 0px
none.key.spread — 0px
none.ambient.offset-x — 0px
none.ambient.offset-y — 0px
none.ambient.blur — 0px
none.ambient.spread — 0px
low.key.offset-x — 0px
low.key.offset-y — 1px
low.key.blur — 2px
low.key.spread — 0px
low.ambient.offset-x — 0px
low.ambient.offset-y — 1px
low.ambient.blur — 3px
low.ambient.spread — 0px
medium.key.offset-x — 0px
medium.key.offset-y — 2px
medium.key.blur — 4px
medium.key.spread — -1px
medium.ambient.offset-x — 0px
medium.ambient.offset-y — 4px
medium.ambient.blur — 12px
medium.ambient.spread — -2px
high.key.offset-x — 0px
high.key.offset-y — 4px
high.key.blur — 8px
high.key.spread — -2px
high.ambient.offset-x — 0px
high.ambient.offset-y — 12px
high.ambient.blur — 28px
high.ambient.spread — -4px
highest.key.offset-x — 0px
highest.key.offset-y — 8px
highest.key.blur — 16px
highest.key.spread — -4px
highest.ambient.offset-x — 0px
highest.ambient.offset-y — 20px
highest.ambient.blur — 48px
highest.ambient.spread — -8px
0,25 — 2px
0,5 — 4px
3-(default) — 16px
font-weight.regular — 400px
font-weight.medium — 500px
font-weight.bold — 700px
font-weight.xbold — 800px
font-size.10 — 10px
font-size.12 — 12px
font-size.14 — 14px
font-size.16 — 16px
font-size.18 — 18px
font-size.20 — 20px
font-size.24 — 24px
font-size.28 — 28px
font-size.32 — 32px
font-size.40 — 40px
font-size.48 — 48px
Using Tokens in Code
Import the CSS file in your component's SCSS:
scss
// In your global styles or component SCSS
@use 'tokens/tokens.css';
.my-component {
background: var(--cr4ft-color-primary-main); /* #ff6600 */
border-radius: var(--cr4ft-radius-md);
padding: var(--cr4ft-spacing-md);
}Or reference the JSON in TypeScript:
typescript
import tokens from 'tokens/tokens.json';
const primaryColor = tokens.color.primary.main.value; // "#ff6600"