Skip to content

Design & Theming

Our app solution is a “White Label” product designed to adapt completely to your brand identity. We use a Design Token System to ensure consistency across your Web Shop and Native App.

1. Colors & Theming

We define a central color palette that is applied dynamically to all UI components. This ensures that buttons, navigation bars, and highlights automatically match your CI/CD.

The Color Palette

You define the following core sets. Each set typically includes a Main, Light, and Dark variant, plus a corresponding Contrast color (for text on top of the color).

  • Primary Color: Your main brand color (used for primary buttons, active states).
  • Secondary Color: For accents and secondary actions.
  • Additional Colors: For special highlights or marketing elements.
  • Grayscales: A range of neutral tones for backgrounds, borders, and text.
  • Semantic Colors: Standardized colors for Success (Green), Warning (Orange), Error (Red), and Info (Blue).

Component Styling

  • Border Radius: We can configure the “roundness” of elements globally. Do you prefer sharp corners (0px), slightly rounded (4px), or fully pill-shaped buttons? This setting applies to buttons, product cards, and input fields.
  • Custom Overrides: By default, a component (e.g., the “Add to Cart” button) uses the Primary Main color. If you have a special requirement to make just this button Additional Yellow, this can be achieved via custom configuration (requires extra effort).

Dark Mode Support

2. Typography

The app supports custom fonts to match your corporate typography.

  • Custom Fonts: You can provide your brand font files (OTF/TTF).
  • System Fonts: Alternatively, we can use the native system fonts (San Francisco on iOS, Roboto on Android) or our Empiriecom Design System standard font “Poppins” for a look that feels perfectly integrated into the OS.

3. Icons & Illustrations

We distinguish between icons (functional) and illustrations (decorative).

App Launcher Icon

This is the icon the user taps on their home screen to start the app.

In-App Icons (UI)

These are the icons used for navigation tabs, the cart symbol, user profile, etc.

  • Standard (Recommended): We use the EDS (empiriecom Design System) icon set. These are optimized for legibility and consistency.
  • Custom: You can replace these with your own SVG icons if necessary. You must provide a complete set to maintain visual consistency.

4. Splash Screen

The Splash Screen is the very first image a user sees while the app is loading in the background.

  • Standard (Included): We place your Brand Logo on a solid background color (usually your Primary or Brand Background color).
  • Custom Campaigns (Premium): You can commission a specific design, for example, for a company anniversary (“Jubilee Year”) or a longer-running seasonal campaign.
    • Process: These requests must be commissioned separately and involve additional costs.
    • Requirements: All designs must strictly adhere to Apple and Google Human Interface Guidelines to ensure app approval.

Technical Guidelines for Designers

Creating a Splash Screen requires strict adherence to platform rules, especially for Android.

  1. No Text (No Localization): Do not include marketing slogans or greetings (e.g., “Welcome”). The Splash Screen loads before the app knows the user’s language, so text cannot be translated.
  2. Logo Constraints:
    • Android: The logo/icon must fit within a circular mask. Please review the Android Splash Screen Guidelines carefully.
    • Safe Zone: Keep critical visual elements centered and away from the edges to accommodate different screen sizes (phones vs. tablets).

5. Accessibility & Responsibility