Fleetsmith Design

Our design system, Stellar

  • Save


In May we hit an exciting milestone at Fleetsmith—we launched our design system via our new Admin Console!

Our system is a functional charter: A collection of goals, processes, guidelines, practices, and components, tied together by a visual system and built into simple, high-quality, production-ready code. Design systems are what tie Design and Engineering together to harmoniously develop a high-quality product in an efficient, scalable manner.

Design systems ensure that components and style variables are organized, and that their relationships and instances are fully accounted for and being used appropriately. A potentially complicated web remains untangled, which makes it possible to change a small or large part of our product without messing up the rest of it and introducing bugs that are difficult to keep track of.

Large-scale visual initiatives, like themes and supporting high contrast, are possible because elements like color, type, and stroke are contained and accounted for. Problematic situations that complicate these initiatives, like nesting, faulty inheritance, and hard-coded values, are prevented.

Built from React and Styled Components, our design system is a major milestone for us. We're excited to build amazing things for Fleetsmith in the coming year, and we're hiring! Reach out to learn more ✨

keyboard shortcuts: L or F like