# Design System & Common Components * Go through app and other apps in the org to implement a common component library with help of Design and PM\ \* Style Guide - Typography (H1s, Paragraphs, etc) * Loading Fonts - preloading, Google Fonts or host/package, default fonts before font is loaded? * Causes reflow if we didn't load font * Try to limit amount and weights of fonts * CSS Handling * Styled Components * Reset CSS * Less? * Common Colors, padding, spacing, fonts for elements * Ideally very little variation on these values, so you don't have to worry about pixel perfect designs and everything looks super consistent, and if we decide to do a redesign it's very simple, don't have to change values everywhere * Buttons and Common Elements * Buttons - no double submits by default esp with finance operations, block onClicks if in Loading State, have a loading state * Selects * Autocompletes * Go through Google MUI and make sure we have relevant elements for our Style Guide * Forms, interaction, validation, submitting * Modals and Dialogues * Error Toasts or bars or error dialogues * Confirmation dialogue/flow for deleting, buying, and other dangerous/permanent operations should be consistent - important for financial * Infinite Scrolling components like transaction lists and search results * Loading spinners * AJAX search - debounce * Auth Wrapper - Allowing/disallowing access to pages * Autofills for address - Google Maps * Phone verification - Twilio * Packaging * Create React App? * Webpack? * And customizations needed? * Linting * ESLint * Airbnb rule set * Common approach for Charting warrants a whole discussion * HighCharts? * How do we deal with time series * How do we deal with candlesticks * How do we load data? * How do we deal with filtering for time segments? Reloading data? Caching Data? * Probably separate this into its own library eventually so that it can be used and developed independently from this app * --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://www.feinfra.com/design-system-and-common-components.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.