chore: 1.1.0 release

skills/open-kimi-ppt/reference/design_system/04_promotion/03/en/pine-soot-pictorial.md

@@ -0,0 +1,171 @@
+# Report Name · Trend Report 2025 STYLE DESIGN SYSTEM
+
+## 1. Style Positioning
+
+Suitable for commercial-film trend reports, creative-asset library introductions, ad-film direction proposals, and PPTs studying directing/cinematography styles. Aimed at readers with a film aesthetic and commercial creative context: build the feeling with cinematic images, then complete the judgment with short titles, short paragraphs, and characteristic tags.
+
+Medium-high information density: a content page typically contains 1 trend viewpoint, 2–3 groups of narrow-column text, 1 group of Characteristics tags, and either a single large image or a multi-image collage. It uses black backgrounds, white text, bold titles, narrow body columns, and large-area imagery; strong colors come mainly from the images, not from a decorative system.
+
+Underlying principles:
+1. **Images first, words summarize**: images supply mood, color, and evidence; titles name the trend, body text explains — decorative graphics are not a substitute for image evidence.
+2. **Black base first, readability above image integrity**: core text must sit on black or a sufficiently dark carrier; when necessary, sacrifice image area to keep white text clear.
+3. **One trend per page, one skeleton for the whole report**: the collage approach may vary, but each page serves only one core concept and stably keeps the header, page number, title, body, and characteristic tags.
+
+## 2. Page Skeleton
+
+- **Canvas ratio**: landscape widescreen 16:9. Images may be full-height, full-width, or edge-to-edge collaged — the traditional white canvas is not kept.
+- **Base background**: black or dark-toned imagery. Content pages use either "pure-black info zone + image zone" or "full dark image with overlaid text". White page backgrounds and light-gray office-template bases do not belong to this system.
+- **Margins**: outer margins are narrow — header, page number, and images approach the edges; body text keeps stable inner padding. Image collages use hard cuts or extremely narrow gaps.
+- **Title zone**: located left, center-left, or in the upper half of the black info zone; may overlap images but must land on dark areas. Trend-page titles usually break compactly into 2–3 lines.
+- **Body zone**: composed of a "text explanation zone + image evidence zone". The text zone takes about one-third to one-half; the image zone may be a single image, dual zones, or a multi-image grid.
+- **Header**: small all-caps navigation is stably placed at top-left, top-center, and top-right — e.g., the brand name, COMMERCIAL, FILMMAKING, TREND REPORT. Slightly letterspaced, low-level — it does not carry primary information.
+- **Footer/page number**: a small white page number at bottom-left, close to the edge but not touching it. Do not use large page numbers, watermark page numbers, or complex footer bars.
+- **Logo**: a small identity mark may sit at top-right, presenting the new theme name as plain small text or left empty — no graphic logo is drawn; white and extremely small. Do not enlarge it into a key-visual logo.
+- **Sources/footnotes**: if sources are added, place them at the bottom of the body zone or near the footer, below the body text — do not build a standalone footnote bar.
+- **Navigation**: no TOC-style sidebar, breadcrumbs, or section color blocks; continuous reading relies on the small top navigation and page numbers.
+- **Divider lines**: explicit lines are rare; zones are divided by black-block boundaries, image cut lines, and text-column spacing.
+- **Watermarks/background graphics**: the cover may have high-saturation pink vertical stripe blocks; content pages build no repeating watermark system. Background graphics must not expand into routine decoration.
+- **Default reading path**: large title → large image/collage → short body → Characteristics tags → header/page number.
+
+## 3. Content Organization
+
+- **Title style**: use phrasal trend names or strong opinion sentences. Trend titles may be 2–4 words, such as "Analog Footage", "Docu-style", "One Shot Ads", "Bold, Saturated Colors"; an intro page may use a full sentence. Avoid long subtitle-style titles.
+- **Title line breaks**: hard line breaks are allowed, each line forming a forceful phrase; leading is tight and the text block is heavy. Do not set the title as one long, thin line spanning the page.
+- **Information sentence**: an opening or closing page may use one strong statement; content trend pages need no extra large subtitle — avoid weakening the trend name.
+- **Body organization**: small type in narrow columns, usually 2–3 short paragraph blocks; explain the trend's background, visual characteristics, and commercial use value — no list-style long-form argumentation.
+- **Grouping logic**: "trend name → explanation paragraph → Characteristics tags → image evidence". Multiple images are merely multiple samples of the same trend — they do not act as parallel sections.
+- **Viewpoints per page**: each page covers only one trend or one report action. Do not juxtapose multiple unrelated concepts, and do not compress multiple trends into a comparison table.
+- **Body density**: block the text in narrow columns; long runs of continuous text must not span most of a page. If there are more than 3 paragraph blocks, reduce the image count or split the page.
+- **Key-point style**: use capsule tags, not traditional bullets; be cautious when adding bullets or numbered lists.
+- **Keyword emphasis**: use bold titles, all-caps subheadings, capsule tags; inside body text use no colored highlighter marks and no underlines.
+- **Numbers/units/time**: numbers are mainly inline in body text; no giant-number pages or KPI dashboards, and no expansion into chart-based components.
+- **Source footnotes**: white/light-gray text smaller than body, placed at the bottom of the same text zone; no long URLs, long quotes, or footnote numbering systems.
+
+## 4. Content Page Layout System
+
+### A. Black text column + single large image on the right
+
+For report introductions, service descriptions, and single-trend explanations. A black info column on the left or center-left takes about one-third to one-half; the right side is a full-height image. The title sits on top; the body sits below in 1–2 narrow columns. People or light sources should face/lead toward the text zone, avoiding visual escape. Unsuitable for pages that need multiple samples or complex classification.
+
+### B. Left text + right multi-image collage
+
+For showing multiple applications of the same visual style. The left black base holds the title, body, and tags; the right uses a 2–3 column irregular or gridded collage — images edge-to-edge, no rounded corners, no shadows. Close-ups, environments, materials, and people may be mixed, but the color tone must serve the same trend. Unsuitable for linear reasoning, step flows, or data comparison, because multiple images break the reading order.
+
+### C. Full dark image with overlaid text
+
+For trend pages with strong atmosphere and strong emotion. The image bleeds full-page; text sits in naturally dark areas or black-overlay zones; the title may be center-left or center-right, with the body right beneath it. Do not place body text directly on bright skin, sky, or complex textures. Unsuitable for images with even brightness, dense detail, and no readable area.
+
+### D. Multi-zone image montage + central/side text
+
+For summarizing multiple clips into one trend. Images are spliced top-bottom, left-right, or in large-medium-small modules; text sits on black zones or dark image blocks; zones are hard-cut — avoid rounded-card styling. The title anchors the visual center; tags sit at the bottom of the text block. Unsuitable when each image's theme differs too much or when per-image captions are needed.
+
+### E. Large image background + CTA closing
+
+For closing pages and licensing/service notices. A strongly atmospheric large image is the background; the left side or a dark area holds the title, a longer description, and one small white button. The button is only an action entry — do not turn it into a marketing landing-page mega-button. Unsuitable for too much body text, multiple action entries, or pricing/package information.
+
+### F. Cover split composition
+
+The cover consists of a large image, black fields, and high-saturation vertical stripe blocks; the title is large and fractured — partial glyphs may be sliced — paired with small theme words. Only for covers or strong section openings; do not copy it frequently onto ordinary content pages, or the report's rhythm breaks.
+
+## 5. Color System
+
+- **Structural black #000000 / #080204 / #0B0A0A**: for base color, info columns, dark masks, and header/footer carrier color — the largest area. Cannot be replaced with white or light gray; brand replacement may only use a near-black that is dark enough.
+- **Primary text white #FFFFFF / #F5F5F2**: for titles, body, header, page numbers, and tag text. Must contrast strongly with the background; do not introduce multiple text colors on the same page to create hierarchy.
+- **Auxiliary gray #9A9A94 / #6E6F6D**: for low-level navigation, secondary notes, or faint text on dark areas. Small area — cannot be used for main body text; avoid low contrast.
+- **Cover/strong accent pink #FC1AED / #F018D8**: for the cover's vertical stripes — not a general-purpose highlight for body pages; content pages must not casually use pink buttons, titles, or icons.
+- **Warm red-orange image colors #EF1721 / #D46D49 / #9E3C26**: from lighting, skin tones, sunsets, and warm interiors. Must not be artificially expanded into chart series colors or large color blocks unless the image itself provides them.
+- **Deep blue-cyan image colors #02213C / #0B4F73 / #3F92A6**: from water, night scenes, and cool-toned imagery. May guide image selection, but are not a standalone UI primary color.
+- **Natural green/olive #12260C / #555948 / #6D6B5B**: from nature, grassland, and documentary-feel pages. Appears in large areas only within image zones; text stays white-on-black.
+- **Tag stroke white/light gray #FFFFFF / #CFCFCB**: for Characteristics capsule borders and small tags — keep linework restrained.
+
+A page's dominant hue is decided by its images; beyond black and white, do not actively introduce more than 1–2 high-saturation hues. No data/state color system exists — do not add red-green up/down, traffic-light, or multi-series chart palettes. Brand replacement may only affect the cover accent blocks or the local image color direction — it cannot change the black-background, white-text skeleton.
+
+## 6. Fonts and Text Hierarchy
+
+Use sans-serif fonts. Body text centers on Liter (Chinese: MiSans), titles use Archivo Black extensively (via customFonts), and navigation/some small text uses Liter. When replicating, pair an ultra-heavy black sans with a regular sans-serif; small navigation uses narrow letterspacing / all-caps.
+
+- **Giant cover title**: 8–9x body text; may be broken across lines, locally compressed, or offset; cover only.
+- **Content page main title**: 4–4.5x body text, ultra-heavy weight, tight leading, usually 2–3 lines — the highest level.
+- **Intro/CTA title**: 3.5–4.5x body text; may be a full sentence; keep bold and short lines.
+- **Subheading/column word**: 0.85–1.1x body text, often all-caps or bold, e.g., Characteristics.
+- **Body text**: 1x, regular weight, narrow columns, slightly tight leading but not crowded. Do not bold large stretches of body text.
+- **Capsule tag text**: 0.7–0.85x body text, often all-caps, bold or semibold, inside stroked small capsules.
+- **Header navigation**: 0.7–0.85x body text, slightly letterspaced, all-caps, low-contrast but readable.
+- **Footnotes/page numbers**: 0.6–0.75x body text, small white type.
+- **Chart/table labels**: if they must be added, keep them at or below 0.8x body text, following white-on-black.
+
+Serif body text, handwriting fonts, cartoon fonts, and excessive italics are forbidden. Italics may only mark very few quotes or special words — not as a hierarchy rule.
+
+## 7. Chart Language
+
+The source files have no data-chart system of bars, lines, pies, axes, legends, or gridlines. **Do not proactively turn trend content into a data dashboard**.
+
+If charts must be added:
+- Charts serve only as secondary proof; their area must not exceed the image key visual; place them in the black info zone or on dark cards.
+- Axes and gridlines use extremely thin light-gray, low-contrast lines; data labels use small white sans-serif.
+- Series colors never expand into rainbow — at most white/gray + one accent color from the page's imagery.
+- No 3D charts, glowing lines, gradient area charts, complex legends, or decorative data icons.
+- Key data may be marked with bold white text or small capsules — no large-area colored callouts.
+
+Prefer juxtaposed image frames, Characteristics tags, and short paragraphs over complex quantitative charts.
+
+## 8. Tables and High-Density Information
+
+The source files have no traditional table system. High-density information is presented as narrow-column body text, multi-image collages, and capsule keywords; comparison topics prefer "tag groups + short paragraphs + image samples" over large tables.
+
+- **Tag groups**: the Characteristics zone is multiple small capsules arranged horizontally, wrappable; white/light-gray stroke, transparent fill on black, all-caps text. Used for keywords, shooting techniques, and visual traits — not long sentences.
+- **Text columns**: body may split into 2 or 3 columns, each of short paragraphs with clear column spacing; left-aligned; tops may align to the title baseline or the body start.
+- **Image matrix**: multi-image collages act as a "sample table"; no header, no numbering — unified theme and tone form the set.
+
+If a table must be used: the header is small all-caps white text; lines are extremely thin light gray; the base stays black or dark gray; no zebra striping, colored cells, thick borders, or Excel-style grids. Numbers right-aligned, text left-aligned; total rows are distinguished only by bold or thin lines. The table's area must be controlled — it cannot replace the image key visual.
+
+## 9. Components and Graphic Elements
+
+- **Small top navigation text**: repeats near the top edge — white/light gray, all-caps, low-level. Do not add icons, underlines, or colored selected states.
+- **Top-right identity mark**: presents the new theme name as plain small text — white, vertical or tight against the corner — as a brand signature only; no graphic logo is drawn.
+- **Page number**: small white type at bottom-left, appearing stably. Must not be enlarged into a decorative numeral.
+- **Characteristics module**: a subheading + multiple capsule tags. The subheading may be all-caps; capsules use thin strokes, rounded/capsule shapes, transparent-on-black fill. 3–6 tags are appropriate — more looks like a filter panel.
+- **Black info block**: a page structure zone, not a card; hard-cut, no shadow, no stroke, no rounded corners — carries the title and body.
+- **Image collage frame**: images are directly cropped and aligned — no rounded corners, no drop shadows, no photo frames; sizes may vary, but no decorative borders are added.
+- **CTA button**: only on the closing page — a small white-background black-text rectangle or lightly rounded button. It must not flood every page.
+- **Divider lines**: not a routine component; if separation is needed, use only image boundaries or extremely thin lines. No thick lines, colored lines, or dashed process arrows.
+- **Icons/arrows/matrix marks**: if used, they must be extremely small, white, linear, label-auxiliary — never become a colorful icon system.
+
+## 10. Texture and Forbidden Items
+
+Visual richness comes from the light-and-shadow, grain, color, and composition of real imagery — not from PPT effects.
+
+**Forbidden:**
+- Large white office templates, light-gray background pages.
+- Colorful icon sets, emoji, cartoon illustrations, 3D graphics, skeuomorphic buttons.
+- Gradient title text, glowing strokes, neon text effects, complex shadows, glassmorphism.
+- Stacked rounded cards, drop-shadow photo frames, heavy borders, decorative geometric patterns.
+- Large centered text blocks, full pages of bullets, traditional TOC/process-arrow pages.
+- Multicolor data charts, red-green status lights, rainbow legends.
+
+**Use with caution:**
+- Large high-saturation color areas: should come only from images or cover accent blocks — content UI does not actively spread color.
+- Buttons: only on CTA/closing pages; keep the count at one.
+- Tables and charts: only as secondary modules when the topic truly needs quantitative proof — they cannot replace images.
+- Icons: only small linear aids — never colorized.
+- Transparent masks: may improve text readability, but should be near-black with natural edges — no obvious gradient effects.
+
+**Allowed on special pages:**
+- The cover may use strong pink vertical stripes, split titles, and large black fields.
+- The closing page may use a CTA button and longer explanatory text.
+- Full-image pages may let the image fill the canvas, but must keep a readable dark zone.
+
+## 11. Generation Checklist
+
+- Skeleton: is it a 16:9 dark cinematic report page? Are the small top navigation, bottom-left page number, and small top-right identity mark kept?
+- Copy: does each page express only one trend/theme? Is the title short and forceful, and the body short paragraphs in narrow columns?
+- Hierarchy: are titles markedly larger than body, and is Characteristics below body explanations but above the footer? Is confusion over specific font sizes avoided?
+- Coloring: is black-background white-text the core? Do high-saturation colors come from images or the cover, rather than arbitrary UI decoration?
+- Layout: do images carry the main emotional evidence? Does text land on black zones or dark areas? Is white text over complex bright images avoided?
+- Charts: if present, are they minimal, low-contrast, secondary proof? Are 3D, rainbow colors, and complex legends avoided?
+- Tables: if present, are they black-based with thin lines and no Excel feel? Have tables not replaced image samples?
+- Components: are small navigation, capsule tags, hard-cut image collages, and black info blocks used? Are shadowed cards and decorative lines avoided?
+- Forbidden items: no emoji, colorful icons, illustrations, gradient glow, complex textures, 3D, thick borders, or large centered text blocks?
+- Quality: check text overflow, truncation, garbled text, overlap, low contrast, images covering titles, empty tags, distorted proportions, missing page numbers, mechanical template repetition, or overly identical page layouts.
+- No cards by default: unless the user explicitly requests them, it is strictly forbidden to use rounded-rectangle or rectangular cards to build hierarchy or alignment: line segments, whitespace, and font-size differences are better solutions
+- No evenly divided compositions: unless no other layout is available, do not default to thirds, quarters, or two-by-two matrices. This includes three-part conclusions such as a three-way split plus a title plus a conclusion