Visual Configuration and Styles

Purpose of customization

Anjana Data offers extensive functional configuration options —such as defining roles, permissions, metamodels, workflows, or templates— that allow the platform to be tailored to each client's processes and organizational structure.
In addition to this functional layer, the platform allows for visual customization that provides aesthetic coherence with the corporate identity of each organization.

This guide focuses on that visual and aesthetic aspect of customization. It describes how to adapt the graphic elements of the Anjana Data interface, including iconography, logos, style sheets (CSS), and translation files, to deliver an experience more aligned with each organization's brand image.

The goal is to ensure that each Anjana Data implementation maintains its own visual identity, without altering the functional configuration or the internal behavior of the platform.

Visual customization scopes in Anjana Data Platform

The visual customization of Anjana Data Platform allows modification of the graphic and presentation elements that define the appearance of the interface, while respecting the technical and functional structure of the product.
The main scopes of this customization are:

• Iconography and logos
  These allow the icons used on the platform to be adapted and the default Anjana Data logo to be replaced with the organization's own.
  Icons are managed in SVG format within specific folders in the S3/MinIO storage, according to their purpose (attributes, subtypes, languages, etc.).

• Visual styles (custom CSS)
  Through the custom-css.css file, it is possible to modify design aspects such as colors, typography, or backgrounds. This customization must be carried out following the technical recommendations to ensure compatibility and correct functioning of the interface.

• Translations and internationalization (i18n)
  Anjana Data Platform supports multilingual environments. Translations are managed through json files generated from Portuno and stored in the i18n bucket. This allows the interface to be adapted to each organization's working languages.

Together, these elements allow the visual and linguistic identity of the organization to be reflected in Anjana Data, maintaining a consistent, professional, and brand-aligned user experience.

Technical storage structure for visual elements

Anjana Data Platform uses a file storage system on cloud servers compatible with Amazon S3/MinIO. This environment acts as a repository for unstructured data —such as images, videos, backups, or configurations— required both for internal operation and for the visual customization of the platform.

To ensure correct and organized operation, Anjana uses different buckets with specific purposes:

• imports → Stores the Excel files used in bulk object imports.

• dsa → Saves DSA contracts and any file attached to entities or relationships.

• workflows → Contains the XML files with the configuration of the workflows executed in Anjana (folder names must have more than three characters).

• textarea → Stores images uploaded in attributes of the ENRICHED_TEXT_AREA type.

• cdn → Includes the visual and configuration resources for the application, such as icons, translation files, or custom styles. This content must be preloaded from the releases.anjanadata.org repository (releasesraw/com/anjana/cdn under the corresponding version).

• i18n → Stores the translation files generated from Portuno to enable multilingual support in Anjana (by default, es-ES.json and en-US.json).

Within cdn/, iconography and style customization is organized according to the structure described in this document:

• /images/attribute-icons → Icons belonging to the application's core (not customizable).

• /images/subtype-icons → Customizable subtype icons for entities and relationships.

• /brand → Organization logo for the header and loading indicator.

• custom-css.css → Custom styles file to adapt the visual appearance of the platform.

Detail of the cdn/ bucket and customizable content

The cdn/ bucket, located in the MinIO or S3 storage environment, brings together all the customizable elements that define the visual appearance of the Anjana Data platform.
Its purpose is to allow each organization to adapt aspects such as icons, logos, translations, and visual styles, so that the interface reflects its corporate identity.

These elements are organized into subfolders according to their purpose, which are detailed below.

i18n folder

This folder contains the translation files used by the platform to support multiple languages.

Translations are generated and updated from the Configuration Portal, using the Actions > Upload translations files button available in the header. This process retrieves the information stored in the database and automatically generates the corresponding files, which are then uploaded to MinIO/S3 storage.

Together, the content of the cdn/ bucket forms the visual foundation of customization in Anjana Data.
Through proper configuration of its folders and files, it is possible to maintain a consistent visual identity adapted to each client's brand, without compromising the stability or operation of the platform.

images folder

Within cdn/, the images/ folder groups the images and icons used in the user interface. In turn, it is organized into several subfolders, each with a specific purpose:

attribute-icons folder

This folder located in cdn/images contains the icons associated with attributes of type SELECT_IMG, MULTI_SELECT_IMG, SELECT_IMG_TXT, and MULTI_SELECT_IMG_TXT.
These icons can be customized to improve the visual identification of values in the application.

brand folder

This folder located in cdn/images allows the corporate image of the platform to be customized.
In it, the organization's logo can be uploaded, which will be displayed both in the main header and in the loading indicator during loading processes.

If no custom logo is desired, the folder must remain empty, in which case the default Anjana Data Platform design will be applied.

subtype-icons folder

This folder located in cdn/images includes the customizable icons for entity and relationship subtypes that appear in the Data Portal.
Thanks to this folder, each organization can assign specific icons to different object types, improving the clarity and usability of the interface.
The technical requirements and naming convention are also detailed in the Custom icons section of this document.

Iconography

Anjana Data uses a set of icons that contribute to the usability, visual consistency, and customization of the platform.
Icons are classified into two main groups: default icons, which are part of the product's core, and customizable icons, which allow the platform's appearance to be adapted to each organization's visual identity.

Default icons

Default icons are included natively in Anjana Data Platform and cannot be modified by the user.
They represent platform modules, common actions, and system states, and are accompanied by descriptive tooltips that help users understand their function, thus improving the user experience.

Flag icons for languages

The system includes a predefined set of flags representing the available languages on the platform (including the co-official languages of Spain).
To correctly configure languages, you must use the i18n code correspondence table included in the annex of this document.

Status icons

Anjana Data uses specific icons to represent the states of objects and workflows, which are included by default in the application.

The currently supported states are:

• Approved

• Deprecated

• Disabled

• Draft

• Expired

• Imported

• Pending

• Rejected

• On hold.

Customizable icons

In addition to the default icons, Anjana Data Platform allows certain graphic elements to be customized to adapt the platform's appearance.
These customizations are managed in the cdn/images/ bucket, within the specific subfolders described below.

Icons for attributes with image (attribute-icons/)

This folder contains the icons used in attributes configured with the following data types:
SELECT_IMG, MULTI_SELECT_IMG, SELECT_IMG_TXT, and MULTI_SELECT_IMG_TXT.

Technical requirements for attributes with image:

For the icons to display correctly, the following requirements must be met:

• Format: SVG only

• Recommended maximum file size: 5KB

• Recommended maximum dimensions: 20px * 20px

• Required aspect ratio: 1:1

• The file name must follow the structure below (case-sensitive): <attributeName>_<value>.svg

Corporate logo (brand/)

The brand/ folder allows the organization's logo to be included, which will be displayed both in the platform header and in the loading indicator during load.
If no logo is desired, this folder can be left empty.

Requirements for the client's corporate logo for the header

For the logo to display correctly, the icons must meet the following requirements:

• Format: SVG only

• Recommended maximum file size: 5KB

• Recommended maximum dimensions: 80px * 25px

• Required aspect ratio: 3.2:1

• The file name must be: logo.svg

Subtype icons (subtype-icons/)

Anjana Data allows the icons associated with object subtypes in the Data Portal to be customized, improving the visual identification of entities and relationships.

Requirements for subtype icons

For the icons to display correctly on all screens of the application, the following requirements must be met:

• Format: SVG only

• Recommended maximum file size: 5KB

• Recommended maximum dimensions: 20px * 20px

• Required aspect ratio: 1:1

• The file name uploaded to Minio must match the object subtype in lowercase. For example: for the entity subtype DATASET, the icon must be named dataset.svg

Style customization (CSS)

Anjana Data allows the visual styles of the interface to be customized by including an additional CSS file.
This functionality makes it possible to adapt colors, fonts, sizes, or backgrounds to the organization's visual identity, while maintaining the base structure of the platform.

Custom style file

To apply a style customization, a file named custom-css.css must be created and stored in the root of the cdn/ bucket in the MinIO/S3 environment.
This file will override or complement the platform's predefined styles at the time the interface loads.

Technical requirements for the style file:

• The file must be named exactly custom-css.css.

• It must be placed in the root of cdn/, not inside subfolders.

• It is recommended to use comments within the CSS to document the changes made.

• Modified styles should use the !important rule to ensure that the changes take precedence over the application's original definitions.

Customization best practices

• Limit changes to cosmetic style elements (colors, fonts, icons, or sizes), avoiding changes to structural or interaction components.

• Check the results across different modules and screen resolutions before applying the changes to production.

• Maintain a log or version control of the custom-css.css file to facilitate traceability and recovery in case of incidents.

• Coordinate modifications with the design or product team to ensure consistency with the corporate visual identity.

Customization example

The following example shows how to modify the background color of the login screen using the custom-css.css file:

The login screen background will display the corporate color defined in the custom file.

ANNEX

This annex details the flags and language identifiers included in Anjana Data Platform, as well as their correspondence with the Configuration Portal settings.
Each flag is associated with an i18n code used in the Languages table and in the language column of the Translations table. For more information about language and translation configuration, consult the Anjana Data Functional Configuration Guide.