Design System Typography Naming Conventions

Its essential to ensure the correct token is used on the correct property.

Design system typography naming conventions. Solid naming conventions make your designs easier to implement your design systems easier to understand and you a more collaborative designer. Using forward slash will categorise your Colours for you and aids in quickly finding the relevant Colour from the Inspector panel. Meet the team responses.

Giving your components reasonabledare I say consistentnames isnt just about developers. Token names always start with a category name and a hyphen. A system like this could work well at Asana because our brand design.

Inconsistent context-specific names turn design systems into temporary solutions instead of a consistent non-context-dependent design management tool. Our History and Future. Best practices for design system naming conventions.

A design systems strength comes from knowing how to apply options to context. In this article well try to walk through the naming conventions that various frameworks and design systems use when it comes to typography especially headings sizing. Design system typography naming conventions Typography is one of the most important aspects of your design system to establish early onthink of how much information youll communicate to users through type.

Its for your teammates who will be collaborating with you and future designers who will need to work with these components without reading your mind. Modular scale A universal typographic system which is consistent and efficient to use for both developers and designers. For example color-name or space-unit or size-unit.

Base We use a 1em 16px base. Different teams will indeed name things differently. The utility classes sometimes called helpers are simple and reusable CSS class selectors that apply a certain and clear rule in your design system.