AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
React native responsive layout12/23/2023 Here‘s how a simple version might look:Īll values relating to your design system and all uses of these values in the app should be through this theme object. Define a Theme ObjectĪ carefully put together design system following the spacing, colour, and typography practices above should be defined in the app‘s codebase as a theme object. Your “Body” text might use the “Merriweather” family with a regular font weight, and size 16. Your “Header” text might be size 36, have a bold weight, and use the font family “Raleway”. A grouping of these typographic elements are defined together as a named text variant. ![]() Similar to spacing, it‘s best to stick to a limited set of font families, weights and sizes to achieve a coherent look throughout the app. As long as elements are using the “Background” semantic color, you can swap it between a light and dark color based on the chosen color scheme. It also allows you to easily swap out color schemes on the fly to, for example, easily accommodate a light and dark mode version of the app. This makes it easy to later change, for example, the “Primary” color to be green instead of blue. ![]() When referring to a color in the app, it should be through the semantic color mapping. Note that multiple semantic colors can be mapped to the same palette color, for example, both the “Danger” and “Failure” color could both map to “Dark Red”. Some examples are “Primary”, “Background”, “Danger”, “Failure”.
0 Comments
Read More
Leave a Reply. |