Chips / Tags

Selectable chips for multi-choice inputs (SetupForm) and read-only tags for decorative labeling (HowItWorks). Both use rounded-full with border transitions.

Selectable Chips

Interactive chips from SetupForm. Click to toggle selection. Selected state uses accent background + accent-foreground border. Unselected uses border-border + muted text.

Read-only Tags

Decorative tags from the HowItWorks landing section. Non-interactive, using direct violet color classes.

Greenfield дизайнAI-nativeПокращення фічіTrade-off
Sergiy Klimkovych

Need a design system like this?

I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.

Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer