Energy cell · Type 8
160 Wh/kg, validated.
The reference cell from the Uppsala Pilot Plant. Optimized for energy density, automotive low-voltage, EU bill of materials.
Components
Component library
Twelve components composed entirely from the foundations. Buttons, inputs, cards, tables, navigation, alerts. Each carries its tokens — copy and ship.
Interface specimens demonstrate the visual system. Product data is illustrative; the download-list example links to the actual brand files.
01 · Buttons
Buttons
Four roles — Primary, Secondary, Ghost, Accent. Use Primary at most once per view; Accent for promotional CTAs only.
!
Rule. Primary leads. Never two primary buttons in the same view — pair Primary with Secondary or Ghost.
02 · Inputs & forms
Inputs & forms
Single height, single border, no radius. Labels above, helper below. Focus is graphite — full-strength border, no glow.
Order IDs are 8 characters — check the confirmation email.
64%
03 · Badges, tags, status
Badges & tags
Status badges carry one of the four signal colours. Tags are neutral; chips use Axia. Never a gradient, never a shadow.
Neutral
Validated
Attention
Rejected
Active
Sodium-ion ×
Energy cell ×
Automotive ×
EU-made ×
available
selected
active
inactive
04 · Cards
Cards
Single-rule containers, never floating. Padding is the spacing scale. Stat cards stack on a single grid baseline.
Energy density
160 Wh/kg
▲ +12% vs prior gen
Cycle life
4,000+
▲ third-party verified
Pipeline · 2027
10M cells
05 · Alerts & callouts
Alerts
Three-pixel left rule, no fill, ground stays paper. The signal colour belongs to the rule and the icon — nothing else.
i
Heads up. Choose a file from the asset library to download it.
✓
Validated. Energy density figure is third-party verified at 25°C ambient.
!
Caution. Below −20°C, expect a 6–8% capacity drop. Plan thermal management accordingly.
✕
Restricted. Performance figures past 65°C are out of operating envelope and should not be quoted externally.
06 · Tables
Data tables
Mono headers, sans body. Rules between rows, never between cells. Numbers right-aligned in Axia. Hover is paper.
| Cell | Form factor | Energy · Wh/kg | C-rate | Operating · °C | Status |
|---|---|---|---|---|---|
| Type 8 · Energy | Pouch · 21Ah | 160 | 3C | −40 / +65 | Validated |
| Type 6 · Power | Cylindrical · 18650 | 130 | 16C | −30 / +60 | Validated |
| Type 4 · Grid | Prismatic · 80Ah | 145 | 2C | −20 / +55 | Active |
| Type 12 · Auxiliary | Pouch · 8Ah | 120 | 10C | −40 / +65 | Attention |
| Reference module | 48V · 14s | 155 | 5C | −40 / +65 | Validated |
08 · People & identity
Avatars
Square, two-letter monogram, Axia Black. No photographic avatars in product UI; reserve photography for editorial.
RA
RH
JS
EK
RA
RH
09 · Downloads
Asset library
Wordmark, datasheets, type kit. Anything you ship externally should come from here, not from a slack DM.
| Asset | Format | |
|---|---|---|
| Altris wordmark · graphite | SVG | Download ↓ |
| Altris wordmark · white | SVG | Download ↓ |
| Design tokens | CSS | Download ↓ |
10 · Interaction states
Interaction states
Every interactive component answers all six states. No glows, no shadows — state is carried by border, fill, and opacity only.
| State | Button | Input / Select | Checkbox / Radio / Toggle | Link |
|---|---|---|---|---|
| Default | Graphite fill, white text | 1px rule border | 1px rule-bold outline | Underline, ink |
| Hover | Fill deepens one step | — | — | Ink → deep-90 |
| Focus | 2px graphite outline, 2px offset | Border → graphite, no glow | 2px graphite outline | 2px graphite outline |
| Active / checked | Same as hover | Border → graphite | Graphite fill | — |
| Disabled | 40% opacity, no pointer | Paper fill, faint ink | 40% opacity | Faint ink, no underline |
| Loading | .loading — label hidden, 14px spinner | — | — | — |
i
Errors. Validation uses
.field.error — border and helper text turn --s-error. Never color the label or the value text.