Design System for Trustworthy Data Interfaces
This page documents the system behind how data interfaces are designed for clarity, consistency, and trust.
This page explains the system, then shows how it is implemented and used.
System Flow
Design Tokens → UI Components → Charts → Trust Layer → Interpretation
Introduction
The goal of this system is to make interface decisions explicit and repeatable so that information is interpreted carefully, not just consumed quickly.
Authorship and Intent
This system was designed and implemented as part of my transition toward Information Design, with a focus on building trustworthy data interfaces.
Why This System Exists
- Dashboards can mislead when visual hierarchy or emphasis is inconsistent.
- UI inconsistency creates cognitive overhead and reduces confidence in interpretation.
- Information design requires system-level thinking so structure and meaning scale together.
- For example, dashboards often highlight metrics without clarifying scope or limitations, leading to overconfidence in interpretation.
Core Principles
- Calm over attention.
- Clarity over decoration.
- Trust over persuasion.
- Restraint over novelty.
Completed Work
System Foundation
- A shared semantic token layer for color, type, spacing, motion, charts, and trust UI.
- Mantine theme settings aligned to system typography, radii, and defaults.
UI Standardization
- Consistent token usage across navigation, projects, case studies, and timeline UI.
- Unified project-card interaction patterns and modal behavior.
Trust Layer
- Reusable trust components for sources, methods, scope limits, and definitions.
Chart System
- A token-based chart reference to keep axis, grid, series, and highlight usage consistent.
Enforcement
- Shared SCSS mixins and documentation guardrails that reduce styling drift over time.
Trust Layer
Trust notes are treated as first-class UI patterns. They are intentionally quiet, factual, and grouped so users can understand source quality, methodological limits, and interpretation boundaries.
These patterns reduce misinterpretation by making limits, evidence, and definitions visible at the point of reading.
Source
Source attribution pattern
- Primary datasets and provenance references
- Transformation and aggregation assumptions
Methodology
Method note pattern
Scope
What this shows
Scope
What this does not show
Definition
Interpretation boundary
Chart System
Charts use the same semantic token system as the rest of the interface. Axis and grid structure stay neutral, context series remain muted, and highlight is used sparingly.
Charts follow the same design rules as the interface: calm, structured, and unbiased.
Tokenized chart reference
Axis, grid, series, legend, and emphasis consume dsChartTokens.
Highlight is reserved for a single emphasized point; all other context remains muted.
- Axis: provides structure and readable orientation.
- Grid: provides reference for comparison without visual dominance.
- Series: represents data using categorical/system tokens.
- Highlight: reserved for purposeful emphasis.
- Muted context: supports side-by-side comparison without distraction.
How Consistency is Maintained
- DS tokens are the source of truth for color, spacing, typography, and motion.
- Legacy hex-value drift is removed in favor of semantic token references.
- Shared mixins prevent local duplication in repeated project UI patterns.
- Trust and chart patterns are implemented as reusable components.
- No ad hoc styling is introduced at component level.
Decorative Layer (Explicit Exception)
These elements are intentionally outside strict DS rules to preserve visual identity without affecting system integrity.
- FlowerDivider: controlled decorative element that remains separate from core interface primitives.
- PetalRain: ambient effect for atmosphere, isolated from analytical UI and trust-critical components.
What This Enables
This system enables building data interfaces that are:
- Consistent.
- Interpretable.
- Trustworthy.
- Scalable.
Next Application
California Wildfire Activity
A structured interface for understanding historical wildfire patterns.
This preview applies the chart system, trust-layer patterns, and narrative flow to support careful interpretation of wildfire activity data.
The goal is to support clearer understanding of real-world conditions and enable more informed decisions.