═══════════════════════════════════════════════════════════════════════ DARMASTER · TECH · PLATFORM PAGE DESIGN SPECIFICATION · 2026-06-18 Document ID: DARMASTER_TECH_PLATFORM_PAGE_SPEC_20260618 Version: 1.0 · Status: Live · Scope: DARMASTER (platform-wide) ═══════════════════════════════════════════════════════════════════════ PURPOSE AND SCOPE This document defines the visual structure, colour tokens, typographic rules, layout conventions, and design patterns for all pages within the Daralbeida internal platform. It is the authoritative reference for any web designer who must build new pages that look native to the platform — not foreign. Every rule here is enforced by shared platform CSS (tokens.css, module_nav_sections.css, skin.css) and the PHP skin bootstrap (darx_load_skin). Building correctly means using these shared assets and never hardcoding values that already exist in the token system. ─────────────────────────────────────────────────────────────────────── PART 1 — PLATFORM OVERVIEW ─────────────────────────────────────────────────────────────────────── 1.1 THE FOUR ENTITIES The platform hosts four entities. Each has its own colour identity; everything else (chrome, fonts, layout) is shared across all of them. Entity code │ Full legal name │ Brand primary ────────────────────────────────────────────────────────────── DARX │ Daralbeida Brands LLC │ #B8832A (warm gold-brown) DARH │ Daralbeida Holdings LLC │ #1A4D6D (deep steel blue) DARM │ Daralbeida Maroc SARL │ #3E5B33 (forest green) DARMASTER │ Internal cockpit — not a │ nav-bg: #3C3C3E (charcoal) │ legal entity │ Never truncate or abbreviate the legal names. Always use the full suffix. 1.2 THE FIVE PAGE TYPES A designer must identify which type their page belongs to and follow the matching template exactly. Type │ Home file │ Purpose ────────────────────────────────────────────────────────────── Entity consumer home │ __/index.php │ Brand-facing landing Entity manager home │ __/home.php │ Library controls + tiles Section portal │ __//index.php │ Section document portal Document library │ __/08/index.php │ Full library + management DARMASTER cockpit │ __darmaster/home.php │ Platform control centre Sections 01–07 are content portals; section 08 is always the Library. ─────────────────────────────────────────────────────────────────────── PART 2 — BOOTSTRAPPING A PAGE (MANDATORY FIRST STEPS) ─────────────────────────────────────────────────────────────────────── Every internal platform page MUST open with these two PHP calls before any HTML output: STEP 1 — Load the skin: darx_load_skin(ENTITY, SECTION) ENTITY is the 4-letter code (DARX, DARH, DARM, DARMASTER). SECTION is '00' for home pages or the 2-digit section number ('01'–'08'). This single call emits all head links for tokens.css, the correct Google font, and every entity colour override. Without it the page has no fonts, no colours, and no tokens. STEP 2 — Emit the chrome: darx_site_header([ 'mode' => 'section', 'entity' => ENTITY, 'base' => BASE_URL, 'active' => SECTION ]) This emits the sticky top nav bar and the fixed bottom footer bar as one unit. It also loads module_nav_sections.css (nav/footer styles) and module_nav_sections.js (smart-chrome and scroll tracker). No additional nav or footer markup is ever needed. After these two calls, the following CSS tokens are available everywhere: --nav-h: 60px (fixed height of the top nav bar) --page-bg: derived (deep entity-coloured page background) --nav-bg: entity dark (the nav and footer background colour) --nav-gold: entity accent (gold/warm tone used for borders and glows) --nav-text: rgba(246,241,231,.55) (muted ivory — resting text) --nav-text-hover: rgba(246,241,231,.92) (near-white ivory — active) ─────────────────────────────────────────────────────────────────────── PART 3 — COLOUR SYSTEM ─────────────────────────────────────────────────────────────────────── 3.1 GOLD ACCENT — THE UNIVERSAL ACTION COLOUR Gold is the ONLY action and accent colour across all entities. All links, borders of active/interactive elements, icon glyphs in the nav, count numerals, and hover glows use the entity's --nav-gold. Per-entity values: DARX and DARH: --nav-gold: #D8A845 (warm mid-gold) DARM: --nav-gold: #B89A4C (cooler olive-gold) DARMASTER: --nav-gold: #C9BBA0 (pale warm sand) 3.2 PAGE BACKGROUND — ALWAYS DEEP DARK Every internal page has a deep dark background derived from the entity's nav colour: --page-bg: color-mix(in srgb, var(--nav-bg) 84%, #ffffff) This is approximately 84% of the entity's dark nav hue. Resulting visual: DARX page: very dark warm brown DARH page: very dark navy blue DARM page: very dark forest green DARMASTER page: dark charcoal (from nav-bg #3C3C3E) NEVER use a white, cream, or mid-grey body background on any internal page. The deep dark background is the platform's visual identity. 3.3 SELF-CONTAINED LIGHT OBJECTS (CARDS, MODALS, PANELS) When a UI element needs to be a light surface sitting inside the dark page — a document card, an info panel, a modal — use these FIXED colours exclusively. Do NOT use --doc-surface, --page-bg, or any theme variable; they resolve dark and will make light elements unreadable. Surface background: #F6F1E6 (warm ivory/sand) Body text: #33312E (dark charcoal ink) Muted text: rgba(51,49,46,.62) Faint text: rgba(51,49,46,.42) Gold accent: #8A7647 (muted gold for ink-on-light) Border: rgba(74,74,76,.20) Input background: #FFFFFF These values produce a warm, legible light surface on any entity's dark background. 3.4 STATUS COLOURS (DOCUMENT STATUS) live: green (#5FBF7F) review: amber (#D4A040) unpublished: red (#E0606A) archived: gray (#7A7A7A) ─────────────────────────────────────────────────────────────────────── PART 4 — TYPOGRAPHY ─────────────────────────────────────────────────────────────────────── 4.1 THE FOUR FONT TOKENS Never hardcode a font name in page CSS. Use the CSS variable token. The fonts are set via the skin CSV and injected by darx_load_skin as CSS custom properties. Token │ Current default │ Role ────────────────────────────────────────────────────────────────── var(--font-display) │ Cinzel Decorative │ Brand wordmark ONLY — locked to │ (self-hosted) │ this face. Nav wordmark, homepage │ │ H1, section main header. var(--font-body) │ Alegreya │ Body prose, document text, lede. var(--font-sans) │ Bahnschrift │ UI labels, page titles (h1 / │ (system font) │ .portal-title) at 15px. var(--font-mono) │ Source Code Pro │ Nav section buttons, eyebrow caps, │ (skin-configured) │ metadata, IDs, count chips. Cinzel Decorative is self-hosted in css/fonts/ and loads automatically via tokens.css. Never add a Google Fonts import for it. 4.2 TITLE LOCK (PLATFORM-WIDE RULE) All h1 and .portal-title elements are globally locked in tokens.css: font-family: var(--font-sans) !important font-size: var(--title-size, 15px) !important This is SITEWIDE and cannot be locally overridden without !important on both properties. The title size is 15px by default and adjustable in the skin CSV (title-size key). Two explicit exceptions use Cinzel Decorative instead: .home-hero h1: the entity homepage hero title .section-main-header: the section portal's main header 4.3 TYPE SCALE — FOUR LEVELS Use these classes on any element to apply a type level. Do not replicate the rules locally. Class │ Font token │ Size │ Role ────────────────────────────────────────────────────────────────── .t-h1 │ --font-display │ clamp(20–30px) │ Display / hero title .t-h2 │ --font-mono │ 0.72rem CAPS │ Eyebrow / section caption .t-h3 │ --font-mono │ 0.58rem CAPS │ Small label / tag .t-h4 │ --font-mono │ 0.9rem bold │ Data value / count All mono type-scale items are uppercase with letter-spacing. Colour is --nav-gold. 4.4 SPACING TOKENS The platform runs a compact spacing scale: --space-compact: 6px --space-normal: 12px --space-spacious: 20px --gap-tight: 3px --gap-normal: 6px --gap-loose: 12px Default corner radius: 0 (square). Current skin CSV sets radius:45 for pill-like buttons. Base font size: 16px. ─────────────────────────────────────────────────────────────────────── PART 5 — CHROME: TOP NAV BAR ─────────────────────────────────────────────────────────────────────── The nav bar is position:sticky, top:0. It is 60px tall (--nav-h). It has two internal rows: ROW 1 — WORDMARK ROW LEFT: Entity wordmark in var(--font-display), uppercase, 16px, colour rgba(246,241,231,.82). Links to: index.php for entities, home.php for DARMASTER. RIGHT: "DARMASTER INTRANET" button — same pill bevel style as section tabs (see Part 7), links to the platform cockpit. This button is IDENTICAL and ALWAYS PRESENT on every internal page. ROW 2 — SECTION BUTTONS (8 TABS IN A 4-COLUMN GRID) All 8 section tabs (01–08) are always rendered. Each tab shows: — Gold mono section NUMBER on the left (font-weight:700) — Uppercase mono section LABEL on the right (font-weight:400) The tab for the current section gets the ACTIVE state: gold text, full-saturation gold border, gold-tinted gradient background, inset glow. Nav background: solid --nav-bg, 1px gold border at bottom, box-shadow below. The nav is NEVER auto-hidden via CSS. It stays sticky and visible always. ─────────────────────────────────────────────────────────────────────── PART 6 — CHROME: BOTTOM FOOTER BAR ─────────────────────────────────────────────────────────────────────── The footer (position:fixed, bottom:0) is emitted automatically by darx_site_header. It uses the same entity dark palette as the top nav but at ~62% opacity over a dark base. Icon-only buttons in a centred row: [■ INTRANET] [‹ BACK] [⌂ HOME] [› FORWARD] [⛓ SITEMAP] [? GUIDE] [0%] Each button is the same bevel pill style as nav tabs. No text labels — icons only. The ⌂ HOME button leads to the entity manager home (home.php). The ■ INTRANET icon leads to the DARMASTER cockpit. The rightmost [0%] is a scroll-position percentage readout in mono. The footer has its own smart-chrome behaviour: it slides down off-screen while scrolling down and returns on any scroll-up. A bottom-edge pointer peek also shows it. ─────────────────────────────────────────────────────────────────────── PART 7 — THE BEVEL BUTTON RECIPE ─────────────────────────────────────────────────────────────────────── ALL interactive pill/button elements across the platform share one visual recipe. Nav tabs, footer buttons, tool buttons, filter toggles, and form actions all use variants of this single pattern: RESTING STATE: border: 1px solid (--nav-gold at 32% opacity) background: linear-gradient (--nav-bg darkened 18% top → lightened 12% bottom) box-shadow: inset 0 1px 0 rgba(246,241,231,.10) (top ivory highlight bevel) inset 0 -1px 0 rgba(0,0,0,.32) (bottom dark bevel) 0 1px 0 rgba(0,0,0,.22) (thin drop shadow) color: rgba(246,241,231,.55) (muted ivory) font: mono face, uppercase, tight spacing border-radius:4px HOVER STATE adds: color: rgba(246,241,231,.92) (near-white ivory) border-color: --nav-gold (full saturation gold) box-shadow: adds 0 0 0 1px gold ring + 0 0 14px gold soft halo transform: translateY(-1px) (1px lift — whole pixels only) ACTIVE (pressed) STATE: gradient inverts (darker at bottom) — a tactile "pressed-in" beat transform: none This single recipe gives every button a dimensional, embossed quality consistent with the dark entity backgrounds. Never use flat fills or outline-only styles for platform buttons. ─────────────────────────────────────────────────────────────────────── PART 8 — PAGE TYPE: ENTITY HOMEPAGE ─────────────────────────────────────────────────────────────────────── 8.1 LAYOUT The entity homepage uses
: a centred vertical flex column, full-width, deep entity background (var(--page-bg)) with a faint gold radial glow near the top. Text is centre-aligned. No sidebar. No grid at the page level. 8.2 HEADER SECTION (TOP OF
)

Entity name in Cinzel Decorative, clamp(22–32px), colour: color-mix(--nav-gold 38%, #fff) (gold-tinted ivory).

Tagline. var(--font-mono), 0.72rem, uppercase, letter-spacing 0.22em, colour: --nav-gold.

Prose description. var(--font-body), 12px, line-height 1.55, colour: rgba(246,241,231,.85) (muted near-white). 8.3 TILE GROUP PANELS Below the header text, one or two group panels appear. Each

is: background: color-mix(--nav-bg 26%, #ffffff) (semi-dark warm panel) border: 1.5px solid (--nav-gold at 50% opacity) border-radius:32px (very round) padding: 13px 24px 18px A group caption

sits above the tiles: var(--font-mono), 0.72rem, uppercase, letter-spacing 0.2em, muted gold. 8.4 TILES (CIRCULAR) Tiles inside a group are CIRCLES (.ptile, ~83px diameter). Each tile has: — dark entity-toned fill (derived from --nav-bg) — gold hairline border — centred SVG icon + short mono label below — on hover: diagonal gold sheen sweeps across the circle (::after pseudo) — border-radius:50% on all corners — no straight edges Standard tiles on the manager homepage: LIBRARY group (2 tiles): SKIN (→ 08/skin.php) · MAP (→ 08/sitemap.php) SECTIONS group (8 tiles): sections 01–08, each with section name + doc count + live iframe preview thumbnail ─────────────────────────────────────────────────────────────────────── PART 9 — PAGE TYPE: SECTION PORTAL ─────────────────────────────────────────────────────────────────────── 9.1 MODULE STRUCTURE Section portals are composed of named modules rendered in configured order. Default order: Module │ What it renders ───────────────────────────────────────────────────────────── header │ Top nav + bottom footer (darx_site_header) toolbar │ Subheader: breadcrumb + doc count + search intro │ Rich-text introduction (configured in skin CSV) highlight │ Multimedia / featured content block (optional) doclist │ List of live published documents footer │ (already emitted by the header module) 9.2 SECTION MAIN HEADER (.section-main-header) The large section title uses var(--font-display) (Cinzel Decorative) by default. It is the brand header for the section, large and prominent. It sits above the toolbar, below the nav. 9.3 TOOLBAR The portal toolbar (.portal-toolbar) sticks under the nav at top: var(--nav-h-real). Contents: LEFT: Breadcrumb: ENTITY · NN · SECTION NAME (mono uppercase) RIGHT: Total doc count in a debossed count chip Toolbar background is the entity dark surface, with a 1px gold border at the bottom. 9.4 DOCUMENT ROWS (.portal-row) Each document row shows: — background: var(--row-bg, #F6F1E6) (shared light row token, warm ivory) — thin left border in the file entity's brand colour — document title in var(--font-body), single line, truncated with ellipsis — status dot or LED on the right — clicking opens the document in its viewer The --row-bg token is the SINGLE SOURCE for row fill on all three list surfaces: section portal rows, sitemap doc rows, and library list rows. Default: #F6F1E6. ─────────────────────────────────────────────────────────────────────── PART 10 — PAGE TYPE: DOCUMENT LIBRARY (/08) ─────────────────────────────────────────────────────────────────────── 10.1 LAYOUT Same deep entity background. Content constrained to a 700px centred column (14px side padding). Toolbar controls AND document rows both align to this same 700px column — they are always on the same axis. 10.2 THE FOUR BAND LAYERS Documents are grouped into four nested layers, each a progressively lighter shade of the file entity colour (--ent, set inline on the group element): Layer │ CSS class │ Fill │ Left border ────────────────────────────────────────────────────────────────────────── L1 │ .doc-section-label │ 44% entity + #F6F1E6 base │ 5px solid entity L2 │ .doc-subcat-label │ 30% entity + #F6F1E6 base │ 4px solid entity L3 │ .doc-dept-label │ 18% entity + #F6F1E6 base │ 4px solid entity L4 │ .doc-card │ var(--row-bg) = #F6F1E6 │ 3px entity bottom L1 is the strongest (entity-hued header band). L4 rows are the lightest (near white). All band text is #33312E (ink) regardless of shade. The entity colour is set via --ent on the wrapper. 10.3 DOCUMENT CARD (LIST VIEW) A single-line row containing from left to right: — file-type icon chip (.doc-ico) — info icon chip (.doc-ico-info, ⓘ — shows purpose tooltip on hover) — document title in var(--font-body), one line, overflow:ellipsis — status LED chip (.dc-led) — open-arrow chip (.doc-card-arrow) → All icon chips share one design: dark (nav-bg based) fill, gold hairline border, ivory glyph. When expanded, a two-column technical panel (.dc-band) opens with FIXED light colours (#F6F1E6 bg, #33312E text) — always light regardless of entity, as an info panel. 10.4 STATUS LED (THE GLASSY DOME) The LED chip houses a glassy dome (::before pseudo-element) using a radial gradient with a bright specular highlight at 38% 30%, plus an outer glow: live: green dome (#5FBF7F) review: amber dome (#D4A040) unpublished: red dome (#E0606A) archived: gray dome (#7A7A7A) This LED appears identically in list rows and tile cards, always inside the dark icon chip housing. 10.5 TOOLBAR (LIBRARY FILTER BAR) The library toolbar is a full-width dark band (--bp-band2, a step darker than --page-bg) that floats over content. All controls inside it (search input, filter dropdowns, view toggles, export button) are 28px tall, border-radius:2px (squared — not pill). The dark band is full-width chrome; the controls inside it are constrained to the 700px column. 10.6 COUNT CHIPS (DEBOSSED WELLS) Document count chips appear on all band labels. They are PRESSED INTO the surface (recessed, not raised): background: light ivory mixed with 10% entity colour border: 1px solid (entity colour 32% opacity) box-shadow: inner top shadow (recess) + bottom light lip color: --ent (entity colour, solid — the numeral is entity-coloured) font: 9.5px mono, font-weight 700, border-radius 9999px (pill) ─────────────────────────────────────────────────────────────────────── PART 11 — PAGE TYPE: DARMASTER COCKPIT ─────────────────────────────────────────────────────────────────────── The DARMASTER cockpit uses TAB-MODE navigation instead of the eight numbered section buttons. The nav row shows arbitrary named tabs (e.g. OVERVIEW · DOCS · SKINS · LIBRARY). The nav chrome, page background, fonts, and layout rules are identical to all entity pages. The cockpit overview page shows live iframe thumbnails of all entity homepages arranged in a grid. ─────────────────────────────────────────────────────────────────────── PART 12 — ADDITIONAL UI PATTERNS ─────────────────────────────────────────────────────────────────────── 12.1 SECTION BAND TABS (FOLDER-SPINE STYLE) Section and department bands in the sitemap and library appear as folder-tab-style elements with a visible left spine: background: flat fill: entity colour at 22% over transparent border-left: 4px solid (entity colour at 78%) — the folder spine border: 1px solid (entity colour at 42%) — hairline frame border-radius:0 4px 4px 0 (square left, slightly rounded right) box-shadow: -2px 3px 5px -1px rgba(0,0,0,.40) (left + bottom lift) font: 13px, font-weight 600, uppercase, mono The band name is always one line: white-space:nowrap, overflow:hidden, text-overflow:ellipsis. A disclosure caret (▾) at the right rotates 90° when collapsed. 12.2 THE GUIDE OVERLAY (? BUTTON) A contextual help overlay (.darx-guide-overlay) is triggered by the ? footer button. It is a centred light card using the standard light palette (#F6F1E6 / #33312E). Specs: max-width: 420px, border-radius:14px box-shadow: 0 18px 50px -12px rgba(0,0,0,.50) z-index: 1200 (above all chrome) 12.3 SCROLLBAR THEMING The browser scrollbar is themed to the entity palette using the standard scrollbar-color CSS property: scrollbar-color: (nav-gold 55% + nav-bg) var(--nav-bg) This eliminates the default white arrow buttons in Chromium/Edge and colours track and thumb in entity tones. 12.4 SUBHEADERS THAT PIN UNDER THE NAV Any subheader, toolbar, or secondary bar that must pin below the sticky nav uses: position: sticky; top: var(--nav-h-real); --nav-h-real is updated by module_nav_sections.js to reflect the actual current nav height (it can grow taller than 60px when section tabs wrap onto a second row on narrow screens). ─────────────────────────────────────────────────────────────────────── PART 13 — PAGE TYPE: TWO-PANEL GUTTER LAYOUT ─────────────────────────────────────────────────────────────────────── Used by tool pages that need a left filter/selector panel and/or a right action/preview panel alongside a central content column (e.g. the Doc Registry fable5_doclib.php, the skin manager). Both panels are invisible chrome on wide screens and off-canvas drawers on narrow screens. The central content column never changes width. 13.1 THE CRITICAL REQUIREMENT — THE WRAP MUST BE THE 700px COLUMN The outer wrapper (.f5_main) MUST itself be the centred 700px column: .f5_main { width: 700px; margin: 0 auto; } The content band inside it fills 100% of that column: .f5_content { width: 100%; } If instead the wrapper is full-width and only an inner band is 700px, the negative margins that park the side rails will push them PAST the screen edges and they will vanish. The negative-margin gutter technique only works when the wrap IS the column. 13.2 WIDE VIEWPORT (> 1239px) — RAILS FLOAT INTO THE GUTTERS At this width the page gutters (approx. (viewport-width − 700px) / 2) are wide enough to hold a 244px panel. Both side rails are parked there invisibly — outside the 700px column, so the content never loses width. LEFT RAIL — filter / selector: .f5_rail { position: sticky; top: 16px; float: left; width: 244px; margin-left: -260px; } The negative margin (-260px) pulls the 244px-wide rail to the LEFT of the column's left edge, leaving a 16px gap between the rail's right edge and the column. The rail is sticky so it stays in view while the content scrolls. RIGHT RAIL — actions / bulk-edit / preview: .f5_actions_rail { position: sticky; top: 16px; float: right; width: 244px; margin-right: -260px; } Mirror of the left rail, floated into the right gutter. Edge handles (the tab buttons that toggle the drawers): .f5_rail_handle { display: none; } (hidden on wide — not needed) .f5_actions_handle { display: none; } (hidden on wide — not needed) 13.3 NARROW VIEWPORT (≤ 1239px) — OFF-CANVAS DRAWERS At this breakpoint the gutters are too small to hold the panels. The page goes fluid and both rails become fixed position-drawers that slide in from their edge. Page container goes fluid: .f5_main { width: auto; max-width: 1100px; padding: 18px 16px 60px; } LEFT RAIL becomes an off-canvas drawer: position: fixed; top: var(--nav-h-real); left: 0; z-index: 60; width: 268px; max-width: 86vw; transform: translateX(-100%); (hidden off the left edge) transition: transform .25s ease; overflow-y: auto; max-height: calc(100vh - var(--nav-h-real) - 16px); box-shadow: 6px 0 30px rgba(0,0,0,.5); Adding class .rail-open to the .f5_layout wrapper slides it in: .f5_layout.rail-open .f5_rail { transform: translateX(0); } RIGHT RAIL mirrors it on the right: position: fixed; top: var(--nav-h-real); right: 0; z-index: 60; transform: translateX(+100%); (hidden off the right edge) .f5_layout.actions-open .f5_actions_rail { transform: translateX(0); } 13.4 SCRIMS When a drawer opens, a full-viewport scrim appears behind it to dim the content and catch a tap-to-close. Generated via pseudo-elements on .f5_layout: Left drawer scrim (.f5_layout.rail-open::before): position: fixed; left:0; right:0; bottom:0; top: var(--nav-h-real); z-index: 59; background: rgba(0,0,0,.50); Right drawer scrim (.f5_layout.actions-open::after): same recipe, z-index 59. 13.5 EDGE HANDLES On narrow viewports each rail has a small tab pinned to the viewport edge that opens its drawer. Both handles are 27px wide × 38px tall. LEFT HANDLE (gold — matches the filter rail): position: fixed; left: 0; top: calc(var(--nav-h-real) + 10px); z-index: 61; border-radius: 0 9px 9px 0; border-left: none; background: var(--nav-bg); color: var(--nav-gold); border: 1px solid (nav-gold at 45% opacity); When .rail-open: handle shifts right to left:268px so it clears the open drawer. RIGHT HANDLE (accent #E2BF83 — distinct from gold): position: fixed; right: 0; top: calc(var(--nav-h-real) + 10px); z-index: 61; border-radius: 9px 0 0 9px; border-right: none; background: var(--nav-bg); color: #E2BF83; border: 1px solid (#E2BF83 at 55% opacity); Hover: background fills solid #E2BF83, text turns dark #1c1205. When .actions-open: handle shifts left to right:268px. 13.6 RAIL INTERIOR STYLE Both rails use the same dark surface as the toolbar: background: var(--nav-bg) (entity dark) border: 1px solid (doc-rule — gold at 25% opacity) border-radius: 6px padding: 12px Internal sections are separated by 1px rules at rgba(241,233,216,.14). Rail title: var(--font-mono), 0.62rem, uppercase, letter-spacing .22em, muted ivory. All controls inside the rail use the standard bevel button recipe (see Part 7). 13.7 HTML SKELETON

…page content…
JS toggles .rail-open / .actions-open on .f5_layout and closes on scrim click. ─────────────────────────────────────────────────────────────────────── PART 14 — RULES TO NEVER BREAK ─────────────────────────────────────────────────────────────────────── — Never hardcode a font name. Use --font-display / --font-body / --font-sans / --font-mono. — Never add a Google Fonts link for Cinzel Decorative — it is self-hosted. — Never set a light or white body background. Pages are always deep dark. — Never use --doc-surface or --page-bg for self-contained light cards or modals. — Never suppress or modify the nav or footer. They are permanent chrome. — Never use camelCase in CSS classes, PHP functions, or JS identifiers. snake_case always. — Never use hyphens in file names. Underscores only. Format: ENTITY_CAT_DESC_YYYYMMDD.ext. — Never auto-hide the nav via CSS or JS transforms. The nav is always sticky-visible. — Never verify on one entity and assume the others are fine. Check all affected surfaces. — Never use mb_* PHP functions. Use strlen / preg_match with /u flag / strtolower only. — Never put a new file at a site root without knowing the established tree. Ask first. — Never copy-paste a date from a source file. The date in a filename is today's date. ─────────────────────────────────────────────────────────────────────── PART 15 — QUICK REFERENCE: TOKEN CHEAT SHEET ─────────────────────────────────────────────────────────────────────── Token │ Meaning / use ────────────────────────────────────────────────────────────────── --nav-h │ 60px — height of the top nav bar --nav-bg │ Deep dark entity colour (nav background) --nav-gold │ Entity gold accent (borders, glows, icons) --nav-text │ rgba(246,241,231,.55) — muted ivory text --nav-text-hover │ rgba(246,241,231,.92) — active ivory text --nav-border │ Gold at 24% opacity — nav hairline border --page-bg │ 84% nav-bg mixed with white — page fill --font-display │ Cinzel Decorative — brand headers, wordmark --font-body │ Alegreya — prose and document text --font-sans │ Bahnschrift — page titles, UI labels --font-mono │ Source Code Pro — nav, codes, metadata --title-size │ 15px — locked h1/.portal-title font-size --row-bg │ #F6F1E6 — shared light row fill (all lists) --space / --gap │ Compact spacing/gap (from skin scale) --radius │ 0 default — skin CSV currently sets 45 ─────────────────────────────────────────────────────────────────────── AI PROMPTS ─────────────────────────────────────────────────────────────────────── Use these prompts when generating platform pages or design components with an AI assistant. PROMPT 1 — NEW INTERNAL PAGE SCAFFOLD "Build a new internal platform page for entity [ENTITY] (full names: DARX = Daralbeida Brands LLC, DARH = Daralbeida Holdings LLC, DARM = Daralbeida Maroc SARL). The page must call darx_load_skin('[ENTITY]', '[SECTION]') first, then darx_site_header() for nav and footer chrome. Page background is var(--page-bg) — always deep dark entity colour. Content column: 700px centred, 14px side padding. All fonts via CSS token (--font-display / --font-body / --font-sans / --font-mono). Buttons use the platform bevel recipe: dark gradient + gold hairline + gold glow on hover. Self-contained light panels use fixed #F6F1E6 background and #33312E text. No hardcoded colours or font names." PROMPT 2 — ENTITY COLOUR REFERENCE "Daralbeida platform entity brand-primary colours: DARX #B8832A, DARH #1A4D6D, DARM #3E5B33, DARMASTER nav-bg #3C3C3E. Gold accents: DARX/DARH --nav-gold #D8A845, DARM #B89A4C, DARMASTER #C9BBA0. Page background: color-mix(nav-bg 84%, #ffffff). Light objects on dark pages: background #F6F1E6, text #33312E." PROMPT 3 — UI COMPONENT CHECK "Daralbeida platform UI rules: bevel buttons (dark gradient, gold hairline, gold glow hover, no flat fills). Count chips are debossed wells (inset shadow, light ivory + entity-coloured numeral). Status LEDs are glassy domes (radial gradient, specular highlight) in green/amber/red/gray per status. Section bands are folder-tab style with a left spine in the entity colour. All lists use --row-bg (#F6F1E6) for row fills. Self-contained light surfaces always use fixed #F6F1E6/#33312E — never theme variables." ─────────────────────────────────────────────────────────────────────── REVISION HISTORY ─────────────────────────────────────────────────────────────────────── v1.1 2026-06-18 Added Part 13: two-panel gutter layout (collapsible left/right rails, breakpoint behaviour, scrims, edge handles, HTML skeleton). v1.0 2026-06-18 Initial platform page design specification. Covers five page types, four entities, colour system, typography, chrome, and all UI design patterns. END OF DOCUMENT