chore: 1.1.0 release

skills/open-kimi-ppt/reference/design_system/04_promotion/05/en/silver-gray-luxury-magazine.md

@@ -0,0 +1,253 @@
+# Organization Name Group — Corporate Presentation STYLE DESIGN SYSTEM
+
+## 1. Style Positioning
+
+Aimed at listed-company investor communication, luxury-group corporate introductions, and financial disclosure, switching between "premium brand-narrative pages" and "rigorous IR data pages": the former uses full-bleed photography, large serif titles, and semi-transparent information bars to present history, brand, channels, and stores; the latter uses a white background, thin black rules, charts, tables, and small-print annotations to complete financial proof and disclosure of reporting bases.
+
+Suitable for corporate roadshows, investor days, results communications, group strategy introductions, brand-portfolio explanations, and financial appendices. Pages may be high-density, but must remain formal, restrained, and verifiable.
+
+- Titles use a serif typeface; body text, annotations, tables, and chart labels use a sans-serif typeface.
+- Brand narrative pages use full-bleed photography, overlaid with a darkening mask or a light-gray semi-transparent bar; text appears in white or black for high contrast.
+- Financial pages use a white background, thin black horizontal rules at top/bottom, a title at upper left, an identity mark at upper right (the group name rendered as plain small text, no graphic logo), a page number and footnote at the bottom.
+- Aside from photography's natural colors, information is organized using black, white, gray, brownish-gold/bronze-brown, and a small amount of light-blue table background.
+- Data uses bar charts, pie charts, stacked bars, financial tables, footnotes, and source notes rather than fancy infographics.
+
+Underlying principles:
+
+1. Brand, history, store, craftsmanship, and strategy pages may use full-bleed photography; revenue, profit, balance-sheet, cash-flow, and reporting-basis disclosure pages must use a white-background chart/table, avoiding photos that interfere with reading the data.
+2. On photography pages, text must sit in a darkened area, a semi-transparent bar, or a high-contrast empty area; on financial pages, prefer black/white/gray over sacrificing the clarity of numbers, labels, and footnotes for the sake of brand color.
+3. You may switch between photos, timelines, cards, charts, and tables, but the title area, identity mark, page number, footnotes, lines, and color roles must remain consistent.
+
+## 2. Page Skeleton
+
+The canvas is 16:9 landscape widescreen, using the following skeletons:
+
+### 2.1 Cover skeleton
+
+- Full-bleed architectural or spatial photography fills the frame, overall dark and cool-gray, emphasizing glass and architectural texture.
+- The group name is placed at the top left, in extra-large white serif type with wide letter spacing.
+- A large white serif main title is centered in the lower-middle area; the date below is noticeably smaller than the main title.
+- No top/bottom black rules, no complex footer, no charts.
+- Reading path: group name → main title → date → background spatial atmosphere.
+
+### 2.2 Disclaimer/legal-text page skeleton
+
+- White background, with a thin black horizontal rule spanning the body's width at the top.
+- A serif title at upper left, an identity mark at upper right (the group name rendered as plain small text, no graphic logo).
+- The body consists of dense multi-paragraph small print, with bolded paragraph headings, body text left-aligned.
+- A thin black horizontal rule at the bottom, which may carry the page number or auxiliary document information.
+- No images, icons, or color-block decoration; this is a reference-type page, not a presentation-type page.
+
+### 2.3 Brand/strategy photography page skeleton
+
+- Full-bleed photos of architecture, stores, workshops, garments, nature, or brand scenes.
+- The section or theme title is at upper left: white serif type over dark images, black serif type over light images or semi-transparent bases.
+- A white identity mark (the group name rendered as plain small text, no graphic logo) is often placed at upper right; a small, low-distraction page number at lower right.
+- The body may overlay semi-transparent light-gray horizontal bars, white cards, local charts, short manifesto sentences, or a timeline.
+- If the photo is visually complex, a dark mask or a light-gray carrying bar must be added; long text must not be placed directly over a highly textured background.
+
+### 2.4 Standard financial/appendix white-background skeleton
+
+- Pure white background, with stable margins on all sides.
+- A thin black horizontal rule at the top; a serif title at upper left; an identity mark at upper right (the group name rendered as plain small text, no graphic logo).
+- The body carries charts, tables, parallel data modules, or explanatory bullets.
+- A thin black horizontal rule at the bottom; the page number sits at the lower right or bottom edge; footnotes/sources sit below the chart or near the bottom rule.
+- Reading path: title → chart/table primary evidence → explanation to the side or below → footnote/source → page number.
+
+### 2.5 Section/transition page
+
+- Uses a full-bleed photographic background with minimal text; the section name sits at upper left or center-left.
+- No data stacking, no multiple components; it only switches the narrative stage.
+- A darkening mask may be used to ensure the title is readable.
+
+Absent or unstable items: no stable table-of-contents navigation, breadcrumbs, multi-level header navigation, watermarks, or complex background textures observed. Aside from the cover and photography pages, background graphics should not be added.
+
+## 3. Content Organization
+
+Title style:
+
+- Titles use declarative thematic sentences, which may include a brand name, strategic theme, financial metric, or time range.
+- Brand-page titles are short, in serif type, often in caps or title case.
+- Financial-page titles state the metric name, its evolution, its measurement basis, or an annotation number, which may be explained in parentheses after the title.
+
+Key message sentences and body text:
+
+- Brand pages carry 1 core judgment, expressed as a single large-text manifesto sentence, 3–4 horizontal entries, or one timeline.
+- Financial pages may carry 1 main chart + several small charts/pie charts + annotations, but they must revolve around the same metric system — do not mix unrelated data.
+- Long-text pages are used only for disclaimers, measurement-basis explanations, or appendices, not as regular narrative pages.
+
+Grouping logic:
+
+- A horizontal timeline expresses history and milestones; parallel cards express brand/channel/strategy modules; a chart plus footnote expresses financial trends; a table expresses appendix line items.
+- Group labels use short noun phrases or metric names.
+- Key numbers may be enlarged and paired with units and a time basis; never show a number alone without stating its measurement basis.
+
+Number of points per page:
+
+- Photography opinion pages: 1 main point, at most 3–4 supporting points.
+- Chart pages: 1 main conclusion, 2–4 supporting metrics.
+- Table pages: may be high-density, but must have a clear header, dividers, and footnotes.
+
+Keyword emphasis:
+
+- Use bold, brownish-gold/bronze-brown, black titles, white contrast, and positional hierarchy — do not use neon colors, underlines, or exaggerated outlines.
+- Number emphasis must match the chart's color, avoiding introducing an extra accent color on the same page.
+
+Numbers/units/time basis:
+
+- Financial pages must retain the year, quarter, year-over-year figure, growth rate, unit, and reporting-basis explanation.
+- Footnotes use small sans-serif type, placed close to the data area or in the footer, never far from the data.
+
+## 4. Content Page Layout System
+
+### 4.1 Full-bleed photo + centered manifesto sentence
+
+For brand philosophy, customer experience, store/craft atmosphere, and section introductions. The background image fills the frame; the title sits at upper left or upper-center; the core sentence is centered or off-center, in large white text, darkening the overall background if necessary. Not suitable for complex financial data, multiple measurement bases, or content requiring precise comparison.
+
+### 4.2 Full-bleed photo + semi-transparent bars/card list
+
+For strategic priorities, success factors, channel actions, steps, or comparisons. 3–4 light-gray semi-transparent horizontal bars or white rectangular cards are overlaid on the photo, each holding a short title, a number, or one explanatory sentence; a numbered block may be added on the left. Emphasis relies on entry order, a brown fill bar, or bolded text. If there are more than 5 entries or the text is too long, switch to a white-background parallel-module page instead.
+
+### 4.3 Timeline/historical milestone page
+
+Year nodes are arranged along a semi-transparent horizontal band, each node containing a brand/event/short explanation. The year's font size is noticeably larger than the explanatory text; connect the nodes with thin lines or organize them with clear separators; the background may use an architectural/spatial photo. Do not turn the timeline into a complex curve or a multi-layer decorative path.
+
+### 4.4 White-background single main chart page
+
+For revenue evolution, growth rate, composition, and trends. Keep the standard header/footer; the main chart — a bar chart or stacked bar chart — is placed centrally; a small pie chart, legend, and footnote sit below or under the chart. The chart occupies most of the page area; explanatory text should not crowd the graphic. Emphasize with a brown main series, black/gray labels, and an oval or small color block annotating year-over-year figures or growth rates.
+
+### 4.5 White-background chart + right-side explanation column
+
+For "data evidence + management explanation." The main chart sits on the left or center, with short bullets or key metrics on the right. The right-side explanation column should not turn into long paragraphs; each item is kept to one or two lines. The chart is primary, the explanation secondary.
+
+### 4.6 High-density financial table page
+
+For income statement, balance sheet, cash flow, segment detail, and appendix reporting-basis disclosures. Standard white-background skeleton, with the table occupying most of the body area. Headers, group rows, and summary rows are layered using light-blue/light-gray backgrounds and thin lines. Information density may be high, but photos, icons, or large color blocks must not be layered on.
+
+### 4.7 Parallel module/brand-portfolio page
+
+For comparing brands, channels, or business units. Uses equal-width columns and white or semi-transparent cards, each column containing a small title, a key number, a brief explanation, or an image. 2–4 columns is preferable. If a large amount of text is needed, switch to a table or split across multiple pages instead.
+
+## 5. Color System
+
+Role-based palette:
+
+- Background white #FFFFFF / #F8F7F7: primary background for standard financial pages, appendices, and table pages. A colored background must not replace the white background of financial pages.
+- Deep black/near-black #08070A / #1A1A1A: primary body text, titles, thin lines, axes, and table borders. Used for high-contrast information, not as a large decorative color area.
+- Neutral gray #7A8180 / #949494 / #B8B8B8: photo masks, secondary text, table lines, secondary data, and background cards. Should not be used for key small print, to avoid low contrast.
+- Light-gray semi-transparency #E5E5E5 / #DFDFDF / #EBEBEB: information bars on photography pages, card bases, light table backgrounds, used to carry text over complex photos.
+- Brand brown/bronze-brown #9C5A37 / #9B5834: main accent color, primary bar-chart series, channel/business emphasis, horizontal emphasis bars. May be replaced by a new brand's primary color, but the replacement must be low-saturation, steady, and compatible with black/white/gray.
+- Golden-brown #CA9814: a small amount of identity-mark text, growth labels, or secondary emphasis. Usable only in small areas, must not become a second primary color.
+- Light-blue table background approximately #DCEEF6 / #EAF6FB: used for headers, groups, or financial-detail backgrounds in later appendix financial tables. Must not be overused on brand narrative pages.
+- White text #FFFFFF: used on dark photos, dark masks, dark chart blocks, and cover titles. The background must be dark enough.
+
+Aside from photography's natural colors, keep a single page's information layer within black/white/gray + 1 accent color. Financial charts may use functional colors such as brown, gray, and light blue, but should not exceed 3 meaningful series colors.
+
+Positive/negative status colors: the source file shows no stable red/green rise-fall system. Growth, year-over-year, and share figures more commonly use golden-brown ovals, black/gray labels, or text annotations; if positive/negative status is added, do so cautiously and without disrupting the brown/gray primary system.
+
+## 6. Fonts and Text Hierarchy
+
+Titles use Unna (built-in, Georgia-class serif); cover display titles may use Oranienbaum (built-in) for high contrast. Body text, charts, tables, and annotations use QuattrocentoSans (built-in humanist sans); no other families.
+
+Relative hierarchy:
+
+- Cover group name: about 5–7x the body size, white serif, with very high visual weight and prominence.
+- Cover main title/section large title: about 3–4x the body size, serif, may be all-caps.
+- Standard page title: about 2.5–3x the body size, black serif, positioned at upper left.
+- Key message sentence/page's main judgment: about 2–3x the body size, may be white or black, centered or within a bar.
+- Subheading/module title: about 1.2–1.8x the body size, using bold sans-serif or a small serif heading.
+- Body bullets/explanations: body text = 1x, sans-serif, left-aligned.
+- Table text/chart labels: about 0.8–1x the body size, readability first.
+- Annotations, sources, page numbers: about 0.55–0.75x the body size, low weight but must remain clear.
+
+Typesetting rules:
+
+- Do not mix too many font weights between titles and body text; hierarchy relies mainly on font category, size multiple, and position.
+- Large centered blocks of copy are suitable only for photography manifesto pages; body text and footnotes on financial pages are always left-aligned or table-aligned.
+- Numbers may be bolded or enlarged, but units, years, and measurement bases must sit directly beside them.
+
+## 7. Chart Language
+
+Uses IR-standard bar charts, stacked bar charts, pie charts/small circular charts, combination financial charts, and tabular data, emphasizing easy reading of values and clearly stated measurement bases.
+
+- Bar charts: the main series uses bronze-brown, secondary or historical/comparison portions use gray, light brown, or black-gray. Bars may be labeled directly with values.
+- Stacked bars: used for compositional breakdowns, distinguished with brown, gray, black, and light color blocks; the legend sits near the bottom or right of the chart, small but clear in size.
+- Pie charts/small circular charts: serve as a compositional supplement below the bar chart, not the page's primary visual. Used for channel/region/brand share; not suitable for more than 4–5 slices.
+- Axes and gridlines: use thin gray-black lines, weakening or reducing gridlines. Do not add heavy grids or complex backgrounds.
+- Labels: placed close to bars, pie slices, or nodes, in small black/dark-gray text; key year-over-year figures or growth rates may use a golden-brown oval or small label.
+- Legends: compact and close to the chart, not occupying the primary visual. Color meaning must match the chart.
+- Annotations and baselines: keep a thin-line and small-label style. No stable forecast/target/red-green status-line system was observed — do not fabricate one.
+- Chart-page footnotes: every financial chart should retain the measurement basis, unit, and annotation number, placed below the chart or in the footer.
+
+## 8. Tables and High-Density Information
+
+Tables are the "verifiable data container" for financial appendices and detail disclosures, not a decorative module.
+
+- Headers: use a light-gray or light-blue background, bolded text, short and clear column names. Header lines are thin, without heavy borders.
+- Rows and columns: allocate column width by number length and text explanation; number columns are right-aligned, text columns are left-aligned; years/periods are centered or right-aligned consistently.
+- Dividers: mainly thin gray lines; outer borders should not be too heavy; key groupings may be separated by a slightly darker line or a light background color.
+- Row height: compact but not crowded, allowing high density; numbers in adjacent rows must never touch.
+- Base color: mostly white background; light blue/light gray for headers, group rows, summary rows, or appendix blocks; zebra striping is not mandatory, and if used should be very subtle.
+- Key rows/columns: may be emphasized with bold, a light background, or a thin top/bottom rule; do not fill an entire row with a highly saturated color.
+- Summary rows: numbers may be bolded, dividers slightly stronger; keep the same font system as the detail rows.
+- Symbols and rating dots: the source file has only a few symbol marks, not forming a primary system; do not add complex rating icons.
+- Footnotes: a measurement-basis explanation, abbreviation explanation, or source must be placed below the table, in a font size smaller than the table text.
+
+## 9. Components and Graphic Elements
+
+Stable components and usage:
+
+- Top thin black rule: the header boundary of a standard white-background page, spanning the content width. The line is thin, without decorative thickening.
+- Bottom thin black rule: the footer boundary of a standard white-background page, carrying the page number and footnote area.
+- Upper-right identity mark: the group name rendered as plain small text, no graphic logo; black text on white-background pages, usually white text on photography pages. Keep it small and clear, not competing with the title for visual center.
+- Page number: located at the lower-right corner or bottom edge, in small white/black text depending on the background. Photography pages may use white, financial pages use black or dark gray.
+- Semi-transparent information bar: a text-carrying component on photography pages. Uses a light-gray/white semi-transparent base, spreads horizontally, carries short sentences, steps, strategic points, or data. Long paragraphs must not be placed on it.
+- White cards: used for timeline nodes, parallel modules, or small charts over photos. Clean edges, sparing rounded corners, essentially no shadows.
+- Brown accent bars/color blocks: used for channels, strategy, or a chart's main series, small-to-medium area, functioning as emphasis rather than decoration.
+- Numbered blocks/year nodes: used for timelines, steps, and key milestones. The number is larger than the explanatory text, and the explanatory text is short.
+- Small legend color blocks: used for chart series explanations, with colors strictly matching the data series.
+- Process arrows/complex flow graphics: not observed as a stable primary language; if a process must be expressed, prefer horizontal entries and thin connecting lines, avoiding fancy arrows.
+- Icons: colorful icons are not a characteristic of this style; if icons must be used, only extremely minimal black-and-white linear symbols in a small size as an auxiliary, not as the primary visual.
+
+## 10. Texture and Prohibited Items
+
+Overall adopts a flat, restrained, formal, low-decoration corporate IR style; brand pages rely on real photography, financial pages rely on whitespace, lines, tables, and typography.
+
+Prohibited:
+
+- Emoji, stickers, cartoon illustrations, 3D icons, glowing text, neon colors, complex textures, exaggerated shadows, thick outlines.
+- Using large photo backgrounds or complex pattern bases on financial chart pages.
+- Replacing the existing brown/gray system with highly saturated red/green for ordinary emphasis.
+- Large centered blocks of text on financial or legal pages.
+- Isolated large numbers without a stated measurement basis, multi-color charts without a legend, or financial tables without footnotes.
+
+Use with caution:
+
+- Gradients: the source file does not treat gradients as a primary style; aside from a photo's natural light and shadow, gradient backgrounds should not be artificially added.
+- Shadows: cards and information bars are essentially flat; if hierarchy needs distinguishing, use only extremely subtle shadows, preferring base color and lines instead.
+- Rounded corners: not a prominent feature; cards should have square or slightly rounded corners.
+- Colorful icons: used cautiously only in small explanatory auxiliary scenarios, must not become systematic decoration.
+- Large areas of brand brown: would reduce the sense of refined restraint; should be used mainly in charts and emphasis bars.
+
+Usable on special pages:
+
+- Full-bleed photo background: usable on covers, section pages, brand narrative pages, and store/craft/history pages; text contrast must be high.
+- Large centered manifesto text: used only on low-information-density brand opinion pages, not on appendix or financial pages.
+- Semi-transparent overlay: used on photography pages to improve readability, not on white-background financial pages.
+
+Absent items: no stable use of complex illustrations, social-media-style large icons, infographic figures, animated arrows, decorative watermarks, background geometric patterns, or large areas of colorful gradients observed.
+
+## 11. Generation Checklist
+
+- Skeleton: is the full-bleed photography skeleton or the white-background IR skeleton chosen based on page type? Do financial pages have top/bottom thin rules, an upper-left title, an upper-right identity mark (the group name rendered as plain small text, no graphic logo), a page number, and a footnote area?
+- Copy: is the title a clear thematic sentence? Does each page express only one main point or one metric system? Do numbers carry a year, unit, and measurement basis?
+- Hierarchy: are serif titles and sans-serif body text clearly distinguished? Are the relative sizes of the title, key message sentence, body text, table, and footnote reasonable?
+- Color: is it kept within black/white/gray + a brown main accent + necessary light-blue table backgrounds? Is meaningless multi-color avoided? Does white text sit on a sufficiently dark background?
+- Layout: does text on photography pages have a darkening or semi-transparent carrier? Do charts/tables dominate white-background pages, with explanatory text subordinate?
+- Charts: are series color, legend, labels, units, and footnotes consistent? Are heavy grids, fancy 3D, and meaningless gradients avoided?
+- Tables: are headers, groups, summaries, number alignment, dividers, base color, and footnotes complete? Is it still readable at high density?
+- Components: are the identity mark, page number, thin rules, information bars, cards, and legend positioned consistently? Is icon and arrow overuse avoided?
+- Prohibited items: are emoji, cartoon illustrations, 3D, glow, complex shadows, neon colors, and large decorative backgrounds avoided?
+- Technical quality: check for text overflow, truncation, garbled characters, overlap, low contrast, occlusion, empty content, wrong proportions, stretched images, misaligned chart labels, and excessive template repetition.
+- 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: lines, 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