Basics

Die Basics bilden die grundlegenden Designelemente und -prinzipien, die die visuellen und funktionalen Standards für Ihr Designsystem setzen. Sie legen die wichtigsten Regeln und Richtlinien fest, an die sich alle Controls und Components halten sollten.

Zum Beispiel gehört Typografie (Schriftarten, -größen und -abstände), Farbschemas (Primär- und Sekundärfarben sowie Text- und Hintergrundfarben) und Layoutprinzipien (Grid und Spacing). Diese Elemente sorgen für ein einheitliches Erscheinungsbild im gesamten Gestaltungssystem.

Typography

Title

h1 - Heading 1

h2 - Heading 2

h3 - Heading 3

h4 - Heading 4

h5 - Heading 5

h6 - Heading 6

Body default

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga voluptas hic consectetur repellendus necessitatibus quis autem eaque. Vero sunt quibusdam eaque maiores ab mollitia necessitatibus quisquam minus, iste beatae provident tempore quaerat ad aliquam ut numquam aut placeat. Suscipit deleniti, ab ratione facere eos harum illum hic vitae quas cum?

Body small bold

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga voluptas hic consectetur repellendus necessitatibus quis autem eaque. Vero sunt quibusdam eaque maiores ab mollitia necessitatibus quisquam minus, iste beatae provident tempore quaerat ad aliquam ut numquam aut placeat. Suscipit deleniti, ab ratione facere eos harum illum hic vitae quas cum?

Body small

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga voluptas hic consectetur repellendus necessitatibus quis autem eaque. Vero sunt quibusdam eaque maiores ab mollitia necessitatibus quisquam minus, iste beatae provident tempore quaerat ad aliquam ut numquam aut placeat. Suscipit deleniti, ab ratione facere eos harum illum hic vitae quas cum?

Body extra small bold

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga voluptas hic consectetur repellendus necessitatibus quis autem eaque. Vero sunt quibusdam eaque maiores ab mollitia necessitatibus quisquam minus, iste beatae provident tempore quaerat ad aliquam ut numquam aut placeat. Suscipit deleniti, ab ratione facere eos harum illum hic vitae quas cum?

Body extra small

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga voluptas hic consectetur repellendus necessitatibus quis autem eaque. Vero sunt quibusdam eaque maiores ab mollitia necessitatibus quisquam minus, iste beatae provident tempore quaerat ad aliquam ut numquam aut placeat. Suscipit deleniti, ab ratione facere eos harum illum hic vitae quas cum?

Colors

Primär

Graustufen

Farben

Message

Verläufe

Borders

Border

Border Radius

Shadows

Icons

tk-icon-access-time
tk-icon-add-shopping-cart
tk-icon-add
tk-icon-arrow-back
tk-icon-arrow-downward
tk-icon-arrow-forward
tk-icon-arrow-upward
tk-icon-assignment
tk-icon-basket
tk-icon-bolt
tk-icon-box
tk-icon-build
tk-icon-calendar
tk-icon-call
tk-icon-camera
tk-icon-cart
tk-icon-check
tk-icon-chevron-left
tk-icon-chevron-right
tk-icon-comment
tk-icon-content-cut
tk-icon-content-paste
tk-icon-cross
tk-icon-dashboard_customize
tk-icon-document-pdf
tk-icon-edit
tk-icon-email
tk-icon-error
tk-icon-expand-less
tk-icon-expand-more
tk-icon-file-kanban
tk-icon-file-upload
tk-icon-file-xls
tk-icon-filter
tk-icon-fire-extinguisher
tk-icon-first-page
tk-icon-grid
tk-icon-group-add
tk-icon-history
tk-icon-inbox
tk-icon-inclination
tk-icon-info
tk-icon-inventory
tk-icon-keyboard-backspace
tk-icon-keyboard-escape
tk-icon-keyboard-return
tk-icon-keyboard-tab
tk-icon-last-page
tk-icon-list
tk-icon-local-offer
tk-icon-login
tk-icon-menu
tk-icon-minimize
tk-icon-more
tk-icon-not-disturb
tk-icon-percent
tk-icon-person
tk-icon-question-mark
tk-icon-remove
tk-icon-save
tk-icon-screw
tk-icon-search
tk-icon-shopping-bag
tk-icon-short-text
tk-icon-sort
tk-icon-star-filled
tk-icon-star
tk-icon-success
tk-icon-sync
tk-icon-tile
tk-icon-timelapse
tk-icon-topseller
tk-icon-trash
tk-icon-tune
tk-icon-undo
tk-icon-update
tk-icon-user-circle
tk-icon-verified
tk-icon-view-carousel
tk-icon-visibility-off
tk-icon-visibility
tk-icon-warning

Grid

Spacer

Die $spacer-size-list oder in diesem Context $size bildet das 4pt Grid System dar.

`$size`	Wert
`$size` 0	Wert 0
`$size` 1	Wert 4px
`$size` 2	Wert 8px
`$size` 3	Wert 12px
`$size` ...	Wert ...

.spacer-[boundary][side]-$size

Boundary	Property
`Boundary` `m`	Property `margin`
`Boundary` `p`	Property `padding`

Sides	Property
`Sides` `t`	Property `[boundary]-top`
`Sides` `r`	Property `[boundary]-right`
`Sides` `b`	Property `[boundary]-bottom`
`Sides` `l`	Property `[boundary]-left`
`Sides` `v`	Property `[boundary]-block`
`Sides` `h`	Property `[boundary]-inline`

Grid