Initial commit
This commit is contained in:
Z User
153
skills/pdf/configs/components.md
Executable file
153
skills/pdf/configs/components.md
Executable file
@@ -0,0 +1,153 @@
|
||||
# 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:**
|
||||
```json
|
||||
{
|
||||
"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:**
|
||||
```json
|
||||
{
|
||||
"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:**
|
||||
```json
|
||||
{
|
||||
"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:**
|
||||
```json
|
||||
{
|
||||
"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:**
|
||||
```json
|
||||
{
|
||||
"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:**
|
||||
```json
|
||||
{
|
||||
"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:**
|
||||
```json
|
||||
{
|
||||
"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.
|
||||
Reference in New Issue
Block a user