sizesfrom

Sizesfrom is a term used in user interface design and development to describe a utility or pattern that derives a set of size values from a single source input. It is not a formal standard, but a concept adopted in various design systems and codebases to promote consistency and scalability in sizing decisions.

How sizesfrom works varies by implementation, but the core idea is to take a base size or a small set of seed sizes and generate a broader range through a defined rule set. Common inputs include a base size, a minimum and maximum bound, a scaling factor, and the number of steps. The output is typically an ordered list of sizes (for typography, spacing, or component dimensions) that can be used to create tokens, CSS variables, or style presets. Implementations may apply rounding rules to keep values practical for screens and layouts.

Typical use cases include establishing a typographic scale, responsive spacing grid, or consistent component dimensions within a design system. Sizesfrom can also be used to populate design tokens that feed into CSS, JavaScript, or component libraries, ensuring that all parts of an application use harmonized sizes. In practice, it supports responsive design by providing a predictable progression of sizes across breakpoints.

Relation to other concepts includes modular scales and typographic scales, as well as design tokens and scalable UI patterns. Limitations include dependence on chosen inputs and rules, potential drift if sources are updated, and the lack of a universal standard. See also: typography scale, spacing system, design tokens, responsive design.