Data visualization
Inline charts count activity: drafts, runs, weeks, courses, with mono numbers, flat geometry, and no judgment about a student anywhere in the data. Four categorical series at most, held to one lightness pair and one chroma band. In the product every chart is a Bklit UI component styled by these tokens; the specimens on this page are static token references, not chart implementations.
Roles, not a rainbow
Chart color is four series at most: the brand pair opened to chart chroma, plus the two hues at right angles to it. Hue does the identifying, a two-step lightness stagger keeps every pair apart for dichromatic readers, and one chroma band keeps the four reading as one family. Butter stays the one emphasis, and past four categories the answer is a split chart or a table, never a fifth color.
| Role | Token | Value | Job |
|---|---|---|---|
| Series 1 to 4 | chart.series-1 to chart.series-4 | #3F529C · #8E7000 · #008776 · #90382D | Indigo, ochre, teal, rust; assign in token order, cap at four |
| Emphasis | chart.emphasis | brand-500 · #E9CB62 | The one series or datum the chart is about |
| Neutral | chart.neutral | ink-300 · #BAC0CC | Context series and de-emphasized comparisons |
| Grid | chart.grid | line-soft · #ECEDEA | Gridlines behind the data |
| Axis text | chart.axis-text | ink-500 · #707B8D | Axis labels and tick text |
Series 1 and 4 sit at OKLCH L 0.46, series 2 and 3 at L 0.56, and all four between C 0.10 and C 0.12: one lightness pair and one chroma band, the same discipline the question taxonomy uses. Butter Yellow stays reserved for the emphasis role and nothing in the set comes near it. Both halves of the construction are load-bearing: held at a single lightness these hues collapse to a ΔE near 1 under deuteranopia, and separated by lightness alone they read as one navy and one gold at two darknesses each.
It sits ΔE 4.5 from danger-600, so a chart series and a status indicator never share a tile without both written labels, and series 3 and 4 never stand alone as a pair, which would read teal against red. A two-series chart uses series 1 and 2, which is the brand pair itself.
The series, emphasis, and neutral roles exist only inside a plot. They never tint buttons, badges, or cards, and question-type or status colors never stand in as series.
Sequential data
Magnitude uses the ink ramp, light to dark. There is no diverging palette on purpose: Inline does not render judgment gradients. When two things need comparing, use paired series side by side, never a red-to-green axis.
One chart, one point
Default to fewer colors: one ink series, or ink plus a butter emphasis on the datum the chart is about. Open the categorical set only past three real categories, and never identify a series by color alone.
ink-800chart.emphasischart.gridGeist Mono, tabularMeters and progress
Two progress surfaces ship today. Both reuse the status families from Color, because they report application state: how much of a plan is used, how far a draft has come.
The track is 6px, full-round, in ink-100. Maturity is formative and belongs to the student who owns the draft; it never appears in a faculty view.
Dashboards
PlannedProfessor and institution dashboards are planned, not shipped: stat tiles, trend lines over time windows, mode mix, and completion by course, all Bklit UI components styled by the chart tokens. Cohorts under 10 students suppress totals by design.
Four designed states
Every dashboard tile and chart designs loading, empty, error, and privacy-suppressed. Suppression keeps normal chrome and quiet ink text; it is never an error style.
| Surface | Shape |
|---|---|
| Stat tile | Geist Mono tabular number, caption label, caption time window |
| Trend line | One ink series over a time window; emphasis only for the window in question |
| Mode mix | Feedback versus Brainstorming runs as paired series |
| Completion by course | Per-course adoption; categorical set only past three courses |
What Inline never charts
A palette is not permission. Some charts are excluded from Inline no matter how they are colored.
No risk scores, no gauges, no red-to-green scales, no authenticity or AI-detection meters, no per-student surveillance charts. Dashboards show activity and adoption; they never rank, grade, or suspect a writer.
This is why no diverging palette exists: there is no "good end" to chart toward. If a requested view needs one, the view is wrong, not the palette.
Rules
Ten rules keep every chart one system.
- Chart colors chart. The series, emphasis, and neutral roles never appear in UI chrome, and question-type or status colors never join a series set. No series is an alias of an ink step.
- One lightness pair, one chroma band, four hues. Series 1 and 4 at L 0.46, series 2 and 3 at L 0.56, all four between C 0.10 and C 0.12. Changing a series means re-running the categorical check on white and on paper, adjacent and all pairs, not picking a nicer hex.
- Start with one color. A lone ink series, or ink plus one butter emphasis; open the categorical set only past three real categories, assigned in token order.
- Never color alone, never a fifth color. Every series carries a direct label or a legend entry, the emphasized datum gets an emphasized written label, and past four categories the chart splits or becomes a table.
- Sequential is ink, and nothing diverges. Magnitude uses the ink ramp; comparisons are paired series, never a judgment gradient.
- Numbers are mono. Labels are Geist at caption size; every figure is Geist Mono with tabular figures in ink, never in the series color.
- Flat and quiet. Bars, lines, areas, dots; no 3D, gradients, or decorative animation, and at most one entrance fade.
- Suppression is a designed state. Under 10 students, show the suppressed presentation with normal chrome and quiet ink text, never an error style.
- Rust is not red. Series 4 never stands alone against series 3, and a chart series never sits beside a status indicator without both written labels.
- Activity, never judgment. No risk scores, gauges, red-to-green scales, AI-detection meters, or per-student surveillance charts, ever.