On this page
- Scope of application
- Immutable architectural rules
- Canonical runtime values
- Read before any design change
- Current design contracts
- Design recognition and selection
- Template contract
- CSS contract
- Window and admin content
- Allowed changes
- Not without an explicit order
- Workflow for AI agents
- Minimum tests
- Final report of an AI
Reference status: 2026-07-14
This file is the mandatory working context for AI agents for tasks on designs, themes, skins, menus and design windows. The explanatory human documentation is under Design, themes and skins.
Scope of application
domain: dbxapp-design
frontend_design_root: dbx/design
design_selector_module: dbx/modules/dbxMenu
runtime_owner: dbx/include/dbxWebApp.class.php
template_owner: dbx/include/dbxTPL.class.php
skin_client_owner: dbx/js/lib/utilities.js
core_loader: dbx/js/lib/core.js
current_frontend_designs:
- dbxapp
- flowers
admin_default_design: dbxapp
Immutable architectural rules
- A design is an independent package under dbx/design/{Name.
- Design packages do not inherit private CSS, JS or image files from each other.
- Domain logic remains in modules; Designs include layout and representation.
- Global infrastructure is reused: Bootstrap, Bootstrap Icons, jQuery core.js, dbxTPL, OpenWinAjax and UI-State.
- A publicly selectable design needs htm/default.htm.
- [dbx:content is the mandatory marker for the module/page content.
- Skins are over dbx colordesigns about dbx design guided.
- Admin modules with admin in the module name for administrators against default design admin dissolved.
- The horizontal admin menu also remains horizontal in the Flowers frontend.
- No new iframe, Ajax, window or persistence architecture without an explicit request and an update of this documentation.
- Guided design creation and design AI run over dbxDesign admin and dbxKiDesignService; Free file writing paths are not a substitute.
Canonical runtime values
| Value | Meaning | Source / persistence |
|---|---|---|
| dbx design | Selected design or alias User/admin | Request and Remember-State |
| dbx page | Design page variant | System variable |
| dbx lng | Active language | Request and Remember-State |
| dbx color | Canon Skin ID | Request and Remember-State |
| dbx activ design | Optionally already dissolved design | System variable |
| dbx activ page | Optionally already removed page | System variable |
| dbx window | Window mode; Select Current window | Request/Systemvariable |
| dbx ajax | Module content only, no design shell | Request/Systemvariable |
The attributes are in dbxWebApp::check_design() dissolved:
user -> config.default_design_user
admin -> config.default_design_admin
Current configuration:
default_design_user: dbxapp
default_design_admin: dbxapp
default_color: blau
Read before any design change
At least check these files:
15_Design_Themes_Skins.md
dbx/include/dbxWebApp.class.php
dbx/include/dbxTPL.class.php
dbx/include/dbxApi.php
dbx/modules/dbx/cfg/config.php
dbx/modules/dbxMenu/dbxMenu.class.php
dbx/modules/dbxMenu/tpl/htm/dbx-top-main.htm
dbx/js/lib/core.js
dbx/js/lib/utilities.js
dbx/design/{betroffenes-design}/htm/default.htm
dbx/design/{betroffenes-design}/css/base.css
dbx/design/{betroffenes-design}/css/theme.css
dbx/design/{betroffenes-design}/css/glass-3d.css (nur wenn vorhanden)
In addition to Flowers:
dbx/design/flowers/js/flowers.js
dbx/design/flowers/css/colors.css
dbx/design/flowers/css/skin-hell.css
dbx/design/flowers/css/skin-dunkel.css
Current design contracts
dbxapp
id: dbxapp
purpose: technisches Standard- und Admin-Design
navigation: horizontal
skins:
blau: Blau
gruen: Grün
gelb: Gelb
rot: Rot
hell: Hell
dunkel: Dunkel
default_skin: blau
Flowers
id: flowers
purpose: organisches Frontend für Blumen- und Pflanzenhandel
navigation:
frontend: links-vertikal
admin: oben-horizontal
visual_language:
- holz
- pflanzen
- kupfer
- floral
skins:
hell: Light
dunkel: Dark
default_skin: hell
design_script: dbx/design/flowers/js/flowers.js
Other existing Flowers files with names such as skin-blau.css There is no approval to display these variants in the menu. The visible options are in dbxMenu::skin_options() established.
Design recognition and selection
dbxMenu::frontend_design_options() recognize lists under this contract:
include, wenn: dbx/design/{name}/htm/default.htm existiert
exclude, wenn: {name} mit _ oder - beginnt
An AI may not introduce a second static design list for a new design. Labels are currently derived from the directory name; dbxapp uses its dedicated wordmark; dbxapp.
Template contract
One default.htm perform the following tasks:
required:
- valid_html_document
- title_marker: "{dbx:title}"
- content_marker: "[dbx:content]"
- design_attribute: "data-dbx-design={dbx:design}"
- skin_attribute: "data-dbx-skin={dbx:color}"
- skin_stylesheet: "{dbx:skin_css}"
- skin_class: "{dbx:skin_class}"
- core_script: "dbx/js/lib/core.js?design={dbx:design}"
recommended:
- dbxHeader
- dbxMain
- dbxContent
- dbxFooter
- windrop
- dbxWindowCloseAll
- dbxBackToTop
optional_slots:
- "[dbx:logo] -> htm/logo.htm"
- "[dbx:branding] -> htm/branding.htm"
- "[dbx:footer] -> htm/footer.htm"
When copying a design template, hard paths to the original design are to be completely replaced. Only vendor and central dbxapp resources remain in common.
CSS contract
colors.css: semantische Tokens und designweite Variablen
skin-*.css: Skinwerte und Kontrastmodus
base.css: Seitenschale, Navigation, responsive Layout
theme.css: visuelle Komponentenoberfläche
glass-3d.css: optionale designweite Effekt- und Tiefenschicht
c-*.css: einzelne Systemkomponenten
m-menu.css: Menüvarianten
Decision rule:
Farbe/Kontrast? -> skin-*.css oder colors.css
App-Shell/Navigation? -> base.css
Panel/Form/Report? -> theme.css oder passendes c-*.css
Fachkomponente? -> dbx/modules/{modul}/design/
Verhalten? -> vorhandene Core-Lib oder Design-JS
No unnecessary !importantCreate chains. Before one z index-Fix Stacking Contexts (first)Position, transformer, filter, overflow, IsolationExamine the parents involved.
Window and admin content
Current status:
iframe_isolation: false
window_page: _window
admin_window_page: not_implemented
ajax_response_has_design_shell: false
open_window_shell_owner: calling_frontend
admin_component_style_owner: admin_module
The designation adminWin is a possible later destination, but not a current file or runtime rule. An AI must not document or use it before implementation, fallback and testing exist.
Allowed changes
- Visually improve an existing design.
- Complement your own design assets.
- Complement another skin, even if the menu and client normalization are adjusted.
- Create a new complete design package.
- Design-specific responsive or accessibility fixes.
- Keep the Flowers menu scrollable and drop-downable.
Not without an explicit order
- default design admin from dbxapp Switch off.
- Admin and frontend rights based on the design.
- Move logic to Design-JavaScript.
- dbxWebApp, dbxTPL or core.js only for a single optical correction.
- make a design dependent on another private design package.
- Do not introduce new skin IDs without server and client-side normalization.
- one of the following: adminWin- or implement iframe architecture only partially.
Workflow for AI agents
- Assignment to a level: global design, skin, system component or module component.
- Read active design structure and all selectors of the affected component.
- Check if the error occurs in Layout, Stacking Context, Overflow, UI-State or Module-CSS.
- Change the smallest appropriate level.
- Cache-buster in default.htm only increase if browser cache covers the modified design file otherwise.
- Check both designs for regression if common menu or core files have been changed.
- Test guest, user and admin status.
- Test Light/Dark and responsive widths.
- Update this reference when an architecture contract changes.
For a user-launched AI design, the controlled packet path applies instead:
?dbx_modul=dbxKi&dbx_run1=briefing_design
-> dbx.design.briefing.v1
-> Antwort dbx.design.result.v1
-> ZIP-Pfad- und Dateitypprüfung
-> Dateivorschau
-> dbxForm-Freigabe
-> Backup + Staging + vollständige Vertragsprüfung
The AI only delivers files under result/design/. PHP, modules, DD, FD, database actions and free shell statements are prohibited in this Agreement.
Minimum tests
pages:
- frontend_home
- login
- cms_content
- shop_catalog
- admin_module
- openWin_or_ajax_content
states:
- guest
- authenticated_user
- administrator
- long_submenu
- narrow_viewport
- light_skin
- dark_skin
assertions:
- no_horizontal_page_overflow
- menus_reachable
- dropdown_above_content
- readable_contrast
- content_marker_rendered_once
- core_libraries_loaded
- design_choice_persisted
- admin_module_uses_admin_design
Final report of an AI
The report states:
- changed design, module and core files separately,
- visible effect for dbxapp and Flowers,
- checked roles, skins and viewports,
- remaining boundaries, in particular window/iframe insulation,
- whether a cache-buster has been changed.
Details about the User Wizard and ZIP contract: Design Studio and AI Wizard.