.. _introduction:

Introduction
============

.. contents:: On this page
   :local:
   :depth: 2

What is Branding by Aulasneo?
------------------------------

**Branding by Aulasneo** is a centralized platform designed to streamline the creation,
management, and delivery of custom visual themes for `Open edX <https://openedx.org>`_
learning management systems. It enables platform administrators and instructional designers
to control the full visual identity of their Open edX sites — including colors, typography,
logos, and layout — without requiring CSS expertise, infrastructure management, or Docker
image rebuilds.

Open edX Paragon Design Tokens
--------------------------------

Since the **Ulmo** release of Open edX, the platform supports `Paragon design tokens
<https://openedx.github.io/paragon/>`_, a modern CSS custom property system that allows
visual styles to be changed in real time. This mechanism eliminates the traditional
requirement to:

* Rebuild Docker images whenever a style changes.
* Restart platform services after visual updates.
* Maintain a separate CSS build pipeline.

Design tokens are CSS custom properties — variables prefixed with ``--pgn-`` — that the
Open edX Micro-Frontend (MFE) layer reads and applies to the user interface at runtime.

How Branding by Aulasneo Helps
--------------------------------

While design tokens are a powerful capability, using them directly still presents significant
challenges for most organizations:

* Knowledge of CSS and CSS custom properties is required.
* A build and hosting infrastructure for the compiled theme files is needed.
* Tutor configuration must be managed and kept in sync with theme changes.

Branding by Aulasneo resolves all of these concerns by providing:

* A guided, form-based interface to set colors, typography, spacing, and layout.
* Managed hosting for compiled CSS theme files, logo assets, and font files.
* One-click generation of the Tutor configuration commands needed to connect your site.
* Real-time style updates — change a color and see it reflected immediately after a browser
  hard-refresh, with no rebuilds or restarts required.

Key Concepts
-------------

The following concepts are central to working with Branding by Aulasneo.

**CSS Theme**
   The base set of visual styles for your site. A theme defines your color palette, typography,
   spacing, and any global CSS overrides. See :ref:`css_themes`.

**Theme Variant**
   A named layer of overrides applied on top of the base theme. The two most common variants
   are ``light`` and ``dark``, but you can create as many as needed. See :ref:`theme_variants`.

**Logo Set**
   A collection of image assets — main logo, white logo, trademark logo, favicon, and
   home page banner — grouped under a single name for easy reuse. See :ref:`logo_sets`.

**Font Set**
   A collection of custom font files (WOFF2, WOFF, TTF, OTF) that can be assigned to a theme's
   typography settings. See :ref:`font_sets`.

**Build**
   A compiled, deployable package that combines a CSS theme, an optional logo set, and an
   optional font set into a set of hosted URLs ready to be consumed by your Open edX MFEs.
   See :ref:`builds`.

**Style Map**
   An interactive reference catalog of all Paragon CSS custom properties (``--pgn-*`` variables)
   used by Open edX, showing their default values and interdependencies. See :ref:`style_map`.

Architecture Overview
----------------------

When a build is published, Branding by Aulasneo hosts the following assets:

* Compiled CSS files for the core theme and each variant (e.g., ``core.css``, ``light.css``,
  ``dark.css``).
* Image assets for logos and favicon.
* Font files for any custom typography.

These assets are referenced in your Tutor configuration via the ``BRANDING_*`` and
``BRANDING_PARAGON_THEME_URLS`` variables. The Open edX MFE layer reads these URLs at runtime
and injects the corresponding styles and assets. Because the assets are served from the
Branding server, you can update your theme at any time without touching your Open edX
installation.

.. figure:: screenshots/style_guide.jpg
   :alt: Style guide overview
   :width: 100%

   The Branding by Aulasneo interface provides a visual style guide to help you design
   consistent themes.

`Back to Home <index.html>`_