Design system

Material 3 · dark · volt _src/tokens.py

Design tokens

ref → sys → comp

md-refPalettes--md-ref-palette-primary91

md-sysRoles--md-sys-color-primary

md-compComponents--md-comp-filled-button-container-color

site/_src/tokens.pyChange a token
python3 site/_src/build.pyBuild → assets/css/tokens.css + this page
site.cssComponents use md-comp / md-sys only
ui.jsOwn components instead of native ones

Interaction states

md-sys-state

enabled0%

hover8%

focus10%

pressed12%

dragged16%

Color roles

md-sys-color · dark

primaryprimary91 · #CBF45EMain action, accent

on-primaryneutral4 · #08100DText on primary

primary-containerprimary22 · #2A3A00Selected

on-primary-containerprimary96 · #E3FF92Text on selected

secondarysecondary80 · #55D8E7Data, live

on-secondarysecondary20 · #00363CText on secondary

secondary-containersecondary22 · #003B41Information

on-secondary-containersecondary93 · #B3F6FFText on information

tertiarytertiary77 · #E9B65EAttention, demo

on-tertiaryneutral4 · #08100DText on tertiary

errorerror70 · #FF8A7AError

on-errorerror10 · #3C0800Text on error

error-containererror15 · #550000Error background

surfaceneutral4 · #08100DPage

surface-container-lowestneutral3 · #050D09Lowest

surface-container-lowneutral7 · #121715Panels, cards

surface-containerneutral11 · #1A1F1DBlocks in a panel

surface-container-highneutral15 · #222725Menus, selected

surface-container-highestneutral19 · #2A2F2DDialogs

on-surfaceneutral94 · #E9EFEDMain text

on-surface-variantneutral-variant65 · #94A19BSecondary text

outlineneutral-variant56 · #7D8983Captions, hover borders

outline-variantneutral-variant18 · #242E2ABorders

outline-faintneutral-variant12 · #17221DFaint dividers

chargecharge57 · #1396ABCharging

dischargedischarge62 · #7EA22EDischarging

Tonal palettes

md-ref-palette · tone = L*

primary#C9F25C

0461012152022253040506070809091959698100

secondary#57D9E8

04610121520222530405060708090939598100

tertiary#E7B45C

046101215202530405060707780909598100

error#FF8A7A

0461012152025304050607080909598100

neutral#121715

034671011121519202530405060708090949598100

neutral-variant#93A09A

0461012151820253040505660657080909598100

charge#1A99AE

046101215202530405057607080909598100

discharge#80A430

046101215202530405060627080909598100

Typography

Geologica · JetBrains Mono

Energy storage

Power at home when the grid is down

A hybrid inverter and a 51.2 V LiFePO₄ battery keep the home running for 8–12 hours. Installed in a day, 10-year warranty.

All-in-one · in stock

All-in-one 10 kWh ₴128,400

Capacity: 10,24 kWh
Power: 6 kW
Cycles: 6 000

display-large
sans · 700 · 46px–104px / .94

Energy

display-medium
sans · 700 · 40px–84px / .96

Backup 24/7

display-small
sans · 700 · 32px–62px / 1

Equipment catalogue

headline-large
sans · 700 · 28px–44px / 1.05

How it works

headline-medium
sans · 700 · 26px / 1.15

Your system

headline-small
sans · 600 · 22px / 1.25

Checked before delivery

title-large
sans · 600 · 19px / 1.3

8 hours of backup

title-medium
sans · 600 · 16px / 1.4

All-in-one 10 kWh

title-small
sans · 600 · 14px / 1.35

10-year warranty

body-large
sans · 300 · 17px / 1.6

Prices with VAT and stock.

body-medium
sans · 400 · 14.5px / 1.5

Hybrid inverter, 51.2 V battery.

body-small
sans · 400 · 13px / 1.5

Delivery across Ukraine in 2–5 days.

label-large
sans · 600 · 15px / 1

Find a system

label-medium
sans · 500 · 13.5px / 1.2

Largest capacity

label-small
sans · 500 · 11.5px / 1.3

Updated today

overline
mono · 500 · 11.5px / 1.2

IN STOCK · 12 PCS

mono-medium
mono · 500 · 13px / 1.4

51.2 V · 314 Ah

mono-small
mono · 400 · 11.5px / 1.35

00:00 · 06:00 · 12:00 · 18:00

number
mono · 500 · 28px / 1.1

₴128,400 · 15.36 kWh

number-small
mono · 600 · 20px / 1.15

8.4 h

Shape

md-sys-shape-corner

extra-small6

small10

medium12

large18

extra-large22

full∞

Elevation

md-sys-elevation

0surfacePage

1surface-container-lowPanel

2surface-container-highMenu

3surface-container-highestDialog

Motion

easing-standard.2,0,0,1

easing-emphasized-decelerate.05,.7,.1,1

easing-emphasized-accelerate.3,0,.8,.15

duration-short150 ms

duration-medium250 ms

duration-long450 ms

Filled button

.btn.btn--volt

Component token	Takes	Value
`--md-comp-filled-button-container-color`	`--md-sys-color-primary`	`primary91 · #CBF45E`
`--md-comp-filled-button-label-text-color`	`--md-sys-color-on-primary`	`neutral4 · #08100D`
`--md-comp-filled-button-container-height`	`54px`
`--md-comp-filled-button-container-height-small`	`42px`
`--md-comp-filled-button-container-shape-small`	`11px`
`--md-comp-filled-button-container-shape`	`14px`
`--md-comp-filled-button-label-text-font`	`--md-sys-typescale-label-large`

Outlined button

.btn.btn--ghost

Component token	Takes	Value
`--md-comp-outlined-button-outline-color`	`--md-sys-color-outline-variant`	`neutral-variant18 · #242E2A`
`--md-comp-outlined-button-hover-outline-color`	`--md-sys-color-on-surface-variant`	`neutral-variant65 · #94A19B`
`--md-comp-outlined-button-label-text-color`	`--md-sys-color-on-surface`	`neutral94 · #E9EFED`
`--md-comp-outlined-button-container-shape`	`14px`

Icon button

.icon-btn

Component token	Takes	Value
`--md-comp-icon-button-container-color`	`--md-sys-color-surface-container-high`	`neutral15 · #222725`
`--md-comp-icon-button-icon-color`	`--md-sys-color-on-surface`	`neutral94 · #E9EFED`
`--md-comp-icon-button-container-size`	`38px`
`--md-comp-icon-button-container-shape`	`11px`

Filter chip

.chip[aria-pressed]

Component token	Takes	Value
`--md-comp-filter-chip-outline-color`	`--md-sys-color-outline-variant`	`neutral-variant18 · #242E2A`
`--md-comp-filter-chip-label-text-color`	`--md-sys-color-on-surface-variant`	`neutral-variant65 · #94A19B`
`--md-comp-filter-chip-selected-container-color`	`--md-sys-color-primary`	`primary91 · #CBF45E`
`--md-comp-filter-chip-selected-label-text-color`	`--md-sys-color-on-primary`	`neutral4 · #08100D`
`--md-comp-filter-chip-container-height`	`36px`
`--md-comp-filter-chip-container-shape`	`--md-sys-shape-corner-full`

Segmented button

.seg

Component token	Takes	Value
`--md-comp-segmented-button-container-color`	`--md-sys-color-surface`	`neutral4 · #08100D`
`--md-comp-segmented-button-outline-color`	`--md-sys-color-outline-faint`	`neutral-variant12 · #17221D`
`--md-comp-segmented-button-selected-container-color`	`--md-sys-color-surface-container-high`	`neutral15 · #222725`
`--md-comp-segmented-button-selected-outline-color`	`--md-sys-color-primary`	`primary91 · #CBF45E`
`--md-comp-segmented-button-label-text-color`	`--md-sys-color-on-surface-variant`	`neutral-variant65 · #94A19B`
`--md-comp-segmented-button-container-shape`	`--md-sys-shape-corner-medium`

Text field

.input · .textarea

Name

Phone

Component token	Takes	Value
`--md-comp-text-field-container-color`	`--md-sys-color-surface`	`neutral4 · #08100D`
`--md-comp-text-field-outline-color`	`--md-sys-color-outline-variant`	`neutral-variant18 · #242E2A`
`--md-comp-text-field-focus-outline-color`	`--md-sys-color-primary`	`primary91 · #CBF45E`
`--md-comp-text-field-input-text-color`	`--md-sys-color-on-surface`	`neutral94 · #E9EFED`
`--md-comp-text-field-placeholder-color`	`--md-sys-color-outline`	`neutral-variant56 · #7D8983`
`--md-comp-text-field-container-height`	`48px`
`--md-comp-text-field-container-shape`	`--md-sys-shape-corner-medium`

Component token	Takes	Value
`--md-comp-menu-container-color`	`--md-sys-color-surface-container-high`	`neutral15 · #222725`
`--md-comp-menu-container-elevation`	`--md-sys-elevation-2`
`--md-comp-menu-container-shape`	`--md-sys-shape-corner-large`
`--md-comp-menu-item-height`	`44px`
`--md-comp-menu-item-shape`	`--md-sys-shape-corner-small`
`--md-comp-menu-selected-item-container-color`	`--md-sys-color-primary-container`	`primary22 · #2A3A00`
`--md-comp-menu-selected-item-label-text-color`	`--md-sys-color-on-primary-container`	`primary96 · #E3FF92`
`--md-comp-menu-item-label-text-font`	`--md-sys-typescale-label-medium`

Slider

input[type=range]

Component token	Takes	Value
`--md-comp-slider-active-track-color`	`--md-sys-color-primary`	`primary91 · #CBF45E`
`--md-comp-slider-inactive-track-color`	`--md-sys-color-outline-variant`	`neutral-variant18 · #242E2A`
`--md-comp-slider-handle-color`	`--md-sys-color-primary`	`primary91 · #CBF45E`
`--md-comp-slider-track-height`	`4px`
`--md-comp-slider-handle-size`	`18px`

Status

.stock · .badge · .demo · .pill

In stockPre-orderOut of stockLiFePO₄DEMOLive