chore: 1.1.0 release

skills/open-kimi-ppt/reference/design_system/03_work/01/en/sky-blue-wayfinding.md

@@ -0,0 +1,128 @@
+# Civic Brief · Public Service Brief STYLE DESIGN SYSTEM
+
+> Intended homepage tag: Work report
+> Visual metaphor: civic wayfinding system + public-service operations brief
+
+## 1. Style Positioning
+
+Suitable for quarterly reviews, public-service operations, project progress updates, cross-department reports, and grassroots work summaries. Pages should feel like a clear, trustworthy civic wayfinding system: a warm-white base, deep indigo text, sky-blue routes, and sparing safety-yellow cues, using stations, routes, numbers, and statuses to make clear "what was done, what worked, and what to change next."
+
+Underlying principles:
+
+1. A work report leads with the operating conclusion, then gives evidence on coverage, efficiency, problems, and actions.
+2. Wayfinding language must carry location, sequence, responsibility, or status; it must not degrade into decorative icons.
+3. One page carries only one management question and highlights at most 3 numbers or actions.
+4. Achievements, problems, and pending decisions use distinct but stable visual semantics.
+5. Do not imitate government official documents, emblems, or the red-and-gold ceremonial style; do not manufacture a false sense of authority.
+
+## 2. Page Skeleton
+
+The canvas is 16:9 landscape. Content pages are predominantly warm white; section divider or conclusion pages may use deep indigo. Pages keep wide safe margins; a narrow "route number strip" may run down the left side, with the title, quarter, and page number at the top, and data-definition, measurement-basis, and responsibility information at the bottom.
+
+The title zone takes 15%–20%, the main work area 65%–72%, and the footer 6%–8%. Do not use a thick horizontal bar under the title; locate it instead with a short blue line segment or a station number.
+
+The cover uses "a large title + one service route + 3 key stations." Content pages switch among the coverage map, demand band, operating route, problem diagnosis, and action list; avoid repeating a three-column card layout on every page.
+
+## 3. Content Organization
+
+Titles use management conclusions, for example "Demand is now covered district-wide, but Monday morning remains the most pronounced congestion point." Subtitles state the region, period, audience, and data definition or measurement basis.
+
+Each page is organized as "current state — evidence — implication — next step." Achievements must state what they mean for the people served; problems must be linked to a cause or the accountable process step or owner; actions must carry a deadline, an owner, or acceptance criteria.
+
+Numbers sit next to their corresponding station, process, or population, and must keep units, period, and denominator. Do not compare visit counts, ratios, and percentage points on the same scale.
+
+## 4. Content Page Layout System
+
+### A. Operations Overview Page
+
+Use one horizontal service line to connect the 4 nodes of coverage, processing, resolution, and feedback. Each node holds only one primary number and one judgment; the end of the line gives the overall assessment for the quarter. Suited to the opening; do not build a KPI card wall.
+
+### B. Coverage and Foot Traffic Page
+
+Place a simplified district map or service-point network on the left, and the foot-traffic structure and peak hours on the right. The map only conveys hubs, mobile stations, and pressure points; do not fabricate precise geographic boundaries.
+
+### C. Demand Composition Band
+
+Use a horizontal band whose width varies with share to show the main service types; below it, use 2–3 direct annotations to explain where demand concentrates. Merge minor categories into "Other" to preserve the primary–secondary hierarchy.
+
+### D. Service Process Page
+
+Treat resident arrival, ticket pickup, case handling, transfer, and completion as one continuous path. Times or pass rates appear above the nodes, obstacles below. Draw connecting lines before the nodes; lines must not cross text.
+
+### E. Problem–Responsibility Page
+
+The left side lists three problems with their evidence; the right side links each problem to material, system, or coordination responsibility. Use safety yellow for matters needing attention; reserve vermilion orange only for issues that genuinely block service.
+
+### F. Next-Quarter Action Page
+
+Use 3 action routes to present "action / owner / deadline / acceptance criteria"; list items requiring leadership sign-off separately in the bottom-right corner. End with a clear work decision rather than a generic thank-you page.
+
+## 5. Color System
+
+- Warm white #F5F2EA: main background of content pages.
+- Deep indigo #17324D: titles, body text, section dividers, and the main route.
+- Sky blue #3D8CC9: normal operation, primary routes, and key data.
+- Safety yellow #F2C14E: points of attention, waiting states, and matters pending coordination.
+- Service green #4D8B72: completed items, effective pilots, and stable states.
+- Vermilion orange #D95D39: blockages, complaints, and issues that must be escalated; area strictly limited.
+- Road gray #A8AFB5: secondary lines, baselines, and sources.
+
+A single page typically uses indigo plus one status color. Red and green must not be the only differentiator; they must be paired with text or symbols. Large red backgrounds, blue-violet gradients, and five-color status lights are forbidden.
+
+## 6. Typography and Text Hierarchy
+
+Use MiSans for Chinese and Liter for English; numbers, codes, and times may use JetBrains Mono (brought in via customFonts). No more than two font-family roles across the deck.
+
+- Cover title: 4–5x body size, at most two lines.
+- Page title: 2–2.6x body size, left-aligned.
+- Primary numbers: 3–4x body size, with the unit immediately adjacent.
+- Action headings: 1.2–1.5x body size.
+- Body text: 1x, in short sentences.
+- Footers, data-definition and measurement-basis notes, and route codes: 0.6–0.75x, but must remain legible.
+
+Hierarchy relies primarily on font size, weight, and position — not colored rounded backing boxes. Never shrink a title into small text to fit a long sentence; trim the copy first.
+
+## 7. Chart Language
+
+Prefer service-route diagrams, directly labeled bar charts, time-heat bands, dot plots, slope charts, simplified coverage networks, and 100% stacked bars.
+
+Use sky blue or service green for normal operation, safety yellow for pressure points, and vermilion orange only for severe blockages. Gridlines are extremely thin gray lines; chart titles must state the finding.
+
+Time and ratios must not share the same axis. State percentage-point changes explicitly as "percentage points"; do not write them as percentage growth. Every chart must indicate its period, sample definition, and sampling basis.
+
+## 8. Tables and High-Density Information
+
+Tables are used only for service-center comparisons, problem lists, and action ledgers. Headers use deep indigo text with a thin bottom rule; leave breathing room between rows; do not use closed heavy borders.
+
+Status is expressed jointly by small squares, short labels, and text; problem rows may get a safety-yellow left marker, and vermilion orange is reserved for overdue or blocked rows. Owner, deadline, and acceptance criteria must sit on the same reading line.
+
+If a table exceeds 6 columns, prefer splitting it into "a main-conclusion chart + a condensed ledger"; do not cram the full backend table into one page.
+
+## 9. Components and Graphic Elements
+
+Stable components include route lines, station dots, service numbers, directional arrows, status squares, short ticks, district outlines, and responsibility tags.
+
+Station size indicates hierarchy, not arbitrary aesthetics; line styles distinguish normal, pilot, and not-yet-connected routes. Keep the icon count low; use only clear public-service line symbols.
+
+Photos are not a default element. If a service-scene photo is used, place a single documentary crop and label whether it is illustrative or a real source; do not use staged stock-photo collages.
+
+## 10. Texture and Prohibited Items
+
+The overall feel is a modern urban-service operations brief: restrained, clear, accountable to the public. The visual center of gravity is routes and actions, not decoration.
+
+Prohibited: red-and-gold government templates, fake badges and seals, leadership-speech-style covers, KPI card walls, rounded SaaS panels, cartoon characters, rainbow icons, 3D maps, dial gauges, full-page slogans, and reporting achievements without problems.
+
+## 11. Generation Checklist
+
+- Does each page first state one operating conclusion or management question?
+- Do coverage, efficiency, problems, and actions form a complete review chain?
+- Do all routes, stations, and statuses carry business meaning?
+- Do numbers carry period, unit, denominator, and correct percentage-point phrasing?
+- Are problems linked to accountable process steps or owners, and do actions carry owners and acceptance criteria?
+- Are colors supplemented with text/symbols to avoid relying on red-versus-green alone?
+- Is the stable grammar of warm white, indigo, and a single status color maintained?
+- Are official-document imitation, card walls, dashboards, and empty achievement slogans avoided?
+- Have overlap, cropping, line wrapping, low contrast, garbled characters, and undersized footers been checked?
+
+- No cards by default: unless the user explicitly requests them, never use rounded rectangles or rectangular cards to build hierarchy or alignment: line segments, whitespace, and font-size differences are the better solution
+- 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 structures such as three columns + a heading + a conclusion

skills/open-kimi-ppt/reference/design_system/03_work/02/en/mist-blue-travelogue.md

@@ -0,0 +1,187 @@
+# Report Name STYLE DESIGN SYSTEM
+
+## 1. Style Positioning
+
+An editorial-style research-report PPT aimed at readers in travel, hospitality, destinations, and industry decision-making. It organizes "viewpoint — evidence — explanation" with a magazine reading experience: travel/hotel scene photography sets the context, light blue and deep navy blue form the report interface, and paragraphs, expert quotes, survey data, and chapter narratives advance in alternation. It is neither a sales-oriented presentation nor a pure data dashboard.
+
+It employs a landscape widescreen canvas, a brand-custom low-ornamentation sans-serif typeface, brand colors of deep blue/bright blue/light report blue, large rectangular photos and color blocks, an understated footer, oversized Part numbers with half-screen photography on section dividers, a contents page of list items with jump arrows, blue-violet graphics, and hairline-separated data pages. Relatively high information density is allowed, but clarity is maintained through rectangular zoning, wide margins, title hierarchy, and photographic whitespace.
+
+Underlying principles:
+
+1. **Scene first, information embedded**: use real travel/hotel photos to build the scene; place text, quotes, and data on separate color blocks or white cards, avoiding laying them directly on complex photos.
+2. **Brand blue serves reading, never steals it**: deep blue is used for the highest emphasis and reversed-out zones, light blue carries long text and chapter base plates, and bright blue is used only for navigation, labels, and small-area accents; body readability must not be reduced.
+3. **Publication consistency beats page showmanship**: photos, two-column layouts, tables, and charts may vary, but title position, footer, rectangular zoning, typographic hierarchy, and the cool blue palette must stay consistent across the deck.
+
+## 2. Page Skeleton
+
+- **Canvas ratio**: a uniform landscape widescreen report page, close to PDF/magazine typesetting; do not use big-type, wide-whitespace presentation templates. Keep visible outer margins; content never touches the page edge.
+- **Base margins**: content pages keep a stable white or light-blue border on all four sides; left, right, and top margins preserve the magazine feel, and the bottom margin reserves room for the footer, report name, or page number. Large images may approach the edge of the content area but must not break the safe boundary.
+- **Title zone**: body titles sit at the top-left or top, using short question sentences, chapter names, or conclusive short sentences; section-divider titles may occupy the left half of the screen or a large light-blue field; cover titles are set in a deep-blue info card overlaid on a photo. Layering is achieved only through font size, position, background color, and horizontal rules.
+- **Body zone**: organized on a rectangular grid — commonly left/right two columns, upper/lower two bands, photo + text card, deep-blue sidebar, a full light-blue base plate, and multi-column text/chart combinations. Separate blocks with whitespace or hairlines; do not stack floating elements.
+- **Header**: regular content pages have no complex header navigation; chapter information blends into the title or footer as small text. Do not add a persistent top navigation bar.
+- **Footer and page number**: the bottom of content pages stably carries the brand-insight mark, report name, and page number. The type is clearly smaller than body text, in deep blue/gray-black; the page number sits near the bottom edge and does not compete with the main charts for attention.
+- **Logo**: an identity mark appears at the top-left of the cover, rendered as small plain text (write the new topic name), with no graphic logo drawn; interior pages de-emphasize it via small footer text or brand information; the back cover/closing page may strengthen the brand wordmark. Do not place a large logo on every page.
+- **Contents navigation**: a narrow blue-gradient/abstract curved-surface graphic on the left + a contents list on the right. Entries consist of the chapter name, a numeric page number near the start or in a left-side column, and a "↗" on the right/at the trailing end; entries are separated by hairlines.
+- **Divider lines**: thin gray/light-blue lines are used in the contents, between columns, in tables, for quote attributions, and in data lists; they are hairline-weight and low-contrast, not decorative heavy borders.
+- **Watermarks and background graphics**: light-blue section dividers may use very faint arc/curve shading; deep-blue pages may use low-contrast textures or linear backgrounds. These serve only as background and must not impair legibility of body text and photos.
+- **Default reading path**: top-left title or Part number → main photo/dark emphasis zone → body text or charts → footnotes and footer. Two-column layouts read left to right, top to bottom; in photo + sidebar layouts, the photo comes first, followed by key data or a quote.
+
+## 3. Content Organization
+
+- **How titles are written**: the cover uses a main title + subtitle + series/brand label; the contents page lists chapters; section dividers use "Part X" + one sentence of chapter theme; body pages use question sentences or clear topic sentences. Be specific and readable; no exaggerated marketing slogans.
+- **Information sentences**: viewpoint and quote pages may use full report-style paragraphs rather than being chopped into many clipped slogans. Highlighted sentences use oversized quotation marks, a light-blue quote box, or a deep-blue reversed-out zone.
+- **Body organization**: short paragraphs, narrow line lengths, and clear paragraph spacing; foreword/methodology pages may be densely set in 2–3 columns. Do not stretch long paragraphs across the full page width.
+- **Grouping logic**: the deck is divided into chapters by Part; each page is organized as "topic title — explanatory paragraph — photo/quote — data or list." Every page revolves around one main question; no unrelated topics are mixed in.
+- **Number of viewpoints per page**: a regular content page carries 1 main viewpoint, optionally accompanied by 1 expert quote or 1 set of data; a data-composite page may juxtapose 2–4 metrics/charts, but they must share the same question, definitions, and measurement basis.
+- **How bullet points are written**: prefer short headings, percentages, hairline separators, icons/small markers, or side-by-side cards — not traditional large bullet dots; keep items similar in length and avoid any single item growing into a long paragraph.
+- **Keyword emphasis**: use bold, color blocks, font size, position, and enlarged data; use in-text color highlighting sparingly. Italics are used only for report names, quote sources, or tonal emphasis — never over large areas.
+- **Number/unit/time basis**: percentages, years, sample sizes, and their explanations stay adjacent; large numbers must come with a short explanation of their definition and measurement basis. Units are set smaller than the number but must remain legible.
+- **Source footnotes**: chart sources, survey sample definitions, and methodology notes are placed below the chart, at the bottom of the page, or at the bottom of a sidebar; low-contrast but clear, and not to be confused with the footer.
+
+## 4. Content Page Layout System
+
+### A. Large Photography + Deep-Blue Info Sidebar
+
+Used for expert viewpoints, key findings, ranked lists, and percentage data. One side holds a travel/hotel scene photo; the other side is a deep-navy rectangular sidebar set with white text, thin light-blue lines, small icons, or a percentage list. The key point goes at the top; a quote may open with oversized quotation marks, with the attribution at the bottom.
+
+It carries 1 quote or 4–6 short data items; the photo and sidebar must not overlap each other. If the text needs a long-form explanation or a complex table, do not use this layout.
+
+### B. Light-Blue Base Plate + Photo/Text Two Columns
+
+Used for chapter openers, personal quotes, longer explanatory passages, and methodology notes. Light report blue serves as a full-page base plate or a half-page carrier layer, with a photo on one side and title, paragraphs, and attribution on the other; text is deep blue/near-black, with a divider line separating the attribution from the body.
+
+Emphasis comes from large titles, left alignment, and light-blue space. If the page contains multicolored data charts, reduce the light-blue area or switch to a white background to avoid color mixing.
+
+### C. White Report Page + Multi-Column Body
+
+Used for forewords, introductions, methodology, and explanatory chapters. A large title goes at the top or top-left; the body is set in 2–3 columns, optionally flanked by a portrait photo, a light-blue author info box, or a small note card; columns are separated by whitespace or hairlines.
+
+Keep column width under control; avoid full-width long lines. This layout is not suited to emotional chapter transitions, nor to presenting large numbers that need strong visual impact.
+
+### D. Section Divider: Oversized Part Number + Half-Screen Photography
+
+Used to separate chapters. An oversized "Part X" sits on a light-blue field on the left or upper layer, with the chapter theme sentence below; the right side or half of the screen carries a portrait/travel-scene photo. The light-blue field may include very faint curves.
+
+It serves only navigation and chapter atmosphere — no complex body text, charts, footnotes, or multiple viewpoints. The Part number is clearly larger than the chapter theme.
+
+### E. Data-Composite Page: Topic Explanation + Multiple Charts/Metrics
+
+Used for survey results, investment directions, and preference comparisons. The top holds the topic title and a brief description; the body divides into a chart zone, a numeric-metric zone, and an explanatory-text zone. Common elements include donut charts, bar lists, percentage cards, and small icon lists, colored mainly in blue-violet and deep blue.
+
+Emphasis comes from large percentages, white text on deep-blue grounds, and bright-blue/purple series colors. If the data definitions or measurement bases are complex or annotations are numerous, split the page or convert it into a table/methodology page.
+
+### F. High-Density Parallel-Module Page
+
+Used for horizontal comparison of multiple findings, multiple markets/segments, or multiple strategic dimensions. Use 2–4 equal-width cards or columns, each containing a subheading, a short paragraph, a number, or a small chart; align strictly, organize with light divider lines, and alternate background colors between white and light blue.
+
+Not suitable for large emotional photos; photos may appear only as small thumbnails to aid classification. All modules must share the same grammar, or the report's consistency breaks.
+
+## 5. Color System
+
+- **Deep navy blue #000735 / #020D3E / #051954**: used for cover info cards, deep-blue sidebars, emphasis zones, the back cover, dark chart backgrounds, and title text; area can range from small labels to half-page/full-page dark blocks. It may be replaced with another brand dark color, but white text must keep high contrast, and the color must not shift so gray or black that its blue identity is lost.
+- **Light report blue #C6D4F9 / #C7D5FA**: used for section-divider base plates, quote-page backgrounds, methodology/note boxes, light table fills, and large carrier layers — up to half a page or even a full page. It may be replaced with a low-saturation brand light color, but it must stay cool-toned with sufficient lightness.
+- **Bright brand blue #1E77F8 / #3781F9 / #5D8DF4**: used for the abstract graphic on the left of the contents page, labels, small accents, link-styled arrows, and chart series colors; it serves only as small-area guidance. It must not be spread over large areas in place of light blue, or the result becomes overly tech-flavored and loses the magazine feel.
+- **White #FFFFFF / near-white #F1F3FA**: used for content-page backgrounds, cards, chart backgrounds, and whitespace areas; text on them is deep blue or near-black.
+- **Primary text near-black-blue #030208 / #07090F / #2B3A5C**: used for body text, titles, table text, and chart labels. Light gray must not be used as the primary body color.
+- **Neutral gray #8D92A1 / #9FA0A9 / #B3B6C3**: used for divider lines, auxiliary labels, axes, footnotes, and non-essential information; small in area, low-contrast but discernible. It must not carry critical information.
+- **Photo warm tones #A87C39 / #C06712 / #CB9742 / the tan-brown family**: these come mainly from travel/hotel photography and are not system primary colors; they may only echo a chart or local accent in small amounts — do not promote them to primary brand colors.
+- **Purple/blue-violet auxiliary colors**: used for a small number of chart series, key metrics, or comparison groups; their area is controlled and must not compete with bright blue and deep blue at the same time.
+
+Each single page centers on the blue family; apart from the natural colors of photos, system colors should number no more than 2–3 hues. Positive/negative states are explained first through light/dark contrast, label text, arrows, or legends; introduce red and green cautiously, and never use highly saturated red-green combinations that break the report's cool tone.
+
+## 6. Typography and Text Hierarchy
+
+Use a modern sans-serif typeface: Liter (Chinese: MiSans). Regular accounts for the overwhelming majority; Bold is used sparingly for titles/emphasis, Regular Italic for report names or quote emphasis, and Medium/Light only rarely. Regular weight dominates; avoid over-bolding.
+
+- **Cover main title**: 3.5–4.5x body size, set inside the deep-blue info card or in a clearly defined area above the photo; line spacing tight but not crowded.
+- **Cover subtitle / series label**: the subtitle is 1.5–2x body size; the series/label is 0.7–0.9x body size, often set inside a bright-blue or light-blue bar.
+- **Section-divider Part number**: 4–6x body size, in a light or regular weight — it need not be bold.
+- **Chapter theme sentence**: 1.6–2.5x body size, left-aligned, breaking naturally across multiple lines.
+- **Content-page title**: 1.5–2.2x body size, usually in regular weight; short titles may be enlarged. Do not use overly heavy titles that create a commercial-poster feel.
+- **Body text**: 1x; generous leading with clear paragraph spacing.
+- **Subheadings / card titles**: 1–1.2x body size, may be Bold or Medium.
+- **Chart labels / table text**: 0.75–0.95x body size; key numbers may be enlarged to 1.5–3x.
+- **Quote text**: long quotes are 1–1.2x body size; quotation marks may be enlarged to 2–3x and set in deep blue.
+- **Notes, sources, footers, page numbers**: 0.55–0.75x body size, understated but clear. Footnotes must not become too small to read.
+
+Text is left-aligned by default. Except for localized areas of the cover info card, do not use large blocks of centered copy. Titles may use title case or sentence case, but the same level must be uniform.
+
+## 7. Chart Language
+
+Charts are evidence components embedded in the report narrative, not dominant dashboards. Styles include donut/ring percentages, bar/ranking lists, multi-metric cards, small icon lists, tabularized comparisons, and a small number of coordinate charts.
+
+- **Chart types**: prefer percentage rings, horizontal bars, ranking bars, metric cards, simple columns/lines, and comparison tables. Avoid complex interactive dashboards, radar charts, 3D pie charts, and line charts with too many series.
+- **Axes and gridlines**: use light-gray/light-blue low-contrast lines; gridlines only aid reading. Axis labels are smaller than body text, in neutral gray or deep blue.
+- **Labels and legends**: label values directly near the graphic wherever possible and minimize distant legends; keep percentages close to their metric names; legend swatches are small and tidy.
+- **Series colors**: use deep blue, bright blue, light blue, and blue-violet, and control the number of series per page. Photo warm tones do not enter regular data series unless they echo local content.
+- **Key data**: use large numbers, white text on deep-blue grounds, thick lines, or high-saturation blue-violet. Do not stack multiple emphases such as shadows, exploded pie charts, and fluorescent colors at the same time.
+- **Forecast/target/baseline lines**: use thin dashed or thin solid lines with short labels. Do not add complex gradient fills.
+- **Annotations**: use white cards or light-blue boxes with thin lines, and use arrows sparingly; they must not obscure the chart's primary readings.
+
+Keep charts few and refined; if the amount on one page cannot be grasped quickly, split the page or move it to an appendix table.
+
+## 8. Tables and High-Density Information
+
+Tables are used for methodology, sample descriptions, market/metric comparisons, and condensing high-density information. They use light borders, subtle background tints, and report-style typesetting — not the default heavy grids of office software.
+
+- **Header**: use light blue, near-white, or white-on-deep-blue; text may be slightly bolded, at a size close to body text or slightly smaller; keep sufficient height and whitespace.
+- **Row/column structure**: allocate column widths by content function; the left side usually holds categories/dimensions and the right side values or explanations; separate with hairlines or whitespace.
+- **Divider lines**: use thin light-gray/light-blue lines and avoid heavy all-black borders. Horizontal rules are more common than vertical ones; keep vertical separators only when strong comparison is needed.
+- **Background fills**: use white, light blue, or subtle zebra striping; zebra striping must be low-contrast and only aid scanning.
+- **Key rows/columns**: highlight with deep-blue text, a light-blue fill, bold, or a small label. Do not fill large areas with highly saturated colors.
+- **Summary rows**: distinguish with a slightly deeper light-blue fill or a thin rule above — not heavy borders.
+- **Number alignment**: right-align or decimal-align percentages, amounts, years, and the like; left-align text; units follow the number immediately or move into the column header.
+- **Symbol markers / rating dots**: small dots, checkmarks, arrows, or short labels may be used, staying within a monochrome blue/gray system. Colorful icons are not the default table markers.
+
+Keep titles, descriptions, and footnotes; do not let the table fill the entire page. Tables compress evidence; they do not replace narrative.
+
+## 9. Components and Graphic Elements
+
+- **Deep-blue info card / sidebar**: used for key conclusions, quotes, and data lists; white text and thin light-blue lines inside, no shadows; well suited to sit alongside photos.
+- **Light-blue carrier box**: used for long quotes, chapter themes, explanatory paragraphs, and methodology information; text is deep blue/near-black; it may have no outline, with zones defined by color blocks and whitespace.
+- **Cover title card**: a deep-blue rectangular card overlaid on the photo, optionally with a bright-blue/light-blue label strip on top; right-angled, positioned right-of-center or center-right, avoiding covering people's faces.
+- **Contents entries**: composed of page number, chapter name, hairline separator, and "↗"; may be used sparingly for navigation, but should not flood every list in the body.
+- **Oversized quotation-mark component**: used for expert quotes or viewpoint excerpts; the quotation marks are deep blue or white and significantly larger than body text; the paragraph follows, with the attribution at the bottom.
+- **Percentage / metric list**: each item contains a small icon or short label, a percentage, and explanatory text; items are separated by hairlines or whitespace; suited to deep-blue sidebars or white cards.
+- **Image frame**: rectangular, right-angled crops, often occupying half a page or a large area; subjects are people, hotels, nature, transport/travel scenes. Separated from text by straight edges, with no photo-frame shadows.
+- **Abstract blue curved surfaces / curves**: the contents and section-divider pages may use blue-gradient curved surfaces or faint lines; these are for chapter/navigation atmosphere only, not decoration on every page.
+- **Hairline dividers**: low-contrast, with lengths following the width of the content block; never full-page heavy decorative lines.
+
+## 10. Texture and Prohibited Items
+
+The overall texture is flat, restrained, and editorial-magazine-like, with pages organized through photography, rectangular color blocks, typographic hierarchy, and the blue system.
+
+**Prohibited**:
+- 3D charts, perspective text, glowing outlines, neon effects, complex textures, heavy shadows, and glassmorphism.
+- emoji, cartoon stickers, large numbers of colorful icons, and social-media-style emoticons.
+- Large blocks of centered copy, poster-style slogan stacking, and full-page unstructured oversized text.
+- Laying long body text directly over complex photos, or covering the people/scene subject with low-contrast text.
+- Using highly saturated red, green, or yellow as large-area status colors that break the blue report system.
+
+**Use with caution**:
+- Gradients: limited to contents-page abstract graphics, blue curved surfaces, or extremely subtle backgrounds; not for buttons or large-area body grounds.
+- Shadows: the source style barely relies on shadows; if a white card must be distinguished, use only a very light drop shadow or switch to whitespace/background color.
+- Rounded corners: the source files are dominated by right-angled rectangles; rounded corners must not become a system feature.
+- Icons: small monochrome line icons may be used in data lists; large colorful icons are unsuitable.
+- Illustration: not observed as a core language; it must not replace real photography.
+
+**Allowed on special pages**:
+- Large-area photographic backgrounds may be used on covers, section dividers, closing pages, or a few emotional transitions; long-text body pages should not use full-image backgrounds.
+- Abstract blue-gradient shapes may be used on contents or navigation pages; ordinary content pages should be restrained.
+- Full-page or half-page deep blue may be used to emphasize conclusions/quotes/the back cover, but content volume must be small and reversed-out text must remain legible.
+
+## 11. Generation Checklist
+
+- Skeleton: is it a uniform landscape widescreen? Are outer margins and the bottom footer preserved? Are the title zone, body zone, and footnote zone clearly divided?
+- Copy grammar: are titles concrete topics/questions/chapter sentences? Does each page carry only one main viewpoint? Are paragraphs too long or stretched too wide?
+- Hierarchy: are the relative sizes of cover, Part, content-page titles, body text, chart labels, and footnotes clearly defined? Is Bold being overused?
+- Color: is the core palette deep blue, light report blue, bright blue, and white/near-black? Are there too many system colors on one page? Is text contrast on dark grounds sufficient?
+- Layout: are photos, text, and charts aligned to the rectangular grid? Is there any random floating, covered faces, or inconsistent margins?
+- Charts: are charts simple and readable? Are percentages and their definitions and measurement bases adjacent? Are legends, axes, and gridlines understated? Is there any 3D or excessive decoration?
+- Tables: are headers, rows/columns, divider lines, number alignment, and footnotes standardized? Are heavy black grids or highly saturated fills used?
+- Components: do deep-blue sidebars, light-blue carrier boxes, contents arrows, quotation marks, and metric lists carry information rather than mere decoration?
+- Prohibited items: are emoji, complex illustrations, large colorful icons, strong shadows, glows, 3D, complex textures, and large blocks of centered copy avoided?
+- Readability: are there problems such as overflow, truncation, garbled characters, overlap, low contrast, occlusion, empty content, wrong image aspect ratios, or the footer pressing into the body?
+- Consistency: pages may vary, but do they still keep the blue system, footer, right-angled rectangles, left alignment, and the report-magazine character? Avoid making each page an unrelated template.
+- No cards by default: unless the user explicitly requests them, never use rounded rectangles or rectangular cards to build hierarchy or alignment: line segments, whitespace, and font-size differences are the better solution
+- 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 structures such as three columns + a heading + a conclusion

skills/open-kimi-ppt/reference/design_system/03_work/03/en/warm-jade-annual-report.md

@@ -0,0 +1,170 @@
+# Organization Name AR 23 24 · Annual report 2023 24 STYLE DESIGN SYSTEM
+
+## 1. Style Positioning
+
+A landscape report-style PPT for listed-company annual reports, investor relations, ESG and governance disclosure, financial notes, and audit statements. It serves investors, boards, regulators, and internal management, emphasizing long-form reading, quick navigation, reviewability, and traceability. Body text, tables, footnotes, and charts are organized with a warm off-white paper background, a stable grid, small-size dense typesetting, QuattrocentoSans/Unna, black-gray text, thin gray lines, and a small amount of golden brown. Photography is used only on the cover, contents/section pages, or a few brand pages; body pages are dominated by multi-column text, data metrics, donut/column charts, wide tables, and governance matrices.
+
+Underlying principles:
+- **Disclosure reading beats visual performance**: titles, body text, data, footnotes, and sources must read continuously along the grid; decoration, images, and color blocks must not break the review path.
+- **Low-saturation consistency beats strong stimulation**: the deck is dominated by off-white, black-gray, light gray, and golden brown; only the black back cover, photography pages, and necessary charts may show stronger contrast.
+- **Information is layered through position, size ratios, lines, and whitespace**: use few large-area color modules and no strong shadows or complex graphics; high-density pages organize information through column widths, hairline dividers, subheadings, and table headers.
+
+## 2. Page Skeleton
+
+- **Canvas ratio**: a landscape widescreen report page, close to 16:9; treat it as a "printable annual-report page," not a stage-presentation page.
+- **Default background**: the entire body page is warm off-white, approximately `#FBF9ED`; textures, gradients, or patterns are generally not layered onto the background.
+- **Margins**: stable whitespace on all four sides; the top margin holds a small chapter/report mark, the bottom margin the page number and report name; the body is inset as a multi-column grid.
+- **Header**: the top-left commonly shows a three-short-bars/chapter-name mini navigation; an "Annual Report 2023/24"-style report mark sits at the top center or top-right; extremely small and low-contrast.
+- **Footer and page number**: a small page number, page name, or report information sits at a bottom corner, in black-gray or light gray. The footer must be light and must not compete with the body for attention.
+- **Title zone**: the title sits at the top-left or upper left; body pages use short report-style titles, while chapter/contents pages may overlay photography or sit alongside it. Data or text follows the title directly, with no exaggerated decoration.
+- **Body zone**: a 2–4 column grid. Text pages use equal-width multi-column; data pages put key metrics on the left and explanations/charts/tables on the right; wide tables occupy the lower-middle of the page or a large zone on the right.
+- **Divider lines**: thin lines are used between columns, in tables, footnotes, metric zones, note boxes, and chart baselines; light gray/medium gray, with restrained weight.
+- **Logo**: the identity mark (small plain text spelling the report name; no graphic logo is drawn) appears mainly on the cover/back cover or a few brand positions. Body pages must not enlarge the logo on every page — at most it appears as extremely small report information.
+- **Navigation**: the contents page is composed of chapter titles, entries, and page numbers; section pages may use a large image + a contents-style list. Body pages keep only a light header — no colorful progress bars.
+- **Watermarks/background graphics**: body pages have no stable watermark; circular product/brand thumbnails or photos appear only as elements on a few pages.
+- **Default reading path**: top-left header/chapter and title → key metrics on the left or the first body column → left to right, top to bottom → charts, table notes, and footer sources.
+
+Page-type skeletons:
+- **Cover**: a full-page or large-area interior/product photograph with an oversized title overlaid slightly left of center, white text at high contrast, and the identity mark at the bottom (small plain text spelling the report name; no graphic logo is drawn).
+- **Contents page**: a vertical photography column on the left carrying an overlaid title, and a off-white zone on the right holding a multi-column contents list; chapter titles are bold, entries are small, and page numbers are right-aligned.
+- **Body report page**: off-white background, light header and footer, top-left title, multi-column text/charts/tables.
+- **Chapter/Notes page**: photography or a tonally unified image on the left, and a contents-style entry list on the right.
+- **Back cover / special closing page**: may use a black background with a white identity mark (small plain text; no graphic logo is drawn); this is a special page and must not be applied to body pages.
+
+## 3. Content Organization
+
+- **How titles are written**: short, objective, report-style — such as overview, outlook, region names, governance topics, audit/notes titles. Avoid marketing slogans, long question sentences, and overly emotional wording.
+- **Information sentences**: 1–3 lines of description or summary may sit under the title; do not make a large block of centered copy the main body of a content page.
+- **Body organization**: use short paragraphs, subheadings, and necessary bullets. Long financial, governance, and audit texts are split into 2–4 columns; avoid single-column long lines.
+- **Grouping logic**: organize by annual-report chapters, management review, strategic outlook, governance, financials, notes, and audit; information at the same level uses unified title styles, column widths, and spacing.
+- **Number of viewpoints per page**: a regular business page carries one main theme + 3–5 subsections/metrics; pure disclosure pages may add more text, but every column must have subheadings or paragraph breaks. Large-type viewpoint pages are not the mainstream and must not be overused.
+- **How bullet points are written**: use dashes, dots, or indentation with no more than two levels; group with whitespace and thin lines, and use colorful icons sparingly.
+- **Keyword emphasis**: use bold, position, enlarged numbers, golden brown, or table background fills. Do not use fluorescent highlighting, stacked underlines, or multicolor emphasis.
+- **Numbers/units/time**: key numbers form independent blocks and are larger than their explanatory text; units stay tight against the number or sit as small labels above/below it. Financial ranges, percentages, DKK, years, and the like must retain their definition and measurement-basis notes.
+- **Source footnotes**: footnotes, asterisks, parenthetical notes, and regulatory citations are placed at the bottom or below tables, set smaller than body text, low-contrast but readable.
+
+## 4. Content Page Layout System
+
+### A. Multi-Column Report Body Page
+
+Suited to audit opinions, governance statements, policy notes, ESG disclosure, financial notes, and other long texts. A short title at the top-left; the body is 3–4 equal-width columns of text, each column using subheadings + dense paragraphs; columns are separated by whitespace or thin lines, not color blocks. Emphasis relies on bolded subheadings, first-paragraph position, and paragraph spacing. If the content needs strong visual storytelling, a single large viewpoint, or many images, do not use this layout.
+
+### B. Company/Topic Overview Page
+
+Suited to "at a glance"-style summaries, business composition, product categories, and channel/market profiles. A donut chart or core explanation goes in the middle; key numbers, short descriptions, category labels, or minimal graphics sit to the left and right. The donut chart expresses compositional relationships and is not responsible for precise comparison; use column charts/tables instead when precise trends, rankings, or multi-dimensional comparison are needed.
+
+### C. Outlook and Assumptions Page
+
+Suited to annual outlook, target ranges, assumptions, sensitivities, and risk notes. A vertical key-metrics zone on the left holds 2–4 large numbers/ranges; the right side is split into "assumptions," "notes," "sensitivities," or small tables. Golden brown is used for target ranges or key values; gray-filled boxes carry additional conditions. Do not force content into an outlook page when there is no clear quantified conclusion.
+
+### D. Region/Business Review Page
+
+Suited to reviews of regions, business units, or business lines. Region names and key data go on the left, small column charts/metric comparisons in the middle, and 2–3 columns on the right explaining causes, actions, and results. The entry point is the region name and numbers, not photography. If there is only narrative without metrics, switch to a multi-column body page.
+
+### E. Wide-Table Disclosure Page
+
+Suited to financial statements, governance matrices, board information, and compensation/audit details. A short title and description go at the top; the horizontal wide table takes the largest area; when necessary, explanation on the left and the table on the right. Key columns, total rows, or headers use gray fills, bold, or darker gray rules. If a table is compressed to unreadability, it must be split across pages.
+
+### F. People/Governance Card Page
+
+Suited to information on directors, management, and committees. Use equal-width vertical cards: a black-and-white or low-saturation portrait at the top, with name, role, tenure, responsibilities, and committee information below, and thin vertical lines between cards. Photos are uniformly cropped and grayscaled/low-saturated; no colorful avatar-wall social-media style.
+
+### G. Photography Section Page
+
+Suited to the cover, contents, Notes, and chapter openers. Interior/product photography fills the left side or the whole page, with the chapter title and a contents list on the right or in an overlay zone. The photography must have low-noise areas to carry text, and its tone must agree with off-white/golden brown. Body disclosure pages must not rely on large image backgrounds.
+
+## 5. Color System
+
+- **Paper-background off-white `#FBF9ED` / `#FEFCF0`**: the main background of body pages. It must not be replaced with pure white or a highly saturated light color; when migrating brands, it may be replaced with an equally low-saturation warm white.
+- **Primary text black-gray `#171717`–`#2B2B2B`**: the main text of titles, body, and tables. Light gray must not replace body text, to avoid low contrast.
+- **Auxiliary text gray `#5A5E6B` / `#7D7A72`**: headers, footers, notes, chart labels, and secondary notes. Used to lower hierarchy; should not be used for the main body of long paragraphs.
+- **Divider light gray `#D9D7CB` / `#C6C4BB`**: column rules, table gridlines, chart axes, and note-box boundaries. Avoid thick pure-black lines.
+- **Table/note-box gray fill `#A09C93`, light gray fill `#E5E3D8`**: used for headers, summary areas, sensitivity boxes, or tables needing emphasis; the deeper gray fill pairs with light text, the light gray fill provides secondary differentiation. Do not cover an entire page at large scale.
+- **Brand golden brown `#B59D71` / `#AB8F62` / `#97754C`**: key numbers, donut-chart emphasis, some chart series, and echoes of photographic tones; small to medium in area. It may be migrated to the brand's primary color, but must remain low-saturation, warm-toned, and harmonious with off-white.
+- **Deep gold/brown-black around `#6F5435`**: used only for deeper levels within the golden-brown system or for chart contrast; use cautiously.
+- **Black special color `#000000` / deep black-gray**: the background of the back cover or a very few closing pages, paired with a white identity mark (small plain text; no graphic logo is drawn)/text. Large black backgrounds are forbidden on body pages.
+- **Chart series colors**: use golden brown, dark gray, light gray, and black-gray; usually no more than 2 primary hues per page, varying by lightness and transparency. If positive/negative states appear, differentiate them first with text/symbols and light/dark contrast; do not introduce a red-green strong-contrast system unless data compliance requires it.
+
+## 6. Typography and Text Hierarchy
+
+- **Type character**: Unna (serif body) and QuattrocentoSans (humanist sans) are the mainstays — both built-in — with QuattrocentoSans Bold for subheadings/section emphasis. The type does not pursue a tech or handwritten feel.
+- **Body = 1x**: the deck-wide baseline; high-density, compact but readable; long text uses regular weight.
+- **Footnotes/headers/page numbers = 0.75–0.9x**: report name, page numbers, notes, sources, and regulatory citations, in lighter colors.
+- **Subheadings/table headers = 1.2–1.6x**: subsections within chapters, table headers, card names, or contents chapter names; may be bolded.
+- **Body-page title = 2–3x**: top-left aligned, black-gray; no exaggerated decoration needed.
+- **Chapter/cover large title = 4–6x**: used only on the cover, the contents photography zone, and Notes/chapter-opening pages; may be white text overlaid on imagery or black text in a off-white zone.
+- **Key numbers = 2.5–4x**: used on outlook, overview, and region pages; units and notes are 0.8–1x, sitting tight against the number.
+- **Chart labels = 0.8–1x**: axes, legends, and data labels are small and clear; key ones may be bolded or use golden brown.
+- **Table text = 0.8–1x**: may be slightly smaller than body text, but must never become too small to read; headers and summary rows may be bolded.
+
+## 7. Chart Language
+
+Mainly donut charts, small column charts, tabularized data, and a small number of metric zones — no complex visualization systems.
+
+- **Donut charts**: used for compositional shares or category proportions. Place in the middle or lower part of the page; golden brown marks the key categories, gray/black-gray the others. Labels wrap around the ring and lines are few; avoid exploded pie charts, 3D pie charts, and too many slices.
+- **Column charts**: used for regional or yearly comparisons. Bars are narrow and clean, layered in golden brown, black-gray, and light gray; axes and gridlines are extremely faint. Small column charts may corroborate metrics but do not carry the visuals of an entire page.
+- **Metric zones**: large number + small note + unit/time basis, usually on the left; key values may use golden brown. Explanatory text must sit tight against the number — avoid leaving numbers isolated.
+- **Axes and grid**: axis lines, ticks, and gridlines are low-contrast; chart frames are kept light wherever possible.
+- **Legends**: placed near the chart, with small text and simple swatches. A legend must not become an independent colorful decorative strip.
+- **Annotations**: forecasts, targets, and baselines use thin lines, light-gray boxes, or small notes; do not use big arrows, glowing markers, or exaggerated callouts.
+- **Boundaries**: do not introduce colorful infographics, complex maps, animated graphics, or skeuomorphic dashboards. Chart aesthetics defer to data clarity and complete definitions, scope, and calculation bases.
+
+## 8. Tables and High-Density Information
+
+- **Table role**: as precise disclosure and evidentiary tools for financials, governance, board, compensation, audit, ESG metrics, and the like; they may carry the main body of a page.
+- **Header**: use a light-gray or medium-gray fill with bolded text; a dark-gray header pairs with light text. Compact in height and clearly distinguished from data rows.
+- **Row/column structure**: light-gray thin gridlines; narrow number columns and wide text columns. Avoid heavy borders and excessive zebra striping.
+- **Row height**: high-density but not crowded; long text may wrap and must not be force-compressed into truncation.
+- **Key rows/columns**: totals, key years, committee affiliation, or status columns may use bold, gray fills, or darker divider lines. Do not mark them with multiple bright background colors.
+- **Number alignment**: numbers right-aligned or aligned by decimal place/unit, text left-aligned; percentages, currencies, and years use consistent formats and measurement bases.
+- **Symbol markers**: understated symbols such as small dots, asterisks, and checkmarks/rating dots may be used; Wingdings/Symbol characters are auxiliary only, not a colorful icon system.
+- **Zebra striping**: if used, only an extremely shallow gray/off-white lightness difference. Large dark row fills are reserved for headers or summary areas.
+
+## 9. Components and Graphic Elements
+
+- **Light header component**: top-left mini navigation/three short bars + chapter name, with the report name at the top-right or top; used only for orientation and must not be bolded or enlarged.
+- **Contents component**: bold chapter titles, small entries, right-aligned page numbers, arranged in multiple columns; suited to contents and Notes pages, and may combine with a photography column on the left.
+- **Key-number component**: large number, unit, and short note combined vertically; used on overview, outlook, and region pages. Use black-gray and golden brown, with whitespace forming the entry point.
+- **Hairline divider component**: horizontal lines, vertical lines, table grids, and column rules establish order — they are not decorative filigree.
+- **Gray-filled note box**: used for assumptions, sensitivities, footnote reinforcement, or local table notes; low-saturation fill, small text, clear boundaries. Multiple strongly colored alert boxes must not be stacked.
+- **Cards/people columns**: portrait on top, text below, thin lines between columns; no visible shadows — boundaries are defined by grid and whitespace.
+- **Image frame**: photography uses rectangular crops with clean edges, no rounded corners or shadows; used on covers, contents, section pages, and a few brand/people pages.
+- **Icons**: only a small number of minimal symbols/social marks/status dots. Colorful icons, emoji, and illustrations do not belong to this system.
+- **Process arrows/SmartArt**: not a stable primary component. If a process must be expressed, use only thin lines, numbering, and text boxes; avoid dimensional arrows and templated SmartArt.
+
+## 10. Texture and Prohibited Items
+
+The overall feel remains flat, restrained, paper-like, and low-saturation; rounded corners, shadows, gradients, glows, 3D, and complex decoration are not evidence of the primary style.
+
+**Prohibited:**
+- Large-area gradients, glows, 3D, drop-shadow cards, glassmorphism, or complex textures on body pages.
+- Rainbow charts, fluorescent highlighting, emoji, cartoon illustrations, and social-media-style colorful icons.
+- Typesetting long paragraphs centered, or replacing report content with presentation-poster-scale giant text.
+- Repeatedly enlarging the logo on body pages, using full-page black backgrounds, or covering the off-white paper system with strong color blocks.
+- Truncated, overlapping, or low-contrast text in tables, or sacrificing data definitions or measurement bases for decoration.
+
+**Use with caution:**
+- Photography: only on covers, contents, chapters, people, or brand-related pages; body disclosure pages should use it sparingly.
+- Golden-brown emphasis: may be used for key numbers and chart series, but do not sprinkle it all over a page.
+- Gray-filled boxes: for notes/headers/summaries; do not turn them into a dense card wall.
+- Icons and symbols: for orientation or status support only; keep them monochrome and small.
+
+**Allowed on special pages:**
+- The cover may use a full-image background with a large white title.
+- The back cover may use a black background with a white identity mark (small plain text; no graphic logo is drawn).
+- Chapter openers/Notes may use large photography on the left + a contents list on the right.
+
+## 11. Generation Checklist
+
+- Skeleton: is it a landscape report page; is the off-white background dominant; are header, footer, and page number lightweight and aligned?
+- Copy: are titles short and report-like; is body text organized by subheadings, paragraphs, and lists; are marketing slogans and large blocks of centered copy avoided?
+- Hierarchy: is body=1x clear; do titles, key numbers, subheadings, and footnotes build hierarchy by relative proportions, without exaggerated changes beyond the size logic?
+- Color: is each page controlled around off-white, black-gray, light gray, and golden brown; are highly saturated multicolor and purely decorative colors avoided?
+- Layout: is a 2–4 column grid used; are the functions of key metrics, text, charts, and tables each clearly defined; does the reading path flow smoothly from top-left to bottom-right?
+- Charts: are only the source style's donuts, small column charts, metric zones, and tabularized data used; are axes, legends, and labels understated and readable?
+- Tables: are headers, grids, number alignment, summary rows, and footnotes clear; is there no truncation, garbled characters, overlap, over-density, or low contrast?
+- Components: do hairlines, gray-filled boxes, contents, key numbers, and people cards serve information; is there no templated SmartArt or stacked colorful icons?
+- Prohibited items: no shadows, gradients, glows, 3D, emoji, complex illustrations, social-media card style, or large black-background body pages?
+- Completeness: check for no empty content, occlusion, wrong proportions, low-quality stretched images, misplaced page numbers, overflowing titles, or meaningless pages caused by repeated templates.
+- No cards by default: unless the user explicitly requests them, never use rounded rectangles or rectangular cards to build hierarchy or alignment: line segments, whitespace, and font-size differences are the better solution
+- 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 structures such as three columns + a heading + a conclusion

skills/open-kimi-ppt/reference/design_system/03_work/04/en/color-stripes-documentary.md

@@ -0,0 +1,167 @@
+# T035 · The 2023 Impact Summary STYLE DESIGN SYSTEM
+
+## 1. Style Positioning
+
+Suited to long-form, externally communicated PPTs such as listed-company impact summaries, responsibility reports, ESG/AI governance, social value, skills outreach, and environmental action, aimed at policymakers, investors, partners, media, and employees. It builds institutional accountability through "a credible report + human stories + data evidence," not sales-roadshow-style visual shock.
+
+Content pages allow 3–5 columns of text, footnote links, quotes, and small data cards to coexist. Core visuals: a `#FFF9F3` off-white background, Arial sans-serif body text, occasional Times New Roman serif display titles, colored chapter strips/capsule navigation, photos of real people or scenes, and flat rectangular data cards.
+
+Underlying principles:
+- **Credibility beats visual showmanship**: persuade with text, sources, attributions, photos, and data; decoration defers to reading — no complex backgrounds or a sense of motion.
+- **Chapter colors serve navigation, not chromatic display**: each topic has one primary color used for the top strip, the current navigation item, data cards, or quote backgrounds; avoid multiple highly saturated colors competing on the same page.
+- **High density must be structured**: split content with columns, hairlines, cards, subheadings, and footnotes; do not pile on content by shrinking text or compressing line spacing.
+
+## 2. Page Skeleton
+
+- **Canvas ratio**: landscape widescreen 16:9.
+- **Global background**: main pages use warm off-white `#FFF9F3` / `#FFFAF4`; do not change it to pure white, dark, or gradient backgrounds. Section divider pages and some viewpoint pages may use a solid-color strip occupying the top 20%–30% of height.
+- **Margins**: a relatively wide starting margin at the top-left, relaxed outer margins and clear column gaps; no edge-to-edge typesetting; small space for a page number or small symbol reserved at the top-right.
+- **Title zone**:
+  - Chapter/methodology pages: a top colored strip carries the chapter title, a short description, and capsule navigation, left-aligned.
+  - Case/viewpoint pages: a large title on the left or top-left, a photo on the right or right half; the title may be set in a serif face.
+  - Regular content pages: a top-left title followed by multi-column body or a card zone, with clear spacing.
+- **Body zone**: multi-column body text, left/right splits, text-image juxtaposition, and embedded data cards; reads left to right, top to bottom.
+- **Header navigation**: rounded capsule labels along the top; the current chapter uses a filled or highlight color, the others a white/off-white ground with a thin outline. Low in height so it does not steal title hierarchy.
+- **Footer and page number**: the page number sits at the top-right corner or a corner, at an extremely low level; the cover/back cover may carry a plain-text identity mark (write the new topic name; no graphic logo is drawn) and a date. Content pages do not require a large logo and have no heavy footer bar.
+- **Identity mark**: the identity mark (small plain text spelling the organization name; no graphic logo is drawn) appears mainly on the cover, back cover, or report identity pages; on content pages it should be small and quiet — avoid brand-watermark-style repetition.
+- **Sources/links**: placed at the end of body text, the bottom of cards, or the lower part of the page, at a smaller level with blue/purple underlines.
+- **Background graphics**: no persistent geometric textures, watermarks, or decorative patterns; rely on solid colors, photos, and rectangular color blocks. The cover may use a colorful photo wall of square tiles.
+
+Default path: top chapter color and navigation → top-left title/question sentence → columned body → photos, quotes, data cards, and footnote links on the right.
+
+## 3. Content Organization
+
+- **How titles are written**: short sentences, question sentences, or action statements, such as "How we work," "Our approach to responsible AI," "How can we protect fundamental rights?"; do not stack marketing subtitles.
+- **Information sentences**: one line of context, a person's name, or a role note may sit under the title — supplementing context without repeating the title.
+- **Body organization**: mainly report paragraphs with a few bullets; left-aligned, narrow columns, small gaps between paragraphs.
+- **Grouping logic**: organize by commitment, action, progress, case, and outlook; parallel modules usually number 3–5, each containing a subheading, body text, a link/source, or a small piece of data.
+- **Number of viewpoints per page**: a high-density content page may contain 3–5 parallel topics; a case page focuses on one question, one photo, one quote, or one piece of data evidence; a large-type viewpoint page keeps only one core question/position.
+- **How bullet points are written**: subheadings are short, body text uses complete sentences; do not turn a whole page into fragmented slogans. Bullets should be short — avoid multi-level indentation.
+- **Keyword emphasis**: use Arial Bold for local bolding; links use blue/purple underlines. Avoid highlighter effects, outlined text, and rainbow-style emphasis.
+- **Number definitions and measurement basis**: large-number cards present important figures; the number is tightly grouped with its unit — millions, billions, currency symbols, percentages — with one explanatory sentence below. Do not mix figures with different definitions or measurement bases in the same number card.
+- **Time and sources**: years, reporting periods, and source links use small levels; footnotes must be readable. Quotes need a name/title/attribution or a supporting photo.
+
+## 4. Content Page Layout System
+
+### A. Colored Chapter Strip + Multi-Column Commitment Page
+
+Used for methodology, working principles, annual priorities, and responsibility frameworks. The top 20%–30% is a chapter-colored strip containing capsule navigation, a title, and a short description; below are 4–5 body columns, each with a subheading, paragraphs, links, or footnotes. Emphasis comes from the current navigation item, highlighted links, and local bolding. Do not use it for single-story pages or content needing large-image emotional impact.
+
+### B. Off-White Multi-Column Body + Embedded Data Cards
+
+Used for "action + results + investment" evidence pages. The body is 3–4 columns of text, with 1–2 colored data cards embedded at the lower right or lower middle; each card holds an oversized number, a short explanation, and a small icon/marker. If there are more than 3 data points needing horizontal comparison, switch to a table or chart — do not cram the page with cards.
+
+### C. Left-Text/Right-Image Case Page
+
+Used for cases about people, communities, education, environment, and philanthropy. The left off-white zone holds a large title/question sentence, short paragraphs, a link button, or a quote; the right 40%–55% holds a real photo, either full-height or as a large rectangle. The photo must be directly related to the case — no unrelated stock imagery.
+
+### D. Viewpoint Question Page / Large Serif Page
+
+Used for chapter transitions, core questions, and value positions. The serif title is far larger than body text and left-aligned; it may be paired with a short colored underline or a color-block button, with a photo on the right and only a small amount of explanation. Do not place 4-column body text or complex charts here.
+
+### E. Signed Letter / Leadership Message Page
+
+Used for opening positions and messages from leaders. Two- or three-column long text, paired with a circular portrait, name and title, and a handwritten signature; the large title may be serif, the body is Arial. Do not apply this layout when there is no signature, portrait, or clearly identified speaker.
+
+### F. Cover and Back-Cover Identity Pages
+
+The cover holds a plain-text identity mark (write the organization name; no graphic logo is drawn), the report title, and a date on the left, and a colorful photo wall of square tiles on the right; the back cover or closing page closes with a narrow photo wall and links/report name. Used only for opening and closing pages — not replicated repeatedly inside the body.
+
+## 5. Color System
+
+- **Background paper color `#FFF9F3` / `#FFFAF4`**: the deck-wide main background. It must not be replaced with pure black or strong gray; in print it may approach white but must retain its warm tone.
+- **Primary text black `#131323` / `#1E171F`**: the primary color of body text, titles, and table text. Light gray must not replace body text.
+- **Neutral grays `#9E9E9F`, `#C5BFBB`, `#EDE8E4`**: hairline dividers, table rules, secondary notes, photo boundaries, and weak backgrounds; they do not carry primary information.
+- **Chapter purple `#6F2572`**: top strips, current navigation, quotes, or emphasis cards for AI/responsibility chapters; in body text it appears only as links, labels, or data emphasis. When replacing it, keep sufficient depth and white-text contrast.
+- **Chapter yellow `#FFB901`**: top strips, data cards, and right-side emphasis blocks for skills/learning chapters; paired with black text — avoid low-contrast white text on yellow.
+- **Light purple `#C6B3E4` / `#C5B3E3`**: quote boxes, auxiliary data cards, and soft emphasis zones; it carries black or deep-purple text and is not spread at large scale as the base of main body text.
+- **Blue `#0978DE`**: links, a small number of chart series, emphasis marks, or the brand color within cover photos; small in area.
+- **Green/teal `#6D7A62`, `#B8DCD2`, `#152C27`**: environment or sustainability chapters, data cards, and photo echoes; deep teal card grounds pair with light text, light teal serves as an auxiliary ground.
+- **Orange-red family (near `#FF5A3D`)**: chapter strips, labels, or emphasis lines; use one primary color per page and do not let it compete at large scale with yellow and purple at the same time.
+
+One page should have only 1 chapter primary color + off-white + black-gray; data cards may add 1 auxiliary color. Do not invent a red-green up/down system out of thin air. Brand colors may replace chapter colors, but the "top strip/navigation/cards" roles remain unchanged.
+
+## 6. Typography and Text Hierarchy
+
+- **Type character**: body text is dominated by Arial; titles and viewpoint pages occasionally use Times New Roman. Do not mix decorative or handwritten fonts into body text.
+- **Body text**: 1x — the baseline for multi-column paragraphs, table notes, and case text.
+- **Subheadings/column headings**: about 1.1–1.3x, commonly Arial Bold.
+- **Page titles**: regular content pages about 2–3x; chapter-strip titles may reach 3–4x, left-aligned.
+- **Serif display titles**: Times New Roman titles may reach 3.5–5x, with tight but non-overlapping line spacing.
+- **Data numbers**: about 4–6x; units grouped with the number; explanatory text at 0.8–1x.
+- **Information sentences/attributions**: about 0.9–1x.
+- **Footnotes/links/page numbers**: about 0.55–0.75x; page numbers extremely weak, footnotes readable.
+- **Emphasis methods**: prefer Bold, color-block grounds, and link colors; do not use outlined text, drop-shadow text, gradient text, or large blocks of centered typesetting.
+
+## 7. Chart Language
+
+Charts are kept simple, dominated by data cards, small tables, and a small number of simplified graphics.
+- **Type boundaries**: suited to small column/bar charts, progress bars, simple comparisons, and data-label cards; not suited to complex dashboards, radar charts, 3D pie charts, or multi-axis financial charts.
+- **Axes and grid**: gridlines are extremely faint, in neutral gray; axes are de-emphasized — avoid thick black axis lines. When values can be labeled directly, a legend is not mandatory.
+- **Series colors**: the current chapter's primary color + light gray/light auxiliary colors; a single chart should not exceed 3–4 colors.
+- **Data labels**: key values sit close to the graphic or on cards; key data uses the chapter color or oversized numbers.
+- **Baseline/target lines**: use thin lines with short callouts — avoid red-alarm-style thick lines.
+- **Legends**: small, close to the chart, with simple swatches; do not build a large standalone legend zone.
+
+## 8. Tables and High-Density Information
+
+- **Header**: subheading-level and Bold; background is off-white, light gray, or a light chapter tint. Avoid dark headers dominating the visual.
+- **Row/column structure**: thin light-gray lines, separating with whitespace and hairlines; row height remains readable, not compressed into a dense-database feel.
+- **Background fills**: large areas of off-white; key cells may be card-ified in light purple, yellow, light green, or blue.
+- **Number alignment**: numbers right-aligned or unified by decimal point/unit, text left-aligned; large numbers may become standalone cards.
+- **Key rows/columns**: use small chapter-colored labels, light fills, or Bold; avoid filling entire rows with highly saturated color.
+- **Zebra striping**: not a strong rule; if used, only an extremely shallow gray/off-white difference.
+- **Symbols and ratings**: small dots, dashes, checkmarks, or short color bars may be used, but must not develop into a complex icon system.
+- **Overflow control**: rather split into multiple columns or two pages than let text touch the edge, footnotes overlap, or a table cover the page number.
+
+## 9. Components and Graphic Elements
+
+- **Capsule navigation**: small rounded labels across the top; the current chapter is filled with the chapter color or highlighted, the others have white/off-white grounds with thin outlines. Text is extremely short — it must not become a secondary contents list.
+- **Chapter color strip**: about one-fifth to one-third of the page height at the top, carrying title, description, and navigation. Do not stack multiple large color strips on the same page.
+- **Data cards**: rectangular or slightly rounded, filled with yellow, light purple, green, blue, etc.; containing a large number, a short explanation, and a small marker. Suited to 1–2 core numbers — not suited to being piled into a nine-square grid.
+- **Quote boxes**: light purple, off-white, or chapter-colored blocks containing quotation marks, a short sentence, and a name/portrait/signature; they must have a source.
+- **Photo frames**: real photos in rectangular crops, often occupying a large zone on the right, and may be spliced with color blocks. Photos get no thick borders, shadows, or complex masks.
+- **Link buttons/source bars**: small colored rounded bars or underlined text, sitting close to the relevant body text — never floating.
+- **Divider lines**: thin gray lines or short colored lines, used between columns, for title emphasis, and at table boundaries; lines should be light and must not form a caged grid.
+- **Portraits and signatures**: used on leadership-message and quote pages; must not be overused on ordinary data pages.
+- **Icons**: only a few small markers/simple symbols; they must not expand into a large colorful icon collection; they must support labels and must not express complex concepts alone.
+
+## 10. Texture and Prohibited Items
+
+The overall feel is flat, restrained, and report-like — typesetting, color blocks, photos, and data — without relying on visual effects.
+
+**Prohibited:**
+- Large-area gradient backgrounds, glows, 3D, skeuomorphic buttons, thick shadows, glassmorphism, and complex textures.
+- emoji, cartoon illustrations, unsourced decorative icons, and social-media-poster-style large centered slogans.
+- Pressing large amounts of body text directly onto full-image backgrounds, or using low-contrast light-gray body text.
+- Multiple highly saturated chapter colors juxtaposed on the same page competing for the main visual.
+
+**Use with caution:**
+- Rounded corners: navigation capsules, buttons, and data cards may be slightly rounded; large body containers should not all become rounded cards.
+- Photos: should be evidence of real people/scenes; no staged stock shots unrelated to the content.
+- Colorful icons: only as extremely small auxiliary markers — they cannot become the main visual system.
+- Tables/charts: used only when a genuine data-comparison need exists, keeping light lines and direct labels.
+
+**Allowed on special pages:**
+- Cover/back cover may use a colorful photo wall of square tiles or large-image collages.
+- Viewpoint pages may use oversized serif titles, short colored underlines, and half-page photos.
+- Leadership-message pages may use portraits, signatures, and long-text typesetting.
+
+## 11. Generation Checklist
+
+- Is it a 16:9 warm off-white report ground, without mistakenly using pure white/dark/gradient backgrounds?
+- Does the page have a clear top-left title, a body reading path, and sufficient outer margins and column gaps?
+- Do section divider pages use a single chapter-colored strip with capsule navigation, and is the current item highlighted?
+- Is the copy issue-styled short titles + report paragraphs/parallel subheadings, rather than stacked marketing slogans?
+- Is body text based on Arial 1x, with title, number, and footnote levels relatively clear and free of absolute font-size dependencies?
+- Is the single-page primary color controlled to 1 chapter color + a neutral base, with restrained link/data emphasis?
+- Is the multi-column body free of edge-touching, overlap, truncation, garbled characters, over-tight line spacing, or low contrast?
+- Are photos real, relevant, and rectangularly cropped, without thick shadows or complex masks?
+- Do data cards highlight only a few key numbers, with number/unit/explanation complete?
+- Are charts light-gridded, weakly axised, and directly labeled, without 3D, multiple axes, or too many series colors?
+- Are tables thin-lined and lightly filled, with text left-aligned/numbers uniformly aligned, without excessive filling?
+- Do components come from the system — capsule navigation, chapter strips, data cards, quote boxes, photo frames, hairline dividers — rather than newly added decoration?
+- Are emoji, complex illustrations, glows, gradients, thick shadows, large blocks of centered body text, and empty-content placeholders avoided?
+- Do cover, body, chapter, case, and closing pages vary while still keeping the same report skeleton?
+- No cards by default: unless the user explicitly requests them, never use rounded rectangles or rectangular cards to build hierarchy or alignment: line segments, whitespace, and font-size differences are the better solution
+- 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 structures such as three columns + a heading + a conclusion

skills/open-kimi-ppt/reference/design_system/03_work/05/en/moon-white-imagery.md

@@ -0,0 +1,157 @@
+# C007 · 2023 Organization Name impact report highlights STYLE DESIGN SYSTEM
+
+## 1. Style Positioning
+
+Suited for corporate impact reports, ESG/sustainability summaries, and technology-product-and-environmental-data narratives, aimed at investors, media, policy/industry observers, and internal management. Information density is medium to slightly high, alternating between "readable report pages" and "immersive photography pages." Core visuals: near-white background, black/gray sans-serif text, extremely thin light-gray lines, low-saturation green accents, real automotive/factory/nature/crowd photography, minimal decoration, generous whitespace.
+
+Underlying principles:
+- **Credibility over decoration**: pages should feel like a formal report rather than a marketing poster; elements must serve the argument, the data definitions and measurement basis, or real-scene evidence.
+- **Whitespace over filling**: when there is too much information, split pages, use columns, or use tables — do not shrink font size or cram in components.
+- **Green is used only for positive/environmental/data emphasis**: it must not expand into a large decorative background color or meaningless highlighting.
+
+## 2. Page Skeleton
+
+- **Canvas ratio**: widescreen 16:9 landscape. Content pages are mostly near-white/white backgrounds; the cover, section transitions, and closing page may use full-bleed dark photography or a black background.
+- **Margin system**: wide margins on all four sides — content never touches the edge; titles, body text, charts, and photos all have a clear outer boundary. Photos may approach half the page width but must retain breathing room.
+- **Title area**: located at upper left or center-upper-left, using a black/dark-gray short phrase or a complete judgment sentence; followed by 1–2 paragraphs of light-gray explanation. The title area does not use colored bars, bold frames, or large background panels.
+- **Body area**: carries photos, charts, metric groups, product relationship diagrams, or multi-column text. Common structures: text left / image right, image left / text right, title on top / chart below, a central relationship diagram, or horizontal metric cards.
+- **Header**: at the very top, an extremely small light-gray report name/section name/auxiliary navigation aligned left or centered — no prominent navigation bar.
+- **Footer and page number**: page numbers usually sit at the upper right or edge, rendered extremely small and light gray; footnotes/sources sit at the bottom or near the chart.
+- **Logo**: the brand logo does not repeatedly appear as a large logo on every page.
+- **Cover/section pages**: full-bleed or large-scale photography, with text overlaid at lower left/left side. The cover may separate the large title and year; section pages may use a darkened photo overlaid with white text.
+- **Dividers**: used only between chart axes, tables, metric cards, or text columns, using extremely thin light-gray lines. Thick lines, colored horizontal bars, and decorative borders are prohibited.
+- **Watermarks/background graphics**: by default, no abstract watermarks, textures, or geometric backgrounds are used; dark atmosphere comes from photography or a pure black background.
+- **Default reading path**: top-left title → subtext/metric explanation → evidence area on the right or below → footnote source.
+
+## 3. Content Organization
+
+- **Title style**: use a self-contained conclusion sentence, action sentence, or thesis sentence, e.g. "a product delivers a certain impact" or "an action reduces a certain footprint." Avoid vague slogans and word-stacking.
+- **Key message sentences**: below the title, use a short, report-style explanation of background, measurement basis, or causation, in a color lighter than the title.
+- **Body text organization**: use short paragraphs, 2–3 text columns, or a small number of bullet points; long policy/explanatory content may be split into columns with generous line spacing and column gaps.
+- **Number of points per page**: one core point per page, supplemented by at most one photo, one chart, or one group of metrics. Multiple sub-points use horizontal cards, columns, or tables rather than scattered placement.
+- **Bullet style**: use traditional bullet lists sparingly; prefer short paragraphs, subheadings, metric cards, and table cells; when bullets must be used, the markers should be small, light, and restrained.
+- **Keyword emphasis**: use large numbers, dark/light contrast, low-saturation green, and whitespace. Do not use neon highlighting, underlines, or multi-color emphasis within body text.
+- **Numbers/units/time frames**: key numbers may be enlarged and stand alone; units follow directly after the number or appear as a small label. Percentages, tonnage, mileage, years, etc. must retain their definitions and measurement-basis notes; timelines or years should align with data charts.
+- **Source footnotes**: data pages must include an extremely small light-gray footnote or source note, placed at the bottom or below the chart; it only supplements the measurement basis and does not carry the main narrative.
+
+## 4. Content Page Layout System
+
+### A. Text-left/image-right or image-left/text-right type
+For product scenarios, manufacturing facilities, energy facilities, and evidence involving people or locations. The text side holds a title, 1–2 explanatory paragraphs, a footnote, or a small status dot; the image side holds one real photo occupying about 40%–55% of the page's visual width. Images are rectangular or slightly rounded, cleanly cropped. Text delivers the conclusion; the photo delivers scene evidence. Not suitable for multi-set data comparison, complex processes, or long body text.
+
+### B. Large-image immersive type
+For covers, section pages, theme transitions, manifesto-style closings, and mood pages. The photo fills the entire page or most of the canvas, with text overlaid at lower left/left side; darken the photo when necessary to ensure white text remains readable. May use a larger title and year/section information. Not suitable for large amounts of numbers, tables, or fine-grained charts.
+
+### C. Title + horizontal metric group type
+For summaries such as climate impact, emissions share, cumulative results, and efficiency metrics. Place the title and a brief explanation at the top or upper left, with 4–6 metrics arranged horizontally below; each contains a large number and a small unit/explanation, separated by extremely light backgrounds or thin lines. Highlight key numbers in mint green, others in dark or light gray. Should not be used when metric definitions or measurement bases differ too much or explanatory text is too long.
+
+### D. Chart-argument type
+For a single quantitative argument such as trend change, cumulative impact, amount avoided, or efficiency decline. The title sits at upper left or top, with the chart occupying the lower half or a large area on the right. Use light-gray grids, extremely thin axis lines, few series colors, and direct labels; a green trend line/baseline expresses the core conclusion. Do not use multi-color business-dashboard-style charts; split the page or simplify when there are more than 2–3 series.
+
+### E. Central relationship / product-substitution diagram type
+For product ecosystems, substitution relationships, and energy-system composition. Built around a central node, small product images, or simplified objects, connected by extremely thin light-gray lines; text labels are very small, background is white. Rely on central position, whitespace, and connection relationships for emphasis — do not use colored icons. Should not be used when there are too many nodes, complex crossings, or many process steps.
+
+### F. Multi-column report text type
+For reading-oriented content such as policy explanations, supply chain, ethics, workforce, and materials. Title placed at upper left, body text split into 2–3 columns with balanced column widths and wide column gaps; a small photo may be added at the side or bottom. Use subheadings or green numbers to extract key points — do not use large background color blocks. Not suitable for presentation scenarios or quick-scan pages.
+
+### G. Table / high-density comparison type
+For structured comparisons such as vehicle models, metrics, regions, or project status. Title on top, table centered or occupying a large area below; organize with light-gray lines and light background colors, using heavy borders sparingly. Highlight only key columns, summary rows, or status dots. If the explanatory text exceeds the table itself, switch to a multi-column text page instead.
+
+## 5. Color System
+
+- **Primary background white / near-white**: #FAF9F7, #F8F8F8, #F5F6F6, #F1F2F2. Used for most content pages and occupies the largest area. Must not be replaced with a colored background; branding may only slightly adjust the warmth/coolness of the white.
+- **Primary text black/gray**: #111111, #111215, #23272E, #262F35. Used for titles, key numbers, axis labels, and body emphasis; titles are near-black, body text may be dark gray. Must not be replaced with colored titles.
+- **Secondary text gray**: #64726D, #93A299, #ABB3B1, #BCC8C5. Used for subtitles, paragraphs, footnotes, weak labels, and axis text; must not be so light that it disappears.
+- **Dividers / grid gray**: #EDEFEE, #ECEDED, #D6DAD9, #C6C9C9. Used for chart grids, table lines, card dividers, and light backgrounds; contrast must be low to avoid a heavy, table-like feel.
+- **Environmental accent green / mint green**: #95BFA9, #BBE6D1, #65A889, #2E9B73. Used for key percentages, environmental metrics, trend lines, positive status dots, and small labels. Small-to-medium area; not used as a full-page background color or ordinary decoration.
+- **Dark photo / black-background pages**: #060608, #0D1708, #121C25, #202611, #404720. Used for night scenes, forests, factories, darkened photos, immersive pages, and manifesto pages; text uses white/light gray.
+- **Natural photo colors**: forest green, road black, sky blue-gray, factory gray, and vehicle white/black/red come from real photography and are not elevated to component colors. Photo colors must not be arbitrarily extracted as chart series colors.
+- **Chart series color boundary**: keep a single page's main hue within black/gray + green; for multiple series, use different gray brightness levels plus one green accent. Avoid multi-color legends such as red/orange/purple/blue unless the original data states genuinely require distinction.
+- **Positive/negative status**: positive/improving uses green; negative/risk defaults to dark-gray text or annotation notes — introduce red cautiously.
+
+## 6. Fonts and Text Hierarchy
+
+Use a modern sans-serif typeface with a clean, technological, report-like feel, consistent with the visual tone of the organization or an industrial-technology brand. Serif fonts, handwriting fonts, cartoon fonts, or decorative fonts must not be used.
+
+- **Body text = 1x**: paragraph explanations and table body text, dark gray or medium gray, with relatively loose line spacing.
+- **Titles = 2.5–4x**: the page's main point, black/dark gray, medium-to-slightly-bold weight; cover/section pages may be larger.
+- **Key message/subtitle = 1.1–1.4x**: below the title, in a color lighter than the title.
+- **Subheadings/group titles = 1.1–1.6x**: used above tables, chart titles, and column lead-ins, with slightly stronger weight.
+- **Key numbers = 3–6x**: paired with units and small labels; no additional bold frame is needed.
+- **Chart labels/table text = 0.8–1x**: clear but weaker than body titles; chart axis labels may be even lighter.
+- **Annotations/footnotes/page numbers = 0.5–0.7x**: extremely small, light gray, near the edge.
+- **Text layout**: text-heavy or numeric pages are mostly left-aligned; avoid large centered blocks. Title line breaks follow semantic divisions.
+
+## 7. Chart Language
+
+Uses report-style concise line charts, bar/small metric charts, share indicators, and a small number of relationship diagrams — no business dashboards.
+
+- **Chart types**: line trends, simple horizontal/vertical bars, percentage metric cards, a single baseline or comparison line. Relationship diagrams use small product images + thin connecting lines.
+- **Axes**: extremely thin axis lines, in light gray or dark gray with low opacity; few tick marks, avoiding dense scales.
+- **Gridlines**: extremely light thin gray lines, only to aid reading values, not forming a grid background.
+- **Labels**: prefer labeling key values directly or placing small labels near data points, reducing legends; use gray, dark gray, and green for emphasis.
+- **Series colors**: the core series uses a mint/green line, comparison series use light gray or dark gray. Do not use large numbers of highly saturated colors in the same chart.
+- **Key data**: emphasize via a green line, an enlarged number, local bolding, or a side note. Do not use explosion shapes, glow, or thick arrows.
+- **Forecast/target/baseline lines**: use thin dashed lines or light-gray lines, with small explanatory text near the line. Do not add gradient forecast bands.
+- **Chart boundaries**: keep ample whitespace and a clear title. This style is not suitable when long legends, multi-layer filters, or complex interaction explanations are required.
+
+## 8. Tables and High-Density Information
+
+- **Headers**: use light-gray text or slightly heavier weight, with a near-white/extremely-light-gray background. Headers do not use a dark background with reversed white text.
+- **Row/column structure**: separate with thin light-gray lines, weaken outer borders, and give ample whitespace between columns to avoid crowding.
+- **Row height**: relatively loose; even high-density pages should not be compressed into a dense financial-statement-style grid.
+- **Base colors**: extremely light-gray blocks may distinguish headers, summaries, or card areas; zebra striping, if used, must be very subtle.
+- **Key rows/columns**: mark with green numbers, small status dots, a light background, or bolder weight. Avoid filling an entire row with a strong color.
+- **Number and text alignment**: text is left-aligned; numbers are right-aligned by column or aligned by decimal place; units, definitions, and measurement bases are consistent for percentages, tonnage, quantities, etc.
+- **Symbol markers**: small dots, short dashes, or minimalist status symbols may be used; do not use colorful, complex icons.
+- **Page role**: a table must have a clear point-of-view title above it, and may have a footnote below explaining the measurement basis.
+
+## 9. Components and Graphic Elements
+
+- **Title bar/header micro-navigation**: an extremely small light-gray report name, section name, or page number at the top edge, used only for orientation.
+- **Metric cards**: composed of a large number, a small label, a light background, or a thin divider; suitable for 3–6 parallel metrics; green is used only for key numbers or positive values.
+- **Small status dots/badges**: small green dots or simplified marks, paired with a footnote, explanation, or positive status; small in size — must not develop into a large icon system.
+- **Photo frames**: real photography uses a rectangular or slightly rounded frame, cleanly cropped; rounded corners should be small and modern. Photos have no thick borders or shadows added.
+- **Tip/explanation blocks**: grouped with a light-gray background or whitespace, reducing the text's visual weight by using a lighter gray. Colorful warning boxes or speech-bubble dialogs must not be used.
+- **Dividers**: extremely thin light-gray lines used for tables, charts, column separation, and relationship connections. All lines stay lightweight — no thick arrows or heavy strokes.
+- **Process/relationship arrows**: use thin lines, faint arrows, or node connections to express substitution relationships or flow; prioritize reducing nodes and line crossings.
+- **Product images/small objects**: use real product renders or cropped photo objects as nodes, in preference to generic icons. Colorful illustration-style icons should not replace them.
+
+## 10. Texture and Prohibited Items
+
+Overall keep it flat, restrained, report-like, and driven by real photography, creating page variation through layout and photos.
+
+**Prohibited:**
+- Large gradient backgrounds, glow, 3D decoration, glassmorphism, complex textures, neon lines.
+- Cartoon illustrations, emoji, social-media stickers, exaggerated colorful icons, hand-drawn arrows.
+- Heavy borders, strong shadows, thick colored title bars, full-page brand-color backgrounds.
+- Large centered blocks of copy, large numbers without a source, data decorated without a stated definition or measurement basis.
+- Multi-color legend stacking, dashboard-style complex charts, low-contrast text overlaid on bright areas of a photo.
+
+**Use with caution:**
+- Rounded corners: only for photo frames or light cards, with a small radius — must not become cartoonish.
+- Shadows: the source file shows no stable shadow system; do not use by default; if needed for image layering, keep it extremely subtle.
+- Colorful vehicle/photo colors: may come from real photography, but must not expand into the page's color system.
+- Dark pages: used only for the cover, sections, closing, or strong emotional transitions — should not be widely used for content data pages.
+
+**Usable on special pages:**
+- A full-bleed photo background with overlaid white text, for cover/section/closing pages.
+- A black-background manifesto page, for the final summary or a strong point-of-view statement.
+- High-density multi-column text pages, for report-reading scenarios, but must keep clear column spacing and footnotes.
+
+## 11. Generation Checklist
+
+- Is it 16:9 landscape, with content pages defaulting to a near-white background and wide margins?
+- Is the title a clear point-of-view sentence, positioned at the upper-left/left reading start point?
+- Does each page carry only one core point, with the evidence area choosing just one of photo, chart, metric group, or table as the primary element?
+- Is the body text organized in short paragraphs/columns, avoiding large centered blocks and dense lists?
+- Is color kept within black/gray/white + low-saturation green, without introducing an unfounded multi-color system?
+- Is green used only for environmental, positive, or key-data emphasis, with a restrained area?
+- Do charts use thin axis lines, light grids, few series, and direct labels, avoiding a dashboard feel?
+- Do tables use thin lines, light backgrounds, and generous row height, with emphasis limited to green numbers or light background marks?
+- Are photos real, cleanly cropped, free of thick borders or shadows, with sufficient contrast where text overlays them?
+- Are the header, page number, and footnotes small and light, without becoming prominent decoration?
+- Are gradients, glow, 3D, complex illustrations, emoji, strong shadows, and thick borders avoided?
+- Have you checked for overflow, truncation, garbled characters, overlap, low contrast, occlusion, empty content, wrong proportions, and mechanical template repetition?
+- No cards by default: unless the user explicitly requests it, it is strictly forbidden to use rounded rectangles or rectangular cards to build hierarchy or alignment: lines, whitespace, and font-size differences are the superior solution
+- No evenly-divided composition: unless there is no other usable layout, do not default to three-way splits, four-way splits, or 2×2 matrices. This includes three-part conclusions such as three-column + title + conclusion

skills/open-kimi-ppt/reference/design_system/03_work/06/en/red-white-business.md

@@ -0,0 +1,186 @@
+# Organization Name · Business Report STYLE DESIGN SYSTEM
+
+## 1. Style Positioning
+
+A landscape PPT aimed at consulting-firm employer branding, talent attraction, corporate culture, and organizational-capability messaging. The audience is external candidates, employees, or a general business crowd; it conveys a credible, global, people-centered brand image through a small number of facts, awards, maps, photos, and strong slogans.
+
+- **One thesis per page, evidence serves the thesis**: each page sets only one explicit headline or conclusion; photos, maps, awards, logos, charts, or triptych components all revolve around that conclusion — do not let multiple points compete.
+- **Red is used for brand tone-setting and conclusion landing points**: it may be used for the cover, transitions, title bands, bottom conclusion bars, or icon cores, without fragmenting into many small decorative dots.
+- **Readability over decoration**: black-and-white/grayscale visuals, white-background information areas, and QuattrocentoSans bold large titles form high contrast; photos, badges, and charts must not overpower the text conclusion.
+
+## 2. Page Skeleton
+
+- **Canvas ratio**: landscape widescreen presentation ratio; primarily full-bleed landscape composition, alternating between white-background content pages, red-background slogan pages, black-and-white photo pages, and mixed collage pages.
+- **Margin system**: red bars, photos, and cover diagonal-cut color blocks may approach the canvas edge; body text, logo walls, maps, and badge groups keep clear outer margins. The bottom red bar often spans most of the width, carrying the conclusion.
+- **Title area**:
+  - A top red horizontal bar with a white, all-caps, bold title, used for sections/themes.
+  - A large red title at upper left on a white background, used for opinion or vision pages.
+  - Special slogan pages use large white text centered or at the bottom, without relying on a traditional header.
+- **Body area**: uses black-and-white photos, maps, award badges, logo walls, circular triptychs, simple line/area charts, or large numbers; a single page retains only one primary visual logic.
+- **Header/footer**: a few consulting content pages may place an extremely small confidentiality notice, document description, or footer information at the bottom edge; communication pages usually have no complex header navigation.
+- **Page numbers**: no explicit page-number system; new pages may omit them, or place them only at a weakened footnote level.
+- **Logo**: the brand logo is used on identity pages such as the cover and closing page. The closing page is a red background with a centered white logo and a small tagline; the logo is not repeated and enlarged on every page.
+- **Navigation/watermark**: there is no stable table-of-contents navigation, section progress bar, or watermark system — none should be forced in.
+- **Dividers and background graphics**: use solid red rectangles, diagonally cut red blocks, black horizontal bands, and circular crops; do not use complex wireframe backgrounds, gradient textures, or abstract decorative networks.
+- **Default reading path**: first read the red title band or large slogan, then view the primary visual evidence, then read small annotations/footnotes. On image-left/text-right pages, view the photo first, then read the bullets and bolded keywords on the right.
+
+## 3. Content Organization
+
+- **Title style**: mostly concise, action-oriented verb or noun phrases, often set in all caps when appropriate. Usually 1 line, at most 2; avoid long sentences, Q&A-style titles, and stacked multi-level subtitles.
+- **Key message sentences**: QuattrocentoSans Bold carries short labels, quote-style slogans, or small group names — not formal long body text.
+- **Body text organization**: left-aligned bullets, 3–5 items per page, each spanning 1–3 lines; keywords are locally bolded with QuattrocentoSans Bold, not relying on colored highlighting.
+- **Grouping logic**: three-way groupings are used for parallel evidence, awards, or result categories; two-way groupings are used for photo + text, red block + photo, or title + proof; logo walls are arranged by visual weight rather than a strict grid.
+- **Number of points per page**: by default 1 main point + 1 category of evidence; complex pages may have 2–4 evidence points, but they must all revolve around the same conclusion. Do not simultaneously place vision, metrics, process, cases, and multiple charts.
+- **Numbers and units**: key numbers use oversized bold text, combined with the conclusion phrase into "quantity + object + scope"; may be placed on the bottom red bar or at the page center.
+- **Source footnotes**: confidentiality notices, sources, and annotations are placed at the bottom or near the chart, using extremely small text that only explains the source and limitations without expanding into business narrative.
+
+## 4. Content Page Layout System
+
+### A. Image-left/text-right intro page
+
+For institutional facts, capability scope, or background information. The left side holds a black-and-white or low-saturation photo; the right side, on a white background, holds a bold small heading and a bullet list, with black body text and bolded key phrases. Suitable for a moderate amount of text; not suitable for complex tables, multiple charts, or too many small icons.
+
+### B. Map + bottom red conclusion bar
+
+For global coverage, offices, or regional distribution. The body is a light-gray dot-matrix/line-drawn map, with locations marked by red dots and thin lines, and city labels in small black/gray text; the bottom red bar carries a large-number white-text conclusion. Not suitable for precise geographic analysis or dense route explanations.
+
+### C. Red-background large slogan page
+
+For section transitions, thematic emphasis, or value propositions. A large solid-red background, with large white QuattrocentoSans Bold text centered or off-center, possibly paired with a large symbol or short phrase. Expresses only one thesis; bullets, long paragraphs, or complex charts must not be layered on.
+
+### D. White-background opinion + red block/photo collage page
+
+For talent vision, culture statements, and emotional expression. A large red title on a white background at the top; below, red rectangular text blocks and black-and-white portrait photos placed side by side. Red blocks carry short white bold phrases; not suitable for fine-grained data explanations.
+
+### E. Award badge/logo evidence wall page
+
+For external endorsements, partners, or recognition. Primarily white background, with a red bar at top or bottom stating the theme; badges/logos arranged in 2–3 rows, sizes fine-tuned by brand visual weight. Very little text explanation, preserving whitespace. Not suitable for long explanations or forcing logos to equal size, causing crowding.
+
+### F. Three-circle parallel evidence page
+
+For three categories of results, three challenges, or three types of recognition. Three circular visual objects divided evenly horizontally, with bold labels at the top; the circles may hold black-and-white photos, red graphic icons, or grayscale portraits. Suitable for up to three items; more than three should switch to a list or grouped wall.
+
+### G. Chart + horizontal emphasis band page
+
+For a small amount of trend data. A short heading-style explanation at the top, with a concise line/area chart as the body, overlaid with a black horizontal band carrying a white-text conclusion. The chart serves as evidence, the band as explanation; do not use when there are too many data series or precise readings are needed.
+
+### H. Black-and-white photo slogan page
+
+For culture statements or emotional closure. The photo fills the body or most of the frame, with large bold white all-caps text placed over a dark area, possibly paired with a bottom red bar. Must ensure the photo is dark enough and text contrast is sufficient; white text must not sit directly over a bright area.
+
+### I. Text + bottom red conclusion page
+
+For support systems, principle lists, or action commitments. A red bold title at the top or left, with bullets beside it; the bottom red bar carries the final commitment. Used to converge supporting points into one slogan; not suitable for listing more than 5–6 sub-items.
+
+## 5. Color System
+
+- **Background white: #FFFFFF**
+  - Used as the primary background for content pages, evidence walls, map pages, badge pages, chart pages, and most information pages.
+  - Do not add warm paper textures, light color gradients, or complex background patterns; must not be casually replaced with a brand light color.
+
+- **Brand primary red: #CC0001 / #C00000 / #CE2222**
+  - Used for cover overlays, full-page red backgrounds, title bars, bottom conclusion bars, key graphics, and red text titles.
+  - May be used as a small accent or across the full page; transitions/back covers may be dominated by it, while content pages typically use it for 10%–30% of the area.
+  - Do not compete with other highly saturated primary colors; do not use for long body text.
+  - When migrating brands, it may be replaced by the new brand's single primary color, but high saturation, strong contrast, and consistent use must be maintained.
+
+- **Primary text black: #111111 / #1B1B1B / #292929**
+  - Used for body text, bullets, labels, chart text, and dark text on photo pages.
+  - Avoid using light gray for body text; black text is placed only on white or light-gray backgrounds; colored body text is not recommended.
+
+- **Neutral gray: #4B4B4B / #747474 / #B6B5B5 / #D7D7D7**
+  - Used for black-and-white photos, map background textures, chart coordinates, city labels, and divider auxiliary elements.
+  - May be used across large areas on photo and map pages; grayscale should only be supportive — it should not make the overall page low-contrast, nor turn into a colorful illustration background.
+
+- **Black accent band: #222222 / #2A2A2A**
+  - Used for horizontal explanatory bands on chart pages and some photo text overlays, carrying white conclusion text.
+  - Do not use it as a title of equal rank alongside the red bar, to avoid competing focal points.
+
+- **Evidence green: #53951A / #306937**
+  - Used only as the genuine source color of award badges — it is the original color of external certifications.
+  - Not a global accent color; must not be expanded into a chart's primary color or a title color.
+
+- **Chart/status color boundary**: a single page's main hue is usually only red plus black/white/gray; badges/logos may keep their original colors but must not be expanded further. Positive/negative status prefers text, arrows, and red emphasis rather than a multi-color traffic-light system.
+
+## 6. Fonts and Text Hierarchy
+
+- **Font character**: the whole deck uses QuattrocentoSans (a Verdana-class humanist sans, built-in), layered through Regular/Bold; no handwriting-style fonts.
+- **Title hierarchy**: main titles use QuattrocentoSans Bold, all-caps, about 2.5–4x the body size; red backgrounds use white text, white backgrounds usually use red text; line spacing is tight.
+- **Slogan/large-number hierarchy**: covers, transitions, map conclusions, and photo slogans may reach 3–5x the body size, and must be short and bold.
+- **Key message/subtitle**: about 1.2–1.8x the body size, may be regular or bold, must not overpower the main title.
+- **Body bullets**: body text = 1x, primarily QuattrocentoSans regular, with key phrases bolded in QuattrocentoSans Bold at the same size; bullet markers are simple with shallow indentation.
+- **Subheadings/group labels**: QuattrocentoSans Bold, about 0.9–1.3x the body size.
+- **Table/chart labels**: about 0.55–0.8x the body size, in black/gray, must not compete with the main title for attention.
+- **Annotations, footnotes, confidentiality notices**: about 0.25–0.35x the body size, placed at the bottom, in gray-black, extremely low visual weight.
+- **Page numbers**: if present, at the same level as footnotes, not constituting a visual element.
+
+## 7. Chart Language
+
+- **Chart types**: use a single trend chart, or an overlaid line/area chart, to prove "results changing over time"; do not build complex multi-chart dashboards.
+- **Axes and gridlines**: axes are thin, gray-black; gridlines are weakened or minimal; axis labels are small.
+- **Series colors**: the data body uses a red area/line, paired with a black/gray baseline when necessary; do not introduce multiple series colors.
+- **Key data**: emphasize with a red data area, a peak marker, or a horizontal black explanatory band; avoid a large number of callout bubbles.
+- **Legends**: omit or keep extremely minimal wherever possible; when there are only one or two data categories, label directly within the chart.
+- **Forecast/target/baseline lines**: there is no stable forecast-line system; if needed, use a thin gray or black line — do not use flashy dashed lines.
+- **Annotation language**: white-text horizontal bands may express short conclusions; charts serve as proof, not as the full narrative.
+
+## 8. Tables and High-Density Information
+
+There is no traditional large-table system; high-density information is mainly carried by bullet lists, logo walls, city-labeled maps, and badge collections.
+
+- **Table usage boundary**: when a table must be used, keep a white background, black/gray text, and thin gray dividers; red is used only for the header or summary conclusion, without heavy borders or multi-colored backgrounds.
+- **Headers**: may use a red background with white text, or black/gray bold text; kept compact, avoiding decorative gradients.
+- **Rows and columns**: row height prioritizes readability, column count should not be excessive; text is left-aligned, numbers are right-aligned or aligned by decimal place.
+- **Dividers**: use thin light-gray lines; do not use heavy black grids or many vertical lines.
+- **Base color**: default white background; extremely light gray may distinguish groups; overly strong zebra striping is not recommended.
+- **Key rows/columns**: highlight summaries with a red bar, red title text, or bold — do not fill many parts of the table with red.
+- **Symbols/rating dots**: there is no stable rating system; if needed, limit to black, gray, and red, paired with text explanation.
+- **Page role**: a table can only serve as an evidence module — it should not replace the one-page-one-thesis structure.
+
+## 9. Components and Graphic Elements
+
+- **Red title band**: a horizontal rectangle carrying a white, all-caps, bold title, placed at the top or bottom; used to state the theme or conclusion, not for ordinary section decoration.
+- **Bottom red conclusion bar**: used on map, award, and support-system pages, holding a large number or one promise; serves as the reading endpoint, kept as a short, high-contrast phrase.
+- **Diagonally cut red cover block**: a red block covering the left side, cutting into the photo along a diagonal edge; suitable for cover/identity pages, not for repetition on every page.
+- **Black-and-white photo frames**: grayscale portrait or scene photos, which may be full-bleed rectangular, half-page, or circularly cropped, serving the red-black-white brand contrast.
+- **Circular crop components**: used for three-way parallel evidence, may hold photos, headshots, or red graphic symbols; evenly spaced with no heavy outlines added.
+- **Handwriting-style labels**: used for group names, emotional phrases, and chart horizontal-band captions; used only for short phrases — cannot replace formal titles and body text.
+- **Badge/logo wall**: preserves external logos in their original form, arranged around the red theme bar; logo sizes adjusted by visual weight.
+- **Simple graphic icons**: including red arrows, grids, and flattened, simplified symbols such as people/globe; icons must be large, few, and conceptually clear; avoid colorful icon sets.
+- **Map annotations**: gray map base + red dots + thin lines + city labels; not suitable for complex geographic data encoding.
+- **Dividers and overlays**: use black horizontal bands, red rectangles, and dark areas of photos; do not use shadowed cards or glassmorphism.
+
+## 10. Texture and Prohibited Items
+
+Keep it flat, high-contrast, and consulting-style restrained; decoration comes only from color blocks, photo cropping, circular composition, and font hierarchy.
+
+- **Prohibited**:
+  - Large colorful illustrations, emoji, 3D graphics, glow, neon, complex textures, glassmorphism, skeuomorphic buttons.
+  - Multi-color icon sets, rainbow-style charts, fancy gradient backgrounds.
+  - Large centered blocks of copy, long paragraphs filling a red background, low-contrast gray body text.
+  - A large logo repeated on every page, complex navigation bars, social-media-card-style sticker decoration.
+
+- **Use with caution**:
+  - Shadows: the source file barely relies on shadows; do not add them proactively except for effects already inherent in external badges.
+  - Rounded corners: circular crops are usable, but rounded card corners are not the primary style.
+  - Colorful logos/badges: preserved only as external evidence in their original form; not expanded into the page's color scheme.
+  - Handwriting-style font: used only for short labels and emotional slogans; overuse weakens the consulting feel.
+  - Large-area photos: must be black-and-white or low-saturation, ensuring text readability.
+
+- **Usable on special pages**:
+  - Full-page red background: used for transitions, back cover, and strong slogans, not for carrying information-dense body text.
+  - Full-bleed black-and-white photo: used for culture statements or emotional closure, paired with large white text or a red conclusion bar.
+  - Diagonally cut red cover block: used for establishing identity at the opening; should not become the template for all content pages.
+
+## 11. Generation Checklist
+
+- Skeleton: is it landscape widescreen; is the white-background/red-bar/black-and-white-photo structure preserved; is there no forced table-of-contents navigation or watermark.
+- Copy: is there one thesis per page; is the title short, direct, and inclined toward all-caps; is the body text bulleted, with keywords bolded rather than randomly colored.
+- Hierarchy: do the main title, slogan/number, body text, labels, and footnotes form a clear relative proportion; is key information avoided in small, hard-to-read text.
+- Color: is red + black/white/gray the primary palette; are external logo/badge colors confined to the evidence area; is there no competition among multiple primary colors.
+- Layout: is a real layout chosen based on content — image-left/text-right, map+conclusion bar, red-background slogan, three-circle parallel, logo wall, chart+band, etc.; is mixing multiple templates avoided.
+- Charts: are they concise, with few series, weak grids, and red emphasis; has a promotional page avoided becoming a complex dashboard.
+- Tables: if a table is used, is it white-background with thin gray lines, with red only highlighting the header/summary; is there no heavy grid or multi-colored background.
+- Components: do the red title band, bottom conclusion bar, circular crops, and black-and-white photos serve information function rather than piling up as decoration.
+- Prohibited items: is there no emoji, 3D, glow, complex gradients, colorful icon sets, glassmorphism, or large centered copy.
+- Quality: check for text overflow, truncation, garbled characters, overlap, low contrast, photos occluding text, empty placeholders, stretched proportions, distorted logos, and monotonous rhythm from template repetition.