Style DNA · algorithm v1
How ButtonCraft matches a button to the rest of an interface
Matching UI is a compatibility problem, not a similarity contest. A modal should not look like a stretched button; it should share the button's visual language while remaining appropriate for its own job.
A versioned visual fingerprint
ButtonCraft converts each button and UI kit into a Style DNA profile. The profile deliberately excludes price, popularity and commercial tier, so a component cannot buy its way into a more relevant position. Source CSS supplies palette, motion and typography signals; curated category and shape data provide the remaining context.
1. Score every dimension
Exact matches score highest. Related families and adjacent values receive partial credit instead of an all-or-nothing tag match.
2. Explain the result
The strongest shared dimensions become reasons such as “glass surface”, “cool palette” or “rounded geometry”.
3. Fill distinct UI slots
ButtonCraft returns one stable best match for each modal, input, toggle, card, dropdown and form slot.
What the score does not claim
A high visual score is not an accessibility, usability or performance certification. Teams still need to test contrast, keyboard focus, reduced motion, content length and responsive behavior in the final product. The matching engine is deterministic and explainable; it does not currently use a generative model or user identity.
See the method applied to a real button.
Open a matching UI example →