Read-only Chip on Paper — Design Systems Case Study

Problems

This case study is based on a real issue reported in Canonical’s Vanilla Framework. In Vanilla Framework Issue #5846, the team identified that neutral read-only chips become difficult to distinguish when used on the Paper theme. The issue also references Canonical Certification as a real product context where this behavior appears.

The problem comes from the combination of the chip’s #F2F2F2 neutral background and transparent border, which causes its boundary to visually merge with the surrounding Paper surface.

The text itself remains readable. What is lost is component recognition. The design challenge was therefore to restore the chip’s visual boundary while preserving its read-only semantics, avoiding interactive cues, and preventing a one-off or branded visual treatment.

Solution

I explored several treatments including introducing a darker neutral value, strengthening the component boundary, and reusing Vanilla’s existing inverse-theme behavior.

The preferred direction was to keep the component semantically Gray + Read-only, while resolving its appearance through the existing inverse-theme mechanism when placed on Paper.

This improves separation from the surrounding surface without introducing a new color token, adding interactive styling, or repurposing the branded chip variant.

My contribution

I analyzed the existing Vanilla chip component, its Figma token bindings, theme behavior, and the constraints documented around read-only and interactive states.

I compared multiple visual approaches based on component recognition, semantic consistency, accessibility, theme scalability, and implementation impact. I then defined the recommended direction together with proposed Figma, code, documentation, accessibility, and QA considerations.

The goal was to approach the issue as a design-system decision rather than a one-off visual fix.