mantle-ai-trader/skills/pdf/configs/components.md

Components — Art Direction JSON Lexicon

This file defines the strict component vocabulary for the Creative pipeline.

CRITICAL RULE: DO NOT OUTPUT HTML OR CSS. You are an Art Director. You only output JSON. To use these components, insert their corresponding JSON objects into the components array of your page blueprint. The design_engine.py will automatically compile them into gallery-grade visual assets.

---

1. Glass_Canvas

The primary container for readable body text. Simulates printed text on frosted acrylic.

JSON Blueprint Structure:

{
  "type": "Glass_Canvas",
  "markdown_content": "### The Divide\nYour text goes here. Supports standard Markdown.",
  "tension_score": 0.8 
}

Parameters:

• markdown_content: (Required) The actual text. Recommended under 150 words; absolute max 250 words.
• tension_score: (Optional, 0.0 to 1.0) Semantic tension. Drives dynamic font weight (300 to 900). Use 0.1 for calm/light text, 0.9 for crisis/heavy text. Do NOT use on data-heavy pages.

---

2. Hero_Typography

Massive, page-dominating title text that physically interacts with the background via blend modes.

JSON Blueprint Structure:

{
  "type": "Hero_Typography",
  "content": "THE WEIGHT<br>OF SILENCE",
  "weight": "black",
  "variant": "standard",
  "scale": 6
}

Parameters:

• content: (Required) The text. Use <br> for deliberate typographic line breaks.
• weight: (Required) "black" (900 weight, dominating) or "thin" (100 weight, whisper-quiet/elegant).
• variant: (Optional) "standard" (default) only. "vertical_accent" is NOT implemented in design_engine.py — the engine silently ignores this parameter. Use Floating_Meta component instead for rotated/vertical decorative text.
• scale: (Optional, integer 1–6) Typographic scale level. The engine maps this to fluid CSS clamp() sizes:
  • 6 → clamp(64px, 12vw, 150px) — Hero/Display, maximum impact
  • 5 → clamp(48px, 8vw, 96px) — Primary Title
  • 4 → clamp(32px, 5vw, 56px) — Subheadline
  • 3 → clamp(20px, 3vw, 32px) — Lead Paragraph
  • 2 → 16px — Body
  • 1 → 10px — Meta/Caption If omitted, the engine uses the default hero font size from CSS.

---

3. Floating_Meta

Small-text metadata positioned vertically in corners, mimicking art monograph indexes.

JSON Blueprint Structure:

{
  "type": "Floating_Meta",
  "position": "bottom-right",
  "items": [
    "CATALOG NO. 2026.031",
    "EDITION 1/500"
  ]
}

Parameters:

• position: (Required) "top-left", "top-right", "bottom-left", or "bottom-right".
• items: (Required) Array of short strings (dates, edition numbers, refs).

---

4. Stat_Block

Data sculpture. Transforms boring numbers into massive visual objects.

JSON Blueprint Structure:

{
  "type": "Stat_Block",
  "number": "97.3",
  "unit": "%",
  "label": "COMPLETION RATE"
}

Parameters:

• number: The core massive digit.
• unit: Tiny unit attached to the number.
• label: Metadata label below the number.

---

5. Hairline_Divider

Ultra-thin separator lines. Structural, like fold lines in print.

JSON Blueprint Structure:

{
  "type": "Hairline_Divider",
  "style": "accent"
}

Parameters:

• style: "bleed" (full width edge-to-edge) or "accent" (short centered 30% line).

---

6. Page_Ghost_Number

Giant, 4% opacity watermark numbers that become part of the page's atmosphere.

JSON Blueprint Structure:

{
  "type": "Page_Ghost_Number",
  "number": "03"
}

---

7. Shaped_Canvas (Advanced Semantic Shape-Wrapping)

A container where text flows around a non-rectangular shape. The empty space created by the shape IS the visual design.

JSON Blueprint Structure:

{
  "type": "Shaped_Canvas",
  "shape_keyword": "wave",
  "markdown_content": "The ocean stretched endlessly... (recommended under 150 words, absolute max 250)"
}

Parameters & Shape Presets:

• shape_keyword: MUST be one of the following:
  • "circle": Unity, spotlight, focus.
  • "wave": Ocean, flow, fluidity.
  • "diagonal_slash": Disruption, change, energy.
  • "diamond": Luxury, precision, crystalline.
  • "wedge_right": Direction, progress, forward motion.
• markdown_content: Text to wrap around the shape.

CRITICAL Layout Constraint: If a page contains a Shaped_Canvas, that page's archetype MUST be set to "shaped_editorial" in the JSON. Never mix Shaped_Canvas and Glass_Canvas on the same page.

---

Blueprint Assembly Guidelines

When constructing the JSON pages array, keep these layering and composition rules in mind:

1. Backgrounds: Do NOT try to place background SVGs as components. Backgrounds are declared globally in the art_direction.background_svg field ("flow", "grid", "noise", or "continuous_flow").
2. Layering: The order of objects in the components array roughly dictates their top-to-bottom rendering.
3. Breathing Room: Less is more. A page with just one Hero_Typography and one Floating_Meta is highly sophisticated. Cramming 5 components on a page communicates desperation.