chore: 1.1.0 release

skills/open-kimi-ppt/reference/design_system/01_strategy/01/en/dusk-violet-consulting.md

@@ -0,0 +1,177 @@
+# Organization Name — The Productivity Payoff STYLE DESIGN SYSTEM
+
+## 1. Style Positioning
+
+A consulting thought-leadership report-style PPT for executives, strategy teams, and research readers. It supports readable long-form text, quantitative charts, section navigation, and a branded, forward-looking visual feel; it is not a low-word-count sales pitch page or a visual-poster-style one-pager.
+
+Core page grammar:
+
+1. **Light blue report pages**: a soft pale blue–light purple gradient background carrying black long-form text, multi-column explanations, and purple key numbers.
+2. **Black-background evidence pages**: charts sit on a large black canvas, with white text and purple/pink/orange bars or lines creating strong contrast.
+3. **Dark photographic section dividers**: the cover and section transitions use "path forward" imagery such as light trails, ridgelines/roads/people.
+4. **Fixed report skeleton**: a white section-navigation strip at the bottom, a purple ">" identity mark at lower left, a vertical report name on the right edge, and a page number at lower right.
+
+Underlying principles:
+
+1. **Evidence takes precedence over visual drama**: charts, sources, numbers, and conclusions must be readable; black backgrounds, purple, and photographic light effects must not obscure data or weaken contrast.
+2. **High density must be disciplined by a stable skeleton**: multiple text paragraphs, multi-column modules, and complex charts are allowed, but every page must have a title area, a body area, footer navigation, and sufficient padding — avoid free-floating stacking.
+3. **Page variation serves section rhythm**: photography pages for openings and section transitions, black-background pages for models/data evidence, light blue pages for explanations and recommendations; do not invent a new template on every page just for variety.
+
+## 2. Page Skeleton
+
+- **Canvas ratio**: widescreen 16:9; use the full rectangular canvas — no portrait or social-media ratios.
+- **Default margins**: content pages keep relatively wide outer margins; the body extends from upper left toward center-right, with a fixed navigation band reserved at the bottom. Black chart blocks and photography blocks may extend nearly full-bleed, but must still avoid the footer and page number.
+- **Background system**: content pages and the table of contents use pale blue, ice blue, and light purple gradients; chart pages overlay a black rectangular evidence area on the light blue page, or let a single black block occupy most of the page; sections/covers use full-bleed dark photography.
+- **Title area**: typically at upper left. Black or purple on light blue pages; white inside the black region on black-background chart pages; placed over dark or calm areas on photography pages.
+- **Body area**: divided into text explanation areas, chart evidence areas, image areas, and number-emphasis areas. Content pages are mostly 2–3 columns; chart pages are usually a large black-background chart + explanatory sidebar; case pages are usually text + a photo on the right or above.
+- **Header**: no strong header bar; the report name appears as vertical text on the right edge instead of a horizontal top header.
+- **Footer navigation**: most non-cover pages have a white navigation band at the bottom. A purple ">" symbol at lower left; section names laid out horizontally in the middle, separated by thin vertical lines; the current section darker or bolder; the page number at lower right. Keep it low-height, thin-lined, and in a stable position.
+- **Vertical report name on the right**: content pages, the table of contents, and some chart pages place the report title/subtitle along the right edge. Do not make it a prominent decoration — it should be small and unobtrusive.
+- **Logo**: on the cover's lower right, use the full brand wordmark (rendered as plain small text, writing the new topic name; do not draw a graphic logo); on content pages, the purple ">" identity mark mainly replaces the full wordmark; the back cover or closing page may restore the full brand wordmark.
+- **Table of contents page**: light blue gradient background, title at upper left, section entries laid out in multiple horizontal columns; page-number ranges placed above or near the section titles; key sections may carry a small thumbnail grid; columns separated by thin vertical lines.
+- **Author page**: light blue gradient background, purple title at upper left; author headshots arranged in a grid — headshot, name, title, and a small professional-social-platform icon form a standard author card.
+- **Default reading path**: top-left title/lead-in → body left-column text → central chart or number → right-column supplement/photo → bottom navigation confirming the section.
+
+## 3. Content Organization
+
+- **Title style**: use report-style statements — a judgment sentence, a section name, or a "Figure X" chart caption; important section divider pages may use a large title to pose the question or direction. Do not chase short punchy slogans.
+- **Key message sentences**: place 1–2 explanatory sentences under the title or above a chart, stating the finding, definition, or how to read the chart. Do not make an entire page a single big-statement sentence unless it is a section photography page.
+- **Body text organization**: short paragraphs, left-aligned; single paragraphs medium-to-short in length; 2–4 paragraphs per column. Avoid long unbroken walls of text.
+- **Grouping logic**: includes "problem—evidence—implication", "model elements", "behavior/recommendation lists", "case explanations", and "number comparisons"; use columns, light-colored cards, black-background areas, or thin dividers to separate them — not large numbers of icons.
+- **Number of points per page**: a content page carries 1 main topic plus 2–4 supporting points; high-density pages may contain multiple sub-modules but must have one unified overall title and clear arrangement.
+- **Bullet style**: prefer subheadings + paragraph explanations; use traditional bullet lists sparingly; list items should be short, indentation restrained.
+- **Keyword emphasis**: use bold, purple numbers, or purple subheadings; avoid heavy colored highlighting. Highlight at most 1–2 keywords or numbers per module.
+- **Numbers/units/time frames**: large numbers may stand alone as purple or black info blocks with an explanation alongside; percentages, multiples, and time ranges must stay consistent with chart labels. Numbers must not be replaced by decorative graphics.
+- **Source footnotes**: place small source/notes at the bottom of charts and research pages or at chart edges, low-contrast but readable. Sources must not enter the main title hierarchy and must not grab attention with decorative colors.
+
+## 4. Content Page Layout System
+
+### A. Light blue multi-column report page
+
+For concept explanations, background, recommendations, case text, and a small number of key figures. Pale blue/light purple gradient background, title at upper left, body in 2–3 columns: the left column holds the lead-in or main argument, the middle column holds supplementary paragraphs/bullets, and the right column holds large numbers, images, or a short conclusion. Use purple numbers, bold subheadings, and clear column widths to establish focus, and keep paragraph spacing. If complex data comparison is needed, do not force it into this layout — switch to a black-background chart page.
+
+### B. Black-background chart evidence page + explanatory sidebar
+
+For complex bar charts, line charts, grouped comparisons, model derivations, and "Figure"-type evidence. One side or the center is a large black rectangular chart area with a white title and caption inside; the other side keeps a light blue text column explaining the findings in black body text. The chart area is the visual center of gravity; use purple/pink/orange data series, white key annotations, and local arrows/connecting lines. If the chart carries only a single simple number, do not use a large black background — it would feel too heavy.
+
+### C. Photography section/question page
+
+For covers, section transitions, important questions, or interim conclusions. Use full-bleed dark photography — ridgelines, roads, silhouettes, tech devices, purple light trails are common; a large white title sits over a dark area, with a smaller subtitle. Apart from the necessary title, a brief caption, and the brand wordmark (plain small text; do not draw a graphic logo), do not overlay long body text or complex charts.
+
+### D. Text + image case page
+
+For industry cases, scenario descriptions, or concrete evidence. A real photo or a partial device/scene sits in a large rectangular area on the right or above; text sits in columns on the left or beside it. The image does not act as a full-page background, and no illustrations are used. If the photo background is busy, do not place text directly on it — put the text in a light-colored area.
+
+### E. High-density module/framework page
+
+For 3–5 behaviors, elements, stages, or model components. Organize with horizontal cards, vertical columns, purple bottom labels, or a black-background formula area; each module contains a subheading, a short explanatory paragraph, and necessary numbers or keywords. When there are many modules, use equal-width columns and consistent padding; do not replace textual logic with complex SmartArt decoration.
+
+## 5. Color System
+
+- **Light blue background**: approximately #D6ECFE / #E4F4FF / #DFF3FF. Used for the large background areas of content pages, table of contents, author, and case pages; may gently gradient into light purple but must not become oversaturated. Low replaceability — it is core to the style.
+- **Light purple background transition**: approximately #DAE3F9 / #D8E3FA / #C2A1BC. Used at background gradient edges, card bases, or local atmosphere; medium-to-low area. May be adjusted within the same color family; switching to a large warm-color base is not recommended.
+- **Black/near-black evidence base**: approximately #08151C / #201F20 / #000000. Used for chart canvases, formula models, and text-carrying areas of dark section pages; area may range from half a page to most of a page; must not be broken into fragments mixed with the light blue body text.
+- **Primary text black**: approximately #111111 / #201F20. Used for body text, subheadings, footer navigation, and table text on light blue backgrounds; high contrast is mandatory. Must not be replaced by light gray as the primary body color.
+- **Reversed-out white text**: #FFFFFF or near-white. Used for black-background charts, photography-page titles, and cover titles; only on dark backgrounds.
+- **Brand purple / accent purple**: approximately #A100FF / #8A00E6 / #7F35FF. Used for the ">" identity mark, key numbers, key chart series, labels, and a few subheadings; small-to-medium area. It may be fine-tuned toward the brand's primary color, but must not be replaced with multiple unrelated vivid colors.
+- **Pink-purple/magenta data color**: approximately #D000FF / #C000C8. Used for the second accent series in charts or black-background cards; serves data grouping only, never large blocks of body text.
+- **Orange/coral data color**: approximately #D38778 / #D7AA9F. Used for cover light effects, contrast series in charts, or warm accents; small area; must not become the primary body color.
+- **Gray support**: approximately #8C95A4 / #A8ABBC / #C7CAD6. Used for axes, dividers, notes, non-key labels, and navigation separators; keep it unobtrusive.
+- **Table base / light card base**: approximately #E8F3FC / #DCEFF8. Used for high-density tables or info boxes, slightly differentiated from the background.
+
+Keep a single page within the blue-purple family + black/white/gray + 1 warm data color. Status colors are not prominent; if positive/negative states are needed, prefer text labels and purple/gray depth variations, and introduce red/green cautiously.
+
+## 6. Fonts and Text Hierarchy
+
+- **Font character**: the body mainly uses Liter (Arial-family sans-serif, built-in); titles, sections, or table-of-contents entries may use Unna (Times-class serif, built-in); branded special titles may use QuattrocentoSans Bold. Overall avoid script, handwriting, and rounded cartoon fonts.
+- **Body text**: 1x, used for paragraphs, explanations, author titles, and footer navigation.
+- **Footnotes/sources/page numbers**: about 0.6–0.8x, understated but readable; page numbers should not be enlarged into decorative numerals.
+- **Subheadings/module titles**: about 1.1–1.4x, may be bold or purple.
+- **Chart labels/axes**: about 0.7–0.9x, white/gray on black backgrounds, black/gray on light backgrounds; keep clear without competing with titles.
+- **Key message sentences/lead emphasis**: about 1.2–1.6x, sitting between the title and body size.
+- **Page titles**: about 2–3x, aligned top-left on content pages; table-of-contents/author-page titles may be slightly larger.
+- **Cover/section large titles**: about 3–5x, white or black depending on the background; the first visual level of the whole page.
+- **Large numbers**: about 2.5–4x, usually purple, paired with 0.9–1x explanatory text; numbers must carry a unit or context.
+
+Text is primarily left-aligned. Centered copy may appear sparingly only on the cover or photography section pages; avoid large centered blocks on content pages.
+
+## 7. Chart Language
+
+The main chart types are bar charts, grouped bar charts, line/trend charts, formula/model-type diagrams, and a small number of matrix comparisons.
+
+- **Chart canvas**: prefer black or near-black rectangles with clean edges, no thick borders or shadows; a clear boundary from the light blue text area.
+- **Titles and numbering**: place "Figure X" plus an explanatory title at the upper left of the chart area, in white; the title should state the purpose of reading the chart, not just the chart type.
+- **Axes and gridlines**: use low-brightness thin gray lines, kept few in number. Do not create noise with dense grids.
+- **Data series**: primarily purple, pink-purple, and orange/coral; non-key series use gray or dark purple; the number of series should be limited — avoid rainbow colors.
+- **Labels**: key data may be marked directly at bar tops or near lines; small labels in white or light gray. Avoid stacking all labels into illegibility.
+- **Legends**: small and clear, placed to the right of or above the chart; color swatches/line segments must match the series.
+- **Key annotations**: white arrows, curved connectors, brackets, or short notes may emphasize trends/gaps; annotations must serve the conclusion, not decorate.
+- **Forecast/target/baseline lines**: use dashed lines, thin lines, or a single accent color with a text explanation; do not cover data with large semi-transparent bands.
+- **Boundaries**: on pages with few charts do not force charts in; when there is no data, use text modules or number cards instead.
+
+## 8. Tables and High-Density Information
+
+- **Headers**: use white text on black, black text on light purple/light blue, or bold text; restrained height, left-aligned text.
+- **Row/column structure**: separate with thin gray lines or light base blocks; avoid heavy grids; allocate column widths by importance — the first column may be slightly wider.
+- **Row height**: accommodates 1–3 lines of text; high-density pages may compress, but text must never touch lines or overlap.
+- **Base colors**: light blue/light purple for ordinary cells, black backgrounds for high-contrast evidence tables; if zebra striping is used it should be very subtle.
+- **Key rows/columns**: highlight with purple text, purple bars, bold, or reversed white on dark bases; do not mark with multiple status colors simultaneously.
+- **Number alignment**: numbers, percentages, amounts, and years align by column with unified units; explanatory text is left-aligned.
+- **Symbols/rating dots**: simple dots, short dashes, checks, or purple marks may be used; they must be low-decoration and unambiguous. Avoid colorful icon rating systems.
+- **Summary rows**: handle with bold, a top divider, or a dark base — no raised shadows.
+
+## 9. Components and Graphic Elements
+
+- **Bottom section navigation**: thin white band + purple ">" + horizontal section names + thin vertical lines + page number; must not be covered by body content.
+- **Vertical report name on the right**: small, near the edge, low contrast. Do not turn it into a large sidebar.
+- **Purple ">" brand symbol**: used at lower left and for local brand hints; small area — it must not become a large decorative arrow used everywhere.
+- **Title bar/chart title block**: at the upper left of the black chart area, composed of "Figure X + conclusion title", white text layered, compact and left-aligned.
+- **Number emphasis blocks**: a large purple percentage/value + short black explanatory text; usually 1–3 per page; avoid overuse.
+- **Light-colored info boxes**: for "knowledge at work"-style supplements, definitions, tips, or action recommendations; base color slightly deeper than the background, stable padding, medium text density.
+- **Purple labels/card bases**: for short recommendations or key sentences on model or behavior pages; suitable as strong emphasis inside black areas, but keep the count low.
+- **Image frames**: rectangular real photos with clean edges and no thick borders; may occupy half or a third of the page, zoned apart from text.
+- **Process arrows/model symbols**: use simple arrows, multiplication signs, plus signs, and connecting lines to express formulas or relationships; thin lines, colors mainly white, gray, purple.
+- **Icons**: use only a few functional small icons, such as professional-social-platform marks. Do not expand into a colorful icon system.
+
+## 10. Texture and Prohibited Items
+
+A flat, restrained, report-like tech-consulting style that builds visual focus through dark photography, black-white contrast, purple brand accents, and data charts — not complex decoration.
+
+**Prohibited**:
+
+- emoji, cartoon stickers, social-media-style icons, large colorful illustrations.
+- 3D fonts, dimensional buttons, glowing outlines, heavy drop shadows, glassmorphism cards.
+- complex textured backgrounds, ornate borders, rainbow gradients, meaningless decorative lines.
+- large blocks of centered body text, text placed over busy photos, low-contrast light gray body text.
+- fake charts without data sources, dashboard components added purely for aesthetics.
+
+**Use with caution**:
+
+- Gradients: only light blue–light purple backgrounds or photographic light-trail atmosphere; no strong multi-color gradients.
+- Shadows: the source file barely relies on shadows; avoid them when generating; if used for image layering, keep them extremely subtle.
+- Rounded corners: not a primary feature; cards and images should have square or slightly rounded corners — do not become a rounded SaaS style.
+- Colorful icons: visible only in functional marks such as professional-social-platform icons on author pages; should not be heavily used in body pages.
+- Photos: may be used for cases or scenarios in content, but must be zoned; do not make every page a photographic background.
+
+**Usable on special pages**:
+
+- Full-bleed dark photos, strong light trails, large white titles: for covers and section transitions.
+- Large black backgrounds: for chart evidence, model derivations, and dark closing/appendix-style pages.
+- Full brand wordmark (plain small text, writing the new topic name; do not draw a graphic logo): more appropriate on the cover and back cover; content pages primarily use the purple ">".
+
+## 11. Generation Checklist
+
+- Is it a 16:9 report page rather than a poster/social card?
+- Does the page type clearly belong to one of: light blue content page, black-background evidence, photography section, case text+image, author/table of contents?
+- Is the bottom white navigation band kept, with the purple ">" at lower left, section names, and page number; do content pages have the vertical report name on the right?
+- Are titles left-aligned and report-style; is the body text columned with paragraphs that are not overlong?
+- Is the palette mainly blue-purple-black-white-gray, with warm colors only supplementing a small amount of data/light trails?
+- Is purple used for brand, numbers, and key points rather than flooding large areas?
+- Do charts have titles, labels, legends/sources, and sufficient contrast on the black background?
+- Do tables use thin lines, unified alignment, and restrained base colors, with consistent number units?
+- Are images real photography and zoned apart from text, without long text pressed onto busy backgrounds?
+- Are emoji, 3D, heavy shadows, complex decoration, rainbow colors, and meaningless icons avoided?
+- Have you checked for text overflow, truncation, garbled characters, overlap, low contrast, occlusion, empty content, covered footers, and wrong proportions?
+- Does each page have one main topic and a clear reading path, without information weakened by template repetition or element stacking?
+- 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: line segments, 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