chore: 1.1.0 release

This commit is contained in:
binaryify
2026-08-06 17:09:51 +08:00
parent 28040e1f57
commit 0f70adb1c9
152 changed files with 8915 additions and 39 deletions
@@ -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
@@ -0,0 +1,208 @@
# PJ Mountain — Business DD Report (Organization Name) STYLE DESIGN SYSTEM
## 1. Style Positioning
For high-information-density scenarios such as commercial due diligence, market research, strategic diagnosis, and management decision reporting. It uses a white landscape canvas, black conclusion titles, thin gray dividers, deep navy structural blocks, blue data accents, and dense charts and tables. The title area states "this page's judgment/analysis topic"; bar charts, stacked bars, lines, heatmaps, matrices, and multi-column text provide the evidence; the footer fixedly holds sources, company name, and page number. Large images, illustrations, and decorative graphics rarely appear; brand color serves structure and emphasis only, never atmosphere.
**Underlying principles**
1. **Evidence takes precedence over decoration.** Charts, tables, footnotes, sources, and measurement-basis notes must be kept first; if a page is crowded, compress decoration and whitespace rather than deleting data labels or sources.
2. **Consistency takes precedence over per-page variation.** Variants such as a right-side explanation column, a left dark opinion column, table-of-contents highlighting, or gray-based explanation areas are allowed, but the title area, footer, dividers, font hierarchy, and brand-color grammar must remain stable.
3. **Brand color serves readability.** Deep navy is used for structure and key categories; bright blue for data emphasis and selected states; when brand color reduces contrast or confuses data, prefer black, gray, white, and clear labels.
## 2. Page Skeleton
**Canvas ratio:** widescreen 16:9 landscape. White background by default; the table-of-contents page and explanation columns may use light gray; section/opinion pages may use deep navy vertical blocks. Content pages do not use full-bleed image backgrounds.
**Margins and grid:** keep stable outer margins on left and right; the title area at top, the body's rectangular workspace below the title rule, and a fixed footer area at bottom. Body text commonly uses 2 columns, 3 columns, image-left-text-right, table-left-notes-right, or chart-on-top-footnotes-below.
**Title area:** the main title at upper left is usually 1–2 lines, in large black serif bold or a bold title style; below it a sans-serif subtitle stating the subject, scope, unit, or measurement basis. A thin gray/black horizontal rule under the title separates the evidence area.
**Body area:** carries charts, tables, flow/structure diagrams, parallel modules, and explanatory text. Usually the main evidence sits on the left; explanations, background, conclusions, or supplementary material on the right; multi-module pages read top-to-bottom, left-to-right.
**Footer:** fixedly contains the source/footnotes, company name, and page number. Sources sit at lower left or below charts, in a size clearly smaller than body text; "Organization Name" and the page number sit at lower right. A thin line often separates the body above the footer.
**Logo and branding:** the cover's upper left carries the brand wordmark as plain small text showing the new topic name or left blank — no graphic logo drawn; content pages convey the brand through the footer company name, not by repeating an enlarged logo in every module.
**Page types:**
- **Cover:** the left side holds the brand wordmark, project name, report type, date, and confidentiality statement; the right side features a blue linear-curve graphic as the only strong visual element. The cover does not use the content-page footer and page-number structure.
- **Table of contents page:** large-size Contents on the left white area, section structure on the right light gray area; the current section may be highlighted with a deep navy horizontal bar. The TOC page emphasizes navigation and holds no data charts.
- **Content pages:** mainly white background, top conclusion title + rule + body evidence + bottom source/page number.
- **Section/progress pages:** reuse the Contents structure with a deep navy bar marking the current position; they may serve as transitions between sections but must not be generalized into ordinary content pages.
- **High-density appendix/analysis pages:** smaller text, denser tables, and stronger columnization are allowed, but the title, footnotes, and page number are retained.
**Default reading path:** title judgment → subtitle/units → largest difference in the chart or table → right-side/bottom explanation → sources and footnotes.
## 3. Content Organization
**Title style:** use an analytical topic or conclusion sentence, not marketing slogans. The common structure is "subject + trend/judgment + key numbers/scope/reason", controlled to 1–2 lines; when the title already carries the conclusion, the subtitle only adds the measurement basis.
**Key message sentences:** placed above or to the right of charts, stating data scope, units, CAGR, market definition, sample, or scenarios; they serve the chart directly — no abstract promotional lines.
**Body organization:** use short paragraphs, bullets, numbering, or subheading groups, with each bullet expressing one fact or reason. Avoid long centered copy. Organize dense text with bold keywords, indentation, rules, and module titles.
**Number of points per page:** a standard content page revolves around 1 main judgment and carries at most 2–4 supporting arguments. High-density pages may contain multiple evidence blocks, but they must share the same analytical question; do not collage unrelated charts onto one page.
**Grouping logic:** group by market/customer/product/competition/organization, or by time, region, segment, growth driver, or degree of impact. Parallel modules must be isomorphic: title position, metric definition and basis, and color meaning consistent.
**Keyword emphasis:** use bold, deep navy subheadings, bright blue numbers, and light gray base boxes. Avoid colored highlighters, emoji, exaggerated exclamation marks, or decorative underlines.
**Numbers and units:** numbers must carry units, time ranges, and the necessary measurement basis; growth rates, CAGR, shares, and amounts are specified in chart titles, axis labels, or footnotes. Forecasts, targets, and actuals are distinguished by color, dashes, or labels — not by text explanation alone.
**Source footnotes:** all data charts and tables must have Source/Note/measurement-basis notes. Use the smallest text level, placed at the bottom of charts or on the left of the footer; never at the visual center.
## 4. Content Page Layout System
**A. Conclusion title + single main chart + right explanation column**
For core trends or scale judgments. The left 65%–75% holds a bar, stacked-bar, or line chart; the right 20%–30% holds a light-gray-background explanation column or a white caption column with background, growth drivers, and management implications. Use a bright blue series, bold numbers, arrows, or a few elliptical labels for emphasis. Not suited for multi-topic side-by-side layouts or complex classification pages that need item-by-item expansion.
**B. Conclusion title + multi-column text analysis page**
For textual argumentation such as trends, market characteristics, drivers, and risk points. The body divides into 2–3 columns, each with a numbered subheading and a short paragraph of explanation; narrow spacing or thin lines between columns, with sparing bold keywords. This layout is information-dense but weak in visual evidence — do not use it for too many consecutive pages; if there are key numbers, switch to a chart page.
**C. Chart + mechanism/flow explanation combination page**
For migrations from a traditional state to a new state, value chains, business processes, or organizational transformation. A trend chart sits left or center; vertical flow blocks, arrows, or stage notes sit right; deep navy/bright blue blocks mark the target state, key steps, or emphasized links. Flow components aid explanation — they cannot replace data evidence.
**D. High-density table/matrix page**
For multi-dimensional comparison of customers, competitors, products, features, KBFs, or opportunity points. The body is a large table or matrix with clear headers and fine row/column separation; key cells use blue, gray bases, rating dots, or symbol marks. A deep navy opinion column may sit on the right summarizing 2–4 key findings. Not suited for telling a single trend, nor for content lacking comparable dimensions.
**E. Dark sidebar opinion page**
For section openings, strong-opinion summaries, or separating "explanation" from "evidence". A deep navy vertical column on the left or right takes about a quarter to a third of the width, with white text and bright blue subheadings inside; the other side holds white-background charts/tables. The dark column must not be abused as decorative background — use it only when guidance, conclusion pressure, or section identification is needed.
**F. Table of contents / progress navigation page**
For section transitions. Contents on the left, light gray content area on the right, current section highlighted in deep navy. It only takes on navigation — it carries no body analysis. When generating a new topic, preserve the section numbering, hierarchy, page ranges, and highlight-bar grammar.
## 5. Color System
**Background white #FFFFFF**: the main background of content pages, largest area. Cannot be replaced by a colored background; large color bases are not recommended except for the TOC/explanation columns.
**Light gray background #E6E6E6 / #E9E9E9**: for the right area of the TOC, side explanation columns, table bases, and local backgrounds. Used for structural distinction; lightness may be slightly adjusted, but replacing it with a high-saturation brand color is not recommended.
**Primary text black #000000 / dark gray #222222**: for titles, body text, chart labels, and table text. Low-contrast gray must not replace body text.
**Brand deep navy #051C2C**: for dark sidebars, key structural blocks, some bar series, title bars, and flow blocks. May be replaced by a corporate primary color of equal depth, but white text must remain readable.
**Bright blue #2150FE / #1F5BFF**: for emphasized data series, current states, key labels, selected items, and key flow blocks. Must not be spread over large areas; if replaced by a brand color it must stay high-saturation, high-contrast, and distinct from deep navy.
**Light blue #BBD5EE / #DAE7F3 / #E6EEF6**: for secondary data series, light area charts, cover linear graphics, and weak table emphasis. Cannot carry white body text; avoid going too light and losing edges.
**Neutral grays #747474 / #8E9294 / #A4A4A4 / #D0D0D0**: for secondary bars, axes, gridlines, table lines, captions, and un-emphasized categories. Gray steps may be replaced, but the hierarchy must be maintained.
**Status color boundary:** no red-green-yellow status system is established. When positive/negative states are needed, prefer depth variations, labels, and arrows; red/green may only be used cautiously and sparingly for explicit positives/negatives — they must not change the deck's calm blue-gray temperament.
**Per-page primary-color limit:** content pages use black/white/gray + deep navy + bright/light blue. Unless data must be distinguished, do not introduce a third high-saturation color.
## 6. Fonts and Text Hierarchy
**Font character:** body text and most labels use Arial-class sans-serif; the cover main title and content-page large titles may use Times New Roman Bold-class serif bold. Italic Arial is used sparingly for explanatory text in notes, footnotes, or source lines.
**Relative hierarchy:**
- **Cover project name:** about 3.5–4.5x body size, serif bold, one of the largest texts in the deck.
- **Content-page main title:** about 2–3x body size, black, 1–2 lines allowed, conclusion first.
- **Section/TOC title:** about 2–3x body size, often paired with generous whitespace or a light gray content area.
- **Subtitle/chart title:** about 1.1–1.4x body size, may be bold; states the subject, units, and measurement basis.
- **Body text and bullets:** defined as 1x, line spacing tight but never overlapping.
- **Table text/chart labels:** about 0.75–1x body size; number labels may be slightly smaller but must remain readable.
- **Notes, sources, footnotes, page numbers:** about 0.55–0.75x body size, complete in information but visually recessed.
**Weight rules:** bold is used for titles, subheadings, table headers, keywords, and key numbers; do not bold large stretches of long body paragraphs. Italic is only for note tone or source attribution, not a primary emphasis device.
**Alignment:** titles and body are mainly left-aligned; numbers are right-aligned or aligned on decimal places in tables, category text left-aligned. Avoid large centered blocks.
## 7. Chart Language
Business analysis charts include bar charts, stacked bars, line/trend lines, combination charts, market-size forecasts, share/ranking charts, and a few scatter/bubble-type marks. Charts must prove the title — they are not decoration.
**Axes and grids:** axes use thin gray or black; gridlines are very light and may be omitted when unnecessary. Axis labels are short; units go in the chart title or beside the axis. The horizontal axis is usually years, market segments, or categories; the vertical axis carries amounts, shares, indices, etc.
**Series colors:** key series use deep navy or bright blue; secondary/historical/other categories use gray or light blue. The same color for the same category in stacked bars must stay consistent across pages — do not randomly change colors page to page.
**Data labels:** directly mark key bars, the latest year, CAGR, forecast endpoints, and comparison differences. Keep labels close to data points; avoid making readers depend on complex legends.
**Forecasts and baselines:** forecast years, CAGR, targets, or baselines may be distinguished with dashed lines, arrows, brackets, elliptical labels, or different gray-blue tones. Actual/forecast intervals must be stated — color alone is not enough.
**Legends:** placed above the chart or in blank space inside it; with few series, prefer direct labels. Color swatches must match the graphics; text in small sans-serif.
**Annotations:** sparing use of short arrows, brackets, CAGR labels, rounded/elliptical small marks. No glow, shadows, 3D bars, or perspective effects.
## 8. Tables and High-Density Information
Tables are used for comparing competitors, customers, products, features, market attributes, and opportunity points — as analytical tools, not decorative lists.
**Headers:** use bold, dark text, or deep navy/light gray bases. Column headings may run multiple lines but must use comparable definitions and measurement bases. If a header is very long, split it into a main heading + subheading — do not squeeze it into illegibility.
**Rows/columns and separation:** mainly thin gray lines, more horizontal than vertical; light gray bases may distinguish headers, group rows, or explanation columns. Avoid heavy borders and complex grids.
**Row height and density:** high density is allowed, but each row needs a stable baseline and enough spacing. Long text should be broken into lines or phrased as fragments — never overflow the cell.
**Key marks:** key rows/columns may use deep navy bars, light blue bases, bright blue text, bold, rating dots, checks/symbols, or small labels. Wingdings-type symbols may be used sparingly for states/marks, but must not become a colorful icon system.
**Alignment:** left-align text; right-align numbers or align on digit positions; keep percentages, amounts, and years in unified formats. Rankings, scores, and status dots are center-aligned.
**Zebra striping and base colors:** light gray zebra striping or local light gray bases may improve scannability, but must not be too dark. Table base colors must keep black text high-contrast.
**Summary and notes:** summary rows, averages, or key conclusions go at the bottom of the table or in a right-side note column; sources and measurement-basis notes sit immediately below the table.
## 9. Components and Graphic Elements
**Thin horizontal rules:** separate the title area, body area, and footer. Lines are thin, gray or black; do not replace them with thick colored lines.
**Deep navy sidebar:** for section opinions, conclusion summaries, explanation columns, or guidance beside high-density tables. White text, bright blue subheadings, and short bullets inside; it is an information container, not a decorative color block.
**Light gray explanation box:** for background, growth drivers, assumptions, and supplementary notes. Placed on the right of the page or beside tables; must have a subheading.
**TOC highlight bar:** a deep navy horizontal bar marks the current section with reversed white text. Only used on TOC/progress pages.
**Data labels and badges:** CAGR, latest values, forecast values, and key categories may use small labels, ellipses, or capsule marks; colors stay deep navy, bright blue, or gray; keep them near the corresponding data.
**Flow blocks and arrows:** for migration paths, stages, and mechanism explanations. Shapes are rectangles, rounded rectangles, or simple arrows in dark blue/bright blue/gray. No complex SmartArt styles, dimensional arrows, or gradient arrows.
**Image frames:** if screenshots/system interfaces are used, embed them only as evidence material, keeping rectangular boundaries and captions — no large emotional imagery.
**Icons:** colorful icons are not a stable language of this style. If a state must be shown, use simple symbols, dots, checks, arrows, or text labels in a single color or the blue-gray family.
## 10. Texture and Prohibited Items
Overall a flat, restrained, data-driven, consulting-report texture, building professionalism through typography, lines, tables, charts, and limited color blocks.
**Prohibited:**
- large photo backgrounds, video-still backgrounds, or emotional full-bleed images;
- emoji, cartoon illustrations, complex colorful icons, sticker-style decoration;
- 3D charts, perspective bars, glow, strong shadows, glassmorphism, textured backgrounds;
- large gradient color blocks as body backgrounds;
- large centered copy, marketing-slogan titles, unsourced data;
- random multi-color palettes or multiple high-saturation colors competing on one page.
**Use with caution:**
- Rounded corners: may be used for small labels, flow blocks, elliptical marks; must not generalize into a card-style UI style;
- Shadows: the source file barely relies on them; if used on embedded screenshots, keep them extremely light;
- Red/green status colors: only for explicit positive/negative/risk/opportunity, used sparingly;
- Screenshots: only as factual evidence — they need a title, boundary, source, or caption.
**Usable on special pages:** the cover may use the blue linear-curve graphic; the TOC may use a large light gray content area and deep navy highlight bar; section progress pages may strengthen whitespace and navigation, but must not introduce poster-like visuals.
## 11. Generation Checklist
- Is it 16:9 landscape, mainly white background, with a stable title area, body area, and footer area?
- Is the title an analytical topic or conclusion sentence rather than an empty slogan? Is it controlled to 1–2 lines?
- Does the page have only one main judgment, with charts/tables directly supporting that judgment?
- Are sources, footnotes, units, time ranges, and the actual-versus-forecast basis retained?
- Is the palette limited to black/white/gray + deep navy + bright/light blue, with bright blue only on key points?
- Is body text Arial-class sans-serif, with titles allowed in formal serif bold? Is dependence on specific point sizes avoided?
- Do charts use flat bars, stacked bars, lines, labels, and thin gray axes, avoiding 3D, gradients, and excessive legends?
- Do tables have clear headers, thin separators, unified alignment, readable row heights, and necessary key marks?
- Does the right explanation column or dark sidebar carry a conclusion/background function rather than pure decoration?
- Are photo backgrounds, emoji, complex icons, shadows, glow, textures, and random colors avoided?
- Have you checked for text overflow, truncation, garbled characters, overlap, low contrast, occlusion, empty content, wrong proportions, and missing page numbers/sources?
- When generating multiple pages, are TOC highlighting, footer, color grammar, chart encoding, and title hierarchy consistent — avoiding each page looking like a different template?
- 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
@@ -0,0 +1,151 @@
# Organization Name · 2023.05 Report Name CEOs Roadmap on Generative AI STYLE DESIGN SYSTEM
## 1. Style Positioning
For consulting-firm presentations to CEOs, executives, and business leaders covering trend insights, strategic roadmaps, risk identification, and organizational action recommendations. It uses high-density business argumentation: each page gives its conclusion first, then supports it with charts, tables, comparison boxes, case excerpts, or action lists.
Core design: a dark tech-photo banner carries the title; a white/extremely-light-gray body keeps reading easy; mint green and brand green organize hierarchy; a high-density grid with tiny footnotes maintains the report feel. The reading path is "argument first + evidence unfolded + sources as backstop".
Underlying principles:
- **Argument takes precedence over decoration**: the top of every page must be a judgment or action-oriented title that stands on its own; charts, tables, and components serve only that judgment.
- **Green only for structure and emphasis**: light green for background zoning and callout blocks, deep green for key numbers, labels, paths, bars, and positive states; green must not be expanded into an arbitrary full-page decorative color.
- **High density must be tamed by the grid**: multiple evidence points must sit in columns, rows, cards, matrices, flows, or tables; avoid free-floating scatter, unaligned collages, and arbitrarily enlarged local elements.
## 2. Page Skeleton
- **Canvas ratio**: horizontal 16:9 widescreen, designed for report reading rather than large-type stage presentations.
- **Default background**: content pages use white or extremely light gray; light gray is used for table bases, module bases, or a bottom summary band. Covers, back covers, and a few section/transition pages use darkened tech photography.
- **Title area**: content pages have a fixed dark narrow banner across the top, embedding a darkened photo or near-black base color; the title is left-aligned, white, bold, a complete judgment sentence. Small section numbers or progress labels such as "1a / 1b / 2b" may appear at the lower edge of the title or the upper left of the body.
- **Body area**: located below the banner. Common arrangements include left-right column splits, three-column cards, quadrants/matrices, chart + annotations, table + side notes, and central model + surrounding explanations; margins are compact and strictly aligned, separated by thin lines, light gray bases, or whitespace.
- **Footer**: a tiny gray footnote/source/copyright area at the bottom, left-aligned; a small page number at lower right or along the bottom edge. Footnotes are separated from the body by whitespace or a thin line and never mixed into the body.
- **Logo and branding**: on the cover's upper left, a plain-small-text combination of Organization Name and report name (writing the new topic name) or left blank; on the back cover, the brand wordmark over a darkened photo; neither draws a graphic logo. Content pages do not repeat the logo at large scale — the black banner, green system, and footnote style carry brand recognition.
- **Cover skeleton**: full-bleed darkened photo; a light green brand block at upper left; a horizontal light green semi-transparent title block mid-page toward the left/center; title in black bold; the date at a small serif/italic level. The lower edge of the green block may carry thin vertical striping.
- **Section/transition pages**: a light green block or a darkened photo block on the left carries the section topic, with a bullet list on the right; increase whitespace and keep left alignment.
- **Closing/disclaimer pages**: the disclaimer page uses a white base, light green subheadings, and gray body blocks; the back cover returns to darkened photography and the white brand wordmark.
- **Default reading path**: top banner conclusion → upper-left number/module title → main chart or central model → right-side/below explanation → footnote sources.
## 3. Content Organization
- **Title style**: use conclusion sentences, judgment sentences, or action sentences — not mere nouns; express meanings like "what is happening", "why it matters", "how the CEO should act", "where the risks are". Titles may be longer but must stay readable within one to two lines inside the banner.
- **Key message sentences**: below the title or at the upper left of the body, a "number + phrase" stage label may appear; numbers use green or black small labels.
- **Body organization**: micro-points organized as short paragraphs and bullets. Avoid continuous full-bleed long paragraphs; break long explanations into cards, left-right columns, or table rows.
- **Grouping logic**: prefer time/stage progression, left-right contrasts, matrix comparisons, and "three parallel columns", "two-category contrast", "core/non-core", "traditional/new-type", "opportunity/risk/action".
- **Number of points per page**: one main judgment per page, with 3–6 evidence points, bullets, or comparison dimensions inside. If more than 6 parallel points are needed, convert to a table or split into two pages.
- **Keyword emphasis**: use bold, green text, green labels, light green base blocks, rings, or borders; risks or warnings may use small-area magenta/rose marks. Do not use fluorescent multi-color, high-saturation red-blue mixing, or large rainbow emphasis.
- **Numbers and units**: numbers sit directly beside bars, labels, table cells, or key conclusions; units and time frames go in chart titles, axis titles, or footnotes. Growth rates, years, market sizes, and share-type data should be more prominent than explanatory text.
- **Quotes and cases**: external quotes use quotation marks, light green quote blocks, or news-excerpt boxes; quotes serve the evidence and must not replace the page's main conclusion.
- **Source footnotes**: charts, market sizes, case screenshots, and quotes all keep their sources; use extremely small gray text, preferably left-aligned, staying out of the main reading flow.
## 4. Content Page Layout System
### A. Top banner + three/multi-column opinion cards
For concept differences, capability traits, risk categories, and organizational requirements. The body divides into three or four columns, each with a small icon/subheading/short caption/a few bullets; column titles in green, columns separated by light gray vertical lines or whitespace. A key column may add a light green base or a deep green label; each column holds one small point and 2–4 supporting notes. Do not use this layout when continuous data or complex causal chains must be shown.
### B. Main chart + right-side evidence/explanation card
For growth trends, market size, adoption rates, and budget changes. The chart takes about half to two-thirds; an explanation box, news excerpt, or key takeaway goes to the right or above. The chart uses a green primary series and gray secondary series with key data directly annotated; cards use a light gray or white base with thin borders and a few green titles. Only one main chart conclusion per page — avoid stacking multiple unrelated charts.
### C. Large opinion block on the left + action explanation on the right
For CEO action recommendations, roadmap hints, and core problem definitions. A large light green base block on the left carries the core judgment, question, or classification model; the right side explains action implications with bullets, short paragraphs, or cases. Rings, double circles, arrows, or partition lines may connect them. If the page's focus is data proof, reduce the large opinion block's area to avoid squeezing the chart.
### D. Comparison matrix/table page
For comparing technology stages, business use cases, risk dimensions, organizational capabilities, and departmental responsibilities. Use column titles + row dimensions; headers in light green or deep green, cells holding short phrases or bullets. Key columns/rows use a green base, bold, or graphic marks. If there are fewer dimensions than 2×2, use cards instead of a table.
### E. Central model + surrounding explanation
For frameworks, capability systems, governance models, or value chains. A circle, ring, or matrix core sits at the center, with 4–8 explanatory nodes around it connected by thin lines, arrows, or spatial relations. The center is usually green, the periphery light gray/light green. This layout emphasizes structural relationships and is not suited for long text passages or precise values.
### F. Process/roadmap layout
For action steps such as "discover—select—build—govern—scale". Use a horizontal or vertical step bar, green marking the current/key stage and gray marking auxiliary stages; a short caption sits below each step. Flow arrows should be lightweight and flat — no complex dimensional arrows. If the steps are not sequential, convert to a matrix or parallel cards.
### G. News/case collage page
For external events, public sentiment, risk instances, or real-world evidence. News cards, screenshots, or excerpts must obey the grid boundaries and the unified title banner; screenshots should not fill the whole page and should carry explanatory labels. This layout is an evidence page and must not become a regular content template.
### H. Contact/appendix list page
For teams, authors, contacts, and disclaimers. Use a headshot or text-card grid; names/titles in bold, with roles, emails, and links at a small level. Reduce charts and strong emphasis.
## 5. Color System
- **Near-black / deep charcoal #0B0C0D, #0D0F0F, #191E1F**: for title banners, darkened photo overlays, back-cover backgrounds, and primary body text. Cannot be replaced by a bright brand color — that would destroy the consulting report's authority.
- **White / extremely light gray #F1F1F1, #F2F2F0, #ECEDED**: for main page backgrounds, content bases, table blank areas, and card bases. May switch between white and light gray, but must not become a high-saturation colored background.
- **Mint light green, approximately #9CDDAA, #92C9A0, #8FC49B, #BFEFD0**: for cover title blocks, section blocks, callout boxes, the large left opinion base, and weak table emphasis. Text must stay black/dark; replacement colors must also be low-saturation, light backgrounds.
- **Brand primary green #23B871, #35BA7A, #408A5A**: for key bars, labels, key numbers, icons, current process steps, and core rings. Do not introduce several similar greens at once and create hierarchy confusion.
- **Deep green #26633B, #2E6F47, #5F877B**: for small title labels, dark chart series, emphasis borders, and structural lines; not suitable as the base color for long body text.
- **Mid grays #748687, #A6AB9E, #B7B7B7, #D2D2D2**: for dividers, table lines, axes, auxiliary text, non-key series, and disabled/baseline states; must not replace the primary text color.
- **Magenta/rose, approximately #C2185B, #B0185A**: only for small-area marks of risks, counterexamples, warnings, and negative categories — rings, labels, keywords. Must not be used at large area as a second brand color.
- **Chart series boundary**: the primary hue is green; only gray, light green, and a little magenta serve as auxiliaries. If data series exceed 3–4, prefer distinguishing with green depth steps and grays — do not introduce rainbow colors.
## 6. Fonts and Text Hierarchy
- **Font character**: the body uses the QuattrocentoSans family, bold for titles and subheadings, italic for quotes or notes; the cover "Report Name" may use Unna (built-in serif).
- **Page title**: 1.8–2.5x body size, bold, white, placed in the dark banner; long titles may wrap, staying left-aligned with tight line spacing.
- **Cover main title**: 2.5–4x body size, black bold, placed on the light green semi-transparent block; date/series name smaller, may use italic or serif.
- **Key message sentences/lead-ins**: 1.2–1.6x body size, may be bold or green, placed at the upper left of the body or on a light green block.
- **Body text**: defined as 1x, regular QuattrocentoSans, tight line spacing, left-aligned; avoid centered long paragraphs.
- **Subheadings/card titles**: 1.1–1.4x body size, bold, green, or dark; text short and explicit.
- **Table and chart labels**: 0.75–1x body size; numbers may be bold or enlarged to 1.1–1.4x; axis labels and legends smaller, kept gray.
- **Notes/footnotes/sources/page numbers**: 0.45–0.7x body size, gray. Footnotes must not grab attention with green.
## 7. Chart Language
- **Types actually present**: mainly bar charts, stacked bars, line/trend charts, donut/bubble-style relation charts, and simplified coordinate charts.
- **Axes and gridlines**: axis lines and gridlines extremely thin, light gray; background grids may be weakened or omitted, but necessary coordinate information is kept.
- **Series colors**: the primary series uses brand green or a combination of green depths; auxiliary series use gray, light yellow-green, or light gray; forecasts, targets, or key years use deeper green with direct number annotations.
- **Data labels**: key bars, endpoints, peaks, or growth rates are directly annotated; numbers in dark or green. Avoid making readers rely on the legend alone for the key points.
- **Legends**: small size, placed above or below the chart. With only 1–2 series, label directly beside the graphics.
- **Annotations and explanations**: use thin lines, arrows, light green boxes, or small text to explain key turning points; news excerpts may serve as supporting-evidence cards. Annotations must not cover the data body.
- **Boundaries**: no 3D bars, gradient fills, heavy shadows, rainbow heat palettes, or complex animated chart effects; chart beauty must submit to data clarity.
## 8. Tables and High-Density Information
- **Table role**: for multi-dimensional comparisons, risk lists, action responsibilities, capability assessments, and use-case screening; usually the page's main evidence structure, not decorative layout.
- **Headers**: deep green, light green, or dark text, with backgrounds mainly light green/white/light gray; text short, emphasizing dimension names rather than long sentences.
- **Row/column structure**: many columns are allowed, but strict alignment is required; use thin gray lines or light gray bases to separate rows — do not rely on thick black borders.
- **Base colors and zebra striping**: weak light gray or light green base zones; zebra contrast should not be too strong.
- **Key rows/columns**: emphasize with light green bases, green text, bold, dot ratings, or borders; risk/negative items use small magenta marks. No full-row bright red or high-saturation warning colors.
- **Number and text alignment**: numbers right-aligned or centered, text left-aligned; short ratings, symbols, and dots may be centered; units uniformly stated in the column header or a footnote.
- **Row height and density**: compact row heights; each cell limited to a phrase, short sentence, or 1–2 bullets. If a cell needs a long explanation, convert to a card page.
- **Symbol marks**: minimal symbols such as dots, checks, short dashes, and level-color blocks may be used; a legend is required or semantics must stay consistent.
## 9. Components and Graphic Elements
- **Dark title banner**: the core identifying component, spanning the top, containing a darkened tech photo or near-black base, carrying the white conclusion title; the preferred choice for all content pages.
- **Light green title/opinion block**: for cover main titles, section hints, key questions, and action principles; rectangles or large color blocks, no complex effects.
- **Number labels**: such as "1a / 1b / 2b", expressing roadmap progress; green/dark, placed at the upper left of the body.
- **Cards**: white or light gray base, thin border or borderless, containing a subheading, short caption, icon/number; distinguished by alignment and whitespace, no heavy shadows.
- **Dividers**: thin gray lines, light green lines, or whitespace gaps for between columns, between table rows, and isolating the footnote area; lines should be light and not create a caged-grid feel.
- **Ring/double-circle/matrix marks**: for core/non-core, positive/negative, key/non-key; green means core or positive, magenta means non-core/risk/warning. Text inside rings must be short.
- **Icons**: a small number of single-color green/gray linear icons or simplified symbols, only to aid module recognition. Colorful skeuomorphic icons are prohibited.
- **Arrows and flow lines**: express processes, causality, or conversion relationships; flat thin lines, green or gray. Avoid thick dimensional arrows.
- **Screenshot/news cards**: only on case-evidence pages, placed on white cards or light gray areas with short captions; must have boundaries and alignment — never freely tilted or stacked.
## 10. Texture and Prohibited Items
A flat, restrained, consulting-report-style tech feel; the brand feel comes from brand green, dark photo banners, the QuattrocentoSans font system, and a rigorous grid — not complex decoration.
- **Prohibited**: 3D charts, glow effects, heavy drop shadows, complex gradients, rainbow palettes, emoji, cartoon illustrations, colorful skeuomorphic icons, meaningless decorative lines, large blocks of centered copy, full-page grid-free free-form layout, low-contrast light text, and cover-style photo backgrounds abused across content pages.
- **Use with caution**: photos, screenshots, magenta warning color, ring models, flow arrows, large light green base blocks. They must carry an evidence, classification, action, or emphasis function; if they only fill blank space, delete them.
- **Usable on special pages**: covers, back covers, and section transition pages may use large darkened photos and light green blocks; case-evidence pages may use news-screenshot collages; contact pages may use headshot grids. Regular content pages should stay with white bases, the banner, and charts/tables/cards.
- **Rounded corners and shadows**: cards should have only slight corner rounding or be nearly square; shadows are basically unused. Modules are separated by base color, lines, and whitespace.
- **Image dependency**: content pages do not rely on large images to create mood; images appear only in the title banner or evidence cards. Every image needs darkening, cropping, and alignment, and must not break text readability.
## 11. Generation Checklist
- Skeleton: is it 16:9; do content pages have the dark top banner; does the body fall into a clear grid; are footer source/copyright/page number at the small bottom level?
- Copy: is the title a conclusion or action sentence; does each page have only one main judgment; are paragraphs broken into short sentences, bullets, cards, or tables?
- Hierarchy: do title, key message, body, subheadings, chart labels, and footnotes form a relative size difference; are specific-point-size dependence and hierarchy-free stacking avoided?
- Color: is the base white/light gray, text black, green the accent; is magenta used only for small risk areas; does each page stay within green + gray + a small amount of warning color?
- Layout: do charts, tables, cards, and flows each do their own job; is competition between multiple unrelated main visuals avoided; are left-right/multi-column arrangements aligned?
- Charts: is the flat green-gray family used; are axes and gridlines light; is key data directly annotated; are 3D, gradients, and excessive series colors forbidden?
- Tables: are headers, rows/columns, separators, key rows/columns, and number/text alignment consistent; do cells avoid long-paragraph overflow?
- Components: do the title banner, number labels, light green opinion blocks, cards, dividers, and ring/flow lines have explicit semantics; are icons single-color and simple?
- Prohibited items: are there no emoji, cartoon illustrations, colorful skeuomorphic icons, glow, heavy shadows, complex decoration, large centered body blocks, or abused photo backgrounds?
- Quality: check for text overflow, truncation, garbled characters, overlap, low contrast, occlusion, empty content, wrong proportions, footnotes pressing on the body, and template repetition that mismatches the information structure.
- 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
@@ -0,0 +1,184 @@
# F030 · Top-Tier Management Consulting and Strategy Full-Package PPT Template STYLE DESIGN SYSTEM
## 1. Style Positioning
For management reporting on strategic consulting, cost optimization, operational diagnosis, efficiency improvement, roadmap planning, opportunity assessment, and results review — aimed at management, project owners, or decision committees. It uses a "white consulting-report skeleton + high-saturation red focal point + grayscale data components": the cover is near-black/deep red with an oversized title; content pages use a white or extremely-light-gray base, titles at upper left or upper-left-of-center, chart-based proof, card-based summaries, and roadmap progression. Photos, illustrations, and decorative icons do not form the main visual.
Underlying principles:
- **One red focal point per page**: it may apply to a main card, a key bar, a keyword, the highest-intensity heatmap cell, or a CTA — do not spread it evenly across multiple areas of the same page.
- **Structure before decoration**: organize pages with left-right column splits, card matrices, chart combinations, timelines, and heat maps; do not rely on textures, shadows, complex graphics, or large images.
- **Data clarity over chart showmanship**: bar charts, donut charts, heat matrices, simple tables, and number cards serve the conclusion directly; weaken axes, legends, and gridlines to highlight comparison relationships and key values.
## 2. Page Skeleton
The canvas is horizontal 16:9 business presentation ratio. Content pages default to a white or #F6F6F6-level extremely-light-gray background with relatively wide safe margins. The basic structure is "upper-left title area + central body area + small caption/footnote area", with the reading path running title, red focal point, chart/card/table details.
Title area: usually at upper left, on a few chart pages at upper right or upper-center-left, carrying the topic, question, or conclusion — no decorative title bars. Below the title, 1–2 lines may state the analysis purpose, scope, or action implications; the body unfolds below or to its right.
Body area: column-split and modular; common content includes large-type definitions, pie/donut charts, bar charts, heat matrices, roadmap cards, capsule-label flows, number metric cards, and table-style comparisons. Cards stay uniformly aligned and spaced; light gray blocks zone the page; red blocks mark priority.
Header: not mandatory. A small brand wordmark or tiny mark may sit at upper left; a date, short note, or small caption may sit at upper right; it must keep a low presence and never form a heavy horizontal bar.
Footer: carries no strong navigation; may hold footnotes, sources, contact information, or a small CTA. If a page number is added, use extremely small black-gray text tucked in a corner — it must not steal from the body.
Dividers: use thin light gray lines, card boundaries, or background blocks. Avoid thick black lines and complex borders. Axes and reference lines also use pale gray low contrast.
Cover: near-black/deep-red background, an oversized white bold title, red button-style labels, a dark-red large-character watermark, and a small amount of explanatory text on the right; this treatment must not migrate to ordinary content pages.
Closing page: a large title with a few contact details/CTA, on a white or light gray base; red may emphasize key action words, but no photo walls or complex decoration should be added.
## 3. Content Organization
Titles use question-type, topic-type, or action-type short phrases, such as "Why…Matters", "Objectives…", "Roadmap Overview", "Identifying…Opportunities". Prefer noun phrases or verb-object structures; avoid long full sentences.
Place 1–2 lines of key message near the title, stating the conclusion, the analysis basis, or the next action — they cannot replace the body charts. Explanatory content is broken into short captions, bullet cards, or footnotes.
Body content follows "one main point + three to five supporting points". Supporting points may be cards, process stages, metric columns, chart labels, or table rows; each card usually holds one small title and one compressed caption, distinguished by whitespace, a light gray base, and numbering.
Keywords may use red text, white text on red, black capsule labels, bold subheadings, enlarged numbers, or local red chart elements. Red only corresponds to "key point, current, recommended, high value, risk, or action" — never to ordinary decoration.
Numbers such as percentages, amounts, improvement magnitudes, savings, and stage numbers stand as independent blocks, with units and explanations immediately adjacent. Keep time, stages, and serial numbers consistent; roadmaps use clear numbering like 01/02/03/04 and do not mix in complex hierarchies.
Sources and notes use extremely-small-level light gray or dark gray text, placed at the bottom, beside charts, or to the right of the title; they only state data sources, assumptions, or measurement bases — they do not carry key conclusions.
## 4. Content Page Layout System
### A. Large-type definition/opinion page
For introducing concepts, defining problems, or stating strategic positions. A small lead-in sits at the top or upper left; the body states the viewpoint in oversized text with keywords marked red; below it may follow a row of metrics, categories, or keyword modules. Information density low to medium. If the text runs beyond a few lines or multiple data groups are needed, do not use this layout.
### B. Left title + right/center chart analysis page
For current-state, distribution, trend, comparison, and cause analysis. The title and caption sit on the left or upper right; the body holds a donut chart, bar chart, combination bar-line chart, or small metric cards; key sectors, key bars, or current values use red, everything else gray. Suited for 1 main chart + 2–4 annotation points; not suited for cramming in multiple large charts of equal weight.
### C. Roadmap/stage card page
For showing 3–5 stages, goals, tasks, or execution paths. One large red card marks stage 1, the current stage, or the core initiative; the rest are light gray cards; enlarged numbering sits at the top or on the left. Emphasize stage names, actions, and expected results. Beyond five stages, split across pages or convert to a timeline; not suited for unordered miscellaneous lists.
### D. Heat matrix / opportunity identification page
For two-dimensional assessments of impact, complexity, priority, or savings headroom. The body is a red–pink–light-pink grid, deep red marking high intensity or priority, with a small legend, axis notes, and a red conclusion card beside it. The matrix serves relative positioning and clustering, not precise value reading; when precise values are needed, switch to a table or bar chart.
### E. Capsule-label flow + recommendation card page
For process nodes, operational steps, category groupings, or optimization-opportunity lists. Black capsules mark first-level categories or path nodes, red capsules mark key nodes, light gray capsules mark ordinary items; 2–3 recommendation cards may sit at the bottom or on the right. Labels must be short and avoid wrapping; when there are too many labels, group them — no complex connecting lines.
### F. Multi-metric dashboard / case results page
For results, cases, forecasts, savings, or performance changes. Composed of large number cards, bar charts, mini donut charts, and caption lists; a red number card or red chart element is the results focal point, gray cards provide the comparison. Every large number must come with an explanation — do not stack isolated metrics.
### G. Simple table / comparison matrix page
For comparing initiatives, departments, cost items, time periods, or opportunity categories. The table occupies the lower-middle part of the body, with a simple header and key columns/rows in red or on a light red base. A title and a conclusion sentence are mandatory — the table must not become an unexplained data pile.
## 5. Color System
Background colors:
- **#FFFFFF**: the main content base, card interiors, and large whitespace areas — the largest area. Cannot be replaced by high-saturation colors.
- **#F6F6F6 / #F7F7F7 / #F8F8F8**: full page background, light zoning, table bases, or chart container bases; must keep white cards clearly visible.
Primary text colors:
- **#070302 / #0F0605 / #1C0B0B**: titles, important body text, cover main title, and key chart text.
- **#2F2929 / #454545 / #484545**: body captions, subheadings, legend text, and table text.
Primary accent red:
- **#FF4D4D / #FF5454 / #FF5C5B / #FE6464**: for red cards, key numbers, key chart bars, the current stage, important labels, and CTAs. At most one large-area red block per page; other red appears only as point-like echoes.
- May be replaced by the brand primary color, but the "single high-saturation accent + grayscale system" must be kept, and white-text/black-text contrast must hold.
Auxiliary pink-red:
- **#FED8D8 / #FFC5C4 / #FFDFE0 / #FFF1F1 / #F1CCCC**: heat-map gradients, weak emphasis backgrounds, area-chart fills, and the light level of red cards. Must not be used for small-size primary body text — avoid low contrast.
Auxiliary gray and separation:
- **#BDBDBD / #C1C1C1 / #D9D6D6 / #DDDBDB / #E7E6E6**: axes, gridlines, card boundaries, ordinary bars, table lines, disabled or secondary states; must not compete with body text.
Cover dark colors:
- **#070302 / #120706 / #210E0D / #2F0505**: only for the cover or a very few dark-atmosphere section pages' backgrounds and dark-red watermarks. Content pages do not use large dark bases.
A single page uses only one hue of red + grayscale. Chart series stay mainly red, pink, and gray; avoid introducing multi-color business charts in blue/green/purple, unless source-data states must be distinguished and stay low-saturation.
## 6. Fonts and Text Hierarchy
A modern sans-serif business font. Body text mainly uses Liter (Chinese: MiSans); the cover's oversized title uses Archivo Black (an Arial Black-class ultra-heavy sans, brought in via customFonts). Overall clean, compact, rational — no handwriting fonts, decorative serif fonts, or cartoon fonts.
Relative hierarchy:
- Cover main title: about 5–6x body size, ultra-bold, white, tight line spacing.
- Content-page main title: about 2.5–3x body size, regular or medium-weight, black, at upper left or top.
- Large-type opinion/definition: about 3–4x body size, may span multiple lines, keywords in red.
- Subheading/card title: about 1–1.2x body size, often bold or a deeper black.
- Body captions: body=1x, short lines, low decoration.
- Table text/chart labels: about 0.75–0.9x body size.
- Footnotes, sources, header small text, page numbers: about 0.55–0.7x body size, gray or black-gray.
- Number metrics: about 2–4x body size; units and explanations drop to body or note level.
Text is mainly left-aligned; large centered passages are not part of the system; the cover may locally use a left-aligned oversized title. Avoid overlong paragraphs and avoid multi-level bullets inside cards. Use one consistent capitalization style within the same page.
## 7. Chart Language
The charts actually appearing are mainly donut/pie charts, bar charts, combination bar-line charts, area/trend charts, heat matrices, small gauges, and metric cards — serving consulting analysis, not chasing complex visualization.
Donut/pie charts: use red, deep red, gray, and black-gray sectors, with a short label or core value in the center; short outer annotations, low-presence legend. The red sector marks the key cost item or key object.
Bar charts: red bars mark key points, current values, targets, or high values; gray bars are comparisons. Axes are minimal, gridlines pale gray, bar spacing clear; a short value or label may sit atop bars — avoid dense annotation. Lines in combination charts use thin strokes and small nodes as trend or target references.
Heat matrices: light pink to red expresses intensity; axis text stays simple; grid boundaries are softened. Too many dark blocks defeat priority judgment. A legend or note explaining color intensity is required.
Metric cards/mini charts: embedded in red cards, gray cards, or white containers. Large numbers stand out, with a short caption explaining why they changed. Mini bar and donut charts are only supplements — they must not become the page's second main focal point.
Legends and annotations: legends stay small and close to the chart, colors matching the series. Key points may use red capsules, small dots, arrows, or short labels, but no complex callouts. Forecast, target, or baseline lines use pale gray lines or thin red lines with a short note.
## 8. Tables and High-Density Information
Tables are used to "prove, compare, break down, and prioritize"; they usually sit in the lower-middle of the body or on the right, paired with a title and a conclusion sentence.
Headers: light gray base, or white base with thin rules; text bolded or darkened. Key columns may use a red header or a red top bar, but the whole table must not go high-saturation.
Rows and columns: even row heights, phrased as short sentences. Keep column counts low — prioritize name, metric, impact, action, and status fields. Long explanations should be broken out into cards or footnotes; avoid multi-line crowding inside cells.
Separators and base colors: use thin light gray lines such as #E7E6E6, #DDDBDB; light gray blocks may group content; zebra striping is not a strong system — if used, keep it very subtle. Key rows/columns may use a light red base or a red bar mark.
Alignment: text left-aligned, numbers right-aligned or visually aligned on decimals/units. Percentages, amounts, and change values keep consistent units. Status uses red dots, black dots, light gray labels, or short badges — no complex icon sets.
Summary and key points: summary rows use darker text, a light gray base, or a thin red line. Do not mark levels with multiple colors at once; prefer the red/pink/gray three levels to express high/medium/low or key/ordinary/weak.
## 9. Components and Graphic Elements
Title component: a large black title at upper left + a caption below or beside it — no heavy title bars. The cover title is a special oversized white-text exception.
Red key card: for the current stage, key conclusions, core metrics, recommended actions, or CTAs; may be white text on red or black text on a red-to-lighter base. Keep only one main red card per page; other red elements downgrade to labels or chart points.
Light gray/white cards: for parallel information, stage explanations, metric notes, and comparison content. Light boundaries, restrained rounding, no shadow dependence; uniform spacing and alignment form the grid.
Capsule labels: three kinds — black, red, light gray. Black marks categories or main path nodes, red marks key nodes, light gray marks ordinary nodes. Label text is short, holds no long sentences, and does not wrap into multi-line capsules.
Numbering component: use 01/02/03/04 or large numerals. White-on-red marks the current or primary stage; black-on-gray marks the rest. Numbers must be bound to card titles — never isolated decoration.
Separators and axis lines: thin light gray lines organize charts, tables, and modules; they must not thicken or turn into decorative borders.
Badges/buttons: the cover and CTAs may use red button-style labels; content pages may use small red/black labels. Buttons carry no real interactivity — no heavy shadows or highlights.
Icons: colorful icons are not core to the system. If used, they can only be extremely small single-color functional marks — dots, arrows, plus signs, location points — for guidance or annotation; sets of colorful illustrated icons are forbidden.
## 10. Texture and Prohibited Items
Overall flat, restrained, and consulting-report-like, building visual appeal through strong alignment, whitespace, a red focal point, and data structure.
Prohibited:
- Large-area photo backgrounds, large people images, or scene photography as the main visual of content pages.
- emoji, cartoon illustrations, 3D graphics, glow, glossy glass textures, complex textures.
- Colorful icon sets, mixing multiple brand colors like blue/green/purple, rainbow-style charts.
- Heavy drop shadows, strong gradient backgrounds, complex borders, decorative curves and flourishes.
- Large centered copy, hierarchy-free long paragraphs, full-page bullet lists.
Use with caution:
- Gradients: only for red-to-light-red card bases, heat maps, or area charts — not for full-page flare backgrounds.
- Shadows: if cards must be distinguished, use an extremely subtle shadow or simply a light gray base instead; do not form a floating-card style.
- Rounded corners: may be used on capsule labels and buttons; cards should have only slight corner rounding; must not turn into internet-UI style.
- Icons/arrows: only for flow direction, key-point annotation, or status dots — few in number, single-color.
Usable on special pages: the cover may use a dark background, dark-red watermark, oversized title, and button-style red labels; the closing page may use a larger CTA message with contact details. Section divider pages may sparingly adopt the cover's dark atmosphere or large-type-on-white, but cannot replace the content-page system.
## 11. Generation Checklist
- Skeleton: is it a 16:9 horizontal business page; are the title area, body area, and caption/footnote area clear; does content keep off the edges?
- Copy: does each page have only one main point; is the title short and specific; are captions controlled to 1–2 lines; is card text phrased as short sentences?
- Hierarchy: do title, key message, body, chart labels, and footnotes show a clear relative size difference; is hierarchy-free text stacking avoided?
- Color: does it keep white/light-gray background + black-gray text + a single red accent; does red only correspond to key points; are multi-color charts avoided?
- Layout: was a suitable scheme chosen among large-type opinion, chart analysis, roadmap, heat matrix, label flow, metric case, or simple table; is unrelated information kept from being forced onto the same page?
- Charts: does red mark only key series; are axes and gridlines softened; are labels readable; is the legend simple and near the chart?
- Tables: are headers, separators, key rows/columns, and number alignment consistent; are long cell paragraphs and overly dense line frames avoided?
- Components: do red key cards, light gray cards, capsule labels, numbering, and separators have clear functions; are no components added merely for decoration?
- Prohibited items: are photo backgrounds, emoji, 3D, glow, heavy shadows, complex textures, colorful icons, and rainbow palettes absent?
- Quality: check for text overflow, truncation, garbled characters, overlap, low contrast, chart occlusion, empty cards, wrong proportions, excessive template sameness, or too many red focal points.
@@ -0,0 +1,163 @@
# Organization Name · 2025.08 The GenAI Transformation of the Communications Function STYLE DESIGN SYSTEM
## 1. Style Positioning
For consulting-firm data packs, functional transformation assessments, AI/technology impact quantification, methodology explanations, and executive-level reporting. Aimed at business owners, communications/function leaders, and consulting project teams; each page must deliver its conclusion fast, while chart definitions and measurement bases, methodological assumptions, and sources remain traceable.
Summary in one line: **a dark consulting data-pack style, where deep gray canvas and deep green tech atmosphere carry dense analysis, and teal-green data encoding highlights GenAI transformation opportunities and methodology levels.**
Stable features: deep gray/deep green full base colors, the QuattrocentoSans font system, conclusion-style titles at upper left, large body charts/matrices, short-paragraph interpretation on the right, a tiny source/copyright line at the bottom, thin-line frames, fluorescent-green/teal-green accents, and the AI-portrait visuals on the cover/closing pages.
- **Conclusion first, evidence as the body**: the title states the judgment directly; charts, tables, matrices, or flows do the persuading; decoration must not replace evidence.
- **Dark and unified, green layered**: deep gray and deep green define the whole deck; bright green only marks key data, labels, chart series, and states — no meaningless color filling.
- **High density but scannable**: use columns, dividers, headers, labels, footnotes, and alignment to build the reading path; avoid hierarchy-free text stacking.
## 2. Page Skeleton
- **Canvas ratio**: widescreen landscape 16:9. All pages reserve bottom space for footnotes, copyright, and the page number.
- **Default background**: content pages sit on deep gray #2C2C2C, overlaid with deep green #0A3021–#0D4430 zones or a green glow at upper right/right side; section divider and disclaimer pages may use near-pure deep gray.
- **Margins**: narrow safe margins; labels and titles at top, sources and page number at bottom, the body filling the middle.
- **Title area**: a small tab/hierarchy label at upper left, followed by the main title and one line of subtitle or key message. Left-aligned, spanning about half to full width at the top of the page; never centered.
- **Body area**: content pages are mainly chart/table on the left or center + interpretation on the right; methodology pages use horizontal flows or matrices; concept pages use multi-column/node relationships. Tight spacing between title area and body.
- **Header/navigation**: a small green label at upper left, such as Function Level, Task Level, Methodology; it only signals the section and analysis level — no large navigation bar.
- **Footer**: fixed at the bottom with sources, assumption notes, and copyright in a size clearly smaller than body text; the page number at lower right. Footnotes may run horizontally across pages or gather below charts.
- **Logo**: the brand mark mainly appears on the cover and closing page; content pages do not enlarge the Logo.
- **Dividers**: thin lines, table lines, axis lines, rectangular outlines; colors in deep gray, gray-green, or low-saturation green — organizational function only.
- **Background graphics**: covers and end pages may use AI portraits/generative visuals; content pages use only abstract green glows or gradients — no large people images.
- **Page-type skeletons**:
- Cover: deep gray brand and title blocks on the left, AI portrait with deep green light effects on the right; the title sits inside a thin-line frame or half-frame area.
- Content data page: title at upper left, large central chart, interpretation on the right, sources at the bottom.
- Methodology section divider: near-pure deep gray, large title at lower left/center-left, a few small squares as visual anchors.
- Methodology content page: label + title at top, flow, matrix, or step cards below, supplementary measurement-basis notes at the bottom.
- Disclaimer page: large title on the left, dense legal text on the right, deep gray background.
- Closing page: brand mark combined with the AI portrait/green light effects, minimal information.
- **Default reading path**: upper-left label → main title/subtitle → main chart or matrix core data → right-side interpretation → bottom sources/measurement-basis notes → page number.
## 3. Content Organization
- **Title style**: use consulting-style conclusion sentences that directly state rankings, impact, opportunity, method scope, or comparative judgments; avoid vague titles like "Overview" or "Background". May include percentages, rankings, subjects, and results.
- **Subtitle/key message**: below the main title, a smaller line states the quantification scope, stage, metric definition or basis, or "why it matters"; color in light green or light gray.
- **Body structure**: short paragraphs, short sentences, and bullets; right-side interpretation is generally 2–4 paragraphs, each supporting one finding. Do not use large blocks of centered narrative.
- **Grouping logic**: group by function, task category, impact type, AI type, automation stage, method step, cost pool, or workflow; titles prefer short noun phrases.
- **Number of points per page**: 1 main point per page, paired with 2–4 sub-findings; high-density table pages may add more entries, but one title conclusion must lead them all.
- **Body density**: more labels, footnotes, and data are allowed, layered by column widths, headers, row groups, and color blocks. When text exceeds 4–5 short paragraphs, split the page or switch to a table/matrix.
- **Bullet style**: use short bullets, short dashes, semicolons, or line breaks; start with verbs or noun phrases; avoid complete long paragraphs.
- **Keyword emphasis**: use bright green, teal-green, bold, or local highlights on dark bases for percentages, rankings, target objects, and stage names; no underlines, glowing outlines, or multi-color emphasis.
- **Numbers/units/time frames**: highlight percentages, ranges, approximations, rankings, and stage differences. Numbers and units stay adjacent; annotate directly inside charts wherever possible rather than relying on legends.
- **Source footnotes**: the bottom must keep sources, estimation assumptions, sample scope, copyright, etc.; multiple sources are compressed horizontally with semicolons or short phrases.
## 4. Content Page Layout System
### A. Left chart + right interpretation
For quantitative conclusions such as rankings, cross-sectional comparisons, cost impact, productivity gains, and function benchmarking. The left or center 60–70% holds horizontal bar charts, stacked bars, or range bars; the right 20–30% holds explanatory text; the top carries the conclusion title and measurement basis, the bottom the sources. Target objects use bright green/teal-green, other objects gray-white or deep green; thin vertical lines may mark averages, targets, or stage boundaries. Not suited for scenes with too many dimensions whose labels cannot stay readable, nor for narrative pages needing long explanations.
### B. Full-width high-density table/matrix
For task lists, workflows, AI-type comparisons, automation potential, cost pools, and method inputs/outputs. The body nearly fills the width; column headers on a deep green or teal-green base, row groups on a deep gray sidebar or color band. Text columns left-aligned, number columns right-aligned or centered, status columns with dots/checks-crosses/color blocks; emphasis via teal-green bases, bright green numbers, red/green status dots, or bold rows. Do not use this with less data than 3×3 — it would look empty; if the comparison is complex but numeric-light, switch to cards or a flow.
### C. Stacked-bar / waterfall-style decomposition
For decomposing the total opportunity. Categories listed on the left, horizontal stacked bars on the right showing stages, types, or potential ranges, with a small swatch legend at the bottom explaining the series. Key row labels or bars use highlight green; non-key parts stay low-saturation. Do not use too many series colors — avoid turning the dark page into colored noise.
### D. Methodology flow
For diagnostic models, assessment steps, quantification logic, and input-to-output paths. Use 4–5 horizontal step cards or nodes connected by arrows/lines; each step contains a short title, an icon-like circle or small card, and 2–3 explanatory points. Use green titles, circular nodes, thin-line arrows, and stage labels to express hierarchy. Not suited for carrying large amounts of precise numbers.
### E. Multi-column concept/comparison
For impact types, Traditional AI/GenAI/Agentic AI differences, evaluation dimensions, or capability classifications. Use 3–4 columns, one concept per column, with short sentences, status marks, or small matrices inside; column titles use green bars, white cards, or circular color blocks. Suited for medium information density, not for complex financial modeling.
### F. Section divider / separator page
For structural transitions such as Methodology and Disclaimer. Use an empty deep gray field, the large title left-aligned or positioned lower-left, keeping only minimal decorative squares/lines. Do not add charts, card groups, or explanatory paragraphs — that would break the section divider's rhythm.
## 5. Color System
- **Primary background deep gray #2C2C2C**: the base color of content pages, section dividers, and disclaimer pages; cannot be replaced by a light background — the style would be falsified.
- **Deep green background #0A3021 / #0B3928 / #0D4430**: for gradient zones on content pages, chart base plates, and the right-side atmosphere of cover/closing pages. May be used at large area with low saturation; may be fine-tuned within the same family — do not switch to blue-purple or orange-red.
- **Mid green #125E42 / #176F4E / #197352**: for primary chart series, title labels, module bases, and grouping bars. Replaceable with a similar brand green, but sufficient contrast with the deep green background must hold.
- **Bright teal-green #1A835B / #35AA7E / #74D1A9**: for key data, target objects, emphasized bars, status dots, legend highlights, and a few accent texts. Small-to-medium area — avoid filling entire pages; not for ordinary body text.
- **White/near-white #F2F4F2**: for main titles, body text, table text, and chart labels. Do not replace all body text with plain gray — readability would drop.
- **Light gray #B8B9B9 / #D7D7D7**: for secondary labels, non-key bars, axis labels, and footnotes.
- **Dark gray-green #35594C / #5B7067 / #61746C**: for gridlines, table separation, weakened modules, and boundary lines — structural color only.
- **Status red/pink, around #C83A5A**: only in matrices marking low capability, limitations, risks, or negative states, at very small area. Prohibited as a primary decorative color.
- **Chart series boundary**: a single page stays in the green family with gray/white as reference; status red only as an exception. Do not introduce multiple blue/yellow/purple data series at once; if more series are unavoidable, prefer a brightness ladder of the same green.
## 6. Fonts and Text Hierarchy
- **Font character**: the whole deck uses QuattrocentoSans, with QuattrocentoSans-Bold and Italic building hierarchy. Do not mix in serif or handwriting fonts.
- **Hierarchy ratios**: body = 1x; main title about 1.7–2.4x; cover title about 2.5–3.2x; section divider large title about 3–4x; subtitle/key message about 1.2–1.5x; chart axis labels and table body about 0.8–1x; footnotes, copyright, page numbers about 0.45–0.65x.
- **Titles**: left-aligned, tight line spacing, may be partially bolded or wrapped; no more than three lines.
- **Key message/subtitle**: below the title, stating the measurement basis in light green or light gray — do not repeat the title.
- **Body text**: mainly regular weight; key phrases may be bolded or bright-greened; short paragraphs, moderate line width, right-side interpretation left-aligned.
- **Subheadings/labels**: smaller size, on green bases or in green text; keep the text short.
- **Table text**: column headers may be bold, body regular; text columns left-aligned, number/percentage columns centered or right-aligned. No frequent italics inside tables.
- **Chart labels**: axis labels and data labels smaller than body text but must stay clear; key data may enlarge close to body size with bright green emphasis.
- **Notes/footnotes/page numbers**: extremely small level, at the bottom or in the right-edge vertical page-number area; must be legible and never mixed into the body.
## 7. Chart Language
Charts are mainly horizontal bar charts, stacked bars, matrix comparisons, and a few flow/node diagrams — no complex multi-chart system.
- **Bar charts**: dark base, horizontal layout; category labels on the left, bars and values on the right. Use a green ladder or light gray references, key bars in bright teal-green; axis lines and gridlines thin and low-contrast.
- **Range/stage expression**: within the same row, parallel bars or range bars may express current vs. future stages, deploy vs. reinvent. Distinguish with different green brightness steps or gray-green bases, and annotate directly in the legend or on the bars.
- **Stacked bars**: for task composition or workflow decomposition. Segments come from the same green sequence; labels are embedded or kept close to the bars, with a simple legend at the bottom.
- **Matrix charts**: clear row/column headings, column headers may use green bars; cells use dots, checks/crosses, or short text phrases for states. Positive in green, negative/limited in red, ordinary reference in gray-white.
- **Flow/node diagrams**: circular nodes, white cards, and thin-line arrows; nodes may hold simplified icons or initial-letter visuals, but they must serve the step's meaning.
- **Legends**: above, below, or at the bottom of the chart, never at the visual center; swatches small and tidy, text short.
- **Annotations**: use the right-side interpretation text instead of complex bubble callouts; inside the chart keep only necessary numbers, baselines, and stage notes. Floods of floating notes covering bars are prohibited.
- **Chart boundaries**: no 3D charts, pie charts, donut charts, perspective charts, or decorative curve charts; there is no evidence supporting complex animated charts or illustrated charts.
## 8. Tables and High-Density Information
- **Table role**: carrying methods, tasks, types, ratings, and multi-dimensional comparisons — the core evidence carrier.
- **Headers**: deep green or mid-green base, white/near-white text, short column names; multi-level headers may use different green steps or thin-line zoning.
- **Row/column structure**: row labels left-aligned, metric/status columns centered, value columns right-aligned or centered. Complex task descriptions get wider columns; ratings/potential get narrow columns.
- **Row height and density**: compact row heights but keep separation; compress long text into short phrases — no full paragraphs in cells.
- **Separators**: thin gray lines, gray-green lines, or dark boundaries to separate row groups, column groups, and headers — no heavy outer frames.
- **Base colors**: deep gray as the base; group rows or key columns may use deep green/teal-green bases; large light bases are generally avoided to protect the dark system.
- **Key rows/columns**: target rows, summary columns, and key percentages may use bright green, bold, base-color blocks, or borders; pick only 1–2 focal points — never highlight the whole table.
- **Zebra striping**: extremely subtle deep gray/deep green alternation is allowed, never obviously showy; omit it when thin-line separation already exists.
- **Symbol marks**: dots, checks/crosses, red-green status dots, and rating color blocks may express capability/risk/automation level; a legend is required or the meaning must be inferable from context.
- **Summary/footnotes**: notes, sources, and assumptions may sit at the bottom of the table; summary rows or result columns must stand out from ordinary rows.
## 9. Components and Graphic Elements
- **Upper-left tab**: a small green rectangle or text label showing Function Level, Task Level, Methodology, etc. Width follows the text — no long banner.
- **Title frame / cover thin-line frame**: cover titles sit inside a green/gray-green thin-line frame or half-frame; content pages rarely use large title frames.
- **Right-side interpretation column**: beside the chart, containing short paragraphs, keyword highlights, and a few numbers; it explains "so what" and does not repeat all the data.
- **Cards/step blocks**: methodology pages use dark cards, small white cards, or green title bars holding step names and bullets; boundaries clear, rounding very restrained if any.
- **Circular nodes**: for impact types or method steps, colored green, yellow-green, blue-green, or small red nodes. Few in number — not a flood of decorative bubbles.
- **Separators and outlines**: for chart axes, table boundaries, and module zoning; thin, low-contrast, function-first.
- **Legend swatches**: small rectangles/dots + short labels explaining stages, states, series; kept close to the chart's bottom or top.
- **Page number/copyright vertical sidebar**: page number at lower right or along the right edge, copyright/sources along the bottom.
- **Image frames**: carry the AI portrait only on the cover and closing pages; if an image appears on content pages, it must keep a deep green overlay — no screenshot collages.
- **Icons**: methodology pages may use a few linear/simplified icons or circular icons. Colorful skeuomorphic icon libraries are prohibited; icons must relate directly to steps/states.
## 10. Texture and Prohibited Items
The overall texture is **dark, flat, restrained, data-dense, tech-consulting**; visual focus comes from the green glow, data highlights, and structured information.
- **Prohibited**: large light backgrounds, rainbow palettes, 3D charts, glowing outlined text, complex textures, emoji, cartoon illustrations, social-media-style stickers, meaningless large icons, long centered copy, decorative wave lines, over-rounded cards, strong-shadow floating layers.
- **Use with caution**: gradients, shadows, circular nodes, icons, red states. Gradients only for deep green background atmosphere; shadows, if any, extremely weak; red only for negative/limitation states; icons only for methodology steps.
- **Usable on special pages**: AI portraits/generative images only on the cover and closing page, as the theme visual; section dividers may use minimal geometric squares; the disclaimer page may use dense legal text.
- **Image dependency boundary**: content pages do not rely on photos, screenshots, or illustrations to tell the story unless the image itself is data evidence; otherwise convert to charts, tables, or flows.
- **Brand feel boundary**: the brand mark should not be enlarged and repeated on every page; the brand feel comes from the dark base, the green system, typography, and the footnote structure.
- **Density control**: never sacrifice alignment, contrast, and footnote readability. If text overlaps, tables squeeze, or chart labels become illegible, cut content first rather than shrinking it into unreadability.
## 11. Generation Checklist
- Is it a 16:9 dark consulting report page, not a poster, infographic, or social card?
- Is there a clear label/title area at upper left, and is the title a conclusion sentence rather than a vague topic word?
- Does the single page hold only 1 main point, proven by a chart, table, matrix, or flow?
- Is the background mainly deep gray and deep green, with bright green used only for key data/labels?
- Is the body organized as one of: left chart + right interpretation, full-width matrix, flow steps, or multi-column comparison?
- Is the right-side interpretation short paragraphs with keyword highlights, not long-form body text?
- Do charts use horizontal bars, stacked bars, matrices, or flow nodes; are 3D, pie charts, and showy series colors avoided?
- Do tables have clear headers, grouping, alignment, thin separators, and key rows/columns?
- Does the footer keep sources, assumptions, copyright, and page number without overlapping the body?
- Does the type keep the QuattrocentoSans character, with hierarchy expressed through relative size, weight, and color?
- Is photo/screenshot/illustration abuse avoided, with the AI portrait only on the cover or closing page?
- Are there any occurrences of overflow, truncation, garbled characters, overlap, low contrast, occlusion, empty content, wrong proportions, or mechanical template repetition?
- If the brand color is replaced, do the dark base, high-contrast white text, and single-primary-hue principles still hold?
@@ -0,0 +1,125 @@
# Cartographic Strategy · Map Strategy STYLE DESIGN SYSTEM
> Intended homepage tag: Strategic Planning / Strategy
> Visual metaphor: contemporary atlas + strategy room
## 1. Style Positioning
For internationalization, regional expansion, business portfolios, ecosystem layout, resource allocation, and long-term roadmaps. It is not a traditional consulting blue-and-white template, but a map-style narrative that "puts strategy into space": warm white paper, deep navy, restrained cobalt blue, and vermilion coordinates, building a sense of direction through routes, regions, scales, numbering, and legends.
Underlying principles:
1. Every page first answers one decision question, then shows location, path, or priority evidence.
2. Map language serves comparison and sequence — contour lines and lat-long grids are not decorative wallpaper.
3. One main map leads the page; captions, numbers, and labels are organized around it.
4. When geographic information is insufficient, use abstract location diagrams, route maps, or composite maps — never fabricate precise boundaries.
5. Titles read like judgments management would actually say — avoid vague slogans like "strategic blueprint" or "marching into the future together".
## 2. Page Skeleton
The canvas is 16:9 landscape. Content pages are mainly warm white; section divider pages may use deep navy. Outer margins stay stable; tiny coordinate ticks may appear at the four corners, but content never touches the edges.
The top is the title and page-number coordinate zone, about 14%–18% of the page; the middle is the main-map workspace, 65%–72%; the bottom reserves space for sources, assumptions, and the legend. No full-width thick rule under the title — position with short ticks, the page number, and thin lines instead.
The cover uses "large title + abstract regional map + one main route". The title sits on the left or lower left; the map takes 45%–60% on the right. Content pages switch among maps, matrices, routes, and timelines, but always keep the same coordinate and legend grammar.
## 3. Content Organization
Titles use conclusion sentences or explicit questions, e.g., "The Middle East offers the fastest first-entry validation window". The subtitle adds scope, years, evaluation dimensions, or data definitions and measurement basis.
A single page carries only one strategic judgment, with at most 3 supporting pieces of evidence. Body text uses short sentences, numbering, and direct labels — no long explanatory passages.
Spatial grouping prioritizes regions, markets, stages, entry modes, capability nodes, and risk levels. Every route must have an origin, a destination, a sequence, and a meaning; every color must be explained in the legend.
Numbers sit immediately beside their objects, with units, time, and measurement basis. Sources and assumptions go in the footer, not hidden at the visual center.
## 4. Content Page Layout System
### A. Strategic map page
The left 25%–32% holds the conclusion and 2–3 key explanations; the right holds an abstract regional map. Dots mark markets or capability nodes, line width expresses priority, solid/dashed lines distinguish what is in place from what must be built. Suited for market selection, network layout, and resource migration.
### B. Three-market comparison band
The page divides horizontally into three parallel zones, each containing a market name, one main number, a small location map, and 2–3 evaluation dimensions. The three columns must be isomorphic; the recommended option may be emphasized with a cobalt edge line or vermilion coordinate point.
### C. Opportunity–difficulty matrix
The matrix takes 60%–70% of the page, with the recommendation conclusion on the right. Point labels name the markets directly without depending on a complex legend. Quadrant names are actionable judgments such as "enter first", "build partnerships", "keep watching" — not abstract star/cash-cow clichés.
### D. Route and stage page
One main route from lower left to upper right connects 3–5 stages. Each stage carries its timing, key actions, thresholds, and exit conditions. The route may turn corners; equal-width stacked process cards are not used.
### E. Capability network page
A central capability anchors the page, connecting channel, delivery, compliance, product, and talent nodes. Connecting lines express dependencies; node size expresses priority. Show only the 5–8 nodes that genuinely affect implementation.
### F. Decision page
One large conclusion on the left; on the right, a three-part list of "decide now / conditions to enter / 90-day actions". A scaled-down route map may review the whole journey — this is not an ordinary Thank You page.
## 5. Color System
- Warm paper white #F4F0E8: primary content background.
- Deep navy #0B1F33: titles, section bases, the main route, and core text.
- Cobalt blue #2F5BFF: recommended options, key paths, and key numbers.
- Vermilion #E4572E: risks, key coordinates, and must-decide nodes; its area stays strictly smaller than cobalt.
- Mist cyan #9BD5D8: secondary regions, historical stages, and de-emphasized data.
- Graphite gray #5B6570: captions, axes, sources, and unselected options.
Regular pages use paper white + navy + cobalt; vermilion appears only once. Rainbow maps, fluorescent gradients, and large red-green oppositions are prohibited.
## 6. Fonts and Text Hierarchy
Chinese uses MiSans; English uses Liter; page titles and conclusion emphasis use a serif ({latin: Unna, ea: 思源宋体}) as the atlas-style display face, with body and secondary information in sans; never mix more than two font families.
- Cover title: 4–5x body size, bold, at most two lines.
- Page title: 2–2.6x body size, left-aligned.
- Key numbers: 2.5–3.5x body size, set in bold sans-serif.
- Body text: 1x, short sentences.
- Coordinates, legends, sources: 0.55–0.75x, kept readable.
Numbers, years, and region codes may use JetBrains Mono (brought in via customFonts). No all-caps long sentences, italic long passages, or multi-layer shadows.
## 7. Chart Language
Prefer dot plots, bubble charts, slope charts, path charts, two-dimensional matrices, regional small-multiple maps, and bar charts with direct annotations.
Chart backgrounds stay transparent or paper white; gridlines use extremely fine mist gray. Key series use cobalt; history/baselines use mist cyan or gray; risk thresholds use a single vermilion line.
Maps must carry a legend, a direction or scale cue. Abstract maps must be clearly marked as "schematic" — false administrative precision is not allowed. Key differences are annotated directly beside points, reducing standalone legends.
## 8. Tables and High-Density Information
Tables serve market scoring, entry conditions, and risk lists. Headers use deep navy text or a light mist-cyan base; thin lines between rows, no heavy borders.
Recommended rows are emphasized with a cobalt coordinate bar on the left; risk cells use small vermilion dots or text labels — never flood the whole cell red. Numbers right-aligned, text left-aligned, scoring criteria and basis noted at the table bottom.
High-density content is preferably split into "map/matrix + right-side explanation" — do not crush it into a ten-column-wide table.
## 9. Components and Graphic Elements
Stable components include coordinate points, routes, region outlines, short ticks, page-number codes, legends, scale-style separators, and thin-line annotations.
Nodes use solid circles or concentric circles; lines divide into three types — main path, alternative path, and dependency line. Arrows appear only when direction matters.
Photos are not a default element. If a city or scene photo is used, allow only one large image with desaturated treatment — no stock-photo collages.
## 10. Texture and Prohibited Items
Overall like a contemporary strategy atlas: precise, quiet, clearly directed. The paper base may carry an extremely light texture; dark pages stay pure; no glassmorphism.
Prohibited: default consulting blue card walls, random world-map watermarks, fake national borders, 3D globes, glowing routes, rainbow heat maps, rounded UI panels, emoji, decorative compasses, and full-page maps with no conclusion.
## 11. Generation Checklist
- Can every page state in one sentence what decision it asks for?
- Do the map, matrix, or route genuinely carry comparative relationships?
- Do all colors, line styles, and node sizes have explicit meanings?
- Are regions and paths clearly labeled, with no fabricated precise geographic information?
- Is the recommended option clearly highlighted while alternatives remain visible?
- Does the page keep the stable grammar of paper white, navy, cobalt, and vermilion?
- Are the title, legend, sources, units, and assumptions complete?
- Are card walls, 3D globes, random decorative lines, and template-like slogans avoided?
- Have you checked for overlap, cropping, garbled characters, low contrast, and text wrapping?