Zetta v0.10

Components · Data display

Chart

Zetta does not ship a charting component — it ships the palette a chart should use: a five-colour categorical ramp plus a gridline colour. Bring your own chart library and map its series to these tokens so visualisations stay on-brand and reskin with the theme.

Preview

The ramp on a sample plot across the three themes. Note it collapses to greys in Accessibility — colour is never the only signal.

Light
chart-1
chart-2
chart-3
chart-4
chart-5
Dark
chart-1
chart-2
chart-3
chart-4
chart-5
Accessibility
chart-1
chart-2
chart-3
chart-4
chart-5

Spec

The categorical ramp and gridline, as token references.

chart-1
0
{
1
c
2
o
3
l
4
o
5
r
6
s
7
.
8
c
9
h
10
a
11
r
12
t
13
-
14
1
15
}
chart-2
0
{
1
c
2
o
3
l
4
o
5
r
6
s
7
.
8
c
9
h
10
a
11
r
12
t
13
-
14
2
15
}
chart-3
0
{
1
c
2
o
3
l
4
o
5
r
6
s
7
.
8
c
9
h
10
a
11
r
12
t
13
-
14
3
15
}
chart-4
0
{
1
c
2
o
3
l
4
o
5
r
6
s
7
.
8
c
9
h
10
a
11
r
12
t
13
-
14
4
15
}
chart-5
0
{
1
c
2
o
3
l
4
o
5
r
6
s
7
.
8
c
9
h
10
a
11
r
12
t
13
-
14
5
15
}
chart-gridline
0
{
1
c
2
o
3
l
4
o
5
r
6
s
7
.
8
h
9
a
10
i
11
r
12
l
13
i
14
n
15
e
16
}

Build with the skill

No package to install — hand this to your AI to wire your chart library's series to the Zetta chart tokens.

Prompt for your AI 
Implement the Zetta "Chart" component in this project's stack using the zetta-design-md skill.

- Apply the `chart` spec from the skill (variants: chart-1, chart-2, chart-3, chart-4, chart-5).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

  • Assign series in order: chart-1 through chart-5. Axes, gridlines and baselines use hairline (the chart-gridline token).
  • For more than five categories, group the long tail into "Other" rather than inventing colours. Don't reach for semantic status colours (success/danger) as categorical hues.

Accessibility

  • 13Never encode meaning by colour alone — add direct labels, patterns, or shapes. In the Accessibility theme the ramp is greyscale by design, so series must be distinguishable without hue.

Known gaps

  • Chart structure — axes, legends, tooltips, sequential/diverging ramps, and chart-type guidance — is not specified. Only the categorical ramp and gridline colour are tokenised.