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,208 @@
# PJ Mountain — Business DD Report (Organization Name) STYLE DESIGN SYSTEM
## 1. Style Positioning
For high-information-density scenarios such as commercial due diligence, market research, strategic diagnosis, and management decision reporting. It uses a white landscape canvas, black conclusion titles, thin gray dividers, deep navy structural blocks, blue data accents, and dense charts and tables. The title area states "this page's judgment/analysis topic"; bar charts, stacked bars, lines, heatmaps, matrices, and multi-column text provide the evidence; the footer fixedly holds sources, company name, and page number. Large images, illustrations, and decorative graphics rarely appear; brand color serves structure and emphasis only, never atmosphere.
**Underlying principles**
1. **Evidence takes precedence over decoration.** Charts, tables, footnotes, sources, and measurement-basis notes must be kept first; if a page is crowded, compress decoration and whitespace rather than deleting data labels or sources.
2. **Consistency takes precedence over per-page variation.** Variants such as a right-side explanation column, a left dark opinion column, table-of-contents highlighting, or gray-based explanation areas are allowed, but the title area, footer, dividers, font hierarchy, and brand-color grammar must remain stable.
3. **Brand color serves readability.** Deep navy is used for structure and key categories; bright blue for data emphasis and selected states; when brand color reduces contrast or confuses data, prefer black, gray, white, and clear labels.
## 2. Page Skeleton
**Canvas ratio:** widescreen 16:9 landscape. White background by default; the table-of-contents page and explanation columns may use light gray; section/opinion pages may use deep navy vertical blocks. Content pages do not use full-bleed image backgrounds.
**Margins and grid:** keep stable outer margins on left and right; the title area at top, the body's rectangular workspace below the title rule, and a fixed footer area at bottom. Body text commonly uses 2 columns, 3 columns, image-left-text-right, table-left-notes-right, or chart-on-top-footnotes-below.
**Title area:** the main title at upper left is usually 1–2 lines, in large black serif bold or a bold title style; below it a sans-serif subtitle stating the subject, scope, unit, or measurement basis. A thin gray/black horizontal rule under the title separates the evidence area.
**Body area:** carries charts, tables, flow/structure diagrams, parallel modules, and explanatory text. Usually the main evidence sits on the left; explanations, background, conclusions, or supplementary material on the right; multi-module pages read top-to-bottom, left-to-right.
**Footer:** fixedly contains the source/footnotes, company name, and page number. Sources sit at lower left or below charts, in a size clearly smaller than body text; "Organization Name" and the page number sit at lower right. A thin line often separates the body above the footer.
**Logo and branding:** the cover's upper left carries the brand wordmark as plain small text showing the new topic name or left blank — no graphic logo drawn; content pages convey the brand through the footer company name, not by repeating an enlarged logo in every module.
**Page types:**
- **Cover:** the left side holds the brand wordmark, project name, report type, date, and confidentiality statement; the right side features a blue linear-curve graphic as the only strong visual element. The cover does not use the content-page footer and page-number structure.
- **Table of contents page:** large-size Contents on the left white area, section structure on the right light gray area; the current section may be highlighted with a deep navy horizontal bar. The TOC page emphasizes navigation and holds no data charts.
- **Content pages:** mainly white background, top conclusion title + rule + body evidence + bottom source/page number.
- **Section/progress pages:** reuse the Contents structure with a deep navy bar marking the current position; they may serve as transitions between sections but must not be generalized into ordinary content pages.
- **High-density appendix/analysis pages:** smaller text, denser tables, and stronger columnization are allowed, but the title, footnotes, and page number are retained.
**Default reading path:** title judgment → subtitle/units → largest difference in the chart or table → right-side/bottom explanation → sources and footnotes.
## 3. Content Organization
**Title style:** use an analytical topic or conclusion sentence, not marketing slogans. The common structure is "subject + trend/judgment + key numbers/scope/reason", controlled to 1–2 lines; when the title already carries the conclusion, the subtitle only adds the measurement basis.
**Key message sentences:** placed above or to the right of charts, stating data scope, units, CAGR, market definition, sample, or scenarios; they serve the chart directly — no abstract promotional lines.
**Body organization:** use short paragraphs, bullets, numbering, or subheading groups, with each bullet expressing one fact or reason. Avoid long centered copy. Organize dense text with bold keywords, indentation, rules, and module titles.
**Number of points per page:** a standard content page revolves around 1 main judgment and carries at most 2–4 supporting arguments. High-density pages may contain multiple evidence blocks, but they must share the same analytical question; do not collage unrelated charts onto one page.
**Grouping logic:** group by market/customer/product/competition/organization, or by time, region, segment, growth driver, or degree of impact. Parallel modules must be isomorphic: title position, metric definition and basis, and color meaning consistent.
**Keyword emphasis:** use bold, deep navy subheadings, bright blue numbers, and light gray base boxes. Avoid colored highlighters, emoji, exaggerated exclamation marks, or decorative underlines.
**Numbers and units:** numbers must carry units, time ranges, and the necessary measurement basis; growth rates, CAGR, shares, and amounts are specified in chart titles, axis labels, or footnotes. Forecasts, targets, and actuals are distinguished by color, dashes, or labels — not by text explanation alone.
**Source footnotes:** all data charts and tables must have Source/Note/measurement-basis notes. Use the smallest text level, placed at the bottom of charts or on the left of the footer; never at the visual center.
## 4. Content Page Layout System
**A. Conclusion title + single main chart + right explanation column**
For core trends or scale judgments. The left 65%–75% holds a bar, stacked-bar, or line chart; the right 20%–30% holds a light-gray-background explanation column or a white caption column with background, growth drivers, and management implications. Use a bright blue series, bold numbers, arrows, or a few elliptical labels for emphasis. Not suited for multi-topic side-by-side layouts or complex classification pages that need item-by-item expansion.
**B. Conclusion title + multi-column text analysis page**
For textual argumentation such as trends, market characteristics, drivers, and risk points. The body divides into 2–3 columns, each with a numbered subheading and a short paragraph of explanation; narrow spacing or thin lines between columns, with sparing bold keywords. This layout is information-dense but weak in visual evidence — do not use it for too many consecutive pages; if there are key numbers, switch to a chart page.
**C. Chart + mechanism/flow explanation combination page**
For migrations from a traditional state to a new state, value chains, business processes, or organizational transformation. A trend chart sits left or center; vertical flow blocks, arrows, or stage notes sit right; deep navy/bright blue blocks mark the target state, key steps, or emphasized links. Flow components aid explanation — they cannot replace data evidence.
**D. High-density table/matrix page**
For multi-dimensional comparison of customers, competitors, products, features, KBFs, or opportunity points. The body is a large table or matrix with clear headers and fine row/column separation; key cells use blue, gray bases, rating dots, or symbol marks. A deep navy opinion column may sit on the right summarizing 2–4 key findings. Not suited for telling a single trend, nor for content lacking comparable dimensions.
**E. Dark sidebar opinion page**
For section openings, strong-opinion summaries, or separating "explanation" from "evidence". A deep navy vertical column on the left or right takes about a quarter to a third of the width, with white text and bright blue subheadings inside; the other side holds white-background charts/tables. The dark column must not be abused as decorative background — use it only when guidance, conclusion pressure, or section identification is needed.
**F. Table of contents / progress navigation page**
For section transitions. Contents on the left, light gray content area on the right, current section highlighted in deep navy. It only takes on navigation — it carries no body analysis. When generating a new topic, preserve the section numbering, hierarchy, page ranges, and highlight-bar grammar.
## 5. Color System
**Background white #FFFFFF**: the main background of content pages, largest area. Cannot be replaced by a colored background; large color bases are not recommended except for the TOC/explanation columns.
**Light gray background #E6E6E6 / #E9E9E9**: for the right area of the TOC, side explanation columns, table bases, and local backgrounds. Used for structural distinction; lightness may be slightly adjusted, but replacing it with a high-saturation brand color is not recommended.
**Primary text black #000000 / dark gray #222222**: for titles, body text, chart labels, and table text. Low-contrast gray must not replace body text.
**Brand deep navy #051C2C**: for dark sidebars, key structural blocks, some bar series, title bars, and flow blocks. May be replaced by a corporate primary color of equal depth, but white text must remain readable.
**Bright blue #2150FE / #1F5BFF**: for emphasized data series, current states, key labels, selected items, and key flow blocks. Must not be spread over large areas; if replaced by a brand color it must stay high-saturation, high-contrast, and distinct from deep navy.
**Light blue #BBD5EE / #DAE7F3 / #E6EEF6**: for secondary data series, light area charts, cover linear graphics, and weak table emphasis. Cannot carry white body text; avoid going too light and losing edges.
**Neutral grays #747474 / #8E9294 / #A4A4A4 / #D0D0D0**: for secondary bars, axes, gridlines, table lines, captions, and un-emphasized categories. Gray steps may be replaced, but the hierarchy must be maintained.
**Status color boundary:** no red-green-yellow status system is established. When positive/negative states are needed, prefer depth variations, labels, and arrows; red/green may only be used cautiously and sparingly for explicit positives/negatives — they must not change the deck's calm blue-gray temperament.
**Per-page primary-color limit:** content pages use black/white/gray + deep navy + bright/light blue. Unless data must be distinguished, do not introduce a third high-saturation color.
## 6. Fonts and Text Hierarchy
**Font character:** body text and most labels use Arial-class sans-serif; the cover main title and content-page large titles may use Times New Roman Bold-class serif bold. Italic Arial is used sparingly for explanatory text in notes, footnotes, or source lines.
**Relative hierarchy:**
- **Cover project name:** about 3.5–4.5x body size, serif bold, one of the largest texts in the deck.
- **Content-page main title:** about 2–3x body size, black, 1–2 lines allowed, conclusion first.
- **Section/TOC title:** about 2–3x body size, often paired with generous whitespace or a light gray content area.
- **Subtitle/chart title:** about 1.1–1.4x body size, may be bold; states the subject, units, and measurement basis.
- **Body text and bullets:** defined as 1x, line spacing tight but never overlapping.
- **Table text/chart labels:** about 0.75–1x body size; number labels may be slightly smaller but must remain readable.
- **Notes, sources, footnotes, page numbers:** about 0.55–0.75x body size, complete in information but visually recessed.
**Weight rules:** bold is used for titles, subheadings, table headers, keywords, and key numbers; do not bold large stretches of long body paragraphs. Italic is only for note tone or source attribution, not a primary emphasis device.
**Alignment:** titles and body are mainly left-aligned; numbers are right-aligned or aligned on decimal places in tables, category text left-aligned. Avoid large centered blocks.
## 7. Chart Language
Business analysis charts include bar charts, stacked bars, line/trend lines, combination charts, market-size forecasts, share/ranking charts, and a few scatter/bubble-type marks. Charts must prove the title — they are not decoration.
**Axes and grids:** axes use thin gray or black; gridlines are very light and may be omitted when unnecessary. Axis labels are short; units go in the chart title or beside the axis. The horizontal axis is usually years, market segments, or categories; the vertical axis carries amounts, shares, indices, etc.
**Series colors:** key series use deep navy or bright blue; secondary/historical/other categories use gray or light blue. The same color for the same category in stacked bars must stay consistent across pages — do not randomly change colors page to page.
**Data labels:** directly mark key bars, the latest year, CAGR, forecast endpoints, and comparison differences. Keep labels close to data points; avoid making readers depend on complex legends.
**Forecasts and baselines:** forecast years, CAGR, targets, or baselines may be distinguished with dashed lines, arrows, brackets, elliptical labels, or different gray-blue tones. Actual/forecast intervals must be stated — color alone is not enough.
**Legends:** placed above the chart or in blank space inside it; with few series, prefer direct labels. Color swatches must match the graphics; text in small sans-serif.
**Annotations:** sparing use of short arrows, brackets, CAGR labels, rounded/elliptical small marks. No glow, shadows, 3D bars, or perspective effects.
## 8. Tables and High-Density Information
Tables are used for comparing competitors, customers, products, features, market attributes, and opportunity points — as analytical tools, not decorative lists.
**Headers:** use bold, dark text, or deep navy/light gray bases. Column headings may run multiple lines but must use comparable definitions and measurement bases. If a header is very long, split it into a main heading + subheading — do not squeeze it into illegibility.
**Rows/columns and separation:** mainly thin gray lines, more horizontal than vertical; light gray bases may distinguish headers, group rows, or explanation columns. Avoid heavy borders and complex grids.
**Row height and density:** high density is allowed, but each row needs a stable baseline and enough spacing. Long text should be broken into lines or phrased as fragments — never overflow the cell.
**Key marks:** key rows/columns may use deep navy bars, light blue bases, bright blue text, bold, rating dots, checks/symbols, or small labels. Wingdings-type symbols may be used sparingly for states/marks, but must not become a colorful icon system.
**Alignment:** left-align text; right-align numbers or align on digit positions; keep percentages, amounts, and years in unified formats. Rankings, scores, and status dots are center-aligned.
**Zebra striping and base colors:** light gray zebra striping or local light gray bases may improve scannability, but must not be too dark. Table base colors must keep black text high-contrast.
**Summary and notes:** summary rows, averages, or key conclusions go at the bottom of the table or in a right-side note column; sources and measurement-basis notes sit immediately below the table.
## 9. Components and Graphic Elements
**Thin horizontal rules:** separate the title area, body area, and footer. Lines are thin, gray or black; do not replace them with thick colored lines.
**Deep navy sidebar:** for section opinions, conclusion summaries, explanation columns, or guidance beside high-density tables. White text, bright blue subheadings, and short bullets inside; it is an information container, not a decorative color block.
**Light gray explanation box:** for background, growth drivers, assumptions, and supplementary notes. Placed on the right of the page or beside tables; must have a subheading.
**TOC highlight bar:** a deep navy horizontal bar marks the current section with reversed white text. Only used on TOC/progress pages.
**Data labels and badges:** CAGR, latest values, forecast values, and key categories may use small labels, ellipses, or capsule marks; colors stay deep navy, bright blue, or gray; keep them near the corresponding data.
**Flow blocks and arrows:** for migration paths, stages, and mechanism explanations. Shapes are rectangles, rounded rectangles, or simple arrows in dark blue/bright blue/gray. No complex SmartArt styles, dimensional arrows, or gradient arrows.
**Image frames:** if screenshots/system interfaces are used, embed them only as evidence material, keeping rectangular boundaries and captions — no large emotional imagery.
**Icons:** colorful icons are not a stable language of this style. If a state must be shown, use simple symbols, dots, checks, arrows, or text labels in a single color or the blue-gray family.
## 10. Texture and Prohibited Items
Overall a flat, restrained, data-driven, consulting-report texture, building professionalism through typography, lines, tables, charts, and limited color blocks.
**Prohibited:**
- large photo backgrounds, video-still backgrounds, or emotional full-bleed images;
- emoji, cartoon illustrations, complex colorful icons, sticker-style decoration;
- 3D charts, perspective bars, glow, strong shadows, glassmorphism, textured backgrounds;
- large gradient color blocks as body backgrounds;
- large centered copy, marketing-slogan titles, unsourced data;
- random multi-color palettes or multiple high-saturation colors competing on one page.
**Use with caution:**
- Rounded corners: may be used for small labels, flow blocks, elliptical marks; must not generalize into a card-style UI style;
- Shadows: the source file barely relies on them; if used on embedded screenshots, keep them extremely light;
- Red/green status colors: only for explicit positive/negative/risk/opportunity, used sparingly;
- Screenshots: only as factual evidence — they need a title, boundary, source, or caption.
**Usable on special pages:** the cover may use the blue linear-curve graphic; the TOC may use a large light gray content area and deep navy highlight bar; section progress pages may strengthen whitespace and navigation, but must not introduce poster-like visuals.
## 11. Generation Checklist
- Is it 16:9 landscape, mainly white background, with a stable title area, body area, and footer area?
- Is the title an analytical topic or conclusion sentence rather than an empty slogan? Is it controlled to 1–2 lines?
- Does the page have only one main judgment, with charts/tables directly supporting that judgment?
- Are sources, footnotes, units, time ranges, and the actual-versus-forecast basis retained?
- Is the palette limited to black/white/gray + deep navy + bright/light blue, with bright blue only on key points?
- Is body text Arial-class sans-serif, with titles allowed in formal serif bold? Is dependence on specific point sizes avoided?
- Do charts use flat bars, stacked bars, lines, labels, and thin gray axes, avoiding 3D, gradients, and excessive legends?
- Do tables have clear headers, thin separators, unified alignment, readable row heights, and necessary key marks?
- Does the right explanation column or dark sidebar carry a conclusion/background function rather than pure decoration?
- Are photo backgrounds, emoji, complex icons, shadows, glow, textures, and random colors avoided?
- Have you checked for text overflow, truncation, garbled characters, overlap, low contrast, occlusion, empty content, wrong proportions, and missing page numbers/sources?
- When generating multiple pages, are TOC highlighting, footer, color grammar, chart encoding, and title hierarchy consistent — avoiding each page looking like a different template?
- No cards by default: unless the user explicitly requests it, it is strictly forbidden to use rounded rectangles or rectangular cards to build hierarchy or alignment: line segments, whitespace, and font-size differences are the superior solution
- No evenly-divided composition: unless there is no other usable layout, do not default to three-way splits, four-way splits, or 2×2 matrices. This includes three-part conclusions such as three-column + title + conclusion