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.

Problem

Tokens are decisions without context.

Design token work is often split across disconnected surfaces. Designers inspect values inside design tools, developers receive CSS variables or JSON later, maintainers document the rules separately, and accessibility issues are often found after tokens have already been applied.

The core question became simple: how can a team edit tokens and immediately understand their visual, functional, and implementation impact?

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

Product

A playground where token changes become visible.

Deeview lets users edit light and dark theme tokens, preview component behavior, inspect contextual layouts, and export theme-ready CSS variables, token JSON, and React usage snippets.

Edit relevant tokens

Component-specific controls keep users focused on the values that actually affect the selected UI pattern.

Preview real dashboard UI

Tokens are tested against enterprise scenarios like forms, analytics dashboards, navigation shells, and overlays.

Export usable outputs

The output panel generates CSS variables, token JSON, and React usage snippets from the same token source.

Interface model

Three zones. One feedback loop.

Left panel: token playground01

Center canvas: live preview02

Right panel: generated output03

Contrast safety checksAA

Undo and recovery actions3x

Light and dark token sets2

Architecture

Built around one shared token source.

Next.js handles the app shell. React renders the editor, preview, and output panels. Zustand stores 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

Screenshots

The product surface across editing, previewing, and export.

The screens show how Deeview turns token work into an immediate feedback loop: adjust values, inspect real interface impact, and export implementation-ready output from one workspace.

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

My role

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.