chore: 1.1.0 release

skills/open-kimi-ppt/reference/design_system/02_business/06/en/orange-tech.md

@@ -0,0 +1,172 @@
+# F001 · Tech-Style Orange Annual Report & Business Insight Plan Proposal PPT Template STYLE DESIGN SYSTEM
+
+## 1. Style Positioning
+
+Suited to formal business reports such as annual performance reviews, business insights, business retrospectives, strategic plan proposals, and investor/management updates. Aimed at readers with business and data backgrounds, it presents conclusions through large titles, key numbers, charts, tables, and short explanatory paragraphs.
+
+Information density is moderate and restrained: white-background content pages keep generous whitespace, usually holding only one main chart or structured module with short cards beside it; table pages and roadmap pages may be locally high-density, but avoid full-bleed packing.
+
+- White/light-gray content pages are used for data analysis;
+- Orange is the only high-saturation primary accent, used for charts, key numbers, circular relationship diagrams, nodes, and light effects on black backgrounds;
+- Black-background pages use orange gradient light bands, concentric-circle/arc wireframes, and minimal text, for covers, transitions, quotable lines, and closing pages.
+
+Underlying principles:
+- **One page sets only one visual anchor.** A large title, a core percentage, a circular relationship diagram, a column chart, a donut, a table, or a quotation takes the lead — the rest is an explanation layer.
+- **Brand orange serves information hierarchy, not decorative stacking.** It is used first for data series, key rows, nodes, keywords, and important numbers; large-area backgrounds use white, near-black, or light gray.
+- **Structural clarity over information exhaustiveness.** Keep the conclusion, key metrics, and a few supporting points; complex details are split into separate pages or demoted to notes — do not fill the picture with body paragraphs and small labels.
+
+## 2. Page Skeleton
+
+The canvas is 16:9 landscape widescreen. It uses wide margins, low-noise backgrounds, and left-right columns; the common reading path is "upper-left title → center/left main visual → right explanation cards/numbers → bottom footnotes." The main body sits in the middle of the picture with clear whitespace on all sides, avoiding edge-hugging arrangements.
+
+### Cover/closing page skeleton
+- A near-black full-page background, with an orange gradient light band at the bottom or at the top and bottom edges; locally overlaid dark rectangular frames, thin-line concentric circles, or arc textures.
+- A small brand mark sits at the upper left; the main title is centered or nearly centered, may break into multiple lines, and may include slight type variations; the tagline and signature sit at the bottom or lower right, far smaller than the main title.
+- A central dark transparent frame may carry the title, but must not form a heavy border.
+
+### Black-background section/quotable-line page skeleton
+- Near-black background, orange glow, text centered or nearly centered, extremely low content volume.
+- Low-contrast concentric-circle wireframes may form a focus, without competing with the text's level.
+- Does not carry complex charts, tables, or dense small type.
+
+### Regular content page skeleton
+- White or very light gray-white background; the upper left is the title area, with a short note allowed under the title.
+- Charts or structural diagrams go on the left/in the middle; explanation cards, key numbers, or short paragraphs go on the right.
+- Light-gray thin lines, table lines, and timeline lines serve organization only — they are not the decorative protagonists.
+- Page numbers have no stable, prominent style and should not be force-generated; sources/footnotes use tiny gray text at the bottom or near the chart.
+
+### Table of contents/navigation and watermarks
+The source file shows no strong table-of-contents page and no persistent header navigation; do not add progress bars, section navigation, page-number bars, or large watermarks by default. Section cues use black-background transition pages, not top navigation on every page.
+
+## 3. Content Organization
+
+Titles lean toward concise business phrases, usually noun groups of 2–3 words or short topic names, such as overview, financials, revenue breakdown, timeline, product performance, next steps, etc. The tone is calm — no exaggerated questions or marketing slogans; regular-page titles sit at the upper left, while section/quotable-line pages may be centered.
+
+Information comes in three layers:
+- **Manifesto/quotation lines:** used for the opening after the cover, quotable lines, and closing pages; significantly larger than body text, may break into 2–4 lines, local italics allowed.
+- **Short explanatory paragraphs:** under the title or beside the chart, explaining the page's purpose, the conclusion's background, or metric meanings.
+- **Card key points:** in the right explanation area, usually 2–4 items, each a subtitle/keyword + one sentence of explanation.
+
+One page = 1 main conclusion + 2–4 supporting points. Lists should not exceed 4 items; timelines are most stable at Q1–Q4 or 3–4 stages; circular relationship diagrams center on 3 circles or 3 nodes. The body stays in short paragraphs, avoiding long stretches of centered layout. Keywords may be emphasized with orange text, small black capsule labels, bold sans-serif, orange numbers, or light-orange row fills.
+
+Percentages, currencies, quarters, years, and growth rates should stay near their corresponding figures or conclusions; main numbers are larger than body text, with units and notes smaller and adjacent. Sources, notes, and measurement bases use low-contrast gray text at the page bottom or near the chart, without breaking the main reading path.
+
+## 4. Content Page Layout System
+
+### A. Left title + center chart + right explanation cards
+Suited to financial overviews, revenue composition, costs and profits, and market performance. The upper left holds the title and a short lead-in, the middle holds a column chart, donut, area chart, or horizontal bars, and the right holds 2–4 light-gray explanatory cards; the chart provides evidence and the cards explain causes, actions, or impacts. Use primary-orange graphics, small black labels, and orange numbers for emphasis. If data dimensions exceed 5 groups or explanations exceed 4 items, split the page.
+
+### B. Central circular relationship/capability model
+Suited to non-precise comparison content such as company overviews, capability portfolios, team composition, and strategic relationships. The main body uses 3 semi-transparent orange circles intersecting, or a single glowing circular node, with text placed at the circle centers or near the intersections; the right may hold one large percentage and a short note. This layout emphasizes relationships and combinations, and is not suited to precise numeric rankings or complex process dependencies.
+
+### C. Timeline/milestone page
+Suited to quarterly results, phase progression, and key-event reviews. The left holds the title and background notes; the body separates stages with thin light-gray lines; Q1–Q4 nodes use light-orange quarter markers and light-gray event cards. Keep a single-line narrative, left to right or top to bottom. Do not expand it into a multi-project Gantt chart, and do not place multiple paragraphs at every node.
+
+### D. Large chart + side-note explanation page
+Suited to profit curves, trend changes, and ranking comparisons. The large chart occupies the left half or the central main area; side notes explain peaks, inflection points, growth rates, and management implications. Area charts use deep-to-light orange tiers, bar charts use orange bars sorted by length. Side notes stay short and must not outshine the chart.
+
+### E. Table comparison page
+Suited to product performance, metric comparisons, and capability checklists. Title at the upper left; the table spreads center-left or centered; a brief conclusion may sit at the right or above. Keep only key columns; key rows or key cells use light-orange fills. If there are too many details, use a summary table + notes instead of shrinking type to fill the page.
+
+### F. High-density side-by-side module page
+Suited to multi-dimensional summaries such as team structure, cost distribution, and capital deployment. Multiple light-gray cards, short lists, or small number blocks sit side by side, with unified widths, row heights, and alignment baselines; each module carries one metric or one group of short text. Do not mix in too many icons, photos, or complex borders.
+
+### G. Black-background mood/transition page
+Suited to covers, section breaks, strategic quotable lines, and closing thanks. The core is a near-black background + orange glow + a small amount of centered copy, usually one statement or thank-you line plus a tiny signature. Not suited to regular data pages, table pages, or small-type note pages.
+
+## 5. Color System
+
+- **Near-black background #1D1D1D / #191919**: used for full-page backgrounds of covers, transitions, quotable lines, and closing pages. White content pages must not use near-black over large areas — only for small labels, legend dots, or high-contrast text.
+- **Main text black #111111–#222222**: used for content-page titles, key notes, table body text, and main labels; it must not be replaced by orange for long body text.
+- **Neutral gray #5B5B5B / #837571 / #A09C9A**: used for explanatory text, chart auxiliary labels, footnotes, and secondary information. Must keep contrast against the white base; not for key numbers.
+- **Light-gray backgrounds #F7F7F7 / #F1EFEF / #E9E9EA**: used for card fills, table areas, light page zoning, and information containers; area may be medium, but must not outweigh the white space. May be replaced with a same-lightness brand light gray.
+- **Divider gray #D0D0D1 / #E1DEDC**: used for table lines, timelines, card borders, and auxiliary axis lines. Thin and low-contrast — no thick black frames.
+- **Primary orange #FC7C3D / #F16736 / #FA8555**: used for column charts, donut primary series, key numbers, nodes, key words, and button-like small labels. On white pages it serves as a local main visual and must not carpet large background areas. May be replaced with a brand primary color, provided high recognizability and sufficient lightness difference are kept.
+- **Deep orange/red-orange #DC4A21 / #C22B0C / #BF5732**: used for chart high-value areas, deep area-chart layers, donut segments, and the dark parts of black-base light effects; not for long text.
+- **Light orange #FECEAA / #FDAA74 / #FCC8B3 / #FBE6DC**: used for semi-transparent circles, secondary chart series, table key rows, soft background blocks, and forecast or de-emphasized series. Area may be slightly larger than primary orange, but must stay light — never let the page turn orange-based.
+- **White #FFFFFF / near-white #F8F8F9**: used for content-page main backgrounds and reversed-white text on black pages.
+
+Within one page, use only orange + neutrals — do not introduce extra primary hues such as blue, green, or purple. Data series are distinguished by orange's shades and tints; no independent red-green system for positive/negative states — if positive/negative must be expressed, prefer label text and arrows/symbols, and do not add vivid green or warning red on your own.
+
+## 6. Fonts and Text Hierarchy
+
+A modern sans-serif business style, with Liter as the main body and Archivo Black (via customFonts) for page titles, plus small amounts of light and italic faces for the cover or quotations. For Chinese, use MiSans; avoid calligraphic, handwritten, and strongly decorative fonts.
+
+- **Cover main title:** approx. 5–7x body text, centered, multi-line phrasing, local light or italic parts allowed.
+- **Section/quotable-line big sentences:** approx. 3–4x body text, relaxed line spacing, low word count.
+- **Content-page titles:** approx. 2.5–3.5x body text, upper-left aligned, in the Archivo Black ultra-heavy weight — the strongest visual anchor on the page, no thick strokes.
+- **Key information numbers:** approx. 2–3x body text, may be slightly smaller than the title or on par, with small unit/note text.
+- **Subtitles/card titles:** approx. 1–1.2x body text, bolded; keep them short.
+- **Body notes:** 1x, the proportional baseline; control line length and avoid full-width long paragraphs.
+- **Chart labels/table text:** approx. 0.8–1x body text; keep legible — do not shrink excessively to cram content.
+- **Notes/sources/footers:** approx. 0.55–0.7x body text, low-contrast gray.
+
+Text is predominantly left-aligned; black-background mood pages and the cover may be centered. Keep clear spacing between title and body; do not mix too many weights on one page — usually regular, bold, and italic suffice.
+
+## 7. Chart Language
+
+Main chart types are column charts, horizontal bars, donuts, area/waterfall-feel trend charts, circular relationship diagrams, and a few small metric charts. Charts are simplified, with few grids and little axis decoration, highlighting orange areas and direct labels.
+
+- **Column charts:** mostly 2–4 columns with square or slightly rounded corners; main columns in primary orange, secondary columns in light orange. Value labels sit atop or beside the columns; small black capsules may mark key amounts/values. Axes and gridlines are extremely weak — direct labeling takes priority.
+- **Donuts:** for composition ratios, center left empty, segments in primary orange, deep orange, and light orange. Legend at the bottom or beside, using small color dots + short labels. Do not introduce too many segments — beyond 4–5 categories, recognition drops.
+- **Area/trend charts:** use deep orange, primary orange, and light orange for layering or a fading effect, annotating growth rates, inflection points, or key stages; gridlines barely visible, horizontal-axis labels short. Suited to trends and profit structures, not precise readings.
+- **Horizontal bars:** orange bars sorted by length, with short labels or values beside; keep to 3–5 bars.
+- **Circular relationship diagrams:** semi-transparent orange circles overlapping to express intersections, portfolios, and capability relationships. They are not strict data charts — do not attach precise axes or complex scales.
+
+Chart emphasis is achieved through color shades, label positions, and local big numbers; do not use 3D charts, heavy shadows, dimensional pie charts, rainbow series, dense gridlines, or complex legends.
+
+## 8. Tables and High-Density Information
+
+Tables serve "management comparison" and "metric summaries" — they are not detail databases. Headers are light-gray or white with bold black text and short column names; the body uses black/dark-gray text. Text columns left-aligned, numbers and percentages neatly aligned, numeric columns may be centered or right-aligned.
+
+- Dividers use light-gray thin lines; avoid thick black borders and fully enclosed heavy frames.
+- Row heights are relaxed, with obvious whitespace around the table — not edge-to-edge.
+- Key rows, key cells, or the current item use light-orange fills, with restrained emphasis area.
+- A pale-gray base may carry the table area, but do not cover the whole table with a high-saturation fill.
+- Zebra striping is not a strong feature and may be omitted; if used, only extremely light gray alternation.
+- Summary/conclusion rows may be bolded or given light-orange fills, but no complex multi-level headers.
+
+High-density side-by-side information uses light-gray cards, short lists, quarter nodes, and metric blocks. Blocks keep unified sizes and alignment, with short titles and explanations within one sentence. Symbols use small black dots, small color dots, thin lines, and short labels — no large sets of colorful icons or emoji.
+
+## 9. Components and Graphic Elements
+
+- **Small black capsule labels:** mark key amounts, chart highs, or small categories; reversed-white text, small area. They should not pile up in groups across the page.
+- **Light-gray explanatory cards:** used for right-side explanation lists, timeline events, and supplementary notes; light-gray fill with no obvious shadow, containing a subtitle and one sentence. Keep the count to 2–4.
+- **Orange circles/semi-transparent circles:** used for relationship models, nodes, and key visuals; they may overlap into intersections, but text must stay readable. Do not turn the circles into complex bubble charts.
+- **Thin dividers/timelines:** used for stage separation, table rows and columns, and layout zoning; light colors, thin lines.
+- **Ring/concentric-circle wireframes:** used on black-background transitions, tech-feel pages, or a few centered-visual pages; low contrast, never the main body of an infographic.
+- **Orange light bands/glow:** only for black-background covers, section pages, closings, and other mood pages. White content pages use no large-area light effects.
+- **Title bars/navigation:** no persistent header navigation has been established and must not be forced onto every page. The title itself is the primary navigation.
+- **Image frames:** only a slight tendency toward placeholder rectangles/gray blocks is seen — this is not a photo-driven style. If images are used, keep them restrained rectangular aids that never seize the level of charts and text.
+
+## 10. Texture and Prohibited Items
+
+Overall flat, restrained, and businesslike; black-background pages may use subtle tech light effects, while content pages rely on typesetting, whitespace, charts, and orange emphasis.
+
+Prohibited:
+- 3D charts, dimensional pie charts, perspective columns, glowing stroked text, strong drop shadows, metallic textures, large glassmorphism components;
+- rainbow palettes, mixed multi-brand colors, emoji, cartoon illustrations, hand-drawn arrows, exaggerated icon stacking;
+- large stretches of centered body text, full pages of dense small type, complex multi-layer borders, heavy table lines;
+- large-area image backgrounds or black-background small-type tables on regular data pages.
+
+Use with caution:
+- Gradients: only for black-base orange glow, soft area-chart layering, and light-orange transitions; never full-page colorful gradient backgrounds.
+- Shadows: the source file does not rely on shadows; if hierarchy must be distinguished, use only extremely subtle shadows or switch to light-gray fills.
+- Rounded corners: may lightly soften cards or columns, but this is not a heavy rounded-card style.
+- Icons: if they must be used, only minimal line icons or small symbols, in black/gray/orange — no multi-colored icons.
+- Photos/screenshots: may serve as auxiliary evidence or placeholders, but are not the core language; they need rectangular cropping, low decoration, and no full-bleed backgrounds.
+
+Special pages may use black-base light effects, concentric circles, low-contrast tech wireframes, centered quotable lines, minimal italics, and reversed-white text — only for covers, sections, quotations, and closing pages.
+
+## 11. Generation Checklist
+
+- Skeleton: is it 16:9; are content pages white/light-gray-based, and covers/transitions near-black + orange light effects; are margins sufficient?
+- Copy: are titles phrasal; does each page have only 1 main conclusion; is explanation controlled to short paragraphs or 2–4 cards?
+- Hierarchy: do the title, main number, body text, and footnotes have clear relative proportions; are specific font-size dependencies and hierarchy confusion avoided?
+- Color: only orange + neutrals used; is orange used for emphasis rather than flooding the page; is low-contrast gray text still readable?
+- Layout: is there a clear reading path; do the main visual, explanation area, and footnotes each do their job; are multiple competing anchors avoided?
+- Charts: are simplified columns/donuts/area charts/horizontal bars/circular relationship diagrams used; are 3D, rainbow colors, dense grids, and complex legends avoided?
+- Tables: are the header, rows and columns, and key rows clear; are lines light and thin; are numbers aligned; is detail overload avoided?
+- Components: do light-gray cards, black capsules, orange nodes, and thin lines serve information; were page numbers, navigation, and watermarks never force-added?
+- Prohibited items: no emoji, cartoon illustrations, heavy shadows, complex decoration, large image backgrounds, thick borders, or glowing text.
+- Quality: check for text overflow, truncation, garbled text, overlap, low contrast, occlusion, empty content, wrong proportions, and an overly repetitive template feel.