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
#008dab
JS/JSON:
color.chart.palette.categorical.1.2
Sass:
$color-chart-palette-categorical-1-2
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-2
#005c7b
JS/JSON:
color.chart.palette.categorical.1.3
Sass:
$color-chart-palette-categorical-1-3
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-3
#002c3f
JS/JSON:
color.chart.palette.categorical.1.4
Sass:
$color-chart-palette-categorical-1-4
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-4
#e93c7a
JS/JSON:
color.chart.palette.categorical.1.5
Sass:
$color-chart-palette-categorical-1-5
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-5
#aa004a
JS/JSON:
color.chart.palette.categorical.1.6
Sass:
$color-chart-palette-categorical-1-6
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-6
#57002c
JS/JSON:
color.chart.palette.categorical.1.7
Sass:
$color-chart-palette-categorical-1-7
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-7
#6c5dbb
JS/JSON:
color.chart.palette.categorical.1.8
Sass:
$color-chart-palette-categorical-1-8
CSS-muuttuja:
--kds-color-chart-palette-categorical-1-8
#3a2e75
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
#008dab#005c7b#002c3f#e93c7a#aa004a#57002c#6c5dbb#3a2e75#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
#008dab
JS/JSON:
color.chart.palette.categorical.2.2
Sass:
$color-chart-palette-categorical-2-2
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-2
#005c7b
JS/JSON:
color.chart.palette.categorical.2.3
Sass:
$color-chart-palette-categorical-2-3
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-3
#002c3f
JS/JSON:
color.chart.palette.categorical.2.4
Sass:
$color-chart-palette-categorical-2-4
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-4
#8576c5
JS/JSON:
color.chart.palette.categorical.2.5
Sass:
$color-chart-palette-categorical-2-5
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-5
#5645a8
JS/JSON:
color.chart.palette.categorical.2.6
Sass:
$color-chart-palette-categorical-2-6
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-6
#292057
JS/JSON:
color.chart.palette.categorical.2.7
Sass:
$color-chart-palette-categorical-2-7
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-7
#437800
JS/JSON:
color.chart.palette.categorical.2.8
Sass:
$color-chart-palette-categorical-2-8
CSS-muuttuja:
--kds-color-chart-palette-categorical-2-8
#1b4200
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
#008dab#005c7b#002c3f#8576c5#5645a8#292057#437800#1b4200#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
#002c3f
JS/JSON:
color.chart.palette.divergent.neutral.2
Sass:
$color-chart-palette-divergent-neutral-2
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-2
#005c7b
JS/JSON:
color.chart.palette.divergent.neutral.3
Sass:
$color-chart-palette-divergent-neutral-3
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-3
#008dab
JS/JSON:
color.chart.palette.divergent.neutral.4
Sass:
$color-chart-palette-divergent-neutral-4
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-4
#6fcee2
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
#c2bce3
JS/JSON:
color.chart.palette.divergent.neutral.7
Sass:
$color-chart-palette-divergent-neutral-7
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-7
#8576c5
JS/JSON:
color.chart.palette.divergent.neutral.8
Sass:
$color-chart-palette-divergent-neutral-8
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-8
#5645a8
JS/JSON:
color.chart.palette.divergent.neutral.9
Sass:
$color-chart-palette-divergent-neutral-9
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-9
#292057
JS/JSON:
color.chart.palette.divergent.neutral.all
Sass:
$color-chart-palette-divergent-neutral-all
CSS-muuttuja:
--kds-color-chart-palette-divergent-neutral-all
#002c3f#005c7b#008dab#6fcee2#ffffff#c2bce3#8576c5#5645a8#292057
JS/JSON:
color.chart.palette.divergent.opposite.1
Sass:
$color-chart-palette-divergent-opposite-1
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-1
#002c3f
JS/JSON:
color.chart.palette.divergent.opposite.2
Sass:
$color-chart-palette-divergent-opposite-2
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-2
#005c7b
JS/JSON:
color.chart.palette.divergent.opposite.3
Sass:
$color-chart-palette-divergent-opposite-3
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-3
#008dab
JS/JSON:
color.chart.palette.divergent.opposite.4
Sass:
$color-chart-palette-divergent-opposite-4
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-4
#6fcee2
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
#fea9c0
JS/JSON:
color.chart.palette.divergent.opposite.7
Sass:
$color-chart-palette-divergent-opposite-7
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-7
#e93c7a
JS/JSON:
color.chart.palette.divergent.opposite.8
Sass:
$color-chart-palette-divergent-opposite-8
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-8
#aa004a
JS/JSON:
color.chart.palette.divergent.opposite.9
Sass:
$color-chart-palette-divergent-opposite-9
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-9
#57002c
JS/JSON:
color.chart.palette.divergent.opposite.all
Sass:
$color-chart-palette-divergent-opposite-all
CSS-muuttuja:
--kds-color-chart-palette-divergent-opposite-all
#002c3f#005c7b#008dab#6fcee2#ffffff#fea9c0#e93c7a#aa004a#57002c
JS/JSON:
color.chart.palette.likert.1
Sass:
$color-chart-palette-likert-1
CSS-muuttuja:
--kds-color-chart-palette-likert-1
#aa004a
JS/JSON:
color.chart.palette.likert.2
Sass:
$color-chart-palette-likert-2
CSS-muuttuja:
--kds-color-chart-palette-likert-2
#e93c7a
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
#008dab
JS/JSON:
color.chart.palette.likert.5
Sass:
$color-chart-palette-likert-5
CSS-muuttuja:
--kds-color-chart-palette-likert-5
#005c7b
JS/JSON:
color.chart.palette.likert.all
Sass:
$color-chart-palette-likert-all
CSS-muuttuja:
--kds-color-chart-palette-likert-all
#aa004a#e93c7a#818181#008dab#005c7b
JS/JSON:
color.chart.palette.sequential.1
Sass:
$color-chart-palette-sequential-1
CSS-muuttuja:
--kds-color-chart-palette-sequential-1
#6fcee2
JS/JSON:
color.chart.palette.sequential.2
Sass:
$color-chart-palette-sequential-2
CSS-muuttuja:
--kds-color-chart-palette-sequential-2
#008dab
JS/JSON:
color.chart.palette.sequential.3
Sass:
$color-chart-palette-sequential-3
CSS-muuttuja:
--kds-color-chart-palette-sequential-3
#005c7b
JS/JSON:
color.chart.palette.sequential.4
Sass:
$color-chart-palette-sequential-4
CSS-muuttuja:
--kds-color-chart-palette-sequential-4
#002c3f
JS/JSON:
color.chart.palette.sequential.all
Sass:
$color-chart-palette-sequential-all
CSS-muuttuja:
--kds-color-chart-palette-sequential-all
#6fcee2#008dab#005c7b#002c3f
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
#393939

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
Nunito, Arial, -apple-system, BlinkMacSystemFont, ...
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
Montserrat, Arial, -apple-system, BlinkMacSystemFo...
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