12min

Design Settings

Unflow integrates seemlessly into your product by matching your brand colors, fonts and style, allowing for deep customization

Fonts

Unflow supports custom fonts to ensure the experience matches that of your own app. Unflow uses your locally bundled font files so there is no increase in package size or network usage to fetch fonts. Different styles can be used for the various text types Unflow displays.

Kotlin
Swift
React Native
|



Images

Unflow takes care of image sizing out of the box. We cleverly resize images so that always remain within the bounds of the screen. If the appropriate aspect ratio of an image cannot be retained we will center the image and zoom in until it does.

Want to create great images?

We build a handy Image Editor in Figma to help you preview and prepare any assets you want to use in Unflow. This will help make your assets pop right from the off.

Theming

Theming in Unflow works by allowing customers to setup their own design system via the Design settings on the dashboard. These colours are then passed to the SDKs (read on for more info on how) and then applied to individual UI components using the rules below.

Themes are derived from the light and dark "style" set for individual screens the dashboard. We currently support 2 different themes:

  • light
  • dark

Palette

Unflow allows for deep customization to match your brand look and feel. You can set brand palettes to match the typography, primary and secondary buttons for your product. Unflow palettes support both light and dark themes so you can customize based on the choice of a light or dark mode. Changing your palette will update the styles in all of your Unflow screens.

The colour table below shows the semantic colours that are available for use within the SDK. We have a colour palette for both light and dark themes.

Name

Type

Light palette

Dark palette

Background

Uneditable

#FFFFFF (White)

#000000 (Black)

Icon

Uneditable

#18181B (Dark Gray)

#FFFFFF (White)

Fill

Uneditable

#FFFFFF (White)

#52525B (Medium Gray)

Primary color

Configurable

#A855F7 (Dark Purple)

#A855F7 (Dark Purple)

On primary color

Configurable

#FFFFFF (White)

#FFFFFF (White)

Secondary color

Configurable

#D8B4FE (Light Purple)

#D8B4FE (Light Purple)

On secondary color

Configurable

#FFFFFF (White)

#FFFFFF (White)

Text Title

Configurable

#18181B (Dark Gray)

#FFFFFF (White)

Text Body

Configurable

#52525B (Medium Gray)

#FFFFFF (White)

Type: Whether the colour is a fixed value within the SDK (Uneditable) or whether it can be customised via the dashboard (Configurable).

Palette: The default colours for both light and dark themes – these are then updated with the app style theme colours set via the dashboard for configurable colours.

  • Uneditable – the colour values shown above are always used (as there is no customisation)
  • Configurable – the colour values shown in the table above apply only in the case of the SDKs not receiving the customised values from the backend for whatever reason. i.e. they are fallback/default values and are typically not seen unless there is a problem retrieving the app style themes from the server.

Page styles

Unflow supports theming at a page-level by setting the "style" when working on screens in the dashboard editor.

Element

Color

Background

Background

Icon

Icon

Icon fill

Fill

Carousel indicators

Icon

Block styles

Theming is also supported at a block-level – which takes precedence over a page theme. If the theme of a block is different to that of the page it resides in, the theme of the block will be used to set its properties.

Text Block

Color

Title

Text Title

Subtitle

Text Body

Body

Text Body

Button Block

Color

Primary background

Primary color

Primary text

On primary color

Secondary background

Secondary color

Secondary text

On secondary color





Updated 04 May 2022
Did this page help?
Yes
No