Document ID : DARX-TECH-HTML-STYLE-001
Title : Daralbeida HTML Document Style Guide
Version : 1.0
Status : ACTIVE
Date Created : 2026-05-25
Prepared by : PYB / Daralbeida
Style : BPGP
Department : TECH
Classification: Internal
KB Category : KB-TECH
Filename : DARX_TECH_HTML_STYLE_GUIDE_20260525.txt
Related Docs : DARX-COMM-BPGP-001
OUTLINE
--------------------------------------------------------------------------------
1. PURPOSE AND SCOPE
1.1 SCOPE
1.2 QUICK PROMPT SHORTHAND
2. FONTS
2.1 CORMORANT GARAMOND
2.2 MONTSERRAT
2.3 DM MONO
2.4 GOOGLE FONTS LINK TAG
3. COLOR PALETTE
3.1 CSS CUSTOM PROPERTIES
3.2 SUPPLEMENTAL HARDCODED VALUES
4. TYPOGRAPHY SCALE
4.1 DISPLAY TYPE — CORMORANT GARAMOND
4.2 BODY TYPE — MONTSERRAT
4.3 MONOSPACE TYPE — DM MONO
5. PAGE LAYOUT
5.1 GLOBAL RESET
5.2 BODY DEFAULTS
5.3 PAGE CONTAINER
5.4 REPORT SECTION
5.5 CONTENT BODY
6. COVER PAGE
6.1 CONTAINER
6.2 BACKGROUND GRID OVERLAY
6.3 TOP ZONE
6.4 MIDDLE ZONE
6.5 BOTTOM ZONE
7. TABLE OF CONTENTS
7.1 CONTAINER
7.2 GRID LAYOUT
7.3 TOC ITEMS
8. SECTION HEADER
8.1 LAYOUT
8.2 SECTION NUMBER
8.3 SECTION TITLE
8.4 SECTION INTRO
8.5 SECTION LABEL
9. CONTENT COMPONENTS
9.1 CALLOUT BOX
9.2 PULL QUOTE
9.3 SPEC LIST
9.4 METRICS STRIP
9.5 DATA TABLE
9.6 CARD GRID
9.7 PHASE TIMELINE
9.8 COMMODITY NOTE BOX
9.9 GOLD RULE DIVIDER
10. FOOTER
10.1 CONTAINER
10.2 INNER LAYOUT
10.3 BRAND NAME
10.4 DOCUMENT METADATA
11. GRID SYSTEM
11.1 THE GAP-AS-BORDER PATTERN
11.2 COLUMN COUNT GUIDE
12. BORDER AND SPACING
12.1 BORDER CONVENTIONS
12.2 SPACING RHYTHM
13. NAMING CONVENTIONS
13.1 DOCUMENT IDENTITY FIELDS
13.2 SECTION NUMBERS
13.3 SECTION LABELS
13.4 TABLE COLUMN HEADERS
13.5 DESIGN CONSTRAINTS
14. ACRONYMS
15. GLOSSARY
DOCUMENT CONTROL
--------------------------------------------------------------------------------
================================================================================
1. PURPOSE AND SCOPE
================================================================================
This document is the canonical style reference for all HTML documents produced
under the Daralbeida brand system. It specifies the typeface stack, color
palette, layout conventions, component patterns, and naming rules that every
HTML report, dashboard, or branded page must follow.
Paste this document, or the relevant sections, into any prompt requesting a
new HTML report or document. The instruction "apply the Daralbeida HTML style
guide" refers to this specification. Sections are numbered to allow selective
citation (e.g., "apply Sections 2 through 5 of the style guide").
1.1 SCOPE
This guide governs:
- HTML documents, reports, and dashboards produced for internal or external
distribution under any Daralbeida entity.
- AI-assisted HTML artifacts when the prompt references this guide.
- Human-coded pages where the Daralbeida brand identity applies.
This guide does not govern:
- BPGP plain-text documents. See DARX-COMM-BPGP-001 for that standard.
- Email templates or third-party platform pages.
- The daral7.com consumer product pages, which follow a separate brief.
1.2 QUICK PROMPT SHORTHAND
When requesting a new HTML document in this style, include the following
instruction verbatim in the prompt. This single block will reproduce the full
visual system described in this guide.
Template — HTML style invocation
Use the Daralbeida HTML document style: Cormorant Garamond / Montserrat /
DM Mono typeface stack; palette of Deep Blue #1A4D6D, Atlas Gold #B8832A,
Ivory #F6F1E7, Charcoal #28333A, Muted #6B7A85, Sand #EDE3CE, Rule #C8BFA8;
full-bleed Deep Blue cover page with gold rule and grid overlay; numbered
sections with DM Mono section numbers in Atlas Gold; content body indented
88px; callout boxes (blue and gold variants); data tables with Deep Blue
headers; spec-list rows; metrics strip; card grids with severity badges;
vertical phase timeline; commodity note boxes in Sand; pull quotes with
Atlas Gold left border; Deep Blue footer with DM Mono metadata. All borders
0.5px hairline. No rounded corners. No shadows. No gradients except cover
overlay.
================================================================================
2. FONTS
================================================================================
Always load these three Google Fonts via a link element placed in the document
head. All three families must be present. Omitting any one of them will break
the typography system.
2.1 CORMORANT GARAMOND
Role: display and editorial serif.
Weights and styles required:
- 300 light, normal and italic
- 400 regular, normal and italic
- 600 semibold, normal only
Use for: cover titles, section headings (h2), pull quotes, sub-headings (h3),
wordmarks, and footer brand text.
2.2 MONTSERRAT
Role: body and UI sans-serif.
Weights required:
- 300, 400, 500, 600 — normal only
Use for: all body text, paragraphs, table cells, labels, navigation, and
callout text.
2.3 DM MONO
Role: technical and metadata monospace.
Weights required:
- 400, 500 — normal only
Use for: section numbers, document IDs, metadata labels, spec-list keys,
table column headers, cover meta, badge text, timestamps, all-caps labels,
and code values.
2.4 GOOGLE FONTS LINK TAG
Copy the following URL into the href attribute of the link element, placed
in the document head before the style block. Relationship attribute:
stylesheet. This single tag loads all three families in all required variants.
https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@
0,300;0,400;0,600;1,300;1,400&family=Montserrat:wght@300;400;500;600&
family=DM+Mono:wght@400;500&display=swap
================================================================================
3. COLOR PALETTE
================================================================================
Define all color variables in the :root selector at the top of every style
block. No hardcoded color values may appear outside :root, except for the
supplemental values listed in Section 3.2.
3.1 CSS CUSTOM PROPERTIES
Variable Hex Value Primary Use
──────────────── ─────────── ─────────────────────────────────────────────
--deep-blue #1A4D6D Section titles, table headers, callout borders
(blue), footer background, cover background,
phase dots, strong text.
--atlas-gold #B8832A Section numbers, cover rule, pull-quote border,
metric units, spec keys, cover labels, TOC
numbers, phase labels.
--ivory #F6F1E7 Page background, TOC background, table cell
background, metric cells, incoterm cells.
--ocean-blue #4A7C9E Mitigation notes in cards, linked text,
secondary emphasis.
--sand #EDE3CE Commodity notes, highlighted boxes,
section separators.
--charcoal #28333A All paragraph text, table cell text,
spec values.
--muted #6B7A85 Section intro text, phase body, card body,
spec keys, TOC items, captions.
--rule #C8BFA8 All horizontal rules, table borders, spec row
dividers, card borders, grid separators.
--gold-light #EDD9A3 Cover title italic emphasis, risk-buyer badge
backgrounds, metric unit accents.
--blue-light #D4E6F1 Blue callout box background, risk-seller
badge background.
3.2 SUPPLEMENTAL HARDCODED VALUES
The following values appear in specific components and are not assigned to
CSS variables. Use them only in the contexts listed.
Value Use context
─────────── ────────────────────────────────────────────────────────────────
#FDF6E3 Gold callout box background.
#5C4012 Dark brown text on gold backgrounds.
#FDECEA High-risk badge background.
#8B2020 High-risk badge text.
#FEF3C7 Medium-risk badge background.
#7C5500 Medium-risk badge text.
#E8F5E9 Low-risk badge background.
#1B5E20 Low-risk badge text.
#E8ECED Neutral or shared badge background.
================================================================================
4. TYPOGRAPHY SCALE
================================================================================
4.1 DISPLAY TYPE — CORMORANT GARAMOND
Cover title (h1):
- Font: Cormorant Garamond / weight 300 / style normal
- Size: 64px / line-height: 1.1 / letter-spacing: -0.01em
- Color: #ffffff (white on deep blue cover background)
- Italic emphasis elements (em): color --gold-light
Section title (h2):
- Font: Cormorant Garamond / weight 300 / style normal
- Size: 40px / line-height: 1.15 / letter-spacing: -0.01em
- Color: --deep-blue
Sub-heading (h3):
- Font: Cormorant Garamond / weight 600 / style normal
- Size: 22px / line-height: 1.4 / letter-spacing: 0.01em
- Color: --deep-blue
Pull quote:
- Font: Cormorant Garamond / weight 400 / style italic
- Size: 21px / color: --deep-blue
4.2 BODY TYPE — MONTSERRAT
Body paragraph:
- Font: Montserrat / weight 400
- Size: 14px / line-height: 1.85 / color: --charcoal
- Margin-bottom: 1.5rem
Section intro:
- Font: Montserrat / weight 400 / style italic
- Size: 13px / line-height: 1.75 / color: --muted
Callout text:
- Font: Montserrat / weight 400
- Size: 13px / line-height: 1.7
Card body:
- Font: Montserrat / weight 400
- Size: 12px / line-height: 1.65
Cover subtitle:
- Font: Montserrat / weight 400
- Size: 13px / line-height: 1.7 / letter-spacing: 0.04em
4.3 MONOSPACE TYPE — DM MONO
Section number:
- Font: DM Mono / weight 400 / size: 11px
- Letter-spacing: 0.15em / text-transform: uppercase / color: --atlas-gold
Section label (kicker):
- Font: DM Mono / weight 400 / size: 9px
- Letter-spacing: 0.25em / text-transform: uppercase / color: --atlas-gold
Table headers:
- Font: DM Mono / weight 500 / size: 11px
- Letter-spacing: 0.06em / text-transform: uppercase
Spec keys:
- Font: DM Mono / weight 400 / size: 10px
- Letter-spacing: 0.08em / text-transform: uppercase / color: --muted
Badges and metadata:
- Font: DM Mono / size: 9-10px / letter-spacing: 0.1-0.2em
- Text-transform: uppercase
Cover meta labels:
- Font: DM Mono / size: 10px / letter-spacing: 0.12em
- Text-transform: uppercase / color: rgba(255,255,255,0.4)
Cover meta values:
- Font: DM Mono / weight 500 / size: 10px / letter-spacing: 0.06em
- Color: rgba(255,255,255,0.7)
Phase label:
- Font: DM Mono / size: 9px / letter-spacing: 0.2em
- Text-transform: uppercase / color: --atlas-gold
Pull-quote citation:
- Font: DM Mono / size: 10px / letter-spacing: 0.1em
- Text-transform: uppercase / color: --muted
================================================================================
5. PAGE LAYOUT
================================================================================
5.1 GLOBAL RESET
Apply a universal box model reset to all elements:
- Margin: 0
- Padding: 0
- Box-sizing: border-box
5.2 BODY DEFAULTS
CSS properties for the body element:
- Background: --ivory
- Color: --charcoal
- Font-family: Montserrat, sans-serif
- Font-size: 14px / font-weight: 400 / line-height: 1.8
5.3 PAGE CONTAINER
Class: page. This is the centered content column within the body.
- Max-width: 960px
- Margin: 0 auto
- Padding: 0 3rem
5.4 REPORT SECTION
Class: report-section. Applied to each numbered content section.
- Padding: 5rem 0 (top and bottom)
- Border-top: 1px solid --rule
5.5 CONTENT BODY
Class: content-body. Applied to the text area within each section,
offset to clear the left-hand section number column.
- Margin-left: 88px
This 88px indent aligns body text past the section number column, producing
the two-column section header layout.
================================================================================
6. COVER PAGE
================================================================================
The cover page is a full-viewport panel with a dark blue background, a subtle
grid overlay, and three vertical zones: top (wordmark), middle (title and
subtitle), and bottom (metadata bar).
6.1 CONTAINER
Class: cover (or equivalent full-bleed container).
- Background: --deep-blue / min-height: 100vh
- Display: flex / flex-direction: column / justify-content: space-between
- Padding: 5rem 7rem
6.2 BACKGROUND GRID OVERLAY
Applied via a ::before pseudo-element on the cover container.
- Background-image: two repeating-linear-gradient layers, one at 0 degrees
and one at 90 degrees.
- Grid line spacing: 60px.
- Line color: rgba(255,255,255,0.04) — extremely subtle.
6.3 TOP ZONE
Class: cover-top. Contains the series label and wordmark.
Series label:
- Font: DM Mono / size: 10px / letter-spacing: 0.2em
- Text-transform: uppercase / color: --atlas-gold
Wordmark:
- Font: Cormorant Garamond / weight 300 / size: 16px
- Color: rgba(255,255,255,0.5) / letter-spacing: 0.12em
- Text-transform: uppercase
6.4 MIDDLE ZONE
Class: cover-main. Contains the gold rule bar, main title, and subtitle.
Gold rule bar:
- Width: 60px / height: 1px / background: --atlas-gold
- Margin-bottom: 2.5rem
Title (h1):
- Font: Cormorant Garamond / weight 300 / size: 64px / color: #ffffff
- Italic emphasis elements (em): color --gold-light
Subtitle:
- Font: Montserrat / size: 13px / color: rgba(255,255,255,0.6)
- Max-width: 560px
6.5 BOTTOM ZONE
Class: cover-meta. Contains the document metadata bar.
- Display: flex / justify-content: space-between
- Border-top: 0.5px solid rgba(255,255,255,0.15) / padding-top: 2rem
- Each meta item: DM Mono 10px / uppercase / label above strong value
Typical meta fields: Document ID, Classification, Scope, Date.
================================================================================
7. TABLE OF CONTENTS
================================================================================
The TOC section uses the same background and padding as body sections. It
appears immediately after the cover page.
7.1 CONTAINER
- Background: --ivory / padding: 5rem 0
7.2 GRID LAYOUT
TOC items use a 2-column grid with no column gap. Border-bottom on each item
acts as the row separator.
7.3 TOC ITEMS
Class: toc-item. Applied to each section entry.
- Display: flex / align-items: baseline / gap: 1.5rem
- Padding: 1rem 0 / border-bottom: 0.5px solid --rule
Number element (class: toc-num):
- Font: DM Mono / size: 10px / color: --atlas-gold / min-width: 28px
Name element (class: toc-name):
- Font: Montserrat / weight 500 / size: 13px
- Color: --deep-blue / letter-spacing: 0.02em
================================================================================
8. SECTION HEADER
================================================================================
Each body section opens with a two-column header: section number on the left,
title block on the right. The content body follows, indented 88px.
8.1 LAYOUT
The section header uses a flex row to place the number and title side by side.
8.2 SECTION NUMBER
Class: section-num.
- Font: DM Mono / size: 11px / color: --atlas-gold
- Letter-spacing: 0.15em / margin-top: 6px / min-width: 36px
- Format: zero-padded two digits (01, 02, 03...). See Section 13.2.
8.3 SECTION TITLE
Class: section-title.
- Font: Cormorant Garamond / weight 300 / size: 40px
- Color: --deep-blue / line-height: 1.15 / letter-spacing: -0.01em
- Margin-bottom: 0.75rem
8.4 SECTION INTRO
Class: section-intro. Optional italic lead paragraph below the title.
- Font: Montserrat / size: 13px / style: italic / color: --muted
- Line-height: 1.75 / max-width: 600px
8.5 SECTION LABEL
Class: section-label. Kicker text appearing above selected section titles and
above the TOC.
- Font: DM Mono / size: 9px / letter-spacing: 0.25em
- Color: --atlas-gold / text-transform: uppercase
Examples in use: "Contents", "Operational Intelligence Series", "2025 Update".
================================================================================
9. CONTENT COMPONENTS
================================================================================
9.1 CALLOUT BOX
Two variants are defined: blue (default) and gold.
Blue callout (class: callout):
- Background: --blue-light (#D4E6F1)
- Border-left: 3px solid --deep-blue
- Padding: 1.25rem 1.5rem / margin: 2rem 0
Blue label (class: callout-label):
- Font: DM Mono / size: 9px / color: --deep-blue
- Opacity: 0.7 / text-transform: uppercase
Blue body text:
- Font: Montserrat / size: 13px / color: --deep-blue / line-height: 1.7
Gold callout (class: callout callout-gold):
- Background: #FDF6E3
- Border-left-color: --atlas-gold
- Label color: --atlas-gold / body text color: #5C4012
9.2 PULL QUOTE
Class: pull-quote.
- Border-left: 3px solid --atlas-gold
- Margin: 2.5rem 0 / padding: 0.75rem 1.75rem
Quote text:
- Font: Cormorant Garamond / size: 21px / style: italic / color: --deep-blue
Citation:
- Font: DM Mono / size: 10px / color: --muted
- Letter-spacing: 0.1em / text-transform: uppercase
9.3 SPEC LIST
A two-column key/value list with hairline ruled rows.
Container (class: spec-list): margin: 1.5rem 0.
Row (class: spec-row):
- Display: flex / gap: 1rem / padding: 0.65rem 0
- Border-bottom: 0.5px solid --rule / align-items: baseline
Key (class: spec-key):
- Font: DM Mono / size: 10px / color: --muted
- Min-width: 180px / letter-spacing: 0.08em / text-transform: uppercase
Value (class: spec-val):
- Font: Montserrat / size: 13px / color: --charcoal / flex: 1
- Line-height: 1.5 / strong elements: weight 600 / color --deep-blue
9.4 METRICS STRIP
A horizontal grid of headline metric cells. Default: 4 columns. Adjust the
column count with repeat(N,1fr) as required.
Container (class: metrics-strip):
- Display: grid / grid-template-columns: repeat(4, 1fr)
- Gap: 1px / background: --rule / border: 1px solid --rule / margin: 2rem 0
Cell (class: metric-cell):
- Background: --ivory / padding: 1.5rem 1.25rem / text-align: center
Value (class: metric-value):
- Font: Cormorant Garamond / weight 300 / size: 38px
- Color: --deep-blue / line-height: 1 / letter-spacing: -0.02em
- Margin-bottom: 0.5rem
Unit span (class: metric-unit):
- Size: 18px / color: --atlas-gold
Label (class: metric-label):
- Font: Montserrat / size: 10px / color: --muted
- Letter-spacing: 0.1em / line-height: 1.4 / text-transform: uppercase
9.5 DATA TABLE
Container (class: data-table-wrap): margin: 2rem 0 / overflow-x: auto.
Table (class: data-table):
- Width: 100% / border-collapse: collapse / font-size: 12.5px
Header row:
- Background: --deep-blue / color: #ffffff
- th elements: padding 0.85rem 1rem / font-weight 500 / font-size 11px
Letter-spacing: 0.06em / text-align: left / text-transform: uppercase
Body rows:
- Border-bottom: 0.5px solid --rule
- Even rows: background rgba(246,241,231,0.5) — light ivory tint
- td elements: padding 0.85rem 1rem / color: --charcoal
Vertical-align: top / line-height: 1.6
Special td classes:
- td-label: font-weight 500 / color --deep-blue / size 12px
Use for row header cells.
- td-mono: Font DM Mono / size 11px / color --muted
Use for codes, reference strings, and structured values.
9.6 CARD GRID
Used for risk cards, comparison cards, and feature breakdowns.
Container (class: risk-matrix):
- Display: grid / grid-template-columns: repeat(3, 1fr)
- Gap: 1rem / margin: 2rem 0
- For two-column pairs: repeat(2,1fr)
Card (class: risk-card):
- Border: 0.5px solid --rule / padding: 1.25rem / background: #ffffff
Card header (class: risk-card-header):
- Display: flex / justify-content: space-between / align-items: center
- Margin-bottom: 0.75rem / padding-bottom: 0.75rem
- Border-bottom: 0.5px solid --rule
Card title (class: risk-card-title):
- Font: Montserrat / size: 12px / weight: 600 / color: --deep-blue
- Text-transform: uppercase / letter-spacing: 0.04em
Badge (class: risk-badge):
- Font: DM Mono / size: 9px / padding: 3px 8px
- Text-transform: uppercase / letter-spacing: 0.1em
Badge severity variants:
- badge-high: background #FDECEA / color #8B2020
- badge-medium: background #FEF3C7 / color #7C5500
- badge-low: background #E8F5E9 / color #1B5E20
Card body (class: risk-card-body):
- Font: Montserrat / size: 12px / color: --muted / line-height: 1.65
Card footer (class: risk-card-mitigation):
- Margin-top: 0.75rem / padding-top: 0.75rem
- Border-top: 0.5px solid --rule
- Font: Montserrat / size: 11px / style: italic / color: --ocean-blue
9.7 PHASE TIMELINE
A vertical process timeline with connector lines through filled dots.
Container (class: phase-timeline): position: relative / margin: 2rem 0.
Item (class: phase-item):
- Display: flex / gap: 1.5rem / position: relative
- ::before pseudo-element: 1px vertical connector from dot bottom to next
dot. Left: 18px / top: 38px / background: --rule.
- Last item: ::before display none (no trailing connector line).
Dot (class: phase-dot):
- Width and height: 36px / border-radius: 50% / background: --deep-blue
Inner dot (class: phase-dot-inner):
- Width and height: 10px / border-radius: 50% / background: --atlas-gold
Content (class: phase-content): padding-bottom: 2.5rem / flex: 1
Phase label: DM Mono / size 9px / color --atlas-gold / uppercase
letter-spacing: 0.2em
Phase title: Montserrat / size 14px / weight 600 / color --deep-blue
Phase body: Montserrat / size 13px / color --muted / line-height: 1.7
9.8 COMMODITY NOTE BOX
Class: commodity-note. Used for contextual market notes and commentary.
- Background: --sand / border: 0.5px solid --rule
- Padding: 1.25rem 1.5rem / margin: 2rem 0
- Display: flex / gap: 1rem / align-items: flex-start
Icon area (class: cn-icon):
- Font: DM Mono / size: 20px / color: --atlas-gold
- Use a geometric character such as the diamond U+25C8.
Label (class: cn-label):
- Font: DM Mono / size: 9px / color: --atlas-gold
- Letter-spacing: 0.2em / text-transform: uppercase
Body (class: cn-body):
- Font: Montserrat / size: 12.5px / color: #5C4012 / line-height: 1.65
9.9 GOLD RULE DIVIDER
Class: rule-gold. A thin horizontal rule used within a content body to
separate major sub-sections without introducing a new section heading.
- Width: 100% / height: 1px / background: --atlas-gold
- Opacity: 0.3 / margin: 3rem 0
================================================================================
10. FOOTER
================================================================================
The footer is a full-bleed deep blue band at the bottom of every document.
10.1 CONTAINER
Class: report-footer.
- Background: --deep-blue / padding: 3rem 0 / margin-top: 4rem
10.2 INNER LAYOUT
The footer inner uses the page class to maintain the 960px centered column.
- Display: flex / flex-direction: row
- Justify-content: space-between / align-items: center
10.3 BRAND NAME
Class: footer-brand. Left side of the footer.
- Font: Cormorant Garamond / weight 300 / size: 14px
- Color: rgba(255,255,255,0.6) / letter-spacing: 0.15em
- Text-transform: uppercase
10.4 DOCUMENT METADATA
Class: footer-meta. Right side of the footer.
- Font: DM Mono / size: 9px / color: rgba(255,255,255,0.3)
- Letter-spacing: 0.15em / text-align: right / line-height: 1.8
- Text-transform: uppercase
Required fields: Document ID, revision number, issue date, classification.
Separate fields with a centered dot or stack on separate lines.
================================================================================
11. GRID SYSTEM
================================================================================
All multi-column layouts use CSS Grid. Flexbox is reserved for single-row
bars only (section headers, footer, cover meta). No Flexbox multi-column
content grids.
11.1 THE GAP-AS-BORDER PATTERN
The standard technique for creating ruled dividers between grid cells is the
gap-as-border pattern. Set the grid gap to 1px and the container background
to --rule. Each cell sets its own background to --ivory, which covers the gap
color inside the cell and leaves only the 1px gaps visible as hairline lines.
Container CSS properties:
- Display: grid
- Grid-template-columns: repeat(N, 1fr)
- Gap: 1px
- Background: --rule
- Border: 1px solid --rule
Cell CSS properties:
- Background: --ivory
11.2 COLUMN COUNT GUIDE
Use cases for the gap-as-border pattern:
- Metrics strip: repeat(4, 1fr) default, adjust N as content requires.
- Incoterms grid: repeat(4, 1fr) or as required.
- TOC: repeat(2, 1fr) with border-bottom on each item as row separator.
Card grids use gap: 1rem instead of the gap-as-border pattern. For card grid
specifications see Section 9.6.
================================================================================
12. BORDER AND SPACING
================================================================================
12.1 BORDER CONVENTIONS
Standard border: 0.5px solid --rule — hairline, warm gray.
Exceptions:
- Left-border accents on callout boxes: 3px solid (color varies by variant).
- Section dividers (border-top on report-section class): 1px solid --rule.
No box shadows anywhere in this design system.
No rounded corners anywhere in this design system.
No decorative gradients. The cover grid overlay is structural and is the only
permitted gradient.
12.2 SPACING RHYTHM
Vertical unit Value
──────────────────────────── ─────────────────────────────────────────────
Section padding 5rem top and bottom
Section header margin-bottom 3rem
Paragraph margin-bottom 1.5rem
Component margin 2rem top and bottom
Pull quote margin 2.5rem top and bottom
Content body indent 88px left margin
================================================================================
13. NAMING CONVENTIONS
================================================================================
13.1 DOCUMENT IDENTITY FIELDS
Every HTML document produced in this style must include the following identity
fields. These appear in two locations: the cover meta bar (Section 6.5) and
the footer right column (Section 10.4).
Required fields:
- Document ID: DARX naming convention (e.g., DARX-TECH-BI-BRANDS-001)
- Classification: Internal / Restricted / Public
- Scope: a one-line description of the document subject
- Issue date: YYYY-MM-DD format
13.2 SECTION NUMBERS
Section numbers in the rendered HTML use zero-padded two digits: 01, 02, 03,
and so on. The DM Mono font renders these as the left-column element in the
section header.
13.3 SECTION LABELS
Section labels (kicker text above section titles) are set in DM Mono,
uppercase. Examples in use: "Contents", "Operational Intelligence Series",
"Control Implication", "2025 Update".
13.4 TABLE COLUMN HEADERS
All table column headers must be uppercase. Use DM Mono or Montserrat at
11px. See Section 4.3 for full typographic specifications.
13.5 DESIGN CONSTRAINTS
The following constraints apply to every document in this system:
- No rounded corners anywhere.
- No emoji or icon fonts.
- No dark mode variants. This is a print-oriented document style designed for
light background and dark ink reading.
- No decorative gradients. The cover grid overlay is structural, not
decorative, and is the sole permitted gradient in this system.
================================================================================
14. ACRONYMS
================================================================================
Acronym Expansion
───────── ──────────────────────────────────────────────────────────────────
CSS Cascading Style Sheets
DARH Daralbeida Holdings LLC (entity code)
DARM Daralbeida Maroc SARL (entity code)
DARX Daralbeida Brands LLC (entity code)
DM Mono DM Monospace (Google Fonts typeface family)
EVOO Extra Virgin Olive Oil
HTML Hypertext Markup Language
KB Knowledge Base
px CSS pixel unit
rem CSS root em unit, relative to root font-size
TOC Table of Contents
UI User Interface
URL Uniform Resource Locator
vh CSS viewport height unit
================================================================================
15. GLOSSARY
================================================================================
Term Definition
──────────────── ──────────────────────────────────────────────────────────
Atlas Gold Brand accent color #B8832A. Used for section numbers,
rule bars, and metadata highlights.
Badge A small label indicating severity or status. Three
variants: high, medium, low. See Section 9.6.
Callout box An indented content block with a colored left border and
tinted background. Two variants: blue and gold.
See Section 9.1.
Charcoal Body text color #28333A. Default for all paragraph text.
Commodity note A sand-background contextual note box with icon, label,
and body text. See Section 9.8.
Content body The main text area of a section, indented 88px from the
left edge to clear the section number column.
Cover page The full-viewport opening panel. Deep blue background,
grid overlay, three vertical zones. See Section 6.
Deep Blue Primary brand color #1A4D6D. Used for headings, table
headers, cover background, and footer background.
Footer brand The wordmark on the left side of the footer bar.
Cormorant Garamond, uppercase, 14px. See Section 10.3.
Gap-as-border A CSS Grid technique in which a 1px gap on a
rule-colored container creates hairline dividers between
cells. See Section 11.1.
Gold rule A 60px wide, 1px tall bar in Atlas Gold placed above
the cover title. See Section 6.4.
Ivory Page background color #F6F1E7. Used for body and cells.
Metrics strip A horizontal grid of headline statistic cells.
See Section 9.4.
Muted Secondary text color #6B7A85. Used for captions, intros,
and spec keys.
Ocean Blue Secondary blue #4A7C9E. Used for mitigation notes and
linked text.
Phase timeline A vertical process diagram with dots, connector lines,
and labeled content blocks. See Section 9.7.
Pull quote A large italic excerpt with an Atlas Gold left border.
See Section 9.2.
Rule color Border and separator color #C8BFA8. Warm hairline gray.
Sand Surface color #EDE3CE. Used for commodity note boxes and
highlighted callout backgrounds.
Section label Kicker text in DM Mono uppercase, displayed above a
section title. See Section 8.5.
Section number Zero-padded two-digit prefix (01, 02...) in DM Mono at
the left of each section header. See Section 8.2.
Spec list A two-column key/value list with ruled rows. Keys in DM
Mono, values in Montserrat. See Section 9.3.
Wordmark The brand name in Cormorant Garamond weight 300,
uppercase, appearing on the cover top zone and footer.
DOCUMENT CONTROL
Document ID : DARX-TECH-HTML-STYLE-001
Title : Daralbeida HTML Document Style Guide
Version : 1.0
Status : ACTIVE
Style : BPGP
Department : TECH
Date Created : 2026-05-25
Date Revised : 2026-05-25
Last Modified : 2026-05-25
KB Category : KB-TECH
Filename : DARX_TECH_HTML_STYLE_GUIDE_20260525.txt
Review Cycle : Revise when brand palette, typeface stack, or any core layout
convention changes, or when a new component class is adopted.
Retention : Indefinite while active; archive on supersession.
Owner : PYB / Daralbeida
Distribution : Internal — all parties producing HTML documents under the
Daralbeida brand system.
COMPLIANCE : All HTML documents produced under any Daralbeida entity must
conform to the typeface stack (Section 2), color palette
(Section 3), and layout conventions (Section 5) specified
herein. Deviations require written authorization from the
document owner.
Revision History:
Ver Date Summary of Changes
────────────────────────────────────────────────────────────────────────────────
1.0 2026-05-25 Initial issue. Converted from legacy inline-prompt format
to BPGP standard.
END OF DOCUMENT