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,176 @@
# Project Report Name — Organization Name Syndication Memo STYLE DESIGN SYSTEM
## 1. Style Positioning
A private equity / investment banking memo-type, high-density report style, suitable for syndication memos, investment committee materials, due diligence summaries, deal approvals, financing packages, and management business plan materials. Aimed at finance and industry analysis readers, it supports rapid review of deal terms, investment logic, customer and market evidence, financial projections, valuation, risks, and execution plans; the goal is "reviewable, open to follow-up questioning, and traceable."
Fixed style: a 16:9 landscape, high-utilization canvas; a light cream-white background; a thin orange vertical line on the left; gray / dark navy segmented section navigation at the top; a small brand wordmark at the upper right (plain small text presenting the new topic name; do not draw a graphic logo); a large orange title; and a gray information sentence under the title. The body uses tables, bar charts, bridge charts, side-by-side modules, rating dots, process boxes, and textual evidence blocks. Fonts are absolutely dominated by the Arial family; bold is used for titles, table headers, field names, and key numbers; italics are used only for notes or special emphasis.
Underlying principles:
1. Information completeness comes first, but it must be structured into tables, columns, numbering, colored-block headings, footnotes, and thin divider systems; long passages of text must not float freely.
2. Orange is used only for page titles, the current section, key data, key bars, the left vertical line, and a small number of labels; it is not used as a large-area decorative fill and does not sacrifice body readability.
3. The body area may vary; the navigation, title area, identity mark, left boundary, and footnotes / page numbers remain stable. Chart aesthetics must be subordinate to data clarity, comparability, and traceability.
## 2. Page Skeleton
The canvas is 16:9 landscape widescreen with narrow page margins, and the body area occupies the vast majority. The default background is a light cream-white / near-white, approximately `#FCF8F5`, `#FEFBF7`, `#F4F0EC`; a very faint brand geometric watermark or light gray graphic is allowed, but at low opacity so it does not affect the reading of figures.
The cover uses a full-bleed deep blue city night-scene photograph overlaid with semi-transparent deep blue brand geometry. The title group sits in the right-middle area: the main title in white bold, the subtitle in white regular, and the date placed inside a small orange label; vertical confidentiality / time / email information is placed on the left, and the orange brand wordmark at the upper right (plain small text presenting the new topic name; do not draw a graphic logo). The cover does not use the content-page top navigation.
Section dividers use the light cream-white background, a left orange line, an identity mark at the upper right (plain small text presenting the new topic name; do not draw a graphic logo), and generous whitespace. The section number is a large orange numeral, and the section title is large dark navy type; they only switch sections and do not carry complex argumentation. Examples include "Industry and Company Overview", "Business Plan", "Valuation and Exit", and "Financing, Diligence & Key IC Findings".
Standard content-page skeleton:
- Top navigation: a horizontal segmented arrow / band at the very top of the page; the current section has a dark navy background with white text, the other sections a light gray background or low-contrast gray text. Its height is very low and it serves only for orientation.
- Upper-right identity mark: a small orange brand wordmark (plain small text presenting the new topic name; do not draw a graphic logo), fixed at the top right with clear space reserved around it, not overlapping chart titles or navigation.
- Left orange line: most content pages keep a thin orange vertical line from top to bottom; content begins to its right.
- Title area: left-aligned below the navigation; the main title is usually orange bold, followed by a single gray / dark gray information sentence.
- Body area: immediately below the title, carrying tables, charts, modules, processes, side-by-side evidence, or long text, with a narrow footnote band reserved at the bottom.
- Footer: sources, notes, confidentiality wording, and page numbers at the bottom. Footnotes are significantly smaller than body text and light gray; the page number is usually at the lower right or bottom edge.
Reading path: top navigation → orange title → information sentence → body area left to right, top to bottom → bottom footnotes.
## 3. Content Organization
Titles use judgment-type or topic-type phrases, such as "Deal Summary", "Executive Summary", "Why We Like Organization Name", "Customer Overview", "Business Plan: M&A"; strong conclusions may be stated directly, e.g., "Strong game release pipeline driving game development spend" — no marketing slogans.
The information sentence under the title is usually one line, used to state the conclusion, the data basis, or the significance of the page; it is lighter in color than body text and professionally restrained in tone, with no exclamations, rhetoric, or large centered passages.
Body rules:
- Long text uses bold subheadings + body explanations + bullet / numbered points; every paragraph must have an explicit subheading or left-side label.
- Summary pages may use a left vertical navigation card or numbered boxes with dense bullets on the right; each bullet gives a bold keyword first, then the explanation.
- Group by professional dimensions such as deal terms, investment highlights, industry / customers, financials, valuation, risks, financing, and due diligence.
- Compress a single page into 3–6 modules or 4–8 table rows; a page containing only one big statement is discouraged.
- Use bold, orange numbers, dark blue table headers, light-filled boxes, or dots for emphasis; no fluorescent highlighting, hand-drawn circles, or exaggerated stickers.
- Keep numbers, units, and time bases adjacent to the data, e.g., FY, CY, 24E, 25E, CAGR, EV, EBITDA, bps, %; table column headers explain the basis.
- Source footnotes go at the bottom in small light-gray type; multiple bases are connected with superscripts or parentheses — do not pile long notes into the body.
## 4. Content Page Layout System
### A. Deal Summary / Term Sheet Type
Used for deal overviews, capital structure, valuation, sources & uses, and key terms. The body is a large table: the left column holds dark or gray field names, the right side holds explanations and data; a small valuation table or sources & uses table with an orange header may be embedded in the middle. The reading order is field name → value → note. Suitable for multi-basis facts; not suitable for complex causality or multi-stage processes.
### B. Executive Summary / Multi-Conclusion Long-Text Type
Used for investment highlights, key risks, and argument summaries. Vertical section cards / numbered modules sit on the left, dense bullets on the right; dark navy cards mark the major categories, orange cards mark the current or key item. Each bullet opens with a bold keyword. Suitable for scanning by professional readers; not suitable for non-professional audiences or talk-style presentations.
### C. Investment Rationale / Itemized Argument Type
The typical page is "Why We Like Organization Name". The body organizes horizontal argument bands with circular A/B/C/D numbering or labels; each band contains a dark navy subtitle bar, an orange number, body bullets, and key figures. Suitable for 3–5 parallel reasons; not suitable for more than 6 items or content where each item requires complex charts.
### D. Horizontal Comparison Table / Peer Matrix Type
Used to compare companies, customers, products, competitors, or peer metrics. The left column holds company names or category labels, the top holds the metrics, and the cells hold numbers, text, rating dots, or short labels. Headers may use light orange / dark blue; key rows and columns may use light blue or light orange fills. Suitable for horizontal comparison; not suitable for long qualitative explanation.
### E. Chart + Explanation Mixed Type
Used for revenue trends, market size, growth rates, customer penetration, financial projections, bridge charts, and operating KPIs. The main chart occupies most of the width, with a conclusion bar / title above and an explanation box below or on the side. Orange highlights the core series, dark blue / teal is used for comparison series, and gray for background or historical items. Suitable for data argumentation; not suitable for conceptual diagrams without a clear data basis.
### F. Process / Business Plan Type
Used for M&A pipelines, operational initiatives, and value creation plans. Built from horizontal process boxes, stage arrows, small tables, and a bottom chart; dark blue bars serve as stage titles, orange nodes mark key actions or key results, and light boxes carry explanations. Suitable for stages, paths, funnels, and execution levers; it should not be abused for ordinary lists.
### G. High-Density Side-by-Side Module Type
Used for customer overviews, management / advisor viewpoints, risk mitigation, and due diligence findings. The page is divided into multiple same-size cards or horizontal modules, each containing a subtitle, short bullets, icon-style markers, or micro charts; module spacing is small, with thin lines and light fills for separation. Not suitable for a single large image or emotional storytelling.
## 5. Color System
- Background colors: light cream-white / near-white `#FCF8F5`, `#FEFBF7`, `#F4F0EC`. Used for the large-area base of content pages; may be replaced with a warm white of the same lightness — do not switch to a high-saturation background.
- Main text: dark gray `#4D4E53`, `#3E3E42`. Used for body text, table text, and note text; must maintain high contrast and must not be replaced with light gray.
- Title / brand accent orange: `#C4794A`, `#D8752A`, `#F07A00`. Used for main titles, the left vertical line, date labels, current items, key numbers, important bars, and table headers; small-to-medium area. May be replaced with the brand primary color, but the warm-accent role must be retained.
- Structural dark navy: `#12234E`, `#263660`, `#293B60`. Used for the current navigation section, dark sidebars, table headers, process stage bars, and cover overlays; usually paired with white text. May be replaced with a deep brand blue, but it must remain serious and high-contrast.
- Auxiliary grays: `#BEB6B3`, `#D9D5D5`, `#E8E3E1`, `#C6C6C9`. Used for dividers, table borders, non-current navigation, fills, axes, and gridlines.
- Auxiliary light blue / teal: `#5E9BB9`, `#9BA8AF`, `#C6CED6`. Used for secondary chart series, customer / competitor comparisons, key row blocks, or status areas; it must not compete with orange for the primary accent role.
- Positive/negative / status colors: mainly orange, dark blue, teal, and gray, with a small amount of green for growth or positive figures. Green should be used cautiously for positive change; red is not part of the stable primary color system.
Control the main hues of a single page to orange, dark blue, gray, and a small amount of teal-blue. Chart series should not expand into rainbow colors; status colors serve judgment only, not decoration.
## 6. Fonts and Text Hierarchy
Fonts are dominated by Arial / Arial Bold. Helvetica Bold is used only for the cover or special confidentiality overlay text; Calibri, Segoe UI, and the like are not part of the main system. Prefer Arial or an equivalent sans-serif.
- Cover main title: 3–4x body text, white bold.
- Content-page main title: 2.5–3x body text, orange bold, left-aligned.
- Section divider title: 3–4x body text, dark navy; the section number may be larger, in orange.
- Information sentence / subtitle: 1–1.2x body text, gray regular or semi-bold, positioned under the title.
- Body text: 1x, dark gray; line spacing is tight but must not overlap.
- Subheadings / field names / table headers: 1–1.15x body text, bold; may be white text on a dark blue background or dark gray text on a light background.
- Table and chart labels: 0.75–0.95x body text; compress when necessary but keep legible.
- Notes, sources, page numbers: 0.55–0.7x body text, light gray.
Text is predominantly left-aligned; table numbers are right-aligned or visually aligned by decimal point; column headers are centered or left-aligned according to data type. Large centered body passages are prohibited.
## 7. Chart Language
Use stacked columns, grouped columns, horizontal bars, bridge charts, time-series column-line combinations, small rating / dot matrices, and mini charts inside matrix tables; charts are embedded in the body area of content pages rather than being full-screen single charts.
Axis lines and gridlines use light gray; legends sit near the top of the chart or inline beside the title, using small color swatches + short labels. Data labels are placed directly at column or bar ends or inside table cells.
Orange marks the core series, the current item, or key growth; dark blue marks baseline / historical / primary comparison; teal-blue marks the second comparison; gray marks background, other items, or non-key data. Forecast, target, and estimate years are expressed through E, FY, CY, dashed lines, light-shaded areas, or explicit labels and definitions in column headers — not through complex visual effects.
Key data may use orange numbers, bold, annotation boxes, or dark labels. Do not use 3D charts, gradient columns, dimensional pie charts, heavy shadows, or decorative graphics without data labels. If a chart cannot express a comparison more clearly than a table, prefer the table.
## 8. Tables and High-Density Information
Tables carry terms, financials, peers, customers, due diligence conclusions, and model assumptions. Headers use a dark navy background with white text, an orange background with white text, or a light orange background with dark text; the left field column uses a dark gray / dark blue background with white text, or a light gray background with bold text.
Rows and columns are compact with low row height; borders are thin light-gray lines. Backgrounds alternate among white, light cream-white, light gray, light orange, and light blue to form zones; wide tables may use zebra striping, but it should not be too strong. Key rows and columns use orange headers, light orange fills, dark blue sidebars, or bold numbers; summary rows use a darker fill or a top border line.
Amounts, percentages, multiples, and years are right-aligned or centered within their columns wherever possible; text is left-aligned; units are written in column headers or the first row, not repeated in every cell. Rating dots, circles, checkmarks, or short labels are visually centered within the same column.
Footnotes and superscripts move down to the bottom and do not squeeze the data area. Avoid stuffing multi-line long sentences into cells; when explanation is necessary, use a note below the table or an explanation box on the right instead.
## 9. Components and Graphic Elements
- Top section navigation bar: the current section is dark blue, the others gray; it must not be turned into a large menu or icon navigation.
- Left orange vertical line: a brand boundary that carries no content; kept on most content pages.
- Orange main title: the entry point to the page topic; must be left-aligned with clear spacing from the body.
- Information sentence: a one-line judgment statement under the title.
- Dark blue subtitle bars: used for groupings, argument bands, process stages, and table module titles, carrying short white-text titles.
- Orange numbering / circular badges: used for A/B/C/D, steps, key points, or emphasized items.
- Light-filled cards / module boxes: used for side-by-side evidence, customer modules, risks and mitigations; light gray borders, filled light cream / light gray / light orange.
- Process arrows and connectors: used for M&A, pipelines, and value creation steps; lines are flat, with no shadows.
- Company identifiers: used in the left column of tables on customer, peer, and competitor pages; presented as text names or neutral placeholder blocks at a uniform size, avoiding overshadowing the content — do not draw graphic logos.
- Footnote / source band: located at the bottom, in small light-gray type.
Colorful icons are not a stable language; if they must be used, use very few, in a single color or brand color, serving table recognition. Matrix markers, dot ratings, and checkmarks may be used but need a unified style.
## 10. Texture and Prohibited Items
Overall, stay flat, restrained, professional, and lightly branded. Apart from the cover photo, content pages rely on almost no large image backgrounds; photos, screenshots, and illustrations are not the main language. Rounded corners are used only on a few labels or cards, with small radii; shadows, gradients, glows, 3D, and complex textures are not part of this style.
Prohibited:
- Large photo backgrounds on content pages or low-contrast text pressed over images.
- 3D charts, gradient columns, glowing borders, heavy drop shadows, skeuomorphic buttons.
- emoji, cartoon illustrations, social-media-style stickers, hand-drawn doodles, high-saturation rainbow icons.
- Large stretches of centered copy, unstructured long paragraphs, pure-slogan pages.
- Too many primary colors on one page, or strong colors that conflict with the orange / dark navy system.
Use with caution:
- Company identifiers and customer identifiers: only on comparison tables and customer pages, presented as text names or neutral placeholder blocks at a uniform size — do not draw graphic logos.
- Light watermarks / brand geometry: may serve as a low-opacity background, but must not pass through text or tables.
- Green / red status colors: used only with clear semantics such as growth, decline, or risk.
- Rounded labels and small icons: they may only aid recognition; they do not replace textual evidence.
Special pages: the cover may use a full-bleed deep blue photo with a semi-transparent geometric overlay; section dividers may use generous whitespace and large numerals; content pages must return to the tabulated, evidence-based, navigation-consistent system.
## 11. Generation Checklist
- Skeleton: is it 16:9; do content pages keep the top navigation, upper-right brand wordmark, left orange line, title area, and bottom footnotes / page numbers?
- Copy: are titles short and professional; does the information sentence state the judgment in one line; is the body organized with fields, bullets, tables, or modules?
- Hierarchy: do orange titles, dark blue groupings, body text, and notes have clear relative size differences; is dependence on specific font sizes avoided?
- Color: is the background light cream-white; are the primary colors limited to orange, dark blue, gray, and a small amount of teal-blue; is orange used only for emphasis?
- Layout: is the body scannable left to right, top to bottom; does high-density content have columns, headers, numbering, and dividers?
- Charts: are flat columns / bars / bridges / matrices used; are axes and grids light gray; is key data labeled directly; are 3D and rainbow colors avoided?
- Tables: are headers, field columns, borders, fills, key rows and columns, number alignment, and unit bases consistent?
- Components: are the navigation bar, dark blue title bars, orange numbering, light-filled cards, and footnote sources unified, not arbitrarily reshaped from page to page?
- Prohibited items: are there no emoji, illustration-style icons, heavy shadows, gradients, glows, complex textures, or large-area photos on content pages?
- Technical quality: check for no overflow, truncation, garbled text, overlap, low contrast, occlusion, empty content, or wrong proportions; when the same template is used consecutively, the body structure should vary while the skeleton does not.
- No default use of cards: 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 and font-size differences are better solutions.
- No equal-division composition: unless no other layout is available, do not default to three-way splits, four-way splits, or 2×2 matrices — including three-part structures such as three-way split + title + conclusion.
@@ -0,0 +1,124 @@
# PJ Mountain — Investment Memo (Organization Name Style) STYLE DESIGN SYSTEM
## 1. Style Positioning
A high-density professional PPT style for private-equity investment committees, deal approvals, due diligence reporting, and investment memos, adapted for readers with backgrounds in finance, strategy, operations, and accounting. Each page builds a traceable "conclusion–evidence–assumption–source" chain, emphasizing data density, comparison dimensions, and reviewability.
The core is a white-background full canvas, an upper-left title, an italic conclusion line under the title, purple structural bars, blue/teal/gray classification colors, thin-grid tables, compact QuattrocentoSans fonts, and bottom footnotes and page numbers. The body consists mainly of charts, tables, process boxes, side-by-side modules, and a small number of evidence images; decoration is minimal, and color only serves section, classification, data-series, and risk-alert functions.
Underlying principles:
1. Clarity over whitespace: prioritize keeping key conclusions, data, measurement bases, sources, and comparison dimensions, maintaining order through dividers, header bars, light-gray fills, and hierarchy.
2. Color is an information dictionary, not decoration: purple is used for structure and titles; blue/teal/gray for business categories or chart series; red only for risks, differences, sensitive assumptions, or boxed emphasis.
3. Pages may be complex, but the skeleton must stay stable: the body may mix charts, tables, flows, maps, and images, but the title area, conclusion line, bottom sources, page numbers, and color grammar stay consistent across the whole deck.
## 2. Page Skeleton
The canvas is 16:9 landscape with a default white background; content pages use narrow margins and high content utilization. The top is the title area, the bottom is the footnote and page-number area, and the middle is the main evidence area. Reading path: upper-left section label/title → italic conclusion line under the title → main area left to right, top to bottom → bottom footnotes → lower-right page number.
Cover page: on the left, a plain-text small-type identity mark (write the new topic name; do not draw a graphic logo), the project name, document type, and date; on the right, a large blue line-art abstract graphic; at the lower left, a red italic confidentiality note. It uses generous whitespace and brand line art, and does not adopt the content-page footnote system; this abstract linework suits only the cover and should not spread into content-page backgrounds.
Disclaimer page: a large upper-left title; the body is a single column of dense small-type paragraphs with almost no color or graphics, keeping only the page number. Full disclosure takes priority; it must not be forced into display-type modules.
Content pages: the upper left may hold a thin-bordered rectangle or a small numbered section label; the main title sits below it or to its right, in purple or dark gray; below the title, one italic gray conclusion line. The body divides into 2–4 modules, whose titles use purple horizontal bars or thin-bordered title bars. The bottom keeps sources, notes, and assumption statements, with a tiny page number at the lower right.
Section/divider pages keep the white background and the upper-left title logic, with no large image backgrounds. There is no persistent top header navigation, no full-page watermark, and no large photo backgrounds. Sources and footnotes are a fixed bottom information layer and must not be covered by charts or tables.
## 3. Content Organization
Titles use declarative, analytical "topic + judgment dimension" phrasing, such as company overview, market outlook, benchmarking analysis, structural solution, etc.; avoid advertising-style short titles. Under the title, one or two italic information lines express the most important judgment, finding, or question; they do not carry the full function of body text.
The body is organized into evidence blocks. Every module must have a clear subtitle stating the comparison object, the metrics, or the direction of the conclusion; inside, use bullets, short sentences, numbers, tables, or charts. A single page may carry multiple points, but they must belong to one main question; when parallel points exceed 4 groups, use numbering, color bands, or columns to establish a path.
Paragraphs should be short, preferring bullets and abbreviated expressions; each bullet contains one action/judgment + one factual basis; do not write continuous prose. Keywords may be emphasized with bold, purple, red boxes, or background color, but no more than two emphasis levels per page.
Numbers, units, and time bases stay adjacent to the data and are stated in chart titles, table headers, or footnotes. Financial and operating data keep column alignment; percentages, multiples, years, and currency units must not be mixed. Source footnotes go at the bottom in small gray type; multiple external data sources are ordered by chart or module.
## 4. Content Page Layout System
1. **Text-based summary page**: suited to Executive Summary, investment theses, and key findings. Structure: big title + italic overview + multiple groups of purple subtitles + bullets; each group carries only one judgment category, with subtitles, bold keywords, and sparse numbering providing emphasis; do not insert complex charts that break summary reading.
2. **Left numbered navigation + right conclusion list**: suited to presenting side by side about 4 due-diligence topics, investment theses, or risk responses. The left side holds vertical color blocks or numbered labels; the right side holds the corresponding conclusions and bullets. Color blocks represent sections or question categories and must not be purely decorative; if the topics have no clear grouping relationship, do not use this layout.
3. **Multi-chart dashboard page**: suited to multi-metric comparisons such as market size, business mix, cost benchmarking, and growth drivers. The body uses a 2×2 grid or a one-large-two-small vertical arrangement, each block with a purple title bar; short annotation boxes beside may explain outliers. Avoid collaging unrelated charts; all charts must jointly answer the information line under the title.
4. **Chart + right-side explanation/annotation page**: suited to trend lines, column charts, box plots, and waterfall charts. Place the main chart on the left or in the middle; on the right, use light-filled boxes, red boxes, or short bullets to flag conclusions; red strokes, arrows, labels, or contrasting data points may be used for emphasis. If the chart itself is already crowded, move the explanatory text to the bottom or split the page.
5. **Table/matrix page**: suited to financial models, comparable companies, deal structures, due diligence checklists, and earnings bridges. The body is a large table or several small tables; purple headers establish the primary grouping, and light-gray fills serve secondary headers or summary rows. Use only for information that naturally has row-column dimensions; do not force narrative text into tables.
6. **Flow/structure diagram page**: suited to deal structures, financing paths, organizational relationships, or value-creation paths. Use rectangular boxes, thin-line arrows, and small amounts of color to distinguish stages or parties. Arrows represent real processes or capital/information flows and must not be used as decorative motion lines. Complex structure diagrams keep legends and footnote explanations.
7. **Evidence image / name-text mixed page**: a small number of maps, office locations, people, customer name text lists, or business screenshots may be placed. Images must be constrained by borders, titles, and captions, and are usually smaller in area than the chart/table body; they are not emotional backgrounds or full-page visual protagonists.
## 5. Color System
- **Background: #FFFFFF**. The absolute main background of all content pages, summary pages, and table pages. Cannot be replaced with a dark background; if modules need distinction, use light-gray fills rather than recoloring the whole page.
- **Main text: #333333–#4A4A4A**. Used for body text, table content, and chart labels; may be slightly darkened per output device, but should not use pure black, which feels too oppressive.
- **Title/structure purple: #470D59**. Used for content-page titles, section labels, module title bars, table headers, and key dividers, at small-to-medium areas; should not carpet entire pages. May be replaced with a dark brand color, but must keep high contrast and a financial-institution seriousness.
- **Cover/business deep blue: #0020AC / #0126AE**. Used for the cover's abstract linework, some classification colors, column chart series, and emphasis blocks; may serve as a section color or main chart-series color, but its area on content pages should stay below the white and gray backgrounds.
- **Auxiliary blue: #3E58B5 / #7B8DC7**. Used for secondary chart series, stacked columns, labels, and light-toned categories; must not compete with purple for the title role.
- **Teal/blue-green: approximately #00A6B2–#20B8C6**. Used for business categories, process stages, chart series, and some module color bars; may be replaced with a brand auxiliary color, but must stay distinguishable from purple and deep blue.
- **Light-gray backgrounds/table fills: #F2F2F3, #F6F7F7, #E8EAEB**. Used for table shading, module backgrounds, chart plot areas, and light zoning; may occupy large areas. Cannot be replaced with high-saturation colors.
- **Divider/grid gray: #C8CACE, #D0D4D7, #BBBBBB**. Used for table lines, axes, module borders, and dividers; should be thin, light, and low-presence — avoid thick black lines.
- **Emphasis/risk red: approximately #B00020–#C00000**. Used for the cover confidentiality note, negative alerts, sensitive assumptions, and red-box annotations; small areas only, not a regular series color.
Keep a single page's main hues to purple + blue/teal + gray, with red for warnings only. Chart series colors keep a consistent dictionary on the same page; avoid the same color meaning different businesses or states.
## 6. Fonts and Text Hierarchy
Fonts are dominated by QuattrocentoSans (Chinese: MiSans). Cover and large titles use Regular at large sizes, body and tables use Regular, key words and table headers use Bold, and conclusion lines and disclaimers use Italic. Do not introduce serif fonts, handwriting fonts, or strongly individual Chinese fonts.
With body text = 1x: cover main title approx. 3–4x; content-page main title approx. 2–2.8x; page information line approx. 1.1–1.3x and mostly italic; module titles approx. 1–1.2x, often set inside color bars; body bullets at 1x; table content and chart labels approx. 0.75–0.9x; notes, sources, and page numbers approx. 0.45–0.65x. Disclaimer-page body text may be below normal body size, but must remain readable.
Text is predominantly left-aligned. Numbers in tables are right-aligned or aligned by decimal place; years, categories, and metric names may be centered or left-aligned. Large stretches of centered copy do not belong to this style; outside of parts of the cover, it is not used.
## 7. Chart Language
Real charts are mainly stacked columns, grouped columns, line charts, box plots/distribution charts, scatter/bubble charts, bridge charts, area/composition charts, and benchmark comparison charts. Charts are embedded in module frames, with a short title or purple title bar above, and data sources and measurement bases noted at the bottom.
Axes and gridlines use light-gray thin lines; avoid thick black axes. Legends sit above, below, or to the right of the chart, using small-type text with series color swatches. Column chart series are led by deep blue, light blue, teal, gray, and purple; the stacking order stays stable. Line charts may place multiple lines in parallel, but color, line style, and end labels should reduce reading cost.
Key data uses red stroke boxes, red annotation boxes, arrows, small labels, or dark data labels. Forecasts, targets, and baselines use dashed lines, light-colored lines, or separate labels, and must not be confused with actual data. Chart beautification must not sacrifice numerical clarity: avoid 3D, gradient columns, shadows, exaggerated rounded corners, and meaningless icons.
## 8. Tables and High-Density Information
Headers use a deep-purple background with white text or a light-gray background with dark text; first-level grouping uses purple horizontal bars, second-level grouping uses light-gray fills. Row-column dividers are thin and light; table row height is compact, but text must not overlap itself.
Number columns are right-aligned or aligned by decimal place; text columns are left-aligned; years, stages, and rating symbols may be centered. Important columns, summary rows, key assumptions, or output results may be emphasized with light-gray fills, purple text, bold, or borders. Negative values, risk items, or differences needing attention may use red, but the whole table must not turn red over large areas.
Zebra striping is not mandatory; with many rows, extremely light gray alternating backgrounds may be used. Matrix-type pages may use dots, checkmarks, rating symbols, color blocks, and short labels, but every symbol must have a legend or be intuitively understandable. Tables carry the "evidence and model" role and must not be used as pure layout decoration.
## 9. Components and Graphic Elements
- **Title bar / section label**: a small rectangular label at the upper left, often carrying a number, section name, and a purple/blue/teal border or fill. Its function is to locate the deck's structure; do not move it freely from page to page.
- **Module title bar**: a deep-purple or section-color horizontal bar with white or dark text; compact bar height, width matching the module.
- **Card/boxed modules**: white or light-gray backgrounds with thin gray borders, used for charts, explanations, maps, and process nodes. Rounding is imperceptible or absent; no drop shadows to create a card feel.
- **Annotation/flag boxes**: red or purple thin borders with a short sentence explaining an anomaly, assumption, or risk. Only for locally high-value information; do not box every conclusion.
- **Flow arrows**: thin-line arrows connecting rectangular nodes, indicating real sequence, causality, capital flow, or organizational relationships; colors follow the section color or gray. Avoid thick decorative arrows.
- **Image frames and name grids**: images need boundaries, titles, and captions; customer, partner, or comparable-company names are arranged as plain-text small-type grids (or replaced with neutral placeholder blocks) as evidence — no graphic logos are drawn. Colorful icons as decorative selling points are forbidden.
- **Dividers**: light-gray thin lines for tables, the upper edge of footnotes, and module separation. Thick purple lines are used only in table headers or module titles.
## 10. Texture and Prohibited Items
Overall flat, restrained, institutional, high-density; almost no reliance on photos, illustrations, textures, light effects, or dimensional effects. Brand feel comes from purple structural bars, the blue cover line art, the fonts, and the footnote system.
Prohibited: large-area image backgrounds, 3D charts, glows, complex gradients, heavy shadows, emoji, cartoon illustrations, decorative colorful icons, large stretches of centered copy, data charts without sources, low-contrast light text, and information-irrelevant background textures.
Use with caution: photos, screenshots, maps, portraits, customer name text, red annotations, rounded cards. They must appear as evidence or explanatory tools, with area and quantity controlled.
Special pages allowed: the cover may use large-area blue abstract linework and more whitespace; the disclaimer may use extremely high-density single-column legal text; appendix/model pages may use denser tables, but must still keep the title, sources, and page number.
## 11. Generation Checklist
- Is it 16:9, white background, narrow margins, high content utilization, with the top title area and bottom footnote/page-number area preserved?
- Is the title an analytical topic, with one clear italic conclusion line or page thesis under it?
- Is purple used only for titles, sections, headers, and structural emphasis, with blue/teal/gray used stably by category or data series?
- Do the page's points revolve around one main question, with clear grouping logic between modules?
- Do charts have titles, legends, axes/labels, sources, and measurement bases, without 3D, gradients, shadows, or other decoration?
- Are tables row-column aligned, with clear headers, light dividers, and restrained emphasis on key rows and columns?
- Do components carry information functions: labels for positioning, color bars for grouping, frames for aggregation, arrows for flows, red boxes for risk alerts?
- Are photo backgrounds, emoji, illustrative icons, complex textures, glare, and meaningless large color blocks avoided?
- Have you checked for overflow, truncation, garbled text, overlap, low contrast, occlusion, empty modules, missing page numbers, wrong proportions, and missing sources?
- Do template variations serve the information structure rather than making pages merely look different?
- No default use of cards: 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 and font-size differences are better solutions.
- No equal-division composition: unless no other layout is available, do not default to three-way splits, four-way splits, or 2×2 matrices — including three-part structures such as three-way split + title + conclusion.
@@ -0,0 +1,179 @@
# Organization Name — Report Name 2025 STYLE DESIGN SYSTEM
## 1. Style Positioning
An editorial annual-research-publication PPT style: warm rice-white paper, ultra-heavy black opinion headlines, section-color fluorescent highlighting, dense data charts, and a stable footer. Suited to industry annual reports, investment research, technology trends, market landscapes, and policy/ecosystem analysis. Every page gives the judgment first, then the evidence.
Fixed characteristics: 16:9 landscape canvas; the body mostly uses a #F2EFE6-like warm-white background; a small section label at the upper left; a strong opinion headline at the top; keywords backed by section-color rectangles; the body uses charts, tables, timelines, cards, or case grids; the bottom carries a fixed brand wordmark, source, and copyright. Section dividers use dark/high-saturation backgrounds with pixel blocks, while content pages stay restrained.
1. **Opinion first, evidence right behind.** Every page must have a judgment title that stands on its own; charts/tables/modules exist only to prove the judgment; no slogan pages without evidence.
2. **High density comes from structure, not piled-up text.** Use columns, tables, cards, legends, notes, and footnotes to layer information, clearly separating the title area, the body area, and the footer area.
3. **Color carries information roles.** Warm white, black, and gray handle reading; section colors handle recognition and emphasis; chart series colors distinguish data. Brand colors must not sacrifice the readability of axes, labels, and body text.
## 2. Page Skeleton
**Canvas and margins**: standard widescreen 16:9. Content pages use stable, fairly narrow left, right, and top safety margins, with a footer band reserved at the bottom; the body spreads horizontally, avoiding centered narrow-column long text.
**Default content-page skeleton**:
- A small section label at the upper left: a small color block/short bar or small heading + an uppercase section name.
- The upper-left title area occupies about 15%–25% of the page height; the ultra-heavy black judgment sentence may wrap, and keywords may be highlighted with semi-transparent section-color rectangles.
- Below the title is the body area, carrying charts, tables, matrices, left-right columns, or case modules.
- The footer spans the bottom: brand wordmark at the lower left, Source/Sources at the lower center-left, copyright at the lower right.
- Reading path: upper-left section label → big-title judgment → highlighted keywords → body evidence → legend/annotations → source and copyright.
**Cover**: warm-white background with horizontal green pixel blocks across the middle; an oversized black title stacked and centered, with `of` in italic serif; the year centered below. A few light-blue/purple semi-transparent squares may be overlaid. No photos, no textures, no complex backgrounds.
**Disclosure/statement page**: a full-page high-saturation green background; a small periodical name at the upper left and an oversized black title; multiple small-type long-text paragraphs cover the lower-middle area. Only for legal disclosure — do not migrate to ordinary content pages.
**Table of contents page**: warm-white background; a large CONTENTS title and green pixel blocks on the left; the right side holds the section list made of numbers, section names, thin rules, and small section-color blocks at the ends. No thumbnail-style table of contents.
**Section dividers**: solid backgrounds in deep blue, purple, green, etc.; the left or middle holds the section number and a large title; pixel blocks may sit at the upper right or in a corner; no complex data.
**Watermark/background graphics**: except for the pixel blocks on the cover, table of contents, and section dividers, content pages use no watermarks or large background graphics.
## 3. Content Organization
**Title writing**: use complete opinion sentences, not noun labels, such as "a certain trend is growing/converging/dominating." Keep to two or three lines, highlight only one key phrase or word, and avoid coloring the whole sentence.
**Information lines and body text**: use short paragraphs or small notes, placed beside or below charts or inside cards; they state the measurement basis, sample scope, exceptions, or what the conclusion means. Avoid large stretches of centered copy.
**Grouping logic**: trend charts explain change over time, stacked charts explain composition, tables explain comparison, cards explain cases, and timelines explain stages. Multi-module pages use equal-width columns, equal-height cards, or unified table frames.
**Number of points per page**: one main judgment per page, with 2–4 subordinate supporting points; do not place multiple unrelated conclusions in parallel.
**Body density**: high density is allowed, but text blocks must be short, and chart labels and sources must be kept. Beyond one main chart, prefer left-right columns or two stacked evidence areas.
**Bullet writing**: use traditional dot lists sparingly; prefer chart side-notes, card titles, table column headers, legends, and labels. Emphasize keywords with bold, color-block backing, or locally colored text — no underlines or fancy markers.
**Numbers/units/time bases**: numbers stay close to charts or cards; units, time ranges, and estimation bases go into the subtitle, axes, or footnotes. Estimated ranges may use high-visibility colored text or leader lines.
**Source footnotes**: every data page must have Source/Sources at the bottom; local chart annotations cannot replace the footer source.
## 4. Content Page Layout System
**A. Single large chart + right explanation column**
The left/middle holds a large line, area, stacked-area, or column chart; the right narrow column holds a bold conclusion, key numbers, or legend explanations. Use title highlighting, in-chart annotation points, end labels, or a colored explanation box on the right for emphasis. Not suited to comparing multiple charts with different measurement bases.
**B. Top opinion + full-width chart**
Title on top, chart spanning the full body width, with clear axes and gridlines. Suited to time series, market share, and long-term change; do not overlay too many cards on the chart.
**C. Left-text-right-chart / left-chart-right-text two columns**
Used for "judgment + evidence + explanation." The text column holds short paragraphs, key numbers, and source supplements; the chart column is the main evidence, and the ratio may favor the chart. The text column must not turn into a long article — at most a few key notes.
**D. High-density side-by-side modules/card grid**
Used for cases, companies, process chains or linkages, products, or metric comparisons. Cards are uniform in size, separated by light fills or thin lines; titles are bold black, interiors hold small images, numbers, or short notes; section-color small labels or card background colors may provide emphasis. If every card needs a long explanation, split the page.
**E. Table/matrix-type page**
Used for multi-entity, multi-metric comparison. Clear headers, thin lines and light fills distinguishing rows and columns; key columns may use section color, dark fills, or icon dots. The table is the evidence protagonist and does not compete with a large chart for the same page.
**F. Semi-circle/gauge-style estimation chart**
Used to express range estimates, hierarchical relationships, and nesting from a large population down to a smaller active group. Must pair with numeric labels and leader lines on the left; not suited to precise trend comparison.
**G. Chart + case note card**
Place a specific project/case beside a trend chart. Case cards have light or white backgrounds with slightly rounded/near-rectangular corners, containing the project text name/product image, a short paragraph, and 2–3 key metrics. Case cards are auxiliary evidence and must not overshadow the main chart.
## 5. Color System
**Background — warm rice-white #F2EFE6 / #F5F2E9**: used for page bases, light table fills, and chart backgrounds. Cannot be replaced with pure white or cool gray unless the source image/embedded chart requires it.
**Main text — near-black #111111 / #1A1A1A**: used for titles, body text, key axis text, and the footer brand wordmark. Main titles must not be replaced with light gray.
**Auxiliary text/lines — gray #83817D / #9B9D9D / #C5C0BA**: used for footnotes, sources, gridlines, table separators, and secondary labels; does not carry main conclusions.
**Brand/section green — #52DA92 / #79D497**: used for cover pixel blocks, the disclosure-page background, table-of-contents pixel blocks, section colors, and title keyword highlighting. Large-area use is limited to the cover, table of contents, disclosure, or section pages; on content pages it serves only as small-area highlights, labels, and chart series.
**Deep blue/section dark tones — approximately #342B56 / #39374F / #0B2D3A**: used for section-divider backgrounds, dark chart series, and emphasis blocks. Dark backgrounds use white or bright-colored text; use large areas cautiously on content pages.
**Blue series — #2351EC / #4168C5 / #A4C9FE**: used for chart series, range fills, section colors, and emphasis labels. Light blue may fill large graphic areas; deep blue is used for lines and key series.
**Orange series — #F6A031 / #F6931C / #F9961F**: used for important chart series, labels, positive growth, or one asset/category identifier. Should not appear alongside too many other high-saturation colors on one page.
**Purple/magenta series — approximately #DB76ED / #9D8C7F / #7B3FF2**: used for section dividers, chart series, and label cards; pairs well in contrast with orange/blue, with area controlled on content pages.
**Green chart series — approximately #70AF87 / #2FBF72**: used for area charts, growth trends, and status emphasis. Brand green is for sections/highlighting; data green is for series.
**Per-page color boundary**: content pages are limited to 1 section color + 2–4 data series colors. High-saturation colors are only for data distinction, not casual decoration. No strong system of positive/negative status colors; when expressing rises and falls, prefer legend text explanations and avoid adopting the red-green finance convention.
## 6. Fonts and Text Hierarchy
A strong sans-serif publishing system: titles in Archivo Black (via customFonts; Chinese titles in MiSans Bold), extremely bold, compact, and black; body and footnotes in Liter (Chinese: MiSans); `of` on the cover in Oranienbaum italic.
- **Main title**: approx. 2.5–4x body text, ultra-heavy, tight leading, mainly left-aligned; the cover may be larger.
- **Section-divider title/number**: may exceed 4x body text, bold black or white.
- **Small section label**: approx. 0.7–0.9x body text, all caps or short phrase, often with a small color block.
- **Body explanation**: body = 1x, black or dark-gray short paragraphs with relaxed line spacing; avoid long dense columns.
- **Chart title/subtitle**: approx. 0.9–1.2x body text, bold or semi-bold, placed above the chart.
- **Table text/legend labels**: approx. 0.75–0.95x body text; numbers may be semi-bold.
- **Notes/sources/footer**: approx. 0.55–0.7x body text, gray or low-weight black; must remain readable.
- **Page numbers**: not a prominent navigation device; if added, they should be subdued and folded into the footer — they must not become a visual focus.
## 7. Chart Language
Main chart types: stacked area charts, line charts, column charts, combined column-line charts, semi-circular nested/gauge-style estimation charts, small time series, and comparison charts.
**Axes and grids**: thin, gray axes; light, regular gridlines; warm-white or light backgrounds. Axis labels are small and clear; time axes usually run horizontally.
**Legends and labels**: legends sit at the chart's inner edge or beside the chart, using color blocks/line samples + category names. Key data is labeled directly on the chart or in the right explanation column.
**Series colors**: use high-distinction colors such as orange, blue, purple, green, and light blue. Stacked area charts must keep boundaries discernible; emphasis lines in line charts may be thicker or more saturated.
**Emphasis annotations**: use section-color highlighting, horizontal baselines, explanation boxes, key-number labels, or local colored cards; annotations stay close to the relevant data points and do not float as decoration.
**Forecast/target/baseline lines**: new forecasts use dashed lines/light-shaded ranges and are explained in the legend; do not confuse them with solid historical lines.
**Boundaries**: no 3D charts, perspective charts, glowing charts, or overly skeuomorphic gauges. Axes and sources must not be omitted.
## 8. Tables and High-Density Information
Tables are used for professional evidence and multi-entity comparison. Headers use bold text, light fills, or a top separator line; rows and columns are divided by thin gray lines; fills are warm white, light rice, or light gray; key cells may use section color or dark blocks.
**Row and column rules**: compact row height without crowding; long text left-aligned, numbers right-aligned or visually aligned by decimal point/unit; column titles kept short; multi-column metrics keep unified units and time bases.
**Emphasis treatment**: use highlighted columns, colored labels, bold numbers, dark summary rows, or small dot markers. Highlighting is only for key comparisons — do not pattern the whole table.
**Zebra striping and separation**: prefer thin lines and light-fill zoning; if zebra striping is used, it must be very light. Avoid heavy borders.
**High-density modules**: side-by-side cards, metric blocks, case grids, and tables must all have unified sizes, title levels, and spacing; each module holds only the necessary numbers, notes, and legends.
## 9. Components and Graphic Elements
**Pixel blocks**: made of stepped rectangular blocks, commonly used on the cover, table of contents, and section dividers, and sparingly for navigation. Large-area use is limited to structural pages; on content pages, do not repeatedly carpet pixel blocks as background ornament.
**Section labels**: a small color block + uppercase section name, fixed at the upper left for section positioning.
**Title highlight bars**: semi-transparent or solid rectangles laid behind keywords, with straight edges like a highlighter pen. Highlight keywords or phrases only; never highlight entire body paragraphs.
**Cards/callout boxes**: used for cases, legend explanations, key numbers, and category notes. Rectangular or slightly rounded corners; fill may be orange, purple, dark, or light, with high-contrast text; placed near the corresponding chart.
**Dividers**: thin gray lines for the table of contents, tables, chart grids, and module boundaries. Lines are restrained and straight; no decorative curves.
**Icons/identity marks**: used only sparingly as small category icons; brand/project identifiers are presented as plain small text (write the new topic name) — no graphic logos are drawn. Colorful icons are not a global language; they may only be used in case cards, legends, or project text identifiers.
**Flow arrows/matrix markers**: used for flow or stage explanations; keep them flat, thin-lined, and few-colored; do not build complex flowcharts.
**Image frames**: a small number of product/device images placed inside cards or beside charts, auxiliary only — never full-page backgrounds.
## 10. Texture and Prohibited Items
Overall flat, publication-grade, restrained, high-density, with strong brand-color accents; recognition comes from type weight, the warm rice-white paper, pixel blocks, and section colors — not from photo spreads or dimensional textures.
**Prohibited**: large-area photography backgrounds, complex illustration backgrounds, emoji, 3D charts, glow effects, glassmorphism, strong drop shadows, complex textures, lace ornament, casual gradients, large stretches of centered copy, unsourced data charts, low-contrast light text, and pure-image pages with no title judgment.
**Use with caution**: colorful icons, product screenshots, rounded cards, full-page dark backgrounds, gradient fills, strongly saturated multi-color charts. They must serve an information function and be confined to case/chart/section-page scope.
**Special pages allowed**: full-page high-saturation green for disclosure; full-page deep blue/purple/green backgrounds for section dividers; large-area pixel blocks on the cover and table of contents; a small number of physical/product images on case pages. Ordinary content pages still center on warm-white backgrounds and data evidence.
## 11. Generation Checklist
- Skeleton: is it 16:9; does it keep the upper-left section label, the top opinion title, the body evidence area, and the bottom brand wordmark/source/copyright?
- Copy: is the title a complete judgment sentence; is there one main point per page; is keyword highlighting restrained?
- Hierarchy: do the title, chart titles, body text, notes, and footer have clear relative size differences; page numbers are not used as primary navigation.
- Color: is the background warm rice-white; are section colors used only for recognition/emphasis; are there too many high-saturation colors on one page; is text contrast sufficient?
- Layout: are charts, tables, and cards aligned; are margins stable; is the footer not squeezed by the body?
- Charts: do they have axes, legends, units, time ranges, and sources; are emphasis annotations close to the data; no 3D/glow/meaningless decoration used?
- Tables: are headers, dividers, number alignment, and unit bases clear; is highlighting used only for key rows and columns?
- Components: are pixel blocks used only on the cover/table of contents/section dividers or for sparse navigation; do cards serve explanation; do icons have real-object meaning?
- Prohibited items: no large image backgrounds, emoji, complex illustrations, heavy shadows, glassmorphism, excessive gradients, or large stretches of centered copy.
- Quality: check overflow, truncation, garbled text, overlap, low contrast, occlusion, empty content, wrong proportions, and mechanical template repetition.
- No default use of cards: 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 and font-size differences are better solutions.
- No equal-division composition: unless no other layout is available, do not default to three-way splits, four-way splits, or 2×2 matrices — including three-part structures such as three-way split + title + conclusion.
@@ -0,0 +1,192 @@
# Design System: Consumer Trend Monitor · Landscape Presentation Edition
> Reverse-engineered from: the real visual evidence of a 36-page portrait (US Letter 612×792) investment-monitoring quarterly (cover + page-by-page images of all 35 pages).
> This system keeps only its **visual methodology** — newspaper-style grids, serif headlines mixed with data charts, a teal/amber/crimson chart language, and paper-beige footers —
> it does not copy any third-party logo, brand name, trademark, or source text; per the task requirements, the portrait report grammar is converted into a 16:9 landscape presentation system.
> Any value that cannot be confirmed precisely from pixel evidence is marked "approximate."
---
## 1. Visual DNA (One Sentence)
**A financial-newspaper-style data-monitoring report**: a restrained black-on-white layout + large serif headlines + dense column-line combination charts + a deep-sea-blue cover and beige footers; the overall temperament is a "trustworthy industry dashboard," not a marketing poster.
Four executable principles:
1. **Conclusions spoken in italic serif, evidence given by charts** — every information block is a pairing of "italic serif conclusion sentence + chart/body text."
2. **Charts are the protagonists**: page area goes to charts first; text is the charts' annotation.
3. **Color only encodes, never decorates**: teal = primary series, dark teal = secondary series, amber/yellow = comparison lines, crimson = warning or second theme, beige appears only in the footer and separator bands.
4. **Dense but not crowded**: small type, multiple columns, tight leading — but with clear whitespace between modules.
---
## 2. Canvas and Grid (16:9 Landscape Conversion)
| Item | Value | Note |
|---|---|---|
| Canvas | 960 × 540 px | 16:9 presentation standard |
| Left/right margins | 44 px | Source portrait margins ≈ 7% of page width, carried into landscape (approximate) |
| Content area | y = 20 ~ 508 | Above the beige footer band |
| Footer band | y = 512 ~ 540 (28 high) | Beige horizontal band, see §9 |
| Column system | 12-column mental grid, commonly split into 2 / 3 columns; gutter 24 px | Source body uses a fixed 3 narrow-column layout |
| Baseline rhythm | multiples of 4 px | All spacing takes multiples of 4 (approximate) |
Portrait → landscape conversion rules:
- Source "full-page large image + three-column body below" → landscape becomes "left 60% chart + right 40% text column" or "chart on top, text below, chart spanning the full width."
- Source 2×2 chart-matrix pages (vertically arranged) → landscape becomes a natural 2×2 grid — a native fit.
- The source's only landscape page (regional map + stacked bars on both sides) proves this system supports landscape; align density to that page.
---
## 3. Font Hierarchy
Map Chinese fonts as follows (font names must exactly match the library):
| Role | Font | Size / style | Usage | Evidence |
|---|---|---|---|---|
| Display serif | `{latin: Oranienbaum, ea: 思源宋体}`, bold | cover 40~48 / page title 26~28 | Cover main title, each page's large headline | Source titles are Georgia-type bold serif (approximate mapping) |
| Conclusion line / chart title | same as above, italic + bold | 14~15 | Each page's conclusion line, each chart's italic title | Source chart titles are italic serif (approximate) |
| Sans-serif body (Sans) | `MiSans` | 10~10.5, line height 1.45~1.5 | Multi-column body, legends, axis labels | Source body ≈ 9px sans-serif in three columns (approximate) |
| Eyebrow | `MiSans`, letterSpacing 2~3 | 9~10, all-caps feel replaced with bold | Column identifier above the page title | Source "DEALS BY SECTOR"-style small-type eyebrows |
| Data labels | `MiSans` bold | 9~10 | Values inside columns / on lines | Source white bold values inside columns |
| Big numbers (Stat) | display serif bold or MiSans bold | 28~36 | Key metric cards | Source back-cover and inner-page big-number treatment (approximate) |
| Footer / source note | `MiSans` | 8~9, gray | Footer-band text, under-chart source notes | Source footer's small uppercase gray type |
Rules:
- Within one page, serif is used only for "titles + conclusion lines + chart titles"; body text and chart annotations are always sans-serif.
- No fonts beyond the two families above; no calligraphic/handwritten faces.
---
## 4. Color Tokens (Hex; all are pixel-sampled approximations)
| Token | HEX | Role | Sampling basis |
|---|---|---|---|
| `ink` deep sea blue | `#06223F` | Cover/section-page base, table headers, darkest chart series, emphasis text | Cover base #051C38, header #2C4057, darkest map state #001830 |
| `ink-soft` | `#14324F` | Deep-blue auxiliary (cards, secondary headers) | approximate |
| `teal` | `#2FBFC4` | Primary-series column color, main line, emphasis icons | Main-chart columns #30C0C0~#3CC0C0 |
| `teal-dark` dark teal | `#1B6E72` | Secondary-series columns, second stacked segment | Dark-teal columns #186C6C~#246C78 |
| `teal-pale` light teal | `#BFE5E6` | Lightest stacked segment, light area-chart layer, chart background blocks | Light-teal segment #C0E4E4 |
| `amber` | `#D9A62E` | Comparison line (the "line" in column-line combos), growth-rate annotations | Gold line #CCA80C~#E4C09C |
| `yellow` bright yellow | `#DCC83C` | Single-series yellow columns (industry-page primary color), stacked segments | Yellow columns #D6D470~#CCA80C |
| `orange` | `#E5862E` | Third-theme column color, stacked segments | Orange columns #E48430 |
| `crimson` | `#76101A` | Warning / second-theme column color, dark stacked segments | Deep-red columns #6C0000~#780C0C |
| `salmon` | `#F0A89A` | Middle stacked segment (between crimson and light teal) | Pink-segment sample #FEF1EE brightened estimate (approximate) |
| `slate` slate blue | `#5E84A0` | Map/chart mid-tones, auxiliary lines | Mid-tone map state #60849C |
| `paper` paper white | `#FFFFFF` | Content-page base | — |
| `beige` | `#EDE7D6` | Footer band, horizontal separator bands, note-box fills | Footer band #EFEBDE |
| `beige-line` | `#D8D2C2` | Top edge of beige band, thin table lines | Band edge #D2D1C9 |
| `text` body ink | `#262626` | Body text | approximate |
| `muted` gray | `#8A8A8A` | Axis labels, legends, source notes, footer text | approximate |
| `grid` grid gray | `#E7E7E7` | Table outer frames, thin dividers | approximate |
Contrast floor: on `ink`, only white/light-teal text; data labels on deep `teal`/`crimson`/`orange` columns are white or placed above the column in dark gray; on the beige band, only text at `#6B6B6B` depth or darker.
---
## 5. Page Skeleton (Common to Content Pages)
```
┌─────────────────────────────────────────────────────────────────────┐
│ ▪ wordmark "Specialty Coffee Consumption Monitor" │ ← header row y≈20~44
│ version at right: 2026 Annual Insights · sample setting │
│ │
│ Eyebrow (9px, wide letter spacing, gray) │ ← y≈56
│ Serif display headline 26~28px │ ← y≈74~104
│ Italic serif conclusion line 14px (the page's only conclusion) │ ← directly under the title
│ │
│ ┌────────────────── content area y≈130~486 ────────────────────────┐ │
│ │ chart / multi-column body / table / cards (choose layout per §6) │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ page number (centered, 9px serif gray) │ ← y≈496
│ ▔▔▔▔▔▔▔▔▔▔ beige footer band: report name centered 9px ▔▔▔▔▔▔▔▔▔▔ │ ← y≈512~540
└─────────────────────────────────────────────────────────────────────┘
```
- Header left wordmark: a solid teal small square (10×10) + the bold sans-serif report name; on the right, a small gray version identifier. **Any real brand logo is forbidden.**
- The page number is centered just above the beige band (source style); the footer band holds the centered full report name in small type.
---
## 6. Reusable Layouts (8)
1. **Cover (deep sea blue)**: full-bleed `ink` base + concentric thin arcs/thin-line signal pattern on the right (low-opacity blue-gray elliptical strokes, entirely within the canvas) + large serif headline (may mix italic and roman) + one line of version info + a bottom key-numbers band (3 stats, teal/white text).
2. **Conclusion page (cover variant)**: same skeleton as the cover, but the headline is the page's conclusion sentence, with 3~4 data stat bands below as evidence.
3. **Large chart + text column**: left 55~60% holds one column-line combination chart (with italic chart title + legend + source note); right 40% holds one body-text column + one stat card or small chart.
4. **Full-width chart + three-column body**: a full-width combo chart on top (occupying 45~50% of the height), three columns of 10px body text below, each column optionally opening with a bold lead-in sentence.
5. **2×2 chart matrix**: one small chart per quadrant, each with "italic serif chart title + small-type subtitle + chart + source note," with 24px whitespace between quadrants.
6. **Horizontal bars + right stat track**: left 60% a horizontal-bar ranking chart; right 40% a vertical stack of 2~3 stat cards (beige or light-teal fills, large serif numbers + small-type notes).
7. **Comparison paired columns + interpretation column**: left-of-center comparison chart with 2~4 large columns (values labeled above and outside the columns), one interpretation-text column on the right + one "x-fold difference" arrow annotation.
8. **Table page / card page**: a dark-teal-header white-text table (see §7) or 2~3 equal-width action cards (card = light-teal top bar + serif subtitle + sans-serif body + bottom data-anchor chip).
---
## 7. Chart and Table Language
### Charts in general
- Chart title: italic serif bold 14px `ink`, left-aligned; the line below is a 9px gray subtitle (metric basis).
- Axes: no y-axis gridlines (`gridLine: false`), no axis lines or only a thin `#E7E7E7` baseline; axis labels 9px `muted`; currency axes carry unit abbreviations.
- Legend: horizontal below the chart, small color swatches + 9px gray text.
- Source note: 8px gray text at the chart's lower right — "China Specialty Coffee Consumption Trend Monitor · sample data (internal estimates)."
- Value labels: 9~10px; column-series labels preferably white bold inside the column, or dark gray above the column when they do not fit (if the renderer does not support position control, place them uniformly above and outside, treated as an approximation of the source).
- Line-series labels sit above the endpoints, in `muted` gray.
### Chart-type recipes (ordered by evidence frequency)
1. **Column-line combination (this system's signature chart)**: solid columns (one of `teal` / `crimson` / `orange` / `yellow`) + a contrasting thin line (`amber` or `teal`), dual axes; columns labeled with amounts, the line labeled with counts/ratios.
2. **Multi-line**: 4~5 thin lines of 1.5~2px, color order `ink`→`teal`→`amber`→`crimson`→`slate`, with endpoint values labeled directly at the right ends.
3. **100% stacked bars**: segment colors per theme from `teal`/`teal-pale`/`salmon`/`crimson` or `teal`/`teal-dark`/`ink`, with white % text inside segments.
4. **Horizontal-bar ranking**: single color family (`teal` or `ink`), values labeled at bar ends, category axis on the left.
5. **Layered area**: `ink`→`teal-dark`→`teal`→`yellow` bottom to top, used only for "stock accumulation" semantics.
6. **Comparison paired columns**: two same-family columns in dark and light, with a "x-fold difference" arrow and text between them.
### Tables
- Header: `ink` background, white bold 9~10px text, left-aligned (numeric columns right-aligned).
- Data rows: white background, only a `#E7E7E7` 0.75~1px baseline between rows, no vertical lines, no zebra striping (source tables have no zebra striping).
- Row height 22~26px, cell padding 8px left and right.
- Tables also get a source note below.
---
## 8. Image Cropping and Graphic Components
- **Images**: only covers/section pages may use full-frame images, always `fit: cover` full-bleed cropping; portrait images in landscape take only the middle band (`crop: {top, bottom}` trimming 15~25% each); content pages use no photos — charts and graphic components substitute. Source portraits are right-column small squares (about 120×150) + a gray-text bio; use a same-spec placeholder only when genuinely needed.
- **Signal pattern (cover decoration)**: 3~4 concentric elliptical thin strokes (`slate`/`teal`, opacity 0.15~0.3), all bounds within the canvas; or one 2px teal "pulse" polyline.
- **Stat cards**: `teal-pale` or `beige` fill (no stroke, no shadow), large serif `ink` number + 9px gray note; on deep-blue pages switch to a transparent fill + teal big numbers.
- **Action cards**: white base + a 4px `teal` solid top bar + serif subtitle + 10px body + bottom data chip (`beige`-filled rounded small type).
- **Icons**: only Font Awesome free solid (`fas:`), single color `teal` or `ink`, 16~20px, no mixed styles.
- **Separation**: always a 1px `#E7E7E7` thin line or whitespace; no shadows, no gradient blocks (except the cover signal pattern).
---
## 9. Density, Spacing, and Footers
- Information density aligns with the source: 1 conclusion + 1~2 charts + no more than 3 columns of body text per page; body 10px, line height 1.45, paragraph spacing 6~8px.
- Module spacing: title area → content area 20~24px; chart-matrix quadrants 24px apart; cards 16~20px apart.
- Footer: a beige band (`beige`, 28px high) spans the full width, holding the centered 9px `muted` report name "China Specialty Coffee Consumption Trend Monitor · 2026"; the page number is 9px serif gray centered 6px above the band.
- The lower-right chart note on every page uses the unified §7 source-note phrasing.
---
## 10. Do-Nots
1. No third-party logos, brand names, sponsor marks, trademarks, or source-manuscript original text.
2. No pie/donut charts for share rankings (the source has no pie charts at all); shares always use 100% stacked bars or horizontal bars.
3. No shadows, gradient fill blocks, frosted glass, 3D charts, or animation-flavored chart decoration.
4. No cards with corner radius greater than 8px; chart columns stay right-angled.
5. No text pressed over images, and no chart elements bleeding outside the canvas (all bounds must stay within 960×540).
6. No large-area beige fill in body areas outside the beige footer band; beige is only a "band," never a "block."
7. No fabricated numbers: all values must come from the task query; qualitative judgments must be marked "internal judgment."
---
## 11. Pre-Delivery Checklist
- [ ] Every page has one and only one explicit conclusion, presented as an italic serif sentence directly under the title.
- [ ] The 6 pages form a complete narrative: conclusion → market structure → consumer segmentation → channel and membership economics → opportunity map → action recommendations.
- [ ] Every number can be traced one-to-one to query.md; nothing fabricated, no external data.
- [ ] All colors come from the §4 tokens; chart coloring follows the §7 recipes; no gradients/shadows.
- [ ] Only two font families: serif `{Oranienbaum, 思源宋体}` and sans-serif `MiSans`; sizes follow §3.
- [ ] The header wordmark, beige footer band + page number, and under-chart source notes are present on every page at consistent positions.
- [ ] `kimi-ppt check` reports no errors; page-by-page screenshots show no overlap, no cropping, no overflow, no unexpected line wraps; dark-background white-text contrast passes.
- [ ] Final directory: `deck.pptx` (the only PPTX) + the complete PPTD bundle + `final-screenshots/pages/1.jpg~6.jpg`.
- No default use of cards: 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 and font-size differences are better solutions.
- No equal-division composition: unless no other layout is available, do not default to three-way splits, four-way splits, or 2×2 matrices — including three-part structures such as three-way split + title + conclusion.
@@ -0,0 +1,163 @@
# Organization Name — Q2 2025 Crypto Industry Report STYLE DESIGN SYSTEM
## 1. Style Positioning
A dark, data-driven PPT design system for quarterly crypto-industry research reports, aimed at professional readers fluent in metrics across markets, assets, trading volume, ETFs, DeFi, NFTs, and exchanges, supporting high-density data, longer explanatory text, and multi-series charts. The body adopts a dark research dashboard with Organization Name's green visual identity; the cover, section dividers, and product/closing pages use high-saturation green or purple frames, large rounded cards, and mascot illustrations.
The whole deck is a 16:9 landscape canvas; content pages use a near-black background with white ultra-heavy sans-serif titles (Archivo Black, via customFonts), body and footnotes in Inter (via customFonts); the header holds a fixed small brand wordmark; the footer contains the report name, copyright, sources, and page numbers. Main content includes line, column, stacked-column, and area charts, timelines, tables, and text lists/avatar matrices; accent colors are fluorescent green, purple, pink, yellow, and other high-saturation colors.
Underlying principles:
1. **Data over decoration.** Pages prioritize charts, tables, numbers, and explanatory text; illustrations, borders, bright colors, and identity marks are used only for brand recognition, classification, emphasis, or section transitions.
2. **Body-skeleton consistency over layout showboating.** Ordinary data pages keep the black background, upper-left brand mark, white title, insight line on the right or above, and bottom sources and page numbers; large-area green/purple brand pages appear only at the cover, section dividers, product, or closing positions.
3. **Accent colors must carry semantics.** Fluorescent green is used for the brand, positive/growth values, key series, or button-like components; purple/pink for insight lines, section transitions, and special annotations; red only for negative change or risk-type data. If bright colors hinder reading values, prioritize the clarity of axes, labels, units, and legends.
## 2. Page Skeleton
The canvas is 16:9 landscape widescreen. Content-page backgrounds are pure black or near-black; covers/section/closing pages use a bright-green outer background, or a purple outer frame with a dark rounded inner card. Keep stable margins with no key data at the outer edges; high-density pages may approach full-bleed, but the header, title, and footer must keep their safety zones.
**Cover page**: bright-green outer background with a large deep-green rounded card at the center, and a notch-style split or dual-card structure at the top. The upper left holds the identity mark — plain small text with the new topic name, or left blank; no graphic logo is drawn. The main title is huge, the year or keywords may be layered with a dark-green/light-green gradient feel, and the report name is in white/light green; the lower middle holds the Organization Name mascot illustration, a thin-line trend line, and halftone dots; the sponsor text list sits at the right or lower right, smaller in area than the main title and the mascot.
**Table of contents page**: black background with a large "Content"-style title at the upper left; the body is a multi-column contents list, with level-one section titles larger and white, entries in small white/gray text, and page numbers right-aligned; author avatars, names, and titles may sit below. The contents page uses no large charts and little decoration.
**Section dividers**: a bright-green or purple outer frame/background, with a large deep-green or deep-blue-black rounded card inside. The left holds the section name and a small label; the right or bottom holds the large Organization Name mascot and theme graphics. Section titles take the dominant level, with minimal information.
**Content data pages**: a fixed small brand wordmark at the upper left, with the white page title below it or to its right; the title area occupies a compact horizontal band at the top. The insight line sits to the right of the title, at the page's upper right, or atop the explanation column, usually opening in purple and continuing in gray-white text. The body may use a single large chart, left-right columns, chart + explanation column, a timeline, a table, or a matrix. The bottom left holds the report name/copyright, Source sits below the chart or at the lower left, and the page number sits at the lower right. Reading path: brand and title → purple insight line/key information line → main chart or table → explanatory text/legend → source and page number.
Dividers are used only for chart axes, table lines, card borders, and timeline rules — no heavy header rules are set. Content pages use no watermarks or large background graphics; backgrounds stay clean.
## 3. Content Organization
Titles are object-type or metric-type, such as "a certain asset's price and trading volume," "a certain market share," "notable events," or "exchange trading volume," responsible for topic positioning; conclusions are expressed by the insight line. Titles should be 1 line, 2 lines if necessary; avoid more than two lines, which compresses the chart area.
Each page prioritizes one information line, located to the right of the title or atop the explanation column, structured as "key change/conclusion + data definitions and measurement basis/time range + cause or impact." Use purple to highlight the opening phrase or core number, with the rest in gray-white. Do not stack multiple conclusions into one paragraph; each page prioritizes one main judgment.
The body uses short paragraphs and bullets, usually in the narrow column to the left or right of a chart; each paragraph explains one cause, data finding, or impact. Keep paragraphs broken and line lengths moderate; the text column in left-right layouts exists to explain the chart and does not become a long article on its own.
Group by market category, asset class, time, platform, chain, exchange, or metric definition and basis. High-density pages use subtitles, labels, legends, colored series, and thin-line separation. A single page carries one core question; it may contain multiple data series, but must not discuss multiple unrelated topics at once.
Numbers and units stay close to data labels or axes, retaining the relevant formats and units — percentages, dollars, multiples, dates, and quarters. Time axes remain continuous and readable; big numbers may be highlighted in the insight line or chart annotations. Source footnotes sit below charts or in the footer, in small gray-white text that does not compete with the main data.
## 4. Content Page Layout System
**A. Left explanation column + right large chart**
Suited to single-theme time series such as price, trading volume, index, and capital flows. The left column holds the title, insight line, 2–4 explanation paragraphs, and the source; the right large chart occupies most of the body width, complete with axes, legend, and data annotations. Emphasize with bright lines, peak labels, vertical annotation lines, or key-point text. Not suited to table-type content requiring extensive categorical comparison.
**B. Top title-and-insight + full-width chart below**
Suited to horizontal time-axis charts such as multi-series lines, stacked columns, and market-share change. A compact title and one insight line sit on top; the main chart spans the page; the legend stays near the chart's top or right, and series colors keep high contrast. If there is too much explanation, switch to left-right columns to avoid compressing chart height.
**C. Large chart + right annotation/sponsor/note column**
Suited to pages needing supplementary event background, such as IPOs, ETFs, and trading volume. The main chart sits on the left or in the middle; the right narrow column holds short notes, wordmarks, or secondary legends; the right column must not exceed the main chart in width. This layout is not suited to multiple long paragraphs or multiple unrelated wordmarks.
**D. Timeline/event-band layout**
Suited to "Notable Events"-type content. Use multiple rows of horizontal date bars; date blocks distinguish periods or categories with high-saturation green, pink, purple, etc., with small-size event notes beneath; the title area is minimal. Do not add complex charts; event copy must be short — long explanations break the timeline rhythm.
**E. Table/ranking/matrix page**
Suited to asset returns, stablecoins, exchanges, chain ecosystems, and team or platform comparisons. The body uses dark tables, ranking bars, text lists, or multi-column cards; a note column may sit on the left, and colored bars, dots, icons, or text color highlight positive/negative change inside the table. This layout suits high-density classification, not continuous trends.
**F. Brand/product/section-style body variant**
Uses green or purple cards, buttons, screenshot-style interfaces, and the mascot for product promotion, section intros, or closing pages; lower information content than data pages. Must not be abused as a template for ordinary research pages.
## 5. Color System
**Background black / near-black #000000–#080808**: the main background of content pages, largest in area. Cannot be replaced with light colors; even if the new theme uses a brand color, keep body backgrounds dark.
**Deep-green cards #183F2D / #1A412E**: the main base color of covers, section dividers, and brand cards, usually paired with bright-green outer frames. Brand pages may use it over large areas; ordinary content pages use only small amounts for labels or borders — it should not replace the black background over large areas.
**Fluorescent green #A6F05F / #9EE45A / #4BCC00**: used for the cover outer base, section frames, identity marks, positive values, key data lines, button-like labels, and a few chart series. Area may be large on brand pages and small-to-medium on content pages. It may be replaced with a new brand primary color, but must keep dark-background high contrast and consistent "positive/key" semantics.
**White #FFFFFF / light gray-white #DDE5E0**: used for titles, key labels, main axis text, and high-priority numbers. Cannot be replaced by low-contrast colors.
**Gray-blue/gray-green text #8A9492 / #B9BCA6 / #808963**: used for body text, notes, secondary legend text, axis labels, sources, and footers; low brightness, but never so low as to be unreadable.
**Purple #7A54FF / #6B4CFF**: used for section dividers, insight-line openings, key lines, labels, and brand variants, at small-to-medium areas; it does not represent positive/negative status by default.
**Pink #F19EE2 / #F4A0E5**: used for event timelines, chart series, and emphasis blocks, at small areas, expressing categories. Avoid large simultaneous use with purple, which becomes garish.
**Yellow #FAEB6A / #E7D84A**: used for column charts, key values, event or return-type series; not for long text passages.
**Red/coral #FF5A6A / #BE827F**: used for negative returns, declines, risks, or negative values. For status/data only, never as decoration.
Content pages keep their main hues to black-white-gray + 1 brand accent + 2–4 data series colors. Multi-series charts may add colors, but legends must stay clear; color serves classification/status only — no meaningless decoration.
## 6. Fonts and Text Hierarchy
Fonts are modern sans-serif: titles use Archivo Black (via customFonts); body is dominated by Inter (via customFonts), with weights handled through the bold field. Do not mix in serif or handwritten fonts; special sponsor/logo fonts exist only as images or marks.
With body note text = 1x:
- **Cover main title/year**: approx. 4–6x, bold or semi-bold, tight letter spacing allowed.
- **Section titles**: approx. 3–5x, white or light green, usually 1–2 lines.
- **Content-page titles**: approx. 2–3x, white, medium-bold to bold.
- **Insight line/information line**: approx. 1.4–2x, usually medium-bold, purple keywords + gray-white continuation.
- **Subtitles/group titles**: approx. 1.1–1.4x, medium-bold or semi-bold, white/light gray.
- **Body paragraphs and bullets**: 1x, regular weight, gray-white or gray-blue.
- **Table text/chart labels**: approx. 0.7–1x, compress per space, keeping numbers readable.
- **Footnotes, sources, footers, page numbers**: approx. 0.6–0.8x, gray, low-level but never absent.
Numeric labels use the same fonts as body text, with increased weight or a different color; no ornamental numeral forms. Titles and body build hierarchy through size, weight, and color, without relying on shadows or strokes.
## 7. Chart Language
Core charts include line charts, column charts, stacked columns, area charts, dual-axis price/volume charts, horizontal-bar rankings, timelines, share/market-share charts, donut/pie mini-widgets, and tabular leaderboards.
Charts use dark bases; axes and gridlines are low-brightness gray thin lines; no white-background chart boxes. Main data lines use high-contrast colors such as fluorescent green, yellow, purple, pink, and cyan; secondary series lower saturation or line width. Column charts use bright columns against the dark grid, and volume columns may combine with price lines. Multi-series stacked columns need clear legends, placed above the chart, to the right, or in empty chart areas.
Key data uses peak/trough labels, vertical event lines, endpoint values, local text annotations, color brightening, and red for negative values. Annotations stay close to their points and should not form long passages. Forecasts, targets, or baselines use dashed/thin lines and explicit labels, distinguished from historical data; never let a forecast line blur into an actual line.
Axes keep units and time bases — especially dollars, percentages, quarters, dates, and trading volume. Gridlines must be thin, dark, and few; no heavy borders. The page title states the chart's subject; the chart itself keeps only the necessary subtitle and legend, avoiding repetition.
## 8. Tables and High-Density Information
Tables are used for rankings, asset comparisons, exchange/chain/protocol metrics, returns, market share, and team/author information. They adopt a dark-base, high-density style: headers in white or light-gray medium-bold text, row-column dividers in low-brightness thin gray, and cells usually without obvious fills; when necessary, use dark gray/deep green for light zoning.
Number columns are right-aligned or visually aligned by decimal point; text columns left-aligned; name columns may add small icons or circular token placeholder blocks. Positive/negative values are distinguished in green/red; rankings or strength may use horizontal bars, color-block lengths, heat colors, or small dots. Summary rows or key rows use brighter text, thin borders, or a light fill — but no heavy highlight fills.
High-density side-by-side modules use cards, column groups, text lists, or small chart collections. Each module keeps a title, a key value, and one minimal explanation; modules are separated by alignment, spacing, and thin lines — no large shadows. Zebra striping is not a primary language; extremely low-contrast dark gray may be used cautiously, and where dividers suffice, no zebra striping is added.
If a table exceeds what one screen can scan, split it into multiple pages or focus on the Top N — do not compress it into illegibility.
## 9. Components and Graphic Elements
**Brand wordmark header**: fixed at the upper left of content pages, small in size, white brand word + green "Research." Keep it on new pages; do not enlarge it into decoration.
**Insight line component**: purple keyword/opening + gray-white explanation, located to the right of the title or atop the body column; at most one main insight per page — avoid multiple purple sentences competing.
**Rounded brand cards**: covers, section pages, and product pages use large rounded deep-green/deep-blue cards with bright-green or purple outer frames. Content data pages do not by default frame all content in large cards.
**Labels/badges**: used for section codes, asset symbols, button-like CTAs, or chart categories; outlined rounded rectangles or bright fills with short text. Cannot carry long sentences.
**Thin dividers and axis lines**: low-brightness gray lines for tables, charts, and timelines; thin and restrained — no decorative thick lines.
**Event timeline blocks**: horizontal date color blocks + event notes beneath, colored by date period or category. Suited to event lists, not numeric trends.
**Text lists/avatar matrices**: used for contents-page authors, sponsors, exchanges, ecosystem projects, etc.; institution names are presented as text lists or neutral placeholder blocks, avatars may remain; unified sizes, alignment, and label text. Do not mix in colorful icon decoration; no graphic logos are drawn.
**Mascot illustrations**: the Organization Name green/purple character is used on covers, section dividers, and closing pages. On ordinary data pages it may appear only on special brand/product pages, and must not cover charts.
## 10. Texture and Prohibited Items
Overall flat, dark, data-driven, and restrainedly branded; content pages rely on color contrast, type-size hierarchy, chart density, and alignment — not photography, complex textures, shadows, or 3D.
**Prohibited**: on ordinary content pages, large-area photo backgrounds, complex gradient backgrounds, 3D graphics, glowing strokes, emoji, garish illustrations, decorative colorful icons, large stretches of centered copy, heavy shadows, low-contrast gray text, unsourced charts, unit-less numbers, or decorations covering axes.
**Use with caution**: rounded cards, large-area bright-green bases, large purple blocks, text lists, avatars, screenshot-style interfaces, donut mini-charts, zebra-striped tables. They must serve an information function or a brand-node function — never added just to fill whitespace.
**Special pages allowed**: covers, section dividers, product pages, and closing pages may use the mascot, large rounded cards, bright-green/purple outer frames, halftone dots, trend-line backgrounds, and sponsor text lists. Even on special pages, keep the title readable and never let brand elements overshadow the main information.
Images/screenshots are not the core language of the body; if they must be used, place them within fixed boundaries with a title and a source — no fullscreen photographic storytelling. If gradients appear, they are limited to subtle treatment of the cover title or brand atmosphere, not a body-background system.
## 11. Generation Checklist
- Skeleton: is it 16:9; are content pages black-based; is there a small brand wordmark at the upper left; does the footer include the report name/copyright, sources, and page numbers?
- Copy: is the title a clear object/metric; is there only one main insight per page; is the body in short paragraphs or bullets; do numbers carry units, time ranges, and measurement bases?
- Hierarchy: are the title, insight line, body, chart labels, and footnotes separated by relative sizes and colors; is dependence on specific font sizes avoided?
- Color: does it stay at black-white-gray + fluorescent green/purple + necessary data colors; are positive/negative states clearly green/red; are there too many bright colors on one page?
- Layout: does the main chart/table occupy the largest area; does the explanation column assist the chart; is there meaningless whitespace or overcrowding?
- Charts: are axes, units, legends, gridlines, data labels, and emphasis annotations complete; are multi-series colors distinguishable; are forecasts/baselines marked?
- Tables: are headers, alignment, dividers, key rows/columns, and positive/negative colors consistent; is text readable; is over-compression avoided?
- Components: do rounded cards, labels, timelines, wordmarks, and the mascot appear only on appropriate pages; do they serve information rather than decoration?
- Prohibited items: no photo backgrounds, emoji, 3D, glow, heavy shadows, complex textures, meaningless icons, or large stretches of centered copy.
- Quality: check overflow, truncation, garbled text, overlap, low contrast, occlusion, empty content, wrong chart proportions, missing page numbers, missing sources, and mechanical template repetition.
- No default use of cards: 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 and font-size differences are better solutions.
- No equal-division composition: unless no other layout is available, do not default to three-way splits, four-way splits, or 2×2 matrices — including three-part structures such as three-way split + title + conclusion.
@@ -0,0 +1,172 @@
# F001 · Tech-Style Orange Annual Report & Business Insight Plan Proposal PPT Template STYLE DESIGN SYSTEM
## 1. Style Positioning
Suited to formal business reports such as annual performance reviews, business insights, business retrospectives, strategic plan proposals, and investor/management updates. Aimed at readers with business and data backgrounds, it presents conclusions through large titles, key numbers, charts, tables, and short explanatory paragraphs.
Information density is moderate and restrained: white-background content pages keep generous whitespace, usually holding only one main chart or structured module with short cards beside it; table pages and roadmap pages may be locally high-density, but avoid full-bleed packing.
- White/light-gray content pages are used for data analysis;
- Orange is the only high-saturation primary accent, used for charts, key numbers, circular relationship diagrams, nodes, and light effects on black backgrounds;
- Black-background pages use orange gradient light bands, concentric-circle/arc wireframes, and minimal text, for covers, transitions, quotable lines, and closing pages.
Underlying principles:
- **One page sets only one visual anchor.** A large title, a core percentage, a circular relationship diagram, a column chart, a donut, a table, or a quotation takes the lead — the rest is an explanation layer.
- **Brand orange serves information hierarchy, not decorative stacking.** It is used first for data series, key rows, nodes, keywords, and important numbers; large-area backgrounds use white, near-black, or light gray.
- **Structural clarity over information exhaustiveness.** Keep the conclusion, key metrics, and a few supporting points; complex details are split into separate pages or demoted to notes — do not fill the picture with body paragraphs and small labels.
## 2. Page Skeleton
The canvas is 16:9 landscape widescreen. It uses wide margins, low-noise backgrounds, and left-right columns; the common reading path is "upper-left title → center/left main visual → right explanation cards/numbers → bottom footnotes." The main body sits in the middle of the picture with clear whitespace on all sides, avoiding edge-hugging arrangements.
### Cover/closing page skeleton
- A near-black full-page background, with an orange gradient light band at the bottom or at the top and bottom edges; locally overlaid dark rectangular frames, thin-line concentric circles, or arc textures.
- A small brand mark sits at the upper left; the main title is centered or nearly centered, may break into multiple lines, and may include slight type variations; the tagline and signature sit at the bottom or lower right, far smaller than the main title.
- A central dark transparent frame may carry the title, but must not form a heavy border.
### Black-background section/quotable-line page skeleton
- Near-black background, orange glow, text centered or nearly centered, extremely low content volume.
- Low-contrast concentric-circle wireframes may form a focus, without competing with the text's level.
- Does not carry complex charts, tables, or dense small type.
### Regular content page skeleton
- White or very light gray-white background; the upper left is the title area, with a short note allowed under the title.
- Charts or structural diagrams go on the left/in the middle; explanation cards, key numbers, or short paragraphs go on the right.
- Light-gray thin lines, table lines, and timeline lines serve organization only — they are not the decorative protagonists.
- Page numbers have no stable, prominent style and should not be force-generated; sources/footnotes use tiny gray text at the bottom or near the chart.
### Table of contents/navigation and watermarks
The source file shows no strong table-of-contents page and no persistent header navigation; do not add progress bars, section navigation, page-number bars, or large watermarks by default. Section cues use black-background transition pages, not top navigation on every page.
## 3. Content Organization
Titles lean toward concise business phrases, usually noun groups of 2–3 words or short topic names, such as overview, financials, revenue breakdown, timeline, product performance, next steps, etc. The tone is calm — no exaggerated questions or marketing slogans; regular-page titles sit at the upper left, while section/quotable-line pages may be centered.
Information comes in three layers:
- **Manifesto/quotation lines:** used for the opening after the cover, quotable lines, and closing pages; significantly larger than body text, may break into 2–4 lines, local italics allowed.
- **Short explanatory paragraphs:** under the title or beside the chart, explaining the page's purpose, the conclusion's background, or metric meanings.
- **Card key points:** in the right explanation area, usually 2–4 items, each a subtitle/keyword + one sentence of explanation.
One page = 1 main conclusion + 2–4 supporting points. Lists should not exceed 4 items; timelines are most stable at Q1–Q4 or 3–4 stages; circular relationship diagrams center on 3 circles or 3 nodes. The body stays in short paragraphs, avoiding long stretches of centered layout. Keywords may be emphasized with orange text, small black capsule labels, bold sans-serif, orange numbers, or light-orange row fills.
Percentages, currencies, quarters, years, and growth rates should stay near their corresponding figures or conclusions; main numbers are larger than body text, with units and notes smaller and adjacent. Sources, notes, and measurement bases use low-contrast gray text at the page bottom or near the chart, without breaking the main reading path.
## 4. Content Page Layout System
### A. Left title + center chart + right explanation cards
Suited to financial overviews, revenue composition, costs and profits, and market performance. The upper left holds the title and a short lead-in, the middle holds a column chart, donut, area chart, or horizontal bars, and the right holds 2–4 light-gray explanatory cards; the chart provides evidence and the cards explain causes, actions, or impacts. Use primary-orange graphics, small black labels, and orange numbers for emphasis. If data dimensions exceed 5 groups or explanations exceed 4 items, split the page.
### B. Central circular relationship/capability model
Suited to non-precise comparison content such as company overviews, capability portfolios, team composition, and strategic relationships. The main body uses 3 semi-transparent orange circles intersecting, or a single glowing circular node, with text placed at the circle centers or near the intersections; the right may hold one large percentage and a short note. This layout emphasizes relationships and combinations, and is not suited to precise numeric rankings or complex process dependencies.
### C. Timeline/milestone page
Suited to quarterly results, phase progression, and key-event reviews. The left holds the title and background notes; the body separates stages with thin light-gray lines; Q1–Q4 nodes use light-orange quarter markers and light-gray event cards. Keep a single-line narrative, left to right or top to bottom. Do not expand it into a multi-project Gantt chart, and do not place multiple paragraphs at every node.
### D. Large chart + side-note explanation page
Suited to profit curves, trend changes, and ranking comparisons. The large chart occupies the left half or the central main area; side notes explain peaks, inflection points, growth rates, and management implications. Area charts use deep-to-light orange tiers, bar charts use orange bars sorted by length. Side notes stay short and must not outshine the chart.
### E. Table comparison page
Suited to product performance, metric comparisons, and capability checklists. Title at the upper left; the table spreads center-left or centered; a brief conclusion may sit at the right or above. Keep only key columns; key rows or key cells use light-orange fills. If there are too many details, use a summary table + notes instead of shrinking type to fill the page.
### F. High-density side-by-side module page
Suited to multi-dimensional summaries such as team structure, cost distribution, and capital deployment. Multiple light-gray cards, short lists, or small number blocks sit side by side, with unified widths, row heights, and alignment baselines; each module carries one metric or one group of short text. Do not mix in too many icons, photos, or complex borders.
### G. Black-background mood/transition page
Suited to covers, section breaks, strategic quotable lines, and closing thanks. The core is a near-black background + orange glow + a small amount of centered copy, usually one statement or thank-you line plus a tiny signature. Not suited to regular data pages, table pages, or small-type note pages.
## 5. Color System
- **Near-black background #1D1D1D / #191919**: used for full-page backgrounds of covers, transitions, quotable lines, and closing pages. White content pages must not use near-black over large areas — only for small labels, legend dots, or high-contrast text.
- **Main text black #111111–#222222**: used for content-page titles, key notes, table body text, and main labels; it must not be replaced by orange for long body text.
- **Neutral gray #5B5B5B / #837571 / #A09C9A**: used for explanatory text, chart auxiliary labels, footnotes, and secondary information. Must keep contrast against the white base; not for key numbers.
- **Light-gray backgrounds #F7F7F7 / #F1EFEF / #E9E9EA**: used for card fills, table areas, light page zoning, and information containers; area may be medium, but must not outweigh the white space. May be replaced with a same-lightness brand light gray.
- **Divider gray #D0D0D1 / #E1DEDC**: used for table lines, timelines, card borders, and auxiliary axis lines. Thin and low-contrast — no thick black frames.
- **Primary orange #FC7C3D / #F16736 / #FA8555**: used for column charts, donut primary series, key numbers, nodes, key words, and button-like small labels. On white pages it serves as a local main visual and must not carpet large background areas. May be replaced with a brand primary color, provided high recognizability and sufficient lightness difference are kept.
- **Deep orange/red-orange #DC4A21 / #C22B0C / #BF5732**: used for chart high-value areas, deep area-chart layers, donut segments, and the dark parts of black-base light effects; not for long text.
- **Light orange #FECEAA / #FDAA74 / #FCC8B3 / #FBE6DC**: used for semi-transparent circles, secondary chart series, table key rows, soft background blocks, and forecast or de-emphasized series. Area may be slightly larger than primary orange, but must stay light — never let the page turn orange-based.
- **White #FFFFFF / near-white #F8F8F9**: used for content-page main backgrounds and reversed-white text on black pages.
Within one page, use only orange + neutrals — do not introduce extra primary hues such as blue, green, or purple. Data series are distinguished by orange's shades and tints; no independent red-green system for positive/negative states — if positive/negative must be expressed, prefer label text and arrows/symbols, and do not add vivid green or warning red on your own.
## 6. Fonts and Text Hierarchy
A modern sans-serif business style, with Liter as the main body and Archivo Black (via customFonts) for page titles, plus small amounts of light and italic faces for the cover or quotations. For Chinese, use MiSans; avoid calligraphic, handwritten, and strongly decorative fonts.
- **Cover main title:** approx. 5–7x body text, centered, multi-line phrasing, local light or italic parts allowed.
- **Section/quotable-line big sentences:** approx. 3–4x body text, relaxed line spacing, low word count.
- **Content-page titles:** approx. 2.5–3.5x body text, upper-left aligned, in the Archivo Black ultra-heavy weight — the strongest visual anchor on the page, no thick strokes.
- **Key information numbers:** approx. 2–3x body text, may be slightly smaller than the title or on par, with small unit/note text.
- **Subtitles/card titles:** approx. 1–1.2x body text, bolded; keep them short.
- **Body notes:** 1x, the proportional baseline; control line length and avoid full-width long paragraphs.
- **Chart labels/table text:** approx. 0.8–1x body text; keep legible — do not shrink excessively to cram content.
- **Notes/sources/footers:** approx. 0.55–0.7x body text, low-contrast gray.
Text is predominantly left-aligned; black-background mood pages and the cover may be centered. Keep clear spacing between title and body; do not mix too many weights on one page — usually regular, bold, and italic suffice.
## 7. Chart Language
Main chart types are column charts, horizontal bars, donuts, area/waterfall-feel trend charts, circular relationship diagrams, and a few small metric charts. Charts are simplified, with few grids and little axis decoration, highlighting orange areas and direct labels.
- **Column charts:** mostly 2–4 columns with square or slightly rounded corners; main columns in primary orange, secondary columns in light orange. Value labels sit atop or beside the columns; small black capsules may mark key amounts/values. Axes and gridlines are extremely weak — direct labeling takes priority.
- **Donuts:** for composition ratios, center left empty, segments in primary orange, deep orange, and light orange. Legend at the bottom or beside, using small color dots + short labels. Do not introduce too many segments — beyond 4–5 categories, recognition drops.
- **Area/trend charts:** use deep orange, primary orange, and light orange for layering or a fading effect, annotating growth rates, inflection points, or key stages; gridlines barely visible, horizontal-axis labels short. Suited to trends and profit structures, not precise readings.
- **Horizontal bars:** orange bars sorted by length, with short labels or values beside; keep to 3–5 bars.
- **Circular relationship diagrams:** semi-transparent orange circles overlapping to express intersections, portfolios, and capability relationships. They are not strict data charts — do not attach precise axes or complex scales.
Chart emphasis is achieved through color shades, label positions, and local big numbers; do not use 3D charts, heavy shadows, dimensional pie charts, rainbow series, dense gridlines, or complex legends.
## 8. Tables and High-Density Information
Tables serve "management comparison" and "metric summaries" — they are not detail databases. Headers are light-gray or white with bold black text and short column names; the body uses black/dark-gray text. Text columns left-aligned, numbers and percentages neatly aligned, numeric columns may be centered or right-aligned.
- Dividers use light-gray thin lines; avoid thick black borders and fully enclosed heavy frames.
- Row heights are relaxed, with obvious whitespace around the table — not edge-to-edge.
- Key rows, key cells, or the current item use light-orange fills, with restrained emphasis area.
- A pale-gray base may carry the table area, but do not cover the whole table with a high-saturation fill.
- Zebra striping is not a strong feature and may be omitted; if used, only extremely light gray alternation.
- Summary/conclusion rows may be bolded or given light-orange fills, but no complex multi-level headers.
High-density side-by-side information uses light-gray cards, short lists, quarter nodes, and metric blocks. Blocks keep unified sizes and alignment, with short titles and explanations within one sentence. Symbols use small black dots, small color dots, thin lines, and short labels — no large sets of colorful icons or emoji.
## 9. Components and Graphic Elements
- **Small black capsule labels:** mark key amounts, chart highs, or small categories; reversed-white text, small area. They should not pile up in groups across the page.
- **Light-gray explanatory cards:** used for right-side explanation lists, timeline events, and supplementary notes; light-gray fill with no obvious shadow, containing a subtitle and one sentence. Keep the count to 2–4.
- **Orange circles/semi-transparent circles:** used for relationship models, nodes, and key visuals; they may overlap into intersections, but text must stay readable. Do not turn the circles into complex bubble charts.
- **Thin dividers/timelines:** used for stage separation, table rows and columns, and layout zoning; light colors, thin lines.
- **Ring/concentric-circle wireframes:** used on black-background transitions, tech-feel pages, or a few centered-visual pages; low contrast, never the main body of an infographic.
- **Orange light bands/glow:** only for black-background covers, section pages, closings, and other mood pages. White content pages use no large-area light effects.
- **Title bars/navigation:** no persistent header navigation has been established and must not be forced onto every page. The title itself is the primary navigation.
- **Image frames:** only a slight tendency toward placeholder rectangles/gray blocks is seen — this is not a photo-driven style. If images are used, keep them restrained rectangular aids that never seize the level of charts and text.
## 10. Texture and Prohibited Items
Overall flat, restrained, and businesslike; black-background pages may use subtle tech light effects, while content pages rely on typesetting, whitespace, charts, and orange emphasis.
Prohibited:
- 3D charts, dimensional pie charts, perspective columns, glowing stroked text, strong drop shadows, metallic textures, large glassmorphism components;
- rainbow palettes, mixed multi-brand colors, emoji, cartoon illustrations, hand-drawn arrows, exaggerated icon stacking;
- large stretches of centered body text, full pages of dense small type, complex multi-layer borders, heavy table lines;
- large-area image backgrounds or black-background small-type tables on regular data pages.
Use with caution:
- Gradients: only for black-base orange glow, soft area-chart layering, and light-orange transitions; never full-page colorful gradient backgrounds.
- Shadows: the source file does not rely on shadows; if hierarchy must be distinguished, use only extremely subtle shadows or switch to light-gray fills.
- Rounded corners: may lightly soften cards or columns, but this is not a heavy rounded-card style.
- Icons: if they must be used, only minimal line icons or small symbols, in black/gray/orange — no multi-colored icons.
- Photos/screenshots: may serve as auxiliary evidence or placeholders, but are not the core language; they need rectangular cropping, low decoration, and no full-bleed backgrounds.
Special pages may use black-base light effects, concentric circles, low-contrast tech wireframes, centered quotable lines, minimal italics, and reversed-white text — only for covers, sections, quotations, and closing pages.
## 11. Generation Checklist
- Skeleton: is it 16:9; are content pages white/light-gray-based, and covers/transitions near-black + orange light effects; are margins sufficient?
- Copy: are titles phrasal; does each page have only 1 main conclusion; is explanation controlled to short paragraphs or 2–4 cards?
- Hierarchy: do the title, main number, body text, and footnotes have clear relative proportions; are specific font-size dependencies and hierarchy confusion avoided?
- Color: only orange + neutrals used; is orange used for emphasis rather than flooding the page; is low-contrast gray text still readable?
- Layout: is there a clear reading path; do the main visual, explanation area, and footnotes each do their job; are multiple competing anchors avoided?
- Charts: are simplified columns/donuts/area charts/horizontal bars/circular relationship diagrams used; are 3D, rainbow colors, dense grids, and complex legends avoided?
- Tables: are the header, rows and columns, and key rows clear; are lines light and thin; are numbers aligned; is detail overload avoided?
- Components: do light-gray cards, black capsules, orange nodes, and thin lines serve information; were page numbers, navigation, and watermarks never force-added?
- Prohibited items: no emoji, cartoon illustrations, heavy shadows, complex decoration, large image backgrounds, thick borders, or glowing text.
- Quality: check for text overflow, truncation, garbled text, overlap, low contrast, occlusion, empty content, wrong proportions, and an overly repetitive template feel.