Appearance
Philosophy
Systema and Material Design 3's dynamic color system both build on the HCT color space, but they operate at fundamentally different levels of abstraction.
Material Design 3 prescribes a rigid, opinionated mapping: one seed color produces a fixed set of tonal palettes with predefined roles (primary, secondary, tertiary, error, neutral). The designer gets consistency but within strict guardrails — the system decides which tones pair with which surfaces, how contrast is distributed, and what the palette looks like. Customization is limited to choosing a seed and toggling a few flags.
Systema takes the opposite approach. It exposes the underlying mechanics — contrast ratios, chroma factors, tone direction, level patterns — and lets you build your own structural model from scratch. Instead of "primary container" you define what a container is in your system: how many depth levels it has, what contrast pattern it follows, which colors it uses, and how it behaves across modes and states.
Key differences:
| Tailwind CSS | Material Design 3 | Systema | |
|---|---|---|---|
| Abstraction | None — manual hex values in fixed scale | High — predefined roles and mappings | Low — you define the structure |
| Seed input | Hand-picked palette per shade (50-950) | One color → full palette | Multiple colors × gradient points |
| Contrast control | None — no contrast awareness | System-assigned | Per-entity, per-level, with real WCAG readout |
| Perceptual uniformity | No — RGB-based, uneven lightness steps | Yes — HCT tonal palette | Yes — HCT with configurable tone curves |
| Modes | None (manual dark: variant) | Light/Dark | Arbitrary with direction, seed, contrast/chroma factors |
| States | None — handled in CSS utilities | Material state layers | First-class with events: idle, hovered, pressed, released, focused, disabled, dragged |
| Inversions | None | Not generated | Full inv-content and inv-containers for every level |
| Output | CSS custom properties | Material tokens | Figma variables with multi-mode values |
| Creative freedom | High but manual | Low — the system decides | High — you decide, the system computes |
Systema uses Material's perceptual color science (HCT, Contrast.ratioOfTones, Contrast.lighterUnsafe/darkerUnsafe) as a foundation but removes the opinionated layer on top. The result is a tool for designers who want mathematical rigor without giving up creative control.