Case file 02 Design-system utility Working web app

Dee view

A token playground for enterprise dashboard systems.

Deeview turns design tokens from abstract values into something designers and developers can see, edit, test, and export immediately. The product gives token work a live enterprise UI context instead of leaving decisions trapped inside tables, swatches, and static documentation.

Read case study View product screens

Deeview token editing, generated output, component preview, and dashboard workspace — Token controls, generated output, component testing, and a live dashboard preview in one workspace.

The disconnect

I could read the value. But not its impact.

The problem I set out to solve was the distance between a token and the interface it changes. A value in a design tool, a variable in code, and a rule in documentation can describe the same decision. None of them, alone, shows what happens to a real dashboard.

So I started with one question: what if editing a token also showed its visual impact and implementation output, in the same moment?

Platform-agnostic decisions Design tokens exist to express shared design decisions in a format that can move across tools, disciplines, and platforms.

Single source of truth Modern design systems use tokens to name and store reusable decisions across design and code.

4.5:1 contrast risk WCAG requires normal text to meet a 4.5:1 contrast ratio, which token editors can break quickly without live checks.

Design Tokens Format Atlassian Tokens Style Dictionary WCAG Contrast

The experiment

Make the change. See the consequence.

I built a playground around that immediate feedback. Change a token, test it against enterprise UI, then take the same decision into code. Scroll through this simplified model of the edit, preview, and export loop.

First, narrow the decision.

I made controls component-specific so the editor focuses on the values that affect the selected UI pattern.

Then, put it in context.

A swatch was not enough. Forms, analytics, navigation shells, and overlays make the consequences of a token change visible.

Finally, carry it into code.

I connected CSS variables, token JSON, and React usage snippets to the same source, closing the gap between preview and handoff.

01EditToken playground

primary #0C66E4

radius.md 12px

shadow.sm 0 1 8

02SeeLive enterprise UI

03ShipGenerated output

:root {
  --color-primary: #0C66E4;
  --radius-md: 12px;
  --shadow-sm: 0 1px 8px;
}

CSSJSONReact

The decision

Keep the whole feedback loop in view.

Left panel: token playground01

Center canvas: live preview02

Right panel: generated output03

Contrast safety checksAA

Undo and recovery actionsUndo

Light and dark token sets2

Making it work

One source had to power every surface.

I built the shell in Next.js and the three panels in React. Zustand keeps the shared state: tokens, selected component, preview mode, undo history, theme mode, and preferences. CSS variables apply token values to the preview surface.

Token editor

Zustand store

Preview CSS variables

CSS / JSON / React export

The working product

From abstract values to a working workspace.

The result is Deeview: light and dark token editing, focused component previews, enterprise layouts, and generated output in one tool. These eight product views show the loop in practice.

Deeview editor with token controls, focused component preview, and generated code output — 01Complete token workspace

Deeview light and dark token configuration panels shown side by side — 02Light and dark token states

Deeview custom color picker for editing a design token — 03Custom color editing

Deeview shadow token editor with position, blur, spread, color, and alpha controls — 04Shadow token controls

Deeview focused KPI card component preview — 05Focused component preview

Deeview component preview mode inside the token playground shell — 06Component preview mode

Deeview enterprise dashboard layout preview with metrics, filters, table, and chart — 07Enterprise layout preview

Deeview generated token output beside accessibility warnings and token controls — 08Export and accessibility checks

What I built

From design-system idea to working tool.

Product strategyDefined Deeview as a token generator and preview playground for enterprise dashboards.
UX designStructured the app around a three-zone edit, preview, and export workflow.
Visual designCreated a restrained enterprise interface with dense panels and realistic dashboard surfaces.
Frontend developmentBuilt the Next.js app, token editor, preview system, output panel, custom picker, and interactive components.
Design-system logicMapped token groups to actual component usage so users can understand what each variable changes.