RisqBase Design System · v4.4
Authority, precision, intelligence - kept warm enough to use four hours a day. One system; three products; one set of tokens, components, chart types, and content rules. Built on W3C Design Tokens, themed via CSS variables, AA-verified end-to-end.
The four signature elements
Brand identifiers that any of our three products can carry. Iris teal, the gauge family, the citation chip, and the concentric-arc pattern - together they say "RisqBase" without the wordmark.
The AI / intelligence accent.
Rooted in the eye-and-perception metaphor. No competitor uses teal for AI. #0D9488.
Generic primitive + RALIA risk-gauge configuration.
Dual-ring delta encoding tells a mitigation story. Four canonical sizes. data-viz/Gauge.
Six states. AI claims always sourced.
Verified · pending · low-confidence · retracted · external · multi-source. ai/CitationChip.
Extends gauge geometry to brand surfaces.
Marketing site, regulator PDFs, hero blocks. Restraint: never inside the app.
Where to look
323 entries · 3 themes. Primitive → semantic → component. W3C Design Tokens Format.
28 shipped across core, ai, data-viz, marketing. Anatomy diagrams, props tables, accessibility.
7 active types in ChartContainer · decision matrix · per-type print + HC encoding.
Composite recipes - dashboard-chart-row · time-comparison · distribution-drilldown.
Current: v2.2.0 · the full release ladder.
github.com/Risqbase-Inc/ui-components · MIT · contributions through G4.
Theme coverage
data-theme on <html> swaps between light · dark · HC. Print is a media-query stylesheet, not a data-theme value — assets ship with the package; activation is automatic on @media print.
v4.1 baseline · the default. stable
Surfaces L\* 0.18 · brand brightens. stable
CSS system keywords · shape carries meaning. stable
Monochrome · 7-tier ladder · 4 pattern fills. stable
Sources studied
Every borrowing is cited inline in the spec section that uses it. Transparency, not endorsement.
| System | Studied for | Licence |
|---|---|---|
| Apple HIG · Swift Charts | Signature-element treatment; compositional grammar; restraint | Proprietary (read-only ref) |
| Adobe Spectrum | Per-component accessibility depth; data-viz palette taxonomy | Apache 2.0 |
| IBM Carbon | Token architecture; themes; contextual + role tokens | Apache 2.0 |
| Shopify Polaris | Patterns layer; content-design as a first-class layer; recipe model | MIT |
| GitHub Primer | Repo topology; W3C Design Tokens Format; OSS governance | MIT |
| Observable Plot | Open-source grammar - closest to our actual chart implementation | ISC |
| Datawrapper Academy | Chart-type-by-purpose taxonomy; single-hue sequential ramps | CC BY-NC |
| W3C Design Tokens CG | Token format specification | W3C Community licence |