Siirry sisältöön
Kela Design System KDS

16.1.0

Tiedon visualisointi

Design-muuttujat tiedon visualisointien yhtenäisen ulkoasun toteutukseen.

Tiedon visualisoinnin design-muuttujat ovat edelleen kehityksessä, joten niiden nimeäminen tai tiedostonimet saattavat vielä muuttua seuraavissa versioissa.

Lue lisää väreistä ja tyyleistä

Muuttujat

Värit

MuuttujaArvo
JS/JSON:
color.chart.axis.baseline
Sass:
$color-chart-axis-baseline
CSS-muuttuja:
--kds-color-chart-axis-baseline
#171717
JS/JSON:
color.chart.axis.strong
Sass:
$color-chart-axis-strong
CSS-muuttuja:
--kds-color-chart-axis-strong
#393939
JS/JSON:
color.chart.data.active
Sass:
$color-chart-data-active
CSS-muuttuja:
--kds-color-chart-data-active
#393939
JS/JSON:
color.chart.data.point
Sass:
$color-chart-data-point
CSS-muuttuja:
--kds-color-chart-data-point
#000000
JS/JSON:
color.chart.data.point-inverted
Sass:
$color-chart-data-point-inverted
CSS-muuttuja:
--kds-color-chart-data-point-inverted
#ffffff
JS/JSON:
color.chart.grid.line
Sass:
$color-chart-grid-line
CSS-muuttuja:
--kds-color-chart-grid-line
#e1e1e1
JS/JSON:
color.chart.ingress
Sass:
$color-chart-ingress
CSS-muuttuja:
--kds-color-chart-ingress
#171717
JS/JSON:
color.chart.label
Sass:
$color-chart-label
CSS-muuttuja:
--kds-color-chart-label
#6b6b6b
JS/JSON:
color.chart.legend
Sass:
$color-chart-legend
CSS-muuttuja:
--kds-color-chart-legend
#171717
JS/JSON:
color.chart.palette.categorical.1.1
Sass:
$color-chart-palette-categorical-1-1
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-1
#3b81de
JS/JSON:
color.chart.palette.categorical.1.2
Sass:
$color-chart-palette-categorical-1-2
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-2
#1652a6
JS/JSON:
color.chart.palette.categorical.1.3
Sass:
$color-chart-palette-categorical-1-3
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-3
#00265f
JS/JSON:
color.chart.palette.categorical.1.4
Sass:
$color-chart-palette-categorical-1-4
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-4
#f1316d
JS/JSON:
color.chart.palette.categorical.1.5
Sass:
$color-chart-palette-categorical-1-5
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-5
#ab0a2c
JS/JSON:
color.chart.palette.categorical.1.6
Sass:
$color-chart-palette-categorical-1-6
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-6
#590312
JS/JSON:
color.chart.palette.categorical.1.7
Sass:
$color-chart-palette-categorical-1-7
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-7
#87599d
JS/JSON:
color.chart.palette.categorical.1.8
Sass:
$color-chart-palette-categorical-1-8
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-8
#561e70
JS/JSON:
color.chart.palette.categorical.1.9
Sass:
$color-chart-palette-categorical-1-9
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-9
#818181
JS/JSON:
color.chart.palette.categorical.1.10
Sass:
$color-chart-palette-categorical-1-10
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-10
#000000
JS/JSON:
color.chart.palette.categorical.1.all
Sass:
$color-chart-palette-categorical-1-all
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-all
#3b81de#1652a6#00265f#f1316d#ab0a2c#590312#87599d#561e70#818181#000000
JS/JSON:
color.chart.palette.categorical.2.1
Sass:
$color-chart-palette-categorical-2-1
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-1
#3b81de
JS/JSON:
color.chart.palette.categorical.2.2
Sass:
$color-chart-palette-categorical-2-2
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-2
#1652a6
JS/JSON:
color.chart.palette.categorical.2.3
Sass:
$color-chart-palette-categorical-2-3
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-3
#00265f
JS/JSON:
color.chart.palette.categorical.2.4
Sass:
$color-chart-palette-categorical-2-4
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-4
#09953b
JS/JSON:
color.chart.palette.categorical.2.5
Sass:
$color-chart-palette-categorical-2-5
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-5
#046324
JS/JSON:
color.chart.palette.categorical.2.6
Sass:
$color-chart-palette-categorical-2-6
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-6
#01310e
JS/JSON:
color.chart.palette.categorical.2.7
Sass:
$color-chart-palette-categorical-2-7
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-7
#87599d
JS/JSON:
color.chart.palette.categorical.2.8
Sass:
$color-chart-palette-categorical-2-8
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-8
#561e70
JS/JSON:
color.chart.palette.categorical.2.9
Sass:
$color-chart-palette-categorical-2-9
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-9
#818181
JS/JSON:
color.chart.palette.categorical.2.10
Sass:
$color-chart-palette-categorical-2-10
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-10
#000000
JS/JSON:
color.chart.palette.categorical.2.all
Sass:
$color-chart-palette-categorical-2-all
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-all
#3b81de#1652a6#00265f#09953b#046324#01310e#87599d#561e70#818181#000000
JS/JSON:
color.chart.palette.divergent.neutral.1
Sass:
$color-chart-palette-divergent-neutral-1
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-1
#00265f
JS/JSON:
color.chart.palette.divergent.neutral.2
Sass:
$color-chart-palette-divergent-neutral-2
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-2
#1652a6
JS/JSON:
color.chart.palette.divergent.neutral.3
Sass:
$color-chart-palette-divergent-neutral-3
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-3
#3b81de
JS/JSON:
color.chart.palette.divergent.neutral.4
Sass:
$color-chart-palette-divergent-neutral-4
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-4
#97c4fc
JS/JSON:
color.chart.palette.divergent.neutral.5
Sass:
$color-chart-palette-divergent-neutral-5
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-5
#ffffff
JS/JSON:
color.chart.palette.divergent.neutral.6
Sass:
$color-chart-palette-divergent-neutral-6
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-6
#7fd29e
JS/JSON:
color.chart.palette.divergent.neutral.7
Sass:
$color-chart-palette-divergent-neutral-7
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-7
#09953b
JS/JSON:
color.chart.palette.divergent.neutral.8
Sass:
$color-chart-palette-divergent-neutral-8
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-8
#046324
JS/JSON:
color.chart.palette.divergent.neutral.9
Sass:
$color-chart-palette-divergent-neutral-9
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-9
#01310e
JS/JSON:
color.chart.palette.divergent.neutral.all
Sass:
$color-chart-palette-divergent-neutral-all
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-all
#00265f#1652a6#3b81de#97c4fc#ffffff#7fd29e#09953b#046324#01310e
JS/JSON:
color.chart.palette.divergent.opposite.1
Sass:
$color-chart-palette-divergent-opposite-1
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-1
#00265f
JS/JSON:
color.chart.palette.divergent.opposite.2
Sass:
$color-chart-palette-divergent-opposite-2
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-2
#1652a6
JS/JSON:
color.chart.palette.divergent.opposite.3
Sass:
$color-chart-palette-divergent-opposite-3
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-3
#3b81de
JS/JSON:
color.chart.palette.divergent.opposite.4
Sass:
$color-chart-palette-divergent-opposite-4
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-4
#97c4fc
JS/JSON:
color.chart.palette.divergent.opposite.5
Sass:
$color-chart-palette-divergent-opposite-5
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-5
#ffffff
JS/JSON:
color.chart.palette.divergent.opposite.6
Sass:
$color-chart-palette-divergent-opposite-6
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-6
#f9aac6
JS/JSON:
color.chart.palette.divergent.opposite.7
Sass:
$color-chart-palette-divergent-opposite-7
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-7
#f1316d
JS/JSON:
color.chart.palette.divergent.opposite.8
Sass:
$color-chart-palette-divergent-opposite-8
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-8
#ab0a2c
JS/JSON:
color.chart.palette.divergent.opposite.9
Sass:
$color-chart-palette-divergent-opposite-9
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-9
#590312
JS/JSON:
color.chart.palette.divergent.opposite.all
Sass:
$color-chart-palette-divergent-opposite-all
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-all
#00265f#1652a6#3b81de#97c4fc#ffffff#f9aac6#f1316d#ab0a2c#590312
JS/JSON:
color.chart.palette.likert.1
Sass:
$color-chart-palette-likert-1
CSS-muuttuja:
--kds-color-chart-palette-likert-1
#ab0a2c
JS/JSON:
color.chart.palette.likert.2
Sass:
$color-chart-palette-likert-2
CSS-muuttuja:
--kds-color-chart-palette-likert-2
#f1316d
JS/JSON:
color.chart.palette.likert.3
Sass:
$color-chart-palette-likert-3
CSS-muuttuja:
--kds-color-chart-palette-likert-3
#818181
JS/JSON:
color.chart.palette.likert.4
Sass:
$color-chart-palette-likert-4
CSS-muuttuja:
--kds-color-chart-palette-likert-4
#3b81de
JS/JSON:
color.chart.palette.likert.5
Sass:
$color-chart-palette-likert-5
CSS-muuttuja:
--kds-color-chart-palette-likert-5
#1652a6
JS/JSON:
color.chart.palette.likert.all
Sass:
$color-chart-palette-likert-all
CSS-muuttuja:
--kds-color-chart-palette-likert-all
#ab0a2c#f1316d#818181#3b81de#1652a6
JS/JSON:
color.chart.palette.sequential.1
Sass:
$color-chart-palette-sequential-1
CSS-muuttuja:
--kds-color-chart-palette-sequential-1
#97c4fc
JS/JSON:
color.chart.palette.sequential.2
Sass:
$color-chart-palette-sequential-2
CSS-muuttuja:
--kds-color-chart-palette-sequential-2
#3b81de
JS/JSON:
color.chart.palette.sequential.3
Sass:
$color-chart-palette-sequential-3
CSS-muuttuja:
--kds-color-chart-palette-sequential-3
#1652a6
JS/JSON:
color.chart.palette.sequential.4
Sass:
$color-chart-palette-sequential-4
CSS-muuttuja:
--kds-color-chart-palette-sequential-4
#00265f
JS/JSON:
color.chart.palette.sequential.all
Sass:
$color-chart-palette-sequential-all
CSS-muuttuja:
--kds-color-chart-palette-sequential-all
#97c4fc#3b81de#1652a6#00265f
JS/JSON:
color.chart.section.divider
Sass:
$color-chart-section-divider
CSS-muuttuja:
--kds-color-chart-section-divider
#ffffff
JS/JSON:
color.chart.title
Sass:
$color-chart-title
CSS-muuttuja:
--kds-color-chart-title
#171717

Viivat

MuuttujaArvo
JS/JSON:
border.chart.axis.baseline.style
Sass:
$border-chart-axis-baseline-style
CSS-muuttuja:
--kds-border-chart-axis-baseline-style
solid
JS/JSON:
border.chart.axis.baseline.width
Sass:
$border-chart-axis-baseline-width
CSS-muuttuja:
--kds-border-chart-axis-baseline-width
1px
JS/JSON:
border.chart.axis.strong.style
Sass:
$border-chart-axis-strong-style
CSS-muuttuja:
--kds-border-chart-axis-strong-style
solid
JS/JSON:
border.chart.axis.strong.width
Sass:
$border-chart-axis-strong-width
CSS-muuttuja:
--kds-border-chart-axis-strong-width
1px
JS/JSON:
border.chart.data.line.style
Sass:
$border-chart-data-line-style
CSS-muuttuja:
--kds-border-chart-data-line-style
solid
JS/JSON:
border.chart.data.line.width
Sass:
$border-chart-data-line-width
CSS-muuttuja:
--kds-border-chart-data-line-width
3px
JS/JSON:
border.chart.grid.line.style
Sass:
$border-chart-grid-line-style
CSS-muuttuja:
--kds-border-chart-grid-line-style
solid
JS/JSON:
border.chart.grid.line.width
Sass:
$border-chart-grid-line-width
CSS-muuttuja:
--kds-border-chart-grid-line-width
1px
JS/JSON:
border.chart.section.divider.style
Sass:
$border-chart-section-divider-style
CSS-muuttuja:
--kds-border-chart-section-divider-style
solid
JS/JSON:
border.chart.section.divider.width
Sass:
$border-chart-section-divider-width
CSS-muuttuja:
--kds-border-chart-section-divider-width
2px

Typografia

MuuttujaArvo
JS/JSON:
typography.chart.axis.label.font.size
Sass:
$typography-chart-axis-label-font-size
CSS-muuttuja:
--kds-typography-chart-axis-label-font-size
0.875rem
JS/JSON:
typography.chart.axis.label.font.weight
Sass:
$typography-chart-axis-label-font-weight
CSS-muuttuja:
--kds-typography-chart-axis-label-font-weight
400
JS/JSON:
typography.chart.axis.label.letter-spacing
Sass:
$typography-chart-axis-label-letter-spacing
CSS-muuttuja:
--kds-typography-chart-axis-label-letter-spacing
0
JS/JSON:
typography.chart.axis.label.line-height
Sass:
$typography-chart-axis-label-line-height
CSS-muuttuja:
--kds-typography-chart-axis-label-line-height
1.5
JS/JSON:
typography.chart.body.font.family
Sass:
$typography-chart-body-font-family
CSS-muuttuja:
--kds-typography-chart-body-font-family
Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI...
JS/JSON:
typography.chart.datapoint.font.size
Sass:
$typography-chart-datapoint-font-size
CSS-muuttuja:
--kds-typography-chart-datapoint-font-size
0.875rem
JS/JSON:
typography.chart.datapoint.font.weight
Sass:
$typography-chart-datapoint-font-weight
CSS-muuttuja:
--kds-typography-chart-datapoint-font-weight
400
JS/JSON:
typography.chart.datapoint.letter-spacing
Sass:
$typography-chart-datapoint-letter-spacing
CSS-muuttuja:
--kds-typography-chart-datapoint-letter-spacing
0
JS/JSON:
typography.chart.datapoint.line-height
Sass:
$typography-chart-datapoint-line-height
CSS-muuttuja:
--kds-typography-chart-datapoint-line-height
1.5
JS/JSON:
typography.chart.ingress.font.size
Sass:
$typography-chart-ingress-font-size
CSS-muuttuja:
--kds-typography-chart-ingress-font-size
1rem
JS/JSON:
typography.chart.ingress.font.weight
Sass:
$typography-chart-ingress-font-weight
CSS-muuttuja:
--kds-typography-chart-ingress-font-weight
400
JS/JSON:
typography.chart.ingress.letter-spacing
Sass:
$typography-chart-ingress-letter-spacing
CSS-muuttuja:
--kds-typography-chart-ingress-letter-spacing
0
JS/JSON:
typography.chart.ingress.line-height
Sass:
$typography-chart-ingress-line-height
CSS-muuttuja:
--kds-typography-chart-ingress-line-height
1.5
JS/JSON:
typography.chart.legend.font.size
Sass:
$typography-chart-legend-font-size
CSS-muuttuja:
--kds-typography-chart-legend-font-size
0.875rem
JS/JSON:
typography.chart.legend.font.weight
Sass:
$typography-chart-legend-font-weight
CSS-muuttuja:
--kds-typography-chart-legend-font-weight
400
JS/JSON:
typography.chart.legend.letter-spacing
Sass:
$typography-chart-legend-letter-spacing
CSS-muuttuja:
--kds-typography-chart-legend-letter-spacing
0
JS/JSON:
typography.chart.legend.line-height
Sass:
$typography-chart-legend-line-height
CSS-muuttuja:
--kds-typography-chart-legend-line-height
1.5
JS/JSON:
typography.chart.title.font.family
Sass:
$typography-chart-title-font-family
CSS-muuttuja:
--kds-typography-chart-title-font-family
'Noto Sans', -apple-system, BlinkMacSystemFont, 'S...
JS/JSON:
typography.chart.title.font.size
Sass:
$typography-chart-title-font-size
CSS-muuttuja:
--kds-typography-chart-title-font-size
1.375rem
JS/JSON:
typography.chart.title.font.weight
Sass:
$typography-chart-title-font-weight
CSS-muuttuja:
--kds-typography-chart-title-font-weight
600
JS/JSON:
typography.chart.title.letter-spacing
Sass:
$typography-chart-title-letter-spacing
CSS-muuttuja:
--kds-typography-chart-title-letter-spacing
-0.02em
JS/JSON:
typography.chart.title.line-height
Sass:
$typography-chart-title-line-height
CSS-muuttuja:
--kds-typography-chart-title-line-height
1.35