chore: 1.1.0 release
This commit is contained in:
@@ -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.
|
||||
Reference in New Issue
Block a user