chore: 1.1.0 release

skills/open-kimi-ppt/reference/design_system/04_promotion/06/en/fresh-brand.md

@@ -0,0 +1,152 @@
+# L014 · Organization Name Equity Impact Report 2022 STYLE DESIGN SYSTEM
+
+## 1. Style Positioning
+
+Suited for brand-style annual impact reports, ESG/DEI/social-responsibility disclosures, and corporate culture and governance reports — long-form landscape digital reports. Aimed at the public, employees, partners, and reviewers, it adopts a report-style PPT that is easy to navigate, browse, and read in depth: many pages, medium-to-high body-text density, persistent navigation, with key sections switching rhythm via full-bleed, highly saturated soft colors.
+
+Centered on brand green, overlaid with flat color blocks in pink, purple, deep green, and yellow, combined with a thin top navigation, wide-margin text columns, rounded-corner card grids, and a small amount of flat illustration.
+
+Underlying principles:
+- **Long reports navigate first, individual pages express second**: consistently retain the top report name, section list, current section, and page number, establishing section position clearly before presenting text, cards, or tables.
+- **Sections use color blocks, body pages use white backgrounds**: covers, section title pages, and opinion pages may be full-bleed light green/pink/purple/deep green; explanation, data, and appendix pages prefer white backgrounds and light-colored cards, avoiding colored backgrounds swallowing small-print text.
+- **Illustration and curves handle identity, the grid handles information**: illustrations, wave lines, and music symbols do not replace titles, tables, text columns, or card grids.
+
+## 2. Page Skeleton
+
+- **Canvas ratio**: landscape 16:9, aimed at web-report/PDF landscape reading, not a traditional live-presentation template.
+- **Global margins**: content pages keep wide whitespace on all sides; the left side holds the logo, title, and body start point, the right side is used for a second/third text column, illustration, card, or data module. Content never touches the edge; even full-bleed color-background pages retain a safe area.
+- **Header system**: white-background content pages consistently place a small brand mark, report name, section navigation, current section/subsection, and page number at the top. The header is light and understated; a thin wave/path line may run through the top-center.
+- **Footer system**: no prominent regular footer; footnotes, sources, and explanations are placed below the body or near tables, in small, low-contrast text. Do not build a heavy footer bar.
+- **Title area**: content-page titles sit in the upper-left body area, mostly short words or phrases. Section pages use "number + section name" or a standalone section name, noticeably enlarged and placed at left/left-center, not stacked in the center.
+- **Body area**: uses text columns, card grids, image-text pairing, opinion manifestos, and tables/data disclosure. Default path: upper-left title → left body/main point → center-right cards/illustration/chart → bottom annotation.
+- **Cover/section pages**: may be full-bleed light green, light pink, purple, or deep green, with a large wave-terrain graphic at the bottom or side, and a flat illustration at the right/corner. The logo is small and restrained, the title on the left.
+- **Table-of-contents page**: white background; a small "Content" heading on the left, a large-font table-of-contents list in the middle, section numbers and page numbers clearly arranged in columns; navigation and page number retained on the right/top, with a small illustration only as an accent.
+- **Dividers and watermarks**: no heavy straight-line borders; use thin wave lines, light-gray thin lines, card boundaries, and color-block boundaries. No stable watermark system observed — none should be added.
+- **Logo**: the brand logo sits at the upper-left corner, in a small size in black or white, ensuring contrast. Do not enlarge it into a decoration.
+
+## 3. Content Organization
+
+- **Title style**: use report-style noun phrases or short section phrases, such as "Content," "Focus Areas," "Key Actions 2022," "Strategy." Section pages add a number prefix. Titles avoid marketing-slogan-style long sentences; aside from opinion pages, do not write multi-line manifestos.
+- **Key message sentences**: opinion pages may hold a larger, left-aligned manifesto paragraph spanning from upper-left to center; ordinary content pages use a title + paragraph.
+- **Body text organization**: organized in short paragraphs, commonly 2–3 columns side by side, separated by blank lines and column gaps, using dense bullets sparingly. Body text may be relatively long, but each column stays readable, without a full-width long line.
+- **Grouping logic**: parallel themes use rounded-corner cards, commonly 2×2, 2×3, or text-left/card-right. Card titles sit at the upper left, body text is brief; cards in the same group use similar colors or alternate light green/purple.
+- **Number of points per page**: section/opinion pages carry only 1 main point; content explanation pages are 1 main title + 2–4 paragraph groups; card-grid pages hold 4–6 parallel themes; data pages maintain searchability through headers and dividers.
+- **Keyword emphasis**: use card background color, dark titles, local button labels, and weight/size hierarchy. Do not use large-area neon highlighting or multi-color underlines.
+- **Numbers/units/reporting period and measurement basis**: years, page numbers, percentages, and metrics are aligned in columns within tables or the table of contents; explanations sit close to the data itself, not detached into a separate decorative large number, unless the source page itself is an opinion-type emphasis.
+- **Source footnotes**: footnotes are smaller than body text, low-contrast but readable; large amounts of explanation, disclaimers, and audit information are concentrated in the appendix/data pages at the end.
+
+## 4. Content Page Layout System
+
+### A. Full-bleed section title page: color background + numbered title + illustration/wave terrain
+For section openings and mood transitions. Uses a full-bleed background of light pink, light green, purple, or deep green; the left side holds a number and section name or a manifesto paragraph; a dark wave-terrain graphic sits at the bottom/side, with a flat illustration of a hand, megaphone, star, or music symbol at the right or corner. Relies on a large title and background color for emphasis, not complex decoration. Not to be used for tables, long disclaimers, or multi-conclusion pages.
+
+### B. White-background multi-column long-text page: left title + 2–3 columns of body text + light illustration
+For strategy explanations, project explanations, and background introductions. Navigation is retained at the top, a short title sits at upper left, the body is arranged in 2–3 columns with compact paragraphs and wide column gaps; a small illustration may sit at the lower right or edge. Organizes emphasis through subheadings, paragraph spacing, and column width. If comparing multiple metrics or displaying many numbers, do not rely on multi-column text alone — switch to a table or cards instead.
+
+### C. Card-grid page: title/lead-in + 2×2 or 2×3 rounded-corner cards
+For focus areas, action lists, value dimensions, or a four-quadrant strategy. Cards occupy the center-right area, with explanatory text or a title on the left; uses backgrounds of light green, purple, pink, or deep purple with pronounced rounded corners, text aligned at the upper left. One dark card or a stronger saturated background may mark the current theme. Do not let each card carry a long paragraph; split across pages when there are more than 6 modules.
+
+### D. Image-text pairing page: text column + large flat illustration + button-style label
+For key annual actions, project actions, supplementary links, or reading guidance. The left/center holds the text column, with an illustration of a megaphone, hand, heart, or leaf on the right; a blue rounded-corner button such as "More key actions" may be used. Illustrations must not cover navigation or body text, and should not serve as the core of data explanation. Not used on formal audit or table-disclosure pages.
+
+### E. Full-bleed opinion page: large value manifesto + side column/annotation + illustration
+For value statements within a section. The background may be light purple or deep green; a large block of left-aligned text is higher in size than body text but lower than the cover title; a short explanation or annotation column sits on the right, with an illustration at the center/lower-right. Retain only one main point and one set of supplementary explanation. Do not fill the page with centered long text.
+
+### F. Table/data-disclosure page: white background + compact table + understated title
+For data, metrics, principles, and explanations at the end of the report. Navigation is retained at the top; the body is a grid table with aligned numbers and small-print annotations, reducing or removing illustrations and large color blocks. If the table is too wide, prefer splitting into multiple tables or horizontal groups rather than compressing it into illegibility.
+
+## 5. Color System
+
+- **Primary background light green #C3F0C9 / #C5F3CB**: used for the cover, section pages, card backgrounds, and brand identity, may be used full-bleed. A replacement color must keep high lightness, suitable for black/deep-purple text.
+- **Deep green #00634F / #007A5A**: used for wave terrain, dark section backgrounds, local titles, or illustration bodies, medium-to-large area. When deep green is full-bleed, use white or light-colored text; do not overlay low-contrast green text.
+- **Deep purple-black #4F374F / #463347**: used for primary text, dark cards, wave-terrain and illustration shadows, may replace pure black; must not be overlaid low-contrast with small deep-green/deep-blue text.
+- **Light pink #FFCDD2 / #FBCED2**: used for section backgrounds, card backgrounds, and illustrations, may be full-bleed; may be replaced with a warm color of similar lightness, but not used for large-area fills on serious data-table backgrounds.
+- **Bright pink #F573A1 / #F673A1**: used for illustration highlights, hearts, and local emphasis, small area; must not be used as the background for large body-text blocks or overused across multiple chart series simultaneously.
+- **Light purple #CDB8E3 / #D3BDE9**: used for opinion-page backgrounds and card backgrounds, may be used over a large area paired with deep-purple text; should not be used as the background for small, dense tables.
+- **Blue #2D46BA**: used for button-style jumps and a small amount of chart/component emphasis, small-to-medium area; must not replace the primary brand green as the whole report's main color.
+- **Yellow/orange-yellow around #F3C64E**: used as a warm background or secondary color for some sections/illustrations. Use cautiously, avoiding large-area competition with light green, pink, and purple simultaneously.
+- **White #FFFFFF / near-white #F8F8F8**: the base background for content pages and table pages, the largest area; content pages prefer a white background.
+- **Light gray #D2D0D1 / #E6E4E5, gray #909791**: used for table lines, auxiliary labels, weak navigation text, and dividers, small area.
+
+Keep a single page to 1 primary background color + 1 dark text color + 1–2 illustration/card accent colors. Data/status colors should not expand into a rainbow chart; if positive/negative status must be added, prefer deep green/pink or deep purple/light gray, relying mainly on text explanation.
+
+## 6. Fonts and Text Hierarchy
+
+- **Font character**: the primary typeface is Coda (rounded sans-serif, built-in; Chinese: MiSans); cover/section large titles use the same family in bold. Overall sans-serif, rounded, low-decoration. Do not mix in a serif font as a regular title.
+- **Body baseline**: body text = 1x, used for paragraphs, card explanations, and navigation text.
+- **Footnotes/page numbers/top navigation**: about 0.65–0.8x, low contrast, near the header or bottom of tables; must be readable but not compete with body text.
+- **Card body/table body**: about 0.8–1x; tables may be slightly smaller but keep line spacing and alignment. Card titles about 1–1.2x.
+- **Body subheadings/module titles**: about 1.2–1.5x, left-aligned, distinguished through position and spacing, not heavily bolded.
+- **Page titles**: about 2–3x, mostly short words, placed at upper left.
+- **Section titles/cover titles**: about 4–5x or higher, the largest tier on the whole page.
+- **Opinion manifesto**: about 2–3x, multi-line left-aligned, with compact but not crowded line spacing.
+- **Text alignment**: left-alignment as the core; table-of-contents page numbers may be right-aligned/column-aligned, table numbers aligned by column. Avoid large centered blocks.
+
+## 7. Chart Language
+
+The source file is primarily report text, cards, and tables, without a strong data-visualization system — do not fabricate a complex chart style.
+
+- **Type boundary**: prefer simple bar/line/tabular metrics; do not use 3D, colorful area fills, complex radar charts, or decorative infographics.
+- **Axes and grids**: use thin gray axes and light-gray gridlines with a presence lower than the data; do not use heavy black axis lines.
+- **Labels and legends**: labels use body-text or table-sized small text near the data points; legends sit above or to the right, avoiding the main title area.
+- **Series colors**: use brand colors — deep green, light green, deep purple, blue, pink — with few series. Do not exceed 4 strong-color series on one page.
+- **Key data**: mark with deep-purple/blue emphasis, rounded-corner labels, or annotation arrows; key explanations must be verbalized in text, not conveyed by color alone.
+- **Forecast/target/baseline lines**: use gray or deep-purple thin dashed/solid lines with brief labels. Do not use glowing lines, gradient fills, or heavy shadows.
+
+## 8. Tables and High-Density Information
+
+- **Table role**: carries data disclosure, report principles, and audit/appendix explanations — it is "searchable evidence," not a visual protagonist.
+- **Headers**: use a light-gray or white background, with text slightly larger or one hierarchy level above the table body; deep purple-black may provide emphasis. Headers do not use a heavy dark bar, unless matched consistently with a dark section page and kept readable.
+- **Row/column structure**: use thin gray dividers; text columns are wider than number columns. Long text may wrap, but must not be compressed into overly tight line spacing.
+- **Row height and density**: keep high density and readable line spacing. Do not let multiple lines of text overlap or truncate just to fill a page.
+- **Base color and zebra striping**: near-white, light gray, or extremely pale light-green backgrounds may group rows; zebra striping, if used, must be very subtle. Avoid large areas of pink/purple spread across dense tables.
+- **Key rows/columns**: use a light-green background, deep-purple text, or a thin border; summary rows may be slightly bolded or given a light background — do not use strong red/yellow warnings.
+- **Number/text alignment**: text is left-aligned, numbers are right-aligned by column or aligned by decimal place, and percentages/units use a consistent measurement basis within the same column. Footnote markers use small superscripts or symbols, with the explanation placed below the table.
+- **Symbol markers/rating dots**: the source file shows no stable icon-rating system — do not add complex red/yellow/green lights or star ratings.
+
+## 9. Components and Graphic Elements
+
+- **Top navigation bar**: the most important global component, containing the logo, report name, section/subsection list, current position, page number, and a thin wave line; must be light, thin, and small.
+- **Table-of-contents list**: large section names + numbers + a column of page numbers, with a small circle/link symbol optionally on the right. Used only on the table-of-contents page — do not repeat a large table of contents on regular pages.
+- **Rounded-corner cards**: used for parallel themes, strategy dimensions, and key actions. Pronounced rounded corners, backgrounds mostly light green/purple/pink, text aligned at the upper left; even spacing, no shadows added.
+- **Button-style labels**: used for jumps or supplementary actions, such as a blue rounded-corner button; small area — do not turn every small heading into a button.
+- **Wave terrain/curves**: used on the cover, section pages, and header. A large wave at the bottom serves composition; a thin wave in the header serves navigation. Do not add a large wave to data-table pages, which would disrupt reading.
+- **Flat illustrations**: including megaphones, hands, hearts, stars, leaves, and music symbols, using the brand color palette with black/deep-purple outlines; placed at the right, bottom, or corner, not carrying complex information.
+- **Small icons/symbols**: music notes, arrows, and stars may serve as accents; the colorful icon system is not stable and cannot replace text labels.
+- **Tip boxes/side columns**: use light-colored rounded-corner boxes to carry supplementary information or annual highlights; layered apart from the body text, avoiding confusion with the main cards.
+- **Dividers**: use thin gray lines, wave lines, and card boundaries; do not use heavy borders, double-line frames, or strong shadow boundaries.
+
+## 10. Texture and Prohibited Items
+
+Overall adopts a flat, friendly, branded, lightly decorated texture, establishing identity through color blocks, illustrations, rounded-corner cards, and the navigation system, with almost no real photography or complex textures used.
+
+**Prohibited**:
+- 3D graphics, dimensional buttons, glow, metallic texture, strong shadows, glassmorphism.
+- Large photo backgrounds, real-people photo collages, or screenshot stacking as the primary visual.
+- Complex gradients, textured backgrounds, noise decoration, heavy borders.
+- Emoji, social-media-sticker-style icons, rainbow-style icon sets.
+- Large centered blocks of copy, a full page of body text with no navigation, body text pressed onto illustrations or complex dark backgrounds.
+
+**Use with caution**:
+- Illustrations: usable on sections, opinion, and image-text pages; should be reduced on table/audit/high-density data pages.
+- Full-bleed colored backgrounds: suitable for covers, sections, and value manifestos; not suitable for long tables and dense small print.
+- Blue buttons: used only for jump/action prompts, not as a universal accent color.
+- Multi-color cards: control the number of hues on a single page, avoiding one strong color per card.
+
+**Usable on special pages**:
+- Covers and section pages may use large wave terrain, full-bleed color backgrounds, and large illustrations.
+- Opinion pages may use full-bleed deep green or light purple, paired with a large manifesto in white or deep-purple text.
+- Appendix/data pages may sacrifice visual interest, returning to a white-background, thin-line table.
+
+## 11. Generation Checklist
+
+- Skeleton: is it 16:9; do content pages have wide margins, an upper-left logo, top navigation, page number/current section; is a heavy footer avoided?
+- Copy grammar: is the title short and report-style; are sections numbered; does the opinion page make only one main point; is body text organized in left-aligned short paragraphs?
+- Hierarchy: body text = 1x; is navigation/footnote smaller than body text; is the page title about 2–3x; are section/cover titles the largest; has no specific font size been hardcoded?
+- Color: is light green/deep green/deep purple primary, with pink/purple/blue secondary; does any single page avoid exceeding 1 primary background color + 1–2 accent colors; is text contrast sufficient?
+- Layout: is a layout chosen based on content — multi-column, card grid, image-text pairing, opinion page, or table page; is stuffing a long table into a section title page avoided?
+- Charts: are they restrained, with thin grids and few series; are 3D, colorful gradients, and excessive status colors avoided?
+- Tables: are headers, rows/columns, number alignment, and footnotes clear; is there no overcrowding, truncation, or low contrast?
+- Components: do rounded-corner cards, wave lines, buttons, and illustrations serve a clear informational function; is icon overuse in place of text avoided?
+- Prohibited items: is there no photo background, emoji, complex decoration, strong shadows, glow, textures, glassmorphism, or large centered long text?
+- Output quality: check for no overflow, garbled characters, overlap, occlusion, empty cards, low contrast, or wrong proportions; navigation should not mechanically repeat to the point of covering body text, and illustrations should not press onto text.