> ## Documentation Index
> Fetch the complete documentation index at: https://platform.docs.zenoo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Studio

> Design Studio allows you to quickly design, test and deploy DO application.

## Design Studio

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](/technical-specification/hub-client/target-configuration/target-structure) structure
* CSS variables listed in `src/styles/studio-variables.less` should meet available branding/components variables:

```css theme={null}
body {
  --base-body-background: #f6f6f6;
  --base-border-color: #dde0ec;
  --base-brand-color: #017aff;
  --base-brand-color-contrast: #ffffff;
  --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-font-weight: 400;
  --base-letter-spacing: normal;
  --base-line-height: 19px;

  --base-logo: url('/assets/logo-desktop.svg');
  --base-header-logo: url('/assets/logo-mobile.svg');

  --base-form-background: #ffffff;
  --base-form-color: var(--base-color);
  --base-form-border-radius: 7px;
  --base-form-box-shadow: 0 11px 14px -10px #aec1f7;
}
```

* Layout components should have property `isLayout` set to `true` in order to properly propagate changes in component properties

**`src/layouts/main.yml`**

```yaml theme={null}
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 convinient 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.:

```json theme={null}
{
  "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

```yaml theme={null}
title: "Zenoo Demo Project"
...
studioSettings:
  country: "Mexico"
  flowExport: !include ./flowExport.json
  logo: "/assets/logo.png"
  name: "ZenooBank"
  previewUrl: "https://onboarding.zenoo.com/"
```