Skip to main content

🎨 Design system

The Design System section allows you to manage and customize the visual style of your app. You can define global color schemes, typography settings, and manage the look and feel for both Light Mode and Dark Mode. This section is essential for maintaining consistency in your app’s design and improving user experience across different devices.

Colors​

The Colors settings let you control the color palette used throughout your application. This includes setting up primary, secondary, background, and text colors for both light and dark modes.

Light Mode (Default)​

In Light Mode, you can customize the following colors:

  • Primary Color: This color is typically used for primary elements, such as buttons or links, and can be applied to key interactive areas of the UI.
  • Secondary Color: Use this color for secondary elements or accents to differentiate them from primary elements.
  • Default Background: Choose the background color for the app's main interface, ensuring a good contrast with the text and other elements.
  • Default Text: Select the default text color used throughout your app to maintain readability and consistency in content.

Dark Mode​

In Dark Mode, you can set different colors to ensure a comfortable user experience in low-light environments:

  • Primary Color: Select a darker or contrasting primary color that works well with a dark background.
  • Secondary Color: Choose a complementary secondary color for accents and less prominent elements.
  • Default Background: Set a dark background color for the app's interface, which reduces eye strain in dim environments.
  • Default Text: Pick a light color for text to ensure it stands out clearly against the dark background.

Customization Options​

  • Background Style: Choose between a Flat Color or Gradient style for the background of your elements.
  • Opacity: Adjust the opacity of elements to make them more or less transparent, which is especially useful for overlays or background effects.
tip

You can easily switch between Light Mode and Dark Mode for seamless transitions, giving users control over how they interact with your app based on their preferences.

Typography​

The Typography section allows you to define the default font family for your app. Consistent typography is crucial for readability and user experience. In this section, you can customize the font style for headings, body text, and other text elements.

Default Font Family​

  • Font Family: Choose a font family that reflects your app’s style. You can select from the available system fonts or upload custom fonts.
  • Preview: A live preview of the selected font will appear, showing how it looks in a sample sentence ("The quick brown fox jumps over a lazy dog").

Font Size & Style​

  • Customize font sizes, line heights, and letter spacing for better legibility and visual hierarchy in your app.
  • Choose different styles for headings, subheadings, body text, and other UI text elements to create a clear typographic structure.

3. How to Apply the Design System​

  1. Toggle Between Light and Dark Modes: Use the Toggle Dark Mode option to switch between light and dark themes based on user preferences.
  2. Global Customization: After selecting your primary, secondary, background, and text colors for both modes, the changes will automatically apply across all components in your app, providing a consistent and cohesive look.
  3. Font Customization: Set the desired Default Font Family and adjust the styles as needed to match the overall design of your app.
tip

Define your design system colors at the very beginning of your project. By setting up a consistent color palette up front, you can quickly apply updates across all elements later, rather than manually changing each component one by one.

Use Cases​

  • Brand Consistency: Maintain a consistent color scheme and typography across your app, aligning with your brand identity.
  • User Personalization: Allow users to switch between Light Mode and Dark Mode based on their preferences, enhancing their comfort while using the app.
  • Accessibility: Improve the visibility and readability of text by customizing text colors and background contrast.

Tips & Best Practices​

  • Contrast: Ensure sufficient contrast between text and background colors for better readability, especially for users with visual impairments.
  • Consistency: Use the same primary and secondary colors consistently for buttons, links, and interactive elements to make the app visually intuitive.
  • Legibility: Choose fonts that are easy to read and appropriate for your app's context (e.g., sans-serif fonts for body text for improved legibility on screens).

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].