Crypto

A Real-Time Token Price Bar for macOS Users

Crypto is structurally dependent on a continuous inflow of capital to sustain itself. That is why user acquisition matters so much, and often, how much exposure a project gets has a greater impact than the team’s fundamentals. Trading users typically enter on-chain through airdrops, then expand into futures DEXs, prediction markets, and other areas in search of more stimulation. Demand for dopamine-inducing mechanisms grows, and services that provide them continue to emerge.

Process

This article focuses on the decision-making process while actually analyzing design system components. Code snippets included in the portfolio were also limited to revealing decision reasons of “why implement this way” rather than implementation results. For example, explaining in detail the reasons for separating specific style differences as props rather than separate components, designing various style variations as variants, or the background for using design tokens indirectly rather than directly referencing them. For this purpose, I compared three design systems—Apple Human Interface Guidelines (HIG), Material-UI (MUI), and Coinbase Design System (CDS)—centering on common components like Button, Text Input, Modal, and the AreaChart component unique to CDS. While analyzing each component from design and code implementation perspectives, I organize in detail specific elements like design token utilization, variant structure, state composition, and accessibility handling methods. The analysis method classifies and describes content from perspectives of common structure, naming differences, and functional differences, like the classification proposed in the paper “Framework for Comparative Analysis of Usability of GUI Components by Mobile Operating System.” Finally, I organize lessons and learning effects gained through this comparative analysis process and present practical conclusions on implications for design-development collaboration.

Table of Contents

1. Introduction: Why Analyze Design Systems First? Why Choose Coinbase Design System?
2. Main Content: Identity and Target Users
   • System’s Official Mission / Slogan
   • CDS, MUI, HIG Comparative Analysis
3. System Architecture
   • Notable Sections in Get Started: Theming
   • Components
   • Hooks
4. Design Token Structure
   • Combination of Primitive and Semantic Tokens
   • Token Application Beyond Color
   • Shadow Structure
5. Conclusion

Introduction: Why Analyze Design Systems First? Why Choose Coinbase Design System?

I have long pondered how to contribute to the crypto ecosystem as a designer rather than a developer. Rather than remaining in the role of designing screens, the more important question became at what points in the overall process of creating and expanding products I could intervene. In this process, my interest naturally shifted toward design system construction methods that connect from token units to components.