Skip to main content

UI Guidelines

User Interface (UI) guidelines for AppNest serve as a framework to ensure a consistent and cohesive design, enhancing both the usability and aesthetics of the UI.

By constructing a clear layout, typography, color schemes, navigation, and other design elements, UI guidelines enable developers to create intuitive, user-friendly interfaces that align with the brand identity.

Consistent adherence to these guidelines helps provide a smooth app submission process in terms of UI.

Note: It is mandatory to utilize Twigs to construct the UI.

Fonts​

  • Configure the fonts by adding the <link> tag for the font specifications on the index.html file, instead of adding the @import in the index.css file.
  • Make sure to set the font family on the ThemeProvider in the app.js file as well
<ThemeProvider theme={{
    fonts: {
        body: "'DM sans', sans-serif"
    }
}}>
    {child}
</ThemeProvider>

Colors​

  • Configure the colors of your app on the ThemeProvider of Twigs
  • Colors used in the app need to align with the SurveySparrow UI theme
<ThemeProvider
 theme={{
   colors: {
     primary: '#4A9CA6'
   }
 }}
>
 <App />
</ThemeProvider>

Styles​

  • Twigs provides a CSS property on most of its components to add custom CSS.
  • It is strictly restricted to not use any of Twigs Components' class names to override the styles as the class names get changed on production.
<Button
 css={{
   backgroundColor: '$primary100'
 }}>
 Submit
</Button>

Alert Messages​

  • Use Twigs' built-in Toast component to display alert messages and notifications.
  • Make sure to pass customized and understandable error messages and not the actual API error messages.
  • The notifications should be short and precise and shouldn't be confusing to the users.
function App () {
 return (
   <>
     <Toastr duration={10000} />
     <App />
   </>
 )
}

Icons​

  • Twigs comes with a react icons library called twigs-react-icons which provides all the necessary icons that align with SurveySparrow's theme.
  • These icons are pre-built and optimized, which simplifies the process of embedding an icon with easy customizations such as size.
import { AddColumnIcon } from '@sparrowengg/twigs-react-icons';
const App = () => {
 return <AddColumnIcon />;
};

External Packages​

  • When installing any NPM packages, make sure that it is up-to-date and that they can be used on the client side.
  • Avoid packages that cause an issue when running on the client side as the configuration for your react application might not support the package.

Embed Third Party Applications​

  • Your react application rendered on an Iframe.
  • If you wish to integrate a third-party application to get rendered on this Iframe, then place the embed code given by the third-party application in the body tag on the index.html page.
  • Ensure that the embed code is a valid secure one provided by the third-party application.