Vue FesJapan 2026
The main visual of Vue Fes Japan 2026. It features a silhouette of a V, representing Vue, and a circle, representing the Japanese flag, side by side. The colors are deep matcha-like shades derived from the two colors, and the circle features a Japanese gold marbling pattern.
OtemachiPlace Hall & Conference

Speaker

Wellness × hacomono Track
11:05 - 11:15
Yuji Yamaguchi

Enforcing a Design System Contract in a Compound Product

In a compound product that spans multiple domains, even aligned components let token usage and component roles drift before anyone notices.

Writing conventions in docs and fixing them in review still cannot keep up as the codebase grows, and a component catalog cannot inspect that drift.

So we made the design system itself a schema-based contract, and with Schema-Driven UI the same schema can reproduce the same frontend.

Raw values fail typecheck, and cross-layer imports fail dependency lint. Human review is left for judgments machines cannot make. This talk is about protecting frontend implementation with a contract.

  • Dress Code Inc.
  • Product Engineer

Yuji Yamaguchi

  • Dress Code Inc.
  • Product Engineer

Yuji Yamaguchi

Enforcing a Design System Contract in a Compound Product

In a compound product that spans multiple domains, even aligned components let token usage and component roles drift before anyone notices.

Writing conventions in docs and fixing them in review still cannot keep up as the codebase grows, and a component catalog cannot inspect that drift.

So we made the design system itself a schema-based contract, and with Schema-Driven UI the same schema can reproduce the same frontend.

Raw values fail typecheck, and cross-layer imports fail dependency lint. Human review is left for judgments machines cannot make. This talk is about protecting frontend implementation with a contract.