chore: 1.1.0 release

skills/open-kimi-ppt/reference/design_system/work/warm-jade-annual-report/design.md

@@ -0,0 +1,77 @@
+# Warm Jade Annual Report · Work Report STYLE DESIGN SYSTEM
+
+## PART A — Category Baseline (Universal Minimum)
+
+Lead with the conclusion in an operational performance report benchmarked against top-tier business reviews and project progress briefings. Every page in this deck must be scannable within 30 seconds, and every number must withstand drill-down scrutiny: status must be evidenced, variances attributed, and requests stated clearly.
+
+Content and layout:
+1. Executive structure: conclusion overview (a one-page verdict on overall attainment) → core metrics vs targets → revenue/mix analysis → variance attribution → project status (red/amber/green) → cost and efficiency → next-period actions → decisions and support required.
+2. Status visualization is the signature: red/amber/green status indicators, target vs actual tables, progress bars with numeric labels, variance waterfalls, and milestone timelines.
+3. Medium-high density with strict grid discipline: pages are built from aligned status modules and tables; zero decoration; every module answers “So what?” in place.
+
+Visual style:
+1. Aesthetic: crisp, corporate, and utilitarian; readers should be able to audit the quarter from the pages alone.
+2. Typography: use one sans-serif family throughout; establish hierarchy through weight and size, not decorative type; always align numbers in columns, and never use serif display type for numerals.
+3. Color: a neutral structural palette (deep slate/graphite + gray), with status colors reserved strictly for meaning—green/amber/red indicate status only, while one accent color (defined by the style) marks priorities and the current period; never use status colors decoratively.
+4. Graphics: simple chart types (comparative bars, trend lines, variance waterfalls); fine table rules and right-aligned numbers; no 3D, no pictograms as data, and no gradient fills.
+
+Structure and discipline (distilled from benchmark-quality deliverables):
+1. The first page is always the verdict: one sentence on overall attainment + target vs actual values for 3–5 headline metrics; never pad it with generic cover-page language.
+2. Every metric must show target, actual, and attainment rate together; a metric with an actual but no target is defective.
+3. Variance pages must quantify attribution: break the gap into named causes whose values sum to the total gap; unexplained residuals are not allowed.
+4. The three-part project status unit: status indicator + evidence (progress %, milestone) + corrective action (with owner and date); a red item without a recovery plan is defective.
+5. Next-period actions are commitments, not aspirations: every item includes an owner, timing, and expected quantified impact.
+6. Trend pages must mark the reporting-period boundary and annotate the reasons for inflection points within the chart; use dashed lines for forecast segments and label them as planned/estimated.
+7. Align parallel modules rigorously to the grid: modules in the same row share height and baseline; group mixed content by meaning rather than scattering it.
+8. Every number must include unit, period, and definition (GMV or revenue, order volume or sales value); label estimated values as internally defined examples.
+9. End with decisions and support required from management—list each item separately with the consequence of delay; never close with a thank-you page.
+
+Default baseline (distilled from the layout skill; PART B may override): use one consistent lightweight component language for progress, attainment, and red/amber/green status throughout the deck; each page carries 1 topic + 2–4 supporting points, with the conclusion clear within 5 seconds; every metric must be accompanied by a “So what?”—the reason, impact, or next action—rather than left as a bare number.
+
+**Sequential-title test**: Read only the slide titles from beginning to end; they should tell the complete story. If they do not flow, the structure has not been established.
+
+Density anchor: the specific minimum for each style (evidence modules per page, chart count, annotation conventions) follows the 【Density Baseline】 reverse-engineered from that style’s source deck—this baseline imposes no universal number.
+
+### Global Prohibitions (Default AI Patterns · Mandatory)
+
+1. **Do not default to cards**: Unless explicitly requested by the user, rounded-rectangle or rectangular cards must not be used to create hierarchy or alignment—functional containers such as status indicators, assumption boxes, and quotation frames do not count as cards. Rules, whitespace, type size, and weight differences are the preferred tools.
+2. **Do not default to equal-split compositions**: Unless no other layout is viable, do not default to three equal columns, four equal columns, or a two-by-two matrix—equal division must be justified by the content structure (three scenarios naturally warrant three columns; frameworks named explicitly in the brief are exempt).
+3. **Do not use unmotivated AI color palettes**: Institution-specific palettes defined in the brief are exempt; prohibited choices are bland, common, and unjustified defaults—blue-purple gradients, cyan-purple neon, rainbow flares, glassmorphism cards, and glowing borders.
+4. **Do not use any element that conflicts with the overall style**: Out-of-style treatments are forbidden, such as rounded icons or rounded rectangles in a sharp-edged visual system.
+5. **Keep chart backgrounds transparent**: Use transparency or the page background, except for reversed charts on dark backgrounds.
+6. **Do not leave planned regions empty**: The main content area must not contain large blank regions; every planned zone must be filled with real content. Failure to fill it is the most serious form of roughness.
+
+## PART B — Signature System (Template-Specific Signature; Overrides PART A in Case of Conflict)
+
+One-sentence style signature: a warm ivory ground, charcoal-black type with serif body copy, and honey-amber accents, shaped into an auditable editorial annual report through fine column rules and high-density tables; photography occupies large areas only on section openers and at key narrative moments.
+
+【Color Palette】Use warm ivory close to `#FBF9EE` across most content pages; ESG/data-table sections use a continuous white ground of `#FFFFFF`, confined to those sections. Primary text is `#181716`; titles use the same color and reverse to `#FBF9EE` on photography or dark backgrounds. Body and table text never use fully saturated colors. The primary accent is `#FDC356`, reserved for the latest period, core figures, conclusion bars, or a small metric background; any single block should occupy no more than approximately 15% of the content area. Supporting colors are `#A09B93` (light-gray bars and current/total column fills) and `#6B625D` (dark-gray series and secondary text); separator rules may use a tone close to `#CCC5BE`. Chart series are fixed to amber + black `#181716` + dark gray `#6B625D` + light gray `#A09B93`, assigned by meaning within each chart rather than varied as a rainbow. Do not introduce separate red/green colors for positive and negative values: express them with signs, arrows, and black/gray scales, using only `#FDC356` when emphasis is necessary. A page typically uses no more than 3–4 hues; amber never floods an ordinary content page.
+
+【Layout Skeleton】Source-deck fact: the canvas is 13.333×7.5 inches, 16:9. Content pages use a fixed micro-navigation strip at the top: three fine horizontal lines at top left, a section label beginning around 0.5 inches from the edge, and the report name centered; a small page number sits at bottom left, with small organization/report text at bottom right. Main titles are left-aligned by default, placed in a title band approximately 0.5 inches from the left edge and 0.7–1.1 inches from the top; overview pages such as “At a glance” instead use a large centered title. The content area generally uses 3–4 columns divided by approximately 1 px vertical rules; tables are grouped with horizontal rules, not enclosed in containers. The reading path is title conclusion → left-side metric/chart → right-side explanation → bottom footnote. Section openers use a dedicated structure: the left 40–45% contains a warm off-white large title and an underlined table of contents, while the right 55–60% is full-height photography; another section-page type uses a full-bleed photograph with a white-text table of contents overlaid. The cover uses only full-page photography and a centered white title, without the content-page grid.
+
+【Typography】Source-deck fact: titles, navigation, numeric labels, and table headers primarily use the sans-serif Tahoma; long-form body copy explicitly uses the serif Cambria, creating a “sans-serif heading + serif body” pairing that overrides PART A’s single-sans-serif default. Render with {latin: QuattrocentoSans, ea: MiSans} (sans titles/labels) and {latin: Unna, ea: 思源宋体} (serif body). Cambria body text at 8 pt is defined as 1x; module headings use Tahoma at 8–12 pt; standard page titles use Tahoma at 36–40 pt, approximately 4.5–5x; large figures/percentages are 24–28 pt, approximately 3–3.5x; footnotes are 6 pt, approximately 0.75x; cover titles are approximately 75 pt and reserved for special pages. Use sentence case for titles, with all caps permitted for short labels; keep years, percentages, and units adjacent to their values, and right-align table numbers by column. When adapting to other languages, preserve these weight and scale relationships, prioritizing the readability of 8 pt body copy in a 960×540 preview.
+
+【Chart Language】Chart types actually used include donut-share charts, multi-year trends combining gray bars with a black line, horizontal or vertical stacked bars, multi-year financial tables with grouping rules, two-column side-by-side data tables, and a small number of ESG charts with broken axes/hatched target bars.
+⭐ Donut chart (recurring): place two donuts side by side, use amber to highlight one primary share, and assign black/dark gray/light gray to the remaining shares; place labels outside the rings and connect them with fine leader lines. Use only for conclusions about composition/breakdown.
+⭐ Composite bars (recurring): show one stacked bar for each of two periods or years, write values directly within each segment, and place a compact color legend below; use for comparing regional, category, or channel mix.
+⭐ Financial tables (high frequency): fill the entire current-period or total column with `#A09B93`, using white text or bold type; distinguish group headings and subtotals with horizontal rules and bold weight, not zebra striping. Use for statements and notes.
+⭐ Target comparison chart (occasional): place an axis break between the actual bar and the long-range target bar, with the target bar rendered in a light hatched fill; use only when the scale difference is excessive, and do not extend it into a deck-wide chart convention.
+
+【Signature Components】The three-fine-line menu mark is fixed at the top left, appears no more than once per page, and serves only as a navigation anchor. The top section label, centered report name, bottom-left page number, and bottom-right small organization text form a micro header/footer system whose reserved positions must not be occupied by content. Multi-column body layouts repeatedly use approximately 1 px vertical separators, while tables use fine horizontal rules in the same color to establish rhythm between groups. An amber conclusion bar/large-number block carries only one decisive metric and is limited to 1 block per page; it must never become a wall of cards. Photography is a hard constraint: retain full-frame or right-half lifestyle/product photography on covers and section openers, and commonly place one image at the bottom of a column on event pages; never replace these image zones with gradients, abstract color blocks, or icons. Thin-line circular icons may appear sparingly before risk/ESG metrics, with each icon explaining only one metric.
+
+【Prohibited】
+1. Do not use only sans-serif type throughout the deck; body paragraphs must retain a Cambria-style serif reading layer, with Tahoma reserved for titles, labels, and numbers.
+2. Do not expand amber into a full-page background or the primary background across consecutive pages; ordinary pages permit it only in a small metric band, the latest-period bar, or one conclusion block.
+3. Do not introduce red/green warning colors or neon hues into body charts; communicate positive and negative values using signs + grayscale/amber semantics.
+4. Do not replace column separators and table rules with rounded cards or shadowed containers; hierarchy in this deck comes from type weight, rules, and whitespace.
+5. Do not crop section-opener photography into small pasted-on images or shrink it into a decorative corner mark; retain at least one full-height photographic zone on every section page.
+6. Use large three-color conceptual panels cautiously and only on section concept pages; do not carry them over as a standard content-page template.
+
+【Slide Types and Layouts】
+Conclusion/metric overview｜Best for a one-page verdict and operating highlights｜Large centered title with 3 columns below: small chart/trend on the left, primary donut or headline figure in the center, metric column on the right｜4–7 independent blocks｜Donut chart, large amber figure｜Not suitable for long-form explanation.
+Multi-column narrative｜Best for strategy, retrospectives, and ESG explanation｜Title and introduction on the left; 3–4 body columns on the right with vertical rules between them; the final column may carry a conclusion bar｜6–12 text blocks｜Vertical separators, one metric block｜Not suitable for wide tables.
+Event/milestone page｜Best for describing events by quarter or phase｜4–5 equal-width vertical columns, each containing “period + large title + 1–2 explanatory paragraphs + bottom photograph”｜4–5 independent stories｜Amber period labels, bottom photography, vertical rules｜Not suitable for detailed financial data.
+Regional/segment performance｜Best for comparing geographies or business units｜KPIs and stacked bars on the left, 1–2 explanatory columns in the center, supplementary metrics/small table on the right｜5–9 independent blocks｜Stacked bars, top-right product/subject photograph｜Not suitable for a pure opinion essay.
+Financial statement/notes｜Best for multi-year data and accounting explanation｜Title at top left, wide table spanning the main body, with 1–3 explanatory or footnote blocks below; gray fill for the current/total column｜1 primary table or 2 side-by-side tables + 1–3 text blocks｜Gray current column, horizontal rules between groups｜Not suitable for photography-led pages.
+
+【Density Baseline】Narrative content pages typically use 3–4 columns with 2–4 paragraphs per column; when adapting across languages, each paragraph should contain approximately 80–180 words/characters equivalent, with a blank line between paragraphs instead of splitting them into cards. Metric pages typically contain 4–7 evidence modules and 1–3 charts per page, with values labeled directly on bar segments, donut segments, or table columns; chart notes remain 1–2 lines. Event pages use a fixed 4–5 independent story blocks, each with 1 title, 1–2 short paragraphs, and 1 image; imagery commonly occupies the lower 30–45% of each column. Financial pages center on 1 wide table, split into upper/lower sections or two side-by-side tables when necessary, with 1–3 footnote/definition blocks below; gray fills on the current-period and total columns create vertical anchors. Whitespace belongs mainly in the top title band, on either side of fine column rules, around charts, and in the bottom footnote zone; do not leave large content-free areas in the body.