Documentation

Design Studio

HUB Client

Design Studio allows you to quickly design, test and deploy DO application. It gives you a lot of capabilities without the need to code.

Requirements to DO target

  • Target should have conventional folders and files structure
  • CSS variables listed in src/styles/studio-variables.less should meet available branding/components variables:

body {
  --base-border-color: #dde0ec;
  --base-brand-color: #2c3c9a;
  --base-color: #465a6a;
  --base-disabled-color: #d6e5f8;
  --base-error-color: #e44343;
  --base-focused-color: #017aff;
  --base-label-color: #8893aa;
  --base-success-color: #1ea03f;

  --base-font-family: "Inter UI", sans-serif;
  --base-font-size: 16px;
  --base-h1-font-size: 29px;
  --base-h2-font-size: 23px;
  --base-h3-font-size: 20px;
  --base-h4-font-size: 20px;
  --base-small-font-size: 14px;

  --base-logo: url("/assets/download.jpeg");
  --base-header-logo: url("/assets/download.jpeg");
}
  • Layout components should have property isLayout set to true in order to properly propagate changes in component properties

src/layouts/main.yml


components:
  footer: !include ../components/footer.yml
!component as: LayoutWithSidebar
isLayout: true # Required for DS to understand how to change properties in nested layout items
items:
  !property name: items
footer:
  - !ref components: footer
  
  • Application localization should be done using nested translation keys for more convenient work with translation tools in Design Studio
  • For all page to properly work in preview mode, use flowExport studio settings key and describe export data for each route, e.g.:

{
  "calculator": {
    "loanPurposeList": {
      "Business": "Business",
      "Personal": "Personal"
    }
  },
  "employment-info": {
    "employmentTypeList": {
      "Employed": "Employed",
      "Self-Employed": "Self-Employed"
    }
  }
}

Design Studio settings available in application configuration

Parameter Description
country Used to define global formats (currency, date format, phone number mask etc.)
flowExport Mocked flow export to display pages in DesignStudio correctly
logo Logo to be displayed in projects list
name Project name to be displayed in DesignStudio, title will be used as a default value
previewUrl Link to preview environment

Example configuration


title: "Zenoo Demo Project"
...
studioSettings:
  country: "Mexico"
  flowExport: !include ./flowExport.json
  logo: "/assets/logo.png"
  name: "ZenooBank"
  previewUrl: "https://onboarding.zenoo.com/"