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,127 @@
# Culture Collage · Cultural Collage STYLE DESIGN SYSTEM
> Intended homepage tag: Promotion
> Visual metaphor: contemporary culture poster + tactile editorial collage
## 1. Style Positioning
Suitable for culture festivals, city events, brand collaborations, exhibition recruitment, community promotion, and partner invitations. The pages feel like a series of contemporary culture posters that can be flipped through continuously: bold typography, cropped imagery, paper-piece color blocks, offset numbering, and handcrafted textures together build the mood, while information can still be found quickly.
Underlying principles:
1. Each page first creates a clear feeling, then lets the date, venue, programs, and actions fall naturally into place.
2. The collage must be organized around a theme, a route, or a rhythm — no piles of random stickers.
3. Type, color blocks, and image scale must form a clear hierarchy; key facts must not hide inside artistic effects.
4. A single page uses at most one primary color and one contrast color — avoid equating "youthful" with full color.
5. When the event is a fictional concept, use only original abstract imagery, licensed assets, or honest placeholders — do not appropriate existing brand visuals.
## 2. Page Skeleton
16:9 landscape. Elements may have controlled bleed and offset, but all key information must stay within the safe area. The background switches among cream white, ink black, and a single high-saturation color.
Pages do not fix a traditional title bar. The title may run vertically, span columns, or sit close to the main image, but every page still needs a clear first reading point. Dates, page numbers, and route numbers serve as stable navigation, fixed at edges or corners.
The cover is like the main poster: the event name occupies 35%–55% of the frame, paired with one original key visual and one concrete invitation. The body forms a fast-slow rhythm among program collages, route posters, schedule strips, ticketing info, and partner actions.
## 3. Content Organization
Titles use invitations or statements the audience could say out loud, such as "Seven nights to hear the city anew." Subtitles add the date, venue, or how to participate.
Each page carries at most one main narrative and 3–5 essential facts. Use short sentences, dates, verbs, and direct labels — no long brand manifestos.
Content is organized as "get attracted — understand the experience — choose a route — plan participation — check participation requirements or eligibility — act now". Production notes, promotional strategies, and design remarks from the organizer's perspective must not appear on audience-facing pages.
## 4. Content Page Layout System
### A. Main Poster Page
The event name, date, and one invitation sentence form the large typography, with the key visual occupying more than half. Information is sparse and clear — do not list every program and partner on the cover.
### B. Program Collage Page
Form a group of 3–5 images or color blocks at different scales, with program counts and categories embedded in the composition as large numerals. Each category keeps only its name, count, and one representative action.
### C. Themed Route Page
Present the three themed routes as three visual trajectories in different directions, each with one experience description, its main programs, and the suitable audience. The three routes need not be equal-width cards, but they must be comparable.
### D. City Schedule Page
Organize dates and venues with a horizontal seven-day rhythm strip or a four-zone map. Highlight key sessions by enlarging type size or using cropped color blocks — do not use dense calendar tables.
### E. Participation Info Page
Ticket prices, free-admission ratio, capacity, and how to register are arranged around one main image. Numbers must be clear — rotation, textures, or occlusion must not sacrifice their readability.
### F. Partners & Action Page
The left side states what partners can take part in; the right side gives promotional assets, deadlines, and a clear contact action. The ending must be a concrete verb such as "Register / Submit / Contact / Attend" — no vague thank-yous.
## 5. Color System
- Cream paper #F3E8D4: the light main background.
- Ink black #171717: titles, body text, and dark pages.
- Poster orange #F05A38: main invitations, dates, and energy focal points.
- Ultramarine #2557D6: routes, nighttime content, and contrasting information.
- Acid lime yellow #D9F04A: very small amounts of highlight, stickers, and action prompts.
- Pink mist #E8A7B3: secondary paper pieces and soft backgrounds.
- Paper gray #B8B0A4: captions, page numbers, and textures.
A page uses cream paper/black as its base and picks only orange or ultramarine as the primary color; acid lime yellow covers less than 5% of the page. Rainbow gradients, purple-pink neon, and multiple high-saturation colors evenly distributed are forbidden.
## 6. Fonts and Text Hierarchy
Chinese pairs MiSans Bold with MiSans; English titles use Archivo Black (a compact ultra-heavy grotesk, via customFonts), body uses Liter; when necessary, Unna may serve as very short cultural footnotes. At most three typeface roles.
- Event name: 6–9x body text; may break across lines, but the main word must not be split.
- Page title: 2.5–4x body text.
- Dates and key numbers: 3–6x body text.
- Program labels: 1–1.3x body text.
- Descriptions and ticketing: 1x; must remain comfortably readable.
- Page numbers and footnotes: 0.6–0.75x.
A small amount of text may be rotated 90 degrees as navigation, but body text, prices, dates, and action information must never be rotated. Do not use handwriting-style fonts to carry key information.
## 7. Chart Language
Promotional pages do not use business charts by default. Quantitative relationships are preferably expressed through big numbers, proportional strips, program matrices, time rhythms, and zone distributions.
When comparison is needed, use directly labeled single-series bars, stacked strips, or bubbles, with no redundant axes. Data graphics should blend into the poster layout, but values must remain precise.
Do not use 3D pie charts, dashboards, complex radar charts, or waveform decorations that carry no information.
## 8. Tables and High-Density Information
Schedules and partner information use editorial-style lists: generous line spacing, clear dates, venues, and program names — no Excel-style full borders.
Key sessions may be emphasized with a poster-orange block or a thick black underline; other items stay black and white. A full schedule of more than 10 entries should not be shrunk to cram into one page — present selectable main threads and the registration entry instead.
Ticket prices and capacity must appear in normal orientation at large type sizes. Partnership benefits are not built into a pricing-card wall.
## 9. Components and Graphic Elements
Stable components include cropped photo frames, torn-edge paper pieces, misregistered overprints, route arrows, date stamps, oversized numerals, short underlines, and small starbursts.
Use at most two texture techniques per page. Torn edges, grain, and misregistration are only light tactile touches and must not reduce the clarity of text or photos.
The key visual may consist of original abstract photography, object close-ups, paper sculpture, or geometric constructions. If people appear, they must come from usable assets, without fabricated identities, quotes, or stories.
## 10. Texture and Forbidden Items
The whole should feel like a complete visual identity from an independent cultural institution: tactile, rhythmic, with a clear invitation. The anti-template feel comes from composition and scale, not deliberate messiness.
Forbidden: random sticker packs, full-page torn paper, stacked retro filters, purple-blue neon, emoji arrays, social-media UI mockups, rounded-card walls, irrelevant trendy people, stolen brand posters, occluded key information, and mood with no way to participate.
## 11. Generation Checklist
- Does the cover communicate the event name, date, and appeal within 3 seconds?
- Do the six pages form a continuous path from attraction to actual participation?
- Does every image, color block, and numeral in the collage serve the theme or navigation?
- Are date, venue, price, capacity, and actions complete and readable?
- Does each page keep a single primary color without devolving into a rainbow poster?
- Are original/usable visuals used, without appropriating existing brands or fabricating people's stories?
- Are card walls, social UI, random stickers, and vague brand manifestos avoided?
- Have bleed safety, text occlusion, rotation misuse, overlap, cropping, and garbled text been checked?
- No cards by default: unless the user explicitly requests them, it is strictly forbidden to use rounded-rectangle or rectangular cards to build hierarchy or alignment: line segments, whitespace, and font-size differences are better solutions
- No evenly divided compositions: unless no other layout is available, do not default to thirds, quarters, or two-by-two matrices. This includes three-part conclusions such as a three-way split plus a title plus a conclusion
@@ -0,0 +1,161 @@
# Organization Name Trend Report 2025 STYLE DESIGN SYSTEM
## 1. Style Positioning
A landscape magazine-style PPT / PDF design system for creative-industry trend reports, award insights, case studies, and annual reviews, aimed at visually sensitive readers who can accept high information density — designers, advertising creatives, brand owners, agency managers. It organizes body text, case images, quotes, statistics, and thematic groups in the manner of an "editorial magazine + awards archive + trend commentary", establishing order through strong color blocks, bold titles, column layouts, and hard-edged cards.
Franklin Gothic sans-serifs form the typographic core; black, off-white, and brand yellow form the identity base, combined with coarse-grain / halftone imagery, hard-edged color blocks, magazine-style columns, and small navigation labels. Black and off-white backgrounds alternate; yellow serves as the brand anchor; large titles use extra-heavy sans-serifs and may occupy half a page; body text is split into narrow columns, cards, or quote blocks; images use case screenshots, work images, on-site photos, or grained imagery; headers and footers carry the report name, section labels, page numbers, and a small yellow identity mark.
Underlying principles:
1. **Establish page structure with strong contrast first, then fill in content.** Black / off-white / yellow / theme color blocks do the zoning; thin lines and shadows are not the primary structural means.
2. **High density is allowed; anchorless long text is not.** Every page includes at least one scanning entry point: a title label, a bold information sentence, a card boundary, an image, or a quote.
3. **Brand identity takes priority over decorative variation.** Keep the small yellow identity mark, the Franklin Gothic character, hard-edged rectangles, and grained imagery consistent; vary through layout and theme colors — do not add new effects.
## 2. Page Skeleton
The canvas is a landscape widescreen ratio, close to 16:9. Use left-right zoning, three-column grids, half-page text-image layouts, or full-page section visuals; keep narrow safe margins on all sides. Images may be cropped to full height or full width; text and the identity mark need edge clearance.
**Cover / section divider:** a large image or grained background overlaid with an oversized title. The title sits left or occupies the left half; the image covers the full page or sits on the right. The cover may include partner names (plain text) and the report name; the section divider keeps the theme label, the giant title, and the small yellow identity mark at the bottom. Reading path: small label → giant title → background image mood → footer identity mark.
**Table of contents / trend overview page:** a multicolor hard-edged card grid; each card contains a trend name and a short description; no rounded corners, no shadows — differentiated by hue and position. The top keeps the section label or report name, the bottom keeps the identity mark; scan left to right, top to bottom.
**Content interpretation page:** off-white or black background; the top carries a section label as a rectangular block or short text navigation; the body contains body columns, quote columns, image areas, or case cards. Keep at least one explicit visual anchor. Reading path: header label → large title / information sentence → main image or main card → body explanation → quote / source.
**Case text-image page:** the image occupies half to two-thirds of the page; the other side holds short body text, a quote, or captions. On black backgrounds, images are embedded as hard-edged rectangles; on off-white backgrounds, images may be full-height and center-cropped. Text and image are separated by whitespace or color-block boundaries, rarely by thin lines.
**High-density parallel-module page:** use multi-column rectangular cards or side-by-side text blocks with narrow, clear spacing; title, body, and author / source are clearly graded. When content exceeds 4–6 modules, group with color blocks first instead of shrinking body text further.
The header's top-left holds the section label or theme name; the top-center / top-right may hold a report name such as "TREND REPORT 2025" in small type. The footer carries a page number, small vertical side text, or the small yellow identity mark at bottom-center. The identity mark stays small — not a large watermark. Structure relies on background switching, card boundaries, image cropping, and whitespace, not on divider lines; there are no stable large watermarks or complex background graphics.
## 3. Content Organization
Titles are short and conceptual, often 2–5 words, in Title Case or all-caps labels; trend titles use noun phrases, contrast phrases, or attitude-laden concept words — no explanatory sentences. A page carries only one main concept.
The information sentence is a complete judgment sentence or a short lead paragraph, at about 1.3–1.8x body size, in regular or Heavy weight; no longer than one short paragraph, used to explain the page's value.
Body text is paragraph-based, rarely using traditional round bullets; it is split into 2–3 narrow columns or embedded in cards. For enumerations, use hard-edged cards with short titles + short body paragraphs — no ordinary bullet lists.
Grouping may be organized by trend theme, case / opinion / quote, reader segment, awards or statistical entries, or color cards. A section divider holds 1 theme; an opinion page holds 1 main judgment + 1–2 pieces of evidence; an overview page juxtaposes 4–6 theme cards; a case page holds 1 case image + 1 interpretive paragraph + 1 quote.
Keywords are emphasized with Heavy weight, yellow background, white-on-black, or theme-color cards. Do not use underlines, italics, highlighter smears, or mixed fonts. Numbers may be enlarged and combined with bold keywords; units, years, and award names sit right next to the numbers, not scattered into footnotes. Sources, authors, titles, and page numbers use small type, placed below quotes, in the footer, or at the side.
## 4. Content Page Layout System
**A. Black-background data / awards card page**
For annual results, key figures, award entries, and list-style information. The left side holds an introduction or background; the right side uses yellow hard-edged rectangular cards to carry numbers and entries. Main numbers are 2.5–4x body text; keywords use Heavy; cards are tightly packed with black gaps between them. Do not use for content needing delicate, long explanations — overly long body text on black reduces reading comfort.
**B. Multicolor trend overview grid**
For 4–6 peer-level themes. The body is a horizontal collage grid; each block uses a different background color and contains a short title and a summary paragraph; titles Heavy, body regular weight. Color blocks have similar areas — avoid enlarging one theme without justification. This layout is unsuited to carrying many case images or complex data.
**C. Off-white three-part text-image page**
For in-depth interpretation, case explanations, and juror opinions. The structure is a left body column, a large image in the middle or right, and a quote / supplementary note on the other side. Off-white background, black or dark-gray text, hard-edge cropped images. If no high-quality case image is available, use a quote card or a theme color block to complete the visual anchor.
**D. Section big-type visual page**
For opening a trend section. A full-page grained photo or duotone halftone image overlaid with an oversized Heavy title. The title is left-aligned, occupies about half the page, and is colored white, pink, yellow, or a light tone depending on the underlying image. Use only for section transitions or strong statements — not for several consecutive pages, or the rhythm becomes too heavy.
**E. Black-background case screenshot page**
For mobile screenshots, video stills, and on-site work. Screenshots are juxtaposed as hard-edged rectangles or at device aspect ratios, with a short interpretation and quote on the right or above; the small yellow identity mark serves as the footer anchor. Do not add realistic shadows or device frames to screenshots — keep the editorial-archive feel.
**F. Quote / commentary card page**
For expert opinions, creator quotes, and concluding paragraphs. Quotes sit inside light-green, pink, or white color blocks, paired with grained graphics or case images; the quote text is slightly larger than body text, and the author info is markedly smaller than the quote. Do not make the entire page one big centered quote — keep the header label, source, and layout structure.
## 5. Color System
**Background black #070809 / #1D1D1B**: for section dividers, data pages, and case screenshot pages, up to full-page. Text on black uses white, off-white, or yellow; avoid dark-gray small type.
**Off-white / warm gray #E3E2DD / #DAD8D0 / #DCDBD6**: for reading-oriented content pages and quote pages, up to full-page. May be replaced by a brand neutral close to warm gray, but never blue-white or bright cool white.
**Brand yellow #FFD200 / #FFD900**: the core brand accent, used for labels, data cards, key numbers, the small yellow footer identity mark, and a few whole-block backgrounds, ranging in area from small badges to half-page cards. When yellow is used in large areas on a page, reduce other high-saturation colors. Not freely replaceable; if migrating to another brand, keep an equally recognizable primary accent color.
**Primary text black #181917 / #232A31**: for titles and body text on off-white and light-color cards. Do not use overly light gray as the primary body color.
**White / near-white #F5F3EA**: for text on black, reversed-out labels, and cards; its area is usually smaller than the black base, or it serves as the text color; ensure small text on black stays clear.
**Theme pink / coral #F8B3A6 / #DB5B52**: for trend cards, section image overlays, and accent modules — not the primary brand color of the whole report. May be swapped per section for a theme color of equal saturation, but no more than 1–2 theme colors per page.
**Theme blue #004370 / #114691 / #6D8BB0 / #8BBFE6**: for case images, section color blocks, and calm-tech themed pages; deep blues may serve as text or background, light blues as card fills. Do not place yellow, pink, green, and blue all at high saturation side by side, except in the overview grid.
**Theme green #A3B9A3 / #7A876D / #E0FDBA / #E3FDBE**: for nature, design, and quote-type modules; light fluorescent green as an accent fill, gray-green as an image or background aid. Avoid staying too close to off-white, which causes low contrast.
A regular page uses black / off-white / yellow + 1 theme color; overview pages may juxtapose multiple colors, but each block keeps a single-color base + black text. Do not invent a red-green up/down system; states are expressed first with text labels and bold — no new traffic-light color schemes.
## 6. Fonts and Text Hierarchy
Fonts are centered on Liter (body) and Archivo Black (titles, via customFonts), matching the source's FranklinGothicATF-Regular/Heavy grotesque system of moderate width and solid letterforms; avoid rounded tech fonts, serif fonts, or handwriting fonts.
- **Giant section title**: 6–10x body text, Heavy, tight leading, left-aligned; may span an image or occupy half the page.
- **Page main title / key numbers**: 2.5–4x body text, Heavy or Regular + Heavy mixed, with emphasized words in Heavy.
- **Information sentence / lead**: 1.3–1.8x body text, mostly Regular; key phrases may be Heavy.
- **Body text**: 1x, Regular, paragraph-style typesetting, with controlled narrow-column line length.
- **Subheading / card title**: 1–1.3x body text, Heavy, placed above a paragraph or at the top of a card.
- **Quote text**: 1–1.5x body text, may be Regular; author and title at 0.55–0.75x.
- **Table / card entries**: 0.8–1x body text, titles Heavy, descriptions Regular.
- **Headers, footers, page numbers, sources**: 0.45–0.65x body text, Regular, all-caps or short labels.
Text is mainly left-aligned; large centered blocks are not the norm. Report navigation and labels lean all-caps, trend titles lean Title Case, and body text uses ordinary sentences. Leading keeps magazine density; small text on black gets slightly more leading.
## 7. Chart Language
Prefer statistics, cards, case images, and editorialized information blocks over complex data charts. Traditional bar, line, and pie charts are used only when trend comparison truly requires them.
The stable vocabulary includes: big numbers + text explanations, yellow data cards, peer-level entry cards, and theme rectangle grids. Axes, gridlines, legends, and complex multi-series colors are not default elements.
When a chart must be generated: use a black or off-white background; thin, understated axis lines; very few light-gray gridlines; 1–3 series colors chosen from yellow, black, blue, pink, and green; labels close to data points or bars, minimizing standalone legends; key data marked with yellow fill, Heavy weight, or enlarged numerals. Do not use gradient bars, 3D pies, glowing lines, complex dashboards, or rainbow series.
If forecasts, targets, or baselines must be added, use thin lines + small all-caps labels; they must not overpower the main title or the data itself.
## 8. Tables and High-Density Information
High-density information preferably uses hard-edged cards, color-block grids, and list entries; tables serve archiving and side-by-side comparison, not decorative data walls.
Headers use Heavy, small all-caps, or short titles, with a yellow, black, or light-gray background. Rows and columns are separated by background blocks, spacing, and thin lines of consistent weight — no complex borders. Row height is compact but not cramped; text may wrap fully. Numbers are right-aligned or sit next to their units; text is left-aligned. When a column holds too much text, split it into cards instead of compressing the column width further.
Key statistics or award items may be highlighted with yellow focus rows / focus cards; total rows use white-on-black or black-on-yellow. Zebra striping is not a primary feature — if used, it should be very subtle, close to the difference between off-white and warm gray. Symbol marks and rating dots do not appear stably and should not be added by default. High-density parallel modules must include title, body, and source / author levels — avoid giving all text the same weight.
## 9. Components and Graphic Elements
**Rectangular section label**: a small hard-edged rectangle at top-left, with yellow, white, light-green, light-blue, or black fill and small all-caps text; used for navigation and section positioning, not scattered in quantity as decorative stickers.
**Yellow footer identity mark**: a small yellow identity point at bottom-center or a bottom corner, presenting the new theme name as plain small text — no graphic logo is drawn. When migrating brands it may be replaced by an identity mark of equal weight, but do not enlarge it into a watermark.
**Hard-edged color-block card**: for trend summaries, data entries, quotes, and lists. No rounded corners, no shadows, no stroke or an extremely weak stroke; the interior uses title + body, title Heavy, body Regular.
**Coarse-grain / halftone image treatment**: for covers, section dividers, and some case pages; applicable to photos, work images, and abstract textures. Must not impair body-text readability; text areas need a solid-color base or sufficient contrast.
**Quote block**: a standalone paragraph or light-color card with author info; no exaggerated quotation-mark graphics needed.
**Small side text / vertical navigation**: for page numbers, sections, or supplementary sources, placed near edges; avoid filling both sides of every page.
**Image frame / screenshot frame**: hard-edged rectangular crop; may juxtapose two mobile screenshots or one large image. Do not add glassmorphism, rounded device shells, or drop-shadow overlays.
Process arrows, matrix marks, and colorful icons are not stable core components; processes use simple hard-edged arrows or numbered cards, staying within the black / yellow / off-white system.
## 10. Texture and Forbidden Items
Overall: flat, hard-edged, print-grain, editorial-magazine texture; visual impact comes from large titles, black-yellow contrast, theme color blocks, and coarse-grain imagery — not from three-dimensional effects.
**Forbidden:** 3D charts, glowing strokes, glassmorphism, complex gradient backgrounds, flashy shadows, skeuomorphic buttons, emoji, cartoon illustrations, generic colorful icon libraries, rounded business cards, large centered text blocks, low-contrast light-gray body text, full-page ungrouped long text, and decorative fonts that clash with the Franklin Gothic character.
**Use with caution:** large image backgrounds, colorful theme colors, halftone textures, vertical side notes, traditional charts, process arrows. They must serve section atmosphere, case evidence, or navigation; if they impair body-text readability, fall back to solid-color bases and hard-edged cards.
**Allowed on special pages:** covers and section dividers may use full-bleed grained imagery, oversized titles, and strong color overlays; overview pages may use multicolor collages; case pages may devote large areas to screenshots or work images. Content pages must form a rhythm between black-background impact and off-white reading — cover-level intensity should not be sustained indefinitely.
Photos / screenshots / work images must have case value or texture value — do not fill space with irrelevant stock photos. Large image backgrounds suit only covers, section dividers, and a few transition pages. Gradients, shadows, glow, and 3D do not belong to this system. Rounded corners may be kept when inherent to a screenshot, but layout containers are hard-edged by default.
## 11. Generation Checklist
- Is it a landscape widescreen page with narrow safe margins, with no content touching edges, overflowing, or being cropped?
- Does the header have a small section label / report name, and the footer a page number or small brand anchor, without competing with the body?
- Does each page hold only one main viewpoint or a clear group of peer-level modules, avoiding flat piles of text?
- Are titles short and conceptual, and is the body split into columns, cards, or paired with images — rather than full pages of continuous long text?
- Do fonts keep the Franklin Gothic sans-serif character, with levels distinguished by relative size and Heavy / Regular?
- Is coloring based on black, off-white, and yellow, with per-page theme colors controlled and text contrast sufficient?
- Are images cases, works, screenshots, or grained material, avoiding irrelevant stock and over-decoration?
- Are charts restrained, preferring big numbers / cards; if axes and gridlines exist, are they understated enough?
- Do tables and high-density information use hard-edged cards, clear headers, aligned numbers, and readable row heights?
- Do components use system elements such as rectangular labels, hard-edged cards, quote blocks, and the small yellow identity mark — rather than newly invented styles?
- Are 3D, glow, complex gradients, emoji, colorful icons, soft rounded business templates, and large centered text blocks avoided?
- Have garbled text, overlap, occlusion, low contrast, empty content, wrong proportions, stretched images, misplaced page numbers, and mechanical template repetition been checked?
- No cards by default: unless the user explicitly requests them, it is strictly forbidden to use rounded-rectangle or rectangular cards to build hierarchy or alignment: line segments, whitespace, and font-size differences are better solutions
- No evenly divided compositions: unless no other layout is available, do not default to thirds, quarters, or two-by-two matrices. This includes three-part conclusions such as a three-way split plus a title plus a conclusion
@@ -0,0 +1,171 @@
# Report Name · Trend Report 2025 STYLE DESIGN SYSTEM
## 1. Style Positioning
Suitable for commercial-film trend reports, creative-asset library introductions, ad-film direction proposals, and PPTs studying directing/cinematography styles. Aimed at readers with a film aesthetic and commercial creative context: build the feeling with cinematic images, then complete the judgment with short titles, short paragraphs, and characteristic tags.
Medium-high information density: a content page typically contains 1 trend viewpoint, 2–3 groups of narrow-column text, 1 group of Characteristics tags, and either a single large image or a multi-image collage. It uses black backgrounds, white text, bold titles, narrow body columns, and large-area imagery; strong colors come mainly from the images, not from a decorative system.
Underlying principles:
1. **Images first, words summarize**: images supply mood, color, and evidence; titles name the trend, body text explains — decorative graphics are not a substitute for image evidence.
2. **Black base first, readability above image integrity**: core text must sit on black or a sufficiently dark carrier; when necessary, sacrifice image area to keep white text clear.
3. **One trend per page, one skeleton for the whole report**: the collage approach may vary, but each page serves only one core concept and stably keeps the header, page number, title, body, and characteristic tags.
## 2. Page Skeleton
- **Canvas ratio**: landscape widescreen 16:9. Images may be full-height, full-width, or edge-to-edge collaged — the traditional white canvas is not kept.
- **Base background**: black or dark-toned imagery. Content pages use either "pure-black info zone + image zone" or "full dark image with overlaid text". White page backgrounds and light-gray office-template bases do not belong to this system.
- **Margins**: outer margins are narrow — header, page number, and images approach the edges; body text keeps stable inner padding. Image collages use hard cuts or extremely narrow gaps.
- **Title zone**: located left, center-left, or in the upper half of the black info zone; may overlap images but must land on dark areas. Trend-page titles usually break compactly into 2–3 lines.
- **Body zone**: composed of a "text explanation zone + image evidence zone". The text zone takes about one-third to one-half; the image zone may be a single image, dual zones, or a multi-image grid.
- **Header**: small all-caps navigation is stably placed at top-left, top-center, and top-right — e.g., the brand name, COMMERCIAL, FILMMAKING, TREND REPORT. Slightly letterspaced, low-level — it does not carry primary information.
- **Footer/page number**: a small white page number at bottom-left, close to the edge but not touching it. Do not use large page numbers, watermark page numbers, or complex footer bars.
- **Logo**: a small identity mark may sit at top-right, presenting the new theme name as plain small text or left empty — no graphic logo is drawn; white and extremely small. Do not enlarge it into a key-visual logo.
- **Sources/footnotes**: if sources are added, place them at the bottom of the body zone or near the footer, below the body text — do not build a standalone footnote bar.
- **Navigation**: no TOC-style sidebar, breadcrumbs, or section color blocks; continuous reading relies on the small top navigation and page numbers.
- **Divider lines**: explicit lines are rare; zones are divided by black-block boundaries, image cut lines, and text-column spacing.
- **Watermarks/background graphics**: the cover may have high-saturation pink vertical stripe blocks; content pages build no repeating watermark system. Background graphics must not expand into routine decoration.
- **Default reading path**: large title → large image/collage → short body → Characteristics tags → header/page number.
## 3. Content Organization
- **Title style**: use phrasal trend names or strong opinion sentences. Trend titles may be 2–4 words, such as "Analog Footage", "Docu-style", "One Shot Ads", "Bold, Saturated Colors"; an intro page may use a full sentence. Avoid long subtitle-style titles.
- **Title line breaks**: hard line breaks are allowed, each line forming a forceful phrase; leading is tight and the text block is heavy. Do not set the title as one long, thin line spanning the page.
- **Information sentence**: an opening or closing page may use one strong statement; content trend pages need no extra large subtitle — avoid weakening the trend name.
- **Body organization**: small type in narrow columns, usually 2–3 short paragraph blocks; explain the trend's background, visual characteristics, and commercial use value — no list-style long-form argumentation.
- **Grouping logic**: "trend name → explanation paragraph → Characteristics tags → image evidence". Multiple images are merely multiple samples of the same trend — they do not act as parallel sections.
- **Viewpoints per page**: each page covers only one trend or one report action. Do not juxtapose multiple unrelated concepts, and do not compress multiple trends into a comparison table.
- **Body density**: block the text in narrow columns; long runs of continuous text must not span most of a page. If there are more than 3 paragraph blocks, reduce the image count or split the page.
- **Key-point style**: use capsule tags, not traditional bullets; be cautious when adding bullets or numbered lists.
- **Keyword emphasis**: use bold titles, all-caps subheadings, capsule tags; inside body text use no colored highlighter marks and no underlines.
- **Numbers/units/time**: numbers are mainly inline in body text; no giant-number pages or KPI dashboards, and no expansion into chart-based components.
- **Source footnotes**: white/light-gray text smaller than body, placed at the bottom of the same text zone; no long URLs, long quotes, or footnote numbering systems.
## 4. Content Page Layout System
### A. Black text column + single large image on the right
For report introductions, service descriptions, and single-trend explanations. A black info column on the left or center-left takes about one-third to one-half; the right side is a full-height image. The title sits on top; the body sits below in 1–2 narrow columns. People or light sources should face/lead toward the text zone, avoiding visual escape. Unsuitable for pages that need multiple samples or complex classification.
### B. Left text + right multi-image collage
For showing multiple applications of the same visual style. The left black base holds the title, body, and tags; the right uses a 2–3 column irregular or gridded collage — images edge-to-edge, no rounded corners, no shadows. Close-ups, environments, materials, and people may be mixed, but the color tone must serve the same trend. Unsuitable for linear reasoning, step flows, or data comparison, because multiple images break the reading order.
### C. Full dark image with overlaid text
For trend pages with strong atmosphere and strong emotion. The image bleeds full-page; text sits in naturally dark areas or black-overlay zones; the title may be center-left or center-right, with the body right beneath it. Do not place body text directly on bright skin, sky, or complex textures. Unsuitable for images with even brightness, dense detail, and no readable area.
### D. Multi-zone image montage + central/side text
For summarizing multiple clips into one trend. Images are spliced top-bottom, left-right, or in large-medium-small modules; text sits on black zones or dark image blocks; zones are hard-cut — avoid rounded-card styling. The title anchors the visual center; tags sit at the bottom of the text block. Unsuitable when each image's theme differs too much or when per-image captions are needed.
### E. Large image background + CTA closing
For closing pages and licensing/service notices. A strongly atmospheric large image is the background; the left side or a dark area holds the title, a longer description, and one small white button. The button is only an action entry — do not turn it into a marketing landing-page mega-button. Unsuitable for too much body text, multiple action entries, or pricing/package information.
### F. Cover split composition
The cover consists of a large image, black fields, and high-saturation vertical stripe blocks; the title is large and fractured — partial glyphs may be sliced — paired with small theme words. Only for covers or strong section openings; do not copy it frequently onto ordinary content pages, or the report's rhythm breaks.
## 5. Color System
- **Structural black #000000 / #080204 / #0B0A0A**: for base color, info columns, dark masks, and header/footer carrier color — the largest area. Cannot be replaced with white or light gray; brand replacement may only use a near-black that is dark enough.
- **Primary text white #FFFFFF / #F5F5F2**: for titles, body, header, page numbers, and tag text. Must contrast strongly with the background; do not introduce multiple text colors on the same page to create hierarchy.
- **Auxiliary gray #9A9A94 / #6E6F6D**: for low-level navigation, secondary notes, or faint text on dark areas. Small area — cannot be used for main body text; avoid low contrast.
- **Cover/strong accent pink #FC1AED / #F018D8**: for the cover's vertical stripes — not a general-purpose highlight for body pages; content pages must not casually use pink buttons, titles, or icons.
- **Warm red-orange image colors #EF1721 / #D46D49 / #9E3C26**: from lighting, skin tones, sunsets, and warm interiors. Must not be artificially expanded into chart series colors or large color blocks unless the image itself provides them.
- **Deep blue-cyan image colors #02213C / #0B4F73 / #3F92A6**: from water, night scenes, and cool-toned imagery. May guide image selection, but are not a standalone UI primary color.
- **Natural green/olive #12260C / #555948 / #6D6B5B**: from nature, grassland, and documentary-feel pages. Appears in large areas only within image zones; text stays white-on-black.
- **Tag stroke white/light gray #FFFFFF / #CFCFCB**: for Characteristics capsule borders and small tags — keep linework restrained.
A page's dominant hue is decided by its images; beyond black and white, do not actively introduce more than 1–2 high-saturation hues. No data/state color system exists — do not add red-green up/down, traffic-light, or multi-series chart palettes. Brand replacement may only affect the cover accent blocks or the local image color direction — it cannot change the black-background, white-text skeleton.
## 6. Fonts and Text Hierarchy
Use sans-serif fonts. Body text centers on Liter (Chinese: MiSans), titles use Archivo Black extensively (via customFonts), and navigation/some small text uses Liter. When replicating, pair an ultra-heavy black sans with a regular sans-serif; small navigation uses narrow letterspacing / all-caps.
- **Giant cover title**: 8–9x body text; may be broken across lines, locally compressed, or offset; cover only.
- **Content page main title**: 4–4.5x body text, ultra-heavy weight, tight leading, usually 2–3 lines — the highest level.
- **Intro/CTA title**: 3.5–4.5x body text; may be a full sentence; keep bold and short lines.
- **Subheading/column word**: 0.85–1.1x body text, often all-caps or bold, e.g., Characteristics.
- **Body text**: 1x, regular weight, narrow columns, slightly tight leading but not crowded. Do not bold large stretches of body text.
- **Capsule tag text**: 0.7–0.85x body text, often all-caps, bold or semibold, inside stroked small capsules.
- **Header navigation**: 0.7–0.85x body text, slightly letterspaced, all-caps, low-contrast but readable.
- **Footnotes/page numbers**: 0.6–0.75x body text, small white type.
- **Chart/table labels**: if they must be added, keep them at or below 0.8x body text, following white-on-black.
Serif body text, handwriting fonts, cartoon fonts, and excessive italics are forbidden. Italics may only mark very few quotes or special words — not as a hierarchy rule.
## 7. Chart Language
The source files have no data-chart system of bars, lines, pies, axes, legends, or gridlines. **Do not proactively turn trend content into a data dashboard**.
If charts must be added:
- Charts serve only as secondary proof; their area must not exceed the image key visual; place them in the black info zone or on dark cards.
- Axes and gridlines use extremely thin light-gray, low-contrast lines; data labels use small white sans-serif.
- Series colors never expand into rainbow — at most white/gray + one accent color from the page's imagery.
- No 3D charts, glowing lines, gradient area charts, complex legends, or decorative data icons.
- Key data may be marked with bold white text or small capsules — no large-area colored callouts.
Prefer juxtaposed image frames, Characteristics tags, and short paragraphs over complex quantitative charts.
## 8. Tables and High-Density Information
The source files have no traditional table system. High-density information is presented as narrow-column body text, multi-image collages, and capsule keywords; comparison topics prefer "tag groups + short paragraphs + image samples" over large tables.
- **Tag groups**: the Characteristics zone is multiple small capsules arranged horizontally, wrappable; white/light-gray stroke, transparent fill on black, all-caps text. Used for keywords, shooting techniques, and visual traits — not long sentences.
- **Text columns**: body may split into 2 or 3 columns, each of short paragraphs with clear column spacing; left-aligned; tops may align to the title baseline or the body start.
- **Image matrix**: multi-image collages act as a "sample table"; no header, no numbering — unified theme and tone form the set.
If a table must be used: the header is small all-caps white text; lines are extremely thin light gray; the base stays black or dark gray; no zebra striping, colored cells, thick borders, or Excel-style grids. Numbers right-aligned, text left-aligned; total rows are distinguished only by bold or thin lines. The table's area must be controlled — it cannot replace the image key visual.
## 9. Components and Graphic Elements
- **Small top navigation text**: repeats near the top edge — white/light gray, all-caps, low-level. Do not add icons, underlines, or colored selected states.
- **Top-right identity mark**: presents the new theme name as plain small text — white, vertical or tight against the corner — as a brand signature only; no graphic logo is drawn.
- **Page number**: small white type at bottom-left, appearing stably. Must not be enlarged into a decorative numeral.
- **Characteristics module**: a subheading + multiple capsule tags. The subheading may be all-caps; capsules use thin strokes, rounded/capsule shapes, transparent-on-black fill. 3–6 tags are appropriate — more looks like a filter panel.
- **Black info block**: a page structure zone, not a card; hard-cut, no shadow, no stroke, no rounded corners — carries the title and body.
- **Image collage frame**: images are directly cropped and aligned — no rounded corners, no drop shadows, no photo frames; sizes may vary, but no decorative borders are added.
- **CTA button**: only on the closing page — a small white-background black-text rectangle or lightly rounded button. It must not flood every page.
- **Divider lines**: not a routine component; if separation is needed, use only image boundaries or extremely thin lines. No thick lines, colored lines, or dashed process arrows.
- **Icons/arrows/matrix marks**: if used, they must be extremely small, white, linear, label-auxiliary — never become a colorful icon system.
## 10. Texture and Forbidden Items
Visual richness comes from the light-and-shadow, grain, color, and composition of real imagery — not from PPT effects.
**Forbidden:**
- Large white office templates, light-gray background pages.
- Colorful icon sets, emoji, cartoon illustrations, 3D graphics, skeuomorphic buttons.
- Gradient title text, glowing strokes, neon text effects, complex shadows, glassmorphism.
- Stacked rounded cards, drop-shadow photo frames, heavy borders, decorative geometric patterns.
- Large centered text blocks, full pages of bullets, traditional TOC/process-arrow pages.
- Multicolor data charts, red-green status lights, rainbow legends.
**Use with caution:**
- Large high-saturation color areas: should come only from images or cover accent blocks — content UI does not actively spread color.
- Buttons: only on CTA/closing pages; keep the count at one.
- Tables and charts: only as secondary modules when the topic truly needs quantitative proof — they cannot replace images.
- Icons: only small linear aids — never colorized.
- Transparent masks: may improve text readability, but should be near-black with natural edges — no obvious gradient effects.
**Allowed on special pages:**
- The cover may use strong pink vertical stripes, split titles, and large black fields.
- The closing page may use a CTA button and longer explanatory text.
- Full-image pages may let the image fill the canvas, but must keep a readable dark zone.
## 11. Generation Checklist
- Skeleton: is it a 16:9 dark cinematic report page? Are the small top navigation, bottom-left page number, and small top-right identity mark kept?
- Copy: does each page express only one trend/theme? Is the title short and forceful, and the body short paragraphs in narrow columns?
- Hierarchy: are titles markedly larger than body, and is Characteristics below body explanations but above the footer? Is confusion over specific font sizes avoided?
- Coloring: is black-background white-text the core? Do high-saturation colors come from images or the cover, rather than arbitrary UI decoration?
- Layout: do images carry the main emotional evidence? Does text land on black zones or dark areas? Is white text over complex bright images avoided?
- Charts: if present, are they minimal, low-contrast, secondary proof? Are 3D, rainbow colors, and complex legends avoided?
- Tables: if present, are they black-based with thin lines and no Excel feel? Have tables not replaced image samples?
- Components: are small navigation, capsule tags, hard-cut image collages, and black info blocks used? Are shadowed cards and decorative lines avoided?
- Forbidden items: no emoji, colorful icons, illustrations, gradient glow, complex textures, 3D, thick borders, or large centered text blocks?
- Quality: check text overflow, truncation, garbled text, overlap, low contrast, images covering titles, empty tags, distorted proportions, missing page numbers, mechanical template repetition, or overly identical page layouts.
- No cards by default: unless the user explicitly requests them, it is strictly forbidden to use rounded-rectangle or rectangular cards to build hierarchy or alignment: line segments, whitespace, and font-size differences are better solutions
- No evenly divided compositions: unless no other layout is available, do not default to thirds, quarters, or two-by-two matrices. This includes three-part conclusions such as a three-way split plus a title plus a conclusion
@@ -0,0 +1,152 @@
# Organization Name Type Trends 2025: Re:Vision STYLE DESIGN SYSTEM
## 1. Style Positioning
Suitable for type-trend reports, design-research releases, creative case collections, and brand/type-industry insights — long-form narrative PPTs/reports aimed at design, brand, creative, and type professionals. The report alternates between low-density visual pause pages and high-density editorial content/case pages, forming a landscape visual-magazine rhythm.
A modern neo-grotesque sans-serif skeleton (Liter for body, Archivo Black via customFonts for titles), combined with giant bold titles, high black-white contrast, full-bleed case images, restrained footers, and per-page theme colors.
- **Type as the key visual**: titles, section names, letterform specimens, and custom wordmarks carry identification first; graphic decoration must relate to letterforms, typography, or case presentation — never information-free decoration.
- **One visual center per page**: full-bleed images, black-white geometry, three-column long text, and case galleries are all usable, but each page has only one entry point: the giant title, the main image, a geometric symbol, or the body title.
- **Black-white base + per-page theme color**: white, black, and gray unify the report; strong colors such as orange, blue, pink, and green serve only as the theme color of an individual trend/case page or as local accents — never mixed across the report into a rainbow system.
## 2. Page Skeleton
- **Canvas ratio**: landscape 16:9. Primarily white-based editorial layouts, pure-black/pure-white opinion pages, or full-bleed image pages; do not change to portrait-poster or social-card ratios.
- **Global margins**: content pages keep wide outer margins; case images may approach the body-zone boundary, but the footer anchor stays at the bottom. Full-bleed cover/section images may fill the whole page.
- **Title zone**: covers, section dividers, and opinion pages use oversized titles that may occupy the upper half or span the whole page, often a short sentence with a period. Content-page titles sit center-left, upper-left, or in the middle of the body zone — no fixed header bar.
- **Body zone**: uses horizontal columns, side-by-side text and image, case collages, full-bleed images, and geometric-symbol pages. Long text uses narrow columns; on case pages images dominate, with text at edges or below.
- **Header**: no stable traditional header bar. A few case pages may place tiny caption/source text or column labels at the top, but this must not be upgraded into a fixed top bar for the whole report.
- **Footer**: content/case pages use a stable small footer: "Re:Vision" or the report mark at bottom-left, tiny section/column text at bottom-center or bottom-left-center, and a small page number or black numeral mark at bottom-right. Smaller than body text — not a decorative strip.
- **Brand mark**: the cover shows the brand as small wordmark text (plain text only — write the new theme name; no graphic logo is drawn); body pages carry the brand through the footer and the type system. Do not enlarge the logo on every page.
- **Navigation and TOC**: the table-of-contents page juxtaposes multiple "bold section title + smaller explanatory phrase" items; section entries use full-bleed images or minimal geometric pages.
- **Divider lines and watermarks**: no routine rule-line headers, vertical-line borders, or watermark system; separation relies on column spacing, whitespace, image boundaries, and geometric shapes.
- **Default reading path**: largest title/main image or geometric key visual → subtitle/information sentence → narrow-column body or case caption → footer page number and section.
## 3. Content Organization
- **Title style**: use short sentences, imperatives, judgments, or two-word phrases, often with a period — e.g., "Future Typography.", "Create something new.", "This is a new kind of trends report.". Section names may use an "X & Y." structure.
- **Information sentence**: a section divider explains its theme with one subtitle line, placed below the title or at bottom-left; size sits between title and body, usually bold or high-contrast white/black.
- **Body organization**: a modern sans-serif at regular weight, short line length, split into 2–3 columns; narrow columns, paragraph spacing, and whitespace support reading long passages.
- **Grouping logic**: advance by trend/theme; each chapter may contain a section cover, a lead-in, case showcases, analytical body, and quote/specimen pages. Do not mix too much chapter logic on the same page.
- **Viewpoints per page**: an opinion page carries only 1 core sentence; a content page revolves around 1 theme; a case gallery shows 3–6 works with short captions — avoid a long paragraph per case.
- **Key-point style**: prefer paragraph narrative. When listing points, use minimal short lines — no complex numbering, colored checkmarks and crosses, or multi-level indents.
- **Keyword emphasis**: rely on type size, bold, position, image scale, and the page's theme color; inside body text do not rely on highlighter marks, underlines, stroked text, or multi-color highlights.
- **Numbers/units/time conventions**: numbers serve page numbers, years, case annotations, or source info; new data uses small labels and clear units — numbers are not turned into business dashboards.
- **Source footnotes**: cases, images, and quotes are credited at top or bottom in very small type. The Credits/sources page may use multi-column dense small text; links or key nouns may be blue.
## 4. Content Page Layout System
### A. Full-bleed image + giant title overlay
For covers, section entries, and building trend mood. The image fills or nearly fills the page; oversized bold white/black text overlays the top or middle, with the subtitle below the title or at bottom-left. Rely on the tension between title scale and image — no shadows or strokes. It must not carry long body paragraphs, charts, or multi-case captions; overlaid text must avoid the image's most complex areas.
### B. Black-white geometric opinion page
For pauses between sections, manifesto-style short sentences, and the report's stance. A pure-white or pure-black background with a large black-white geometric shape at center — ellipse, double circle, eye shape, bracket shape — with the sentence embedded at center. The geometry is the subject, not a corner mark; information density is extremely low. Do not add long paragraphs, legends, tables, or clusters of small icons.
### C. Editorial lead-in / long-text page
For trend explanations, background discussion, and research passages. The title or subheading takes one column; the body splits into 2–3 narrow columns, keeping generous whitespace and the footer; bullets are rare. Emphasis comes from bold titles, first-paragraph position, and column-width variation; long text must not be spread as a single full-width column, and decorative illustrations must not be forced in.
### D. Left text right image / right text left image juxtaposition
For case analysis, work descriptions, and concept explanations. The image zone is larger than the text zone and may hold 1 main image or 2–3 juxtaposed images; the text zone holds a short title, several body paragraphs, and a small source. The image is the visual focus. To compare many works, switch to the gallery grid; if image detail is complex, text must not cover the image.
### E. Case gallery grid
For work collections, trend evidence, and type-specimen comparisons. Images use horizontal arrangements, loose grids, or uneven-width collages with ample whitespace; one large image + several small ones may establish hierarchy. Captions are extremely short; sources sit at edges. Do not make every thumbnail an equal-weight card, and do not give every image a long caption — that makes the page feel like a database.
### F. Letterform/symbol key-visual page
For typeforms, sound waveforms, letter specimens, and abstract symbols. Enlarged letters, wordforms, waveforms, or mirrored symbols occupy half to a full screen, with a short title and explanatory text beside them; emphasize letterform structure and rhythm — no extra icon decoration. If the topic is not type, logos, or visual language, giant letters must not be abused.
### G. Credits / sources multi-column page
For closing acknowledgments, references, and lists of institutions and people. Use 4–6 narrow columns of small text at high density; subheadings are bold; links or highlights may be blue. This layout suits only appendix-type information — not core opinion pages or pages meant to be read aloud live.
## 5. Color System
- **Near-white/white #FFFFFF, #FEFEF6, #F9F9EF**: for content pages, case pages, and source pages. May be replaced by an extremely light warm white, but never an obviously colored paper — unless as a single page's theme.
- **Pure black/near-black #000000, #111113, #161616**: for primary text, black-page backgrounds, and geometric key visuals. Pair with white text over large areas; do not mix with dark gray at low contrast.
- **Neutral gray #9C9C9C, #CFCFCF, #E5E5E5**: for auxiliary text, image boundaries, light-base separation, and neutral transitions; information level below black and white — must not serve as the primary body color.
- **Theme orange #FE9900, #FFCB7F, #FBE7C8**: for large letterforms, waveforms, local backgrounds, and accent shapes on sound/waveform/section case pages. Acts as a single page's primary color — it does not compete with other strong colors on the same page.
- **Theme blue #3178C8, #3B83CE, #37536D, #426B85**: for section images, case primary color, link/source emphasis, or visual specimens; the body-text link blue stays small in area.
- **Wine red/mauve #714D55, #886065, #743C3F, #A5888D**: for mood backgrounds or dominant tones of photography/case images — not recommended as a general-purpose accent for large-area replacement.
- **Bright pink/green and other strong colors**: only for the theme backgrounds or graphics of individual trend pages or case images — no global status-color system is established.
- **Per-page hue control**: apart from the case images' own colors, structural colors stay black-white-gray + 1 theme color. If gallery images are already colorful, text and components must return to black-white-gray.
- **Status-color boundary**: no red-green up/down system exists. If new content must express states, use small-area labels with clear explanatory text — no large red-green dashboards.
- **Brand color replacement**: white, black, and gray are irreplaceable; a single page's theme color may be replaced by one high-saturation color of the new brand, but the "one theme color per page" rule still holds.
## 6. Fonts and Text Hierarchy
- **Typographic character**: body text uses Liter (the source's Helvetica Now Text), titles use Archivo Black (the Display bold, via customFonts), and subheadings, footers, and labels use Liter Bold. Small amounts of serif or handwriting/experimental fonts appear only as case content itself — never as report-wide fonts.
- **Body baseline**: body = 1x; relaxed leading, narrow column width.
- **Large titles**: 4–5x body text or larger, bold Display; on covers and opinion pages they may scale up to become the page's key visual.
- **Content-page titles/subheadings**: 2–3x body text, bold, left-aligned or aligned with the main graphic or visual element; no decorative title bars.
- **Information sentences/subtitles**: 1.5–2x body text, immediately following the giant title or at bottom-left, keeping short lines.
- **Body paragraphs**: 1x regular weight, mainly black; paragraphs separated by space — first-line indent is not the main rule.
- **Table/chart labels/case captions**: 0.65–0.8x body text, black or dark gray; must stay readable — no overly light gray.
- **Footnotes, footers, page numbers**: 0.5–0.65x body text; page numbers usually at bottom-right.
- **Alignment**: mainly left-aligned; centering is only for single sentences on black-white geometric opinion pages. Large centered text blocks are forbidden.
## 7. Chart Language
The source files have no stable data-chart system; new charts must embed into editorial pages:
- **Allowed chart directions**: minimal line charts, few-series bar charts, or timelines — no business dashboard pages.
- **Axes and gridlines**: thin gray lines or weakened axis lines; avoid heavy borders, colored grids, and complex backgrounds.
- **Labels**: small and clear, preferably black/dark gray; key data may use the page's theme color, but no more than 1 accent color.
- **Legends**: reduce series; place legends close to the chart or label directly beside lines/bars; no large legend boxes.
- **Forecasts/targets/baselines**: dashed or thin lines, with notes near the lines; no glow, gradient areas, or 3D charts.
- **Boundary**: unsuited to complex KPI dashboards, multi-axis charts, pie arrays, large heatmap matrices, and other heavy business-report contexts. Chart aesthetics must yield to data clarity and editorial whitespace.
## 8. Tables and High-Density Information
High-density information mainly uses Credits/sources multi-columns, small text notes, and case collages; tables follow editorial-restraint principles:
- **Headers**: black or dark-gray bold text, white or extremely light-gray background; dark header bars are not the default.
- **Row/column structure**: thin gray lines or whitespace separation; reduce full grid borders; keep the column count within readable range.
- **Row height and density**: may be compact, but inter-row air must remain; appendix tables may be denser — core content pages should not be too dense.
- **Base color**: white is primary; light gray for grouping or headers; zebra striping is not a global feature — use cautiously.
- **Key rows/columns**: highlight with bold, small marks in the page's theme color, or light base blocks; no multicolor conditional formatting.
- **Number/text alignment**: text left-aligned; numbers right-aligned by decimal places or units; keep units consistent.
- **Symbols and ratings**: no stable rating-dot, check-cross, or status-symbol system; if they must be used, use minimal symbols in black-white or a single theme color only.
- **Role**: tables serve appendices, sources, and reference information — they must not become the report's main visual language.
## 9. Components and Graphic Elements
- **Giant title component**: built from bold sans-serif, a short sentence, a period, and extreme scale; may overlay an image or stand alone on a white/black background.
- **Black-white geometric symbols**: eye shapes, double circles, mirrored brackets, semicircles, etc., for section pauses; one main symbol per page — never repeated as small decorations filling the page.
- **Letterform specimen component**: an enlarged single letter, wordform, or waveform as the subject — must be clearly tied to the text explanation.
- **Case image frame**: rectangular with square corners, no visible rounding, shadows, or borders; organized by size and whitespace, not card shadows.
- **Footer navigation**: report mark at bottom-left, small column text at the bottom, page number at bottom-right; small size, black or dark gray, no base bar.
- **Source/caption small text**: close to image edges or the footer, providing copyright and context. Must not be enlarged into a primary information level.
- **Labels/badges**: no stable colored badge system. If labels are needed, use small black text or short single-theme-color labels — no stacked rounded capsules.
- **Process arrows/SmartArt**: no traditional flowcharts, org charts, or SmartArt. Processes convert to editorial columns or minimal arrows — avoid templated node diagrams.
- **Icons**: colorful icons are not a stable element. Apart from icons contained within case images, no icon libraries should be introduced.
## 10. Texture and Forbidden Items
Overall flat, editorial, restrained, and type-driven; visual intensity comes from typographic scale, black-white contrast, real case images, and per-page theme colors.
- **Forbidden**: 3D charts, glow, glassmorphism, complex shadows, heavy strokes, gradient buttons, emoji, colorful icon libraries, business-template SmartArt, large decorative textures, irrelevant illustrations, low-contrast light-gray body text, large centered text blocks, and repeating a large logo on every page.
- **Use with caution**: photos/screenshots/illustrations. The source files use many case images and photography, but they carry case evidence or section mood — they are not arbitrary decoration; there must be a clear thematic relationship and high-quality cropping. Rounded corners, zebra striping, and colored labels should also be used sparingly.
- **Allowed on special pages**: full-bleed photography backgrounds for covers and section entries; experimental fonts, handwriting, and exaggerated colors as case content; multi-column ultra-dense small text for Credits/sources pages; white-on-black for opinion pages and strong pause pages.
- **Should not be used**: large image backgrounds carrying long-text reading; tiny body text overlaid on images; making every case a shadowed card; replacing the type key visual with gradients or decorative patterns.
## 11. Generation Checklist
- Skeleton: is it a 16:9 landscape report page? Are wide margins, the body zone, and the small footer anchor kept?
- Copy: are titles short sentences/phrases that may carry a period? Does each page have only one core viewpoint or visual entry?
- Hierarchy: are titles, information sentences, body, and footnotes clearly distinguished by relative proportion? Are business-template title bars avoided?
- Coloring: does it use the black-white-gray base + one theme color per page? When case images are very colorful, does structural text return to black-white-gray?
- Layout: does the page belong to one of: full-bleed title, black-white geometry, long-text columns, text-image juxtaposition, case gallery, letterform key visual, or Credits multi-column?
- Charts: if present, are they minimal, few-series, weak-grid, directly labeled? Are dashboards and 3D effects avoided?
- Tables: white/light-gray base, thin separators, aligned numbers, little conditional color? Are they used only for reference or appendix information?
- Components: are authentic style components used — giant titles, geometric symbols, letterform specimens, rectangular images, restrained footers?
- Forbidden items: have emoji, colorful icons, glow, complex shadows, gradient buttons, thick borders, and template SmartArt been removed?
- Readability: have overflow, truncation, garbled text, overlap, low contrast, images covering text, empty content, wrong proportions, and footer-position drift been checked?
- Consistency: do page variations serve the section rhythm rather than vary for its own sake? Can the whole report still be recognized as the same type-trend report?
- No cards by default: unless the user explicitly requests them, it is strictly forbidden to use rounded-rectangle or rectangular cards to build hierarchy or alignment: line segments, whitespace, and font-size differences are better solutions
- No evenly divided compositions: unless no other layout is available, do not default to thirds, quarters, or two-by-two matrices. This includes three-part conclusions such as a three-way split plus a title plus a conclusion
@@ -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
@@ -0,0 +1,152 @@
# L014 · Organization Name Equity Impact Report 2022 STYLE DESIGN SYSTEM
## 1. Style Positioning
Suited for brand-style annual impact reports, ESG/DEI/social-responsibility disclosures, and corporate culture and governance reports — long-form landscape digital reports. Aimed at the public, employees, partners, and reviewers, it adopts a report-style PPT that is easy to navigate, browse, and read in depth: many pages, medium-to-high body-text density, persistent navigation, with key sections switching rhythm via full-bleed, highly saturated soft colors.
Centered on brand green, overlaid with flat color blocks in pink, purple, deep green, and yellow, combined with a thin top navigation, wide-margin text columns, rounded-corner card grids, and a small amount of flat illustration.
Underlying principles:
- **Long reports navigate first, individual pages express second**: consistently retain the top report name, section list, current section, and page number, establishing section position clearly before presenting text, cards, or tables.
- **Sections use color blocks, body pages use white backgrounds**: covers, section title pages, and opinion pages may be full-bleed light green/pink/purple/deep green; explanation, data, and appendix pages prefer white backgrounds and light-colored cards, avoiding colored backgrounds swallowing small-print text.
- **Illustration and curves handle identity, the grid handles information**: illustrations, wave lines, and music symbols do not replace titles, tables, text columns, or card grids.
## 2. Page Skeleton
- **Canvas ratio**: landscape 16:9, aimed at web-report/PDF landscape reading, not a traditional live-presentation template.
- **Global margins**: content pages keep wide whitespace on all sides; the left side holds the logo, title, and body start point, the right side is used for a second/third text column, illustration, card, or data module. Content never touches the edge; even full-bleed color-background pages retain a safe area.
- **Header system**: white-background content pages consistently place a small brand mark, report name, section navigation, current section/subsection, and page number at the top. The header is light and understated; a thin wave/path line may run through the top-center.
- **Footer system**: no prominent regular footer; footnotes, sources, and explanations are placed below the body or near tables, in small, low-contrast text. Do not build a heavy footer bar.
- **Title area**: content-page titles sit in the upper-left body area, mostly short words or phrases. Section pages use "number + section name" or a standalone section name, noticeably enlarged and placed at left/left-center, not stacked in the center.
- **Body area**: uses text columns, card grids, image-text pairing, opinion manifestos, and tables/data disclosure. Default path: upper-left title → left body/main point → center-right cards/illustration/chart → bottom annotation.
- **Cover/section pages**: may be full-bleed light green, light pink, purple, or deep green, with a large wave-terrain graphic at the bottom or side, and a flat illustration at the right/corner. The logo is small and restrained, the title on the left.
- **Table-of-contents page**: white background; a small "Content" heading on the left, a large-font table-of-contents list in the middle, section numbers and page numbers clearly arranged in columns; navigation and page number retained on the right/top, with a small illustration only as an accent.
- **Dividers and watermarks**: no heavy straight-line borders; use thin wave lines, light-gray thin lines, card boundaries, and color-block boundaries. No stable watermark system observed — none should be added.
- **Logo**: the brand logo sits at the upper-left corner, in a small size in black or white, ensuring contrast. Do not enlarge it into a decoration.
## 3. Content Organization
- **Title style**: use report-style noun phrases or short section phrases, such as "Content," "Focus Areas," "Key Actions 2022," "Strategy." Section pages add a number prefix. Titles avoid marketing-slogan-style long sentences; aside from opinion pages, do not write multi-line manifestos.
- **Key message sentences**: opinion pages may hold a larger, left-aligned manifesto paragraph spanning from upper-left to center; ordinary content pages use a title + paragraph.
- **Body text organization**: organized in short paragraphs, commonly 2–3 columns side by side, separated by blank lines and column gaps, using dense bullets sparingly. Body text may be relatively long, but each column stays readable, without a full-width long line.
- **Grouping logic**: parallel themes use rounded-corner cards, commonly 2×2, 2×3, or text-left/card-right. Card titles sit at the upper left, body text is brief; cards in the same group use similar colors or alternate light green/purple.
- **Number of points per page**: section/opinion pages carry only 1 main point; content explanation pages are 1 main title + 2–4 paragraph groups; card-grid pages hold 4–6 parallel themes; data pages maintain searchability through headers and dividers.
- **Keyword emphasis**: use card background color, dark titles, local button labels, and weight/size hierarchy. Do not use large-area neon highlighting or multi-color underlines.
- **Numbers/units/reporting period and measurement basis**: years, page numbers, percentages, and metrics are aligned in columns within tables or the table of contents; explanations sit close to the data itself, not detached into a separate decorative large number, unless the source page itself is an opinion-type emphasis.
- **Source footnotes**: footnotes are smaller than body text, low-contrast but readable; large amounts of explanation, disclaimers, and audit information are concentrated in the appendix/data pages at the end.
## 4. Content Page Layout System
### A. Full-bleed section title page: color background + numbered title + illustration/wave terrain
For section openings and mood transitions. Uses a full-bleed background of light pink, light green, purple, or deep green; the left side holds a number and section name or a manifesto paragraph; a dark wave-terrain graphic sits at the bottom/side, with a flat illustration of a hand, megaphone, star, or music symbol at the right or corner. Relies on a large title and background color for emphasis, not complex decoration. Not to be used for tables, long disclaimers, or multi-conclusion pages.
### B. White-background multi-column long-text page: left title + 2–3 columns of body text + light illustration
For strategy explanations, project explanations, and background introductions. Navigation is retained at the top, a short title sits at upper left, the body is arranged in 2–3 columns with compact paragraphs and wide column gaps; a small illustration may sit at the lower right or edge. Organizes emphasis through subheadings, paragraph spacing, and column width. If comparing multiple metrics or displaying many numbers, do not rely on multi-column text alone — switch to a table or cards instead.
### C. Card-grid page: title/lead-in + 2×2 or 2×3 rounded-corner cards
For focus areas, action lists, value dimensions, or a four-quadrant strategy. Cards occupy the center-right area, with explanatory text or a title on the left; uses backgrounds of light green, purple, pink, or deep purple with pronounced rounded corners, text aligned at the upper left. One dark card or a stronger saturated background may mark the current theme. Do not let each card carry a long paragraph; split across pages when there are more than 6 modules.
### D. Image-text pairing page: text column + large flat illustration + button-style label
For key annual actions, project actions, supplementary links, or reading guidance. The left/center holds the text column, with an illustration of a megaphone, hand, heart, or leaf on the right; a blue rounded-corner button such as "More key actions" may be used. Illustrations must not cover navigation or body text, and should not serve as the core of data explanation. Not used on formal audit or table-disclosure pages.
### E. Full-bleed opinion page: large value manifesto + side column/annotation + illustration
For value statements within a section. The background may be light purple or deep green; a large block of left-aligned text is higher in size than body text but lower than the cover title; a short explanation or annotation column sits on the right, with an illustration at the center/lower-right. Retain only one main point and one set of supplementary explanation. Do not fill the page with centered long text.
### F. Table/data-disclosure page: white background + compact table + understated title
For data, metrics, principles, and explanations at the end of the report. Navigation is retained at the top; the body is a grid table with aligned numbers and small-print annotations, reducing or removing illustrations and large color blocks. If the table is too wide, prefer splitting into multiple tables or horizontal groups rather than compressing it into illegibility.
## 5. Color System
- **Primary background light green #C3F0C9 / #C5F3CB**: used for the cover, section pages, card backgrounds, and brand identity, may be used full-bleed. A replacement color must keep high lightness, suitable for black/deep-purple text.
- **Deep green #00634F / #007A5A**: used for wave terrain, dark section backgrounds, local titles, or illustration bodies, medium-to-large area. When deep green is full-bleed, use white or light-colored text; do not overlay low-contrast green text.
- **Deep purple-black #4F374F / #463347**: used for primary text, dark cards, wave-terrain and illustration shadows, may replace pure black; must not be overlaid low-contrast with small deep-green/deep-blue text.
- **Light pink #FFCDD2 / #FBCED2**: used for section backgrounds, card backgrounds, and illustrations, may be full-bleed; may be replaced with a warm color of similar lightness, but not used for large-area fills on serious data-table backgrounds.
- **Bright pink #F573A1 / #F673A1**: used for illustration highlights, hearts, and local emphasis, small area; must not be used as the background for large body-text blocks or overused across multiple chart series simultaneously.
- **Light purple #CDB8E3 / #D3BDE9**: used for opinion-page backgrounds and card backgrounds, may be used over a large area paired with deep-purple text; should not be used as the background for small, dense tables.
- **Blue #2D46BA**: used for button-style jumps and a small amount of chart/component emphasis, small-to-medium area; must not replace the primary brand green as the whole report's main color.
- **Yellow/orange-yellow around #F3C64E**: used as a warm background or secondary color for some sections/illustrations. Use cautiously, avoiding large-area competition with light green, pink, and purple simultaneously.
- **White #FFFFFF / near-white #F8F8F8**: the base background for content pages and table pages, the largest area; content pages prefer a white background.
- **Light gray #D2D0D1 / #E6E4E5, gray #909791**: used for table lines, auxiliary labels, weak navigation text, and dividers, small area.
Keep a single page to 1 primary background color + 1 dark text color + 1–2 illustration/card accent colors. Data/status colors should not expand into a rainbow chart; if positive/negative status must be added, prefer deep green/pink or deep purple/light gray, relying mainly on text explanation.
## 6. Fonts and Text Hierarchy
- **Font character**: the primary typeface is Coda (rounded sans-serif, built-in; Chinese: MiSans); cover/section large titles use the same family in bold. Overall sans-serif, rounded, low-decoration. Do not mix in a serif font as a regular title.
- **Body baseline**: body text = 1x, used for paragraphs, card explanations, and navigation text.
- **Footnotes/page numbers/top navigation**: about 0.65–0.8x, low contrast, near the header or bottom of tables; must be readable but not compete with body text.
- **Card body/table body**: about 0.8–1x; tables may be slightly smaller but keep line spacing and alignment. Card titles about 1–1.2x.
- **Body subheadings/module titles**: about 1.2–1.5x, left-aligned, distinguished through position and spacing, not heavily bolded.
- **Page titles**: about 2–3x, mostly short words, placed at upper left.
- **Section titles/cover titles**: about 4–5x or higher, the largest tier on the whole page.
- **Opinion manifesto**: about 2–3x, multi-line left-aligned, with compact but not crowded line spacing.
- **Text alignment**: left-alignment as the core; table-of-contents page numbers may be right-aligned/column-aligned, table numbers aligned by column. Avoid large centered blocks.
## 7. Chart Language
The source file is primarily report text, cards, and tables, without a strong data-visualization system — do not fabricate a complex chart style.
- **Type boundary**: prefer simple bar/line/tabular metrics; do not use 3D, colorful area fills, complex radar charts, or decorative infographics.
- **Axes and grids**: use thin gray axes and light-gray gridlines with a presence lower than the data; do not use heavy black axis lines.
- **Labels and legends**: labels use body-text or table-sized small text near the data points; legends sit above or to the right, avoiding the main title area.
- **Series colors**: use brand colors — deep green, light green, deep purple, blue, pink — with few series. Do not exceed 4 strong-color series on one page.
- **Key data**: mark with deep-purple/blue emphasis, rounded-corner labels, or annotation arrows; key explanations must be verbalized in text, not conveyed by color alone.
- **Forecast/target/baseline lines**: use gray or deep-purple thin dashed/solid lines with brief labels. Do not use glowing lines, gradient fills, or heavy shadows.
## 8. Tables and High-Density Information
- **Table role**: carries data disclosure, report principles, and audit/appendix explanations — it is "searchable evidence," not a visual protagonist.
- **Headers**: use a light-gray or white background, with text slightly larger or one hierarchy level above the table body; deep purple-black may provide emphasis. Headers do not use a heavy dark bar, unless matched consistently with a dark section page and kept readable.
- **Row/column structure**: use thin gray dividers; text columns are wider than number columns. Long text may wrap, but must not be compressed into overly tight line spacing.
- **Row height and density**: keep high density and readable line spacing. Do not let multiple lines of text overlap or truncate just to fill a page.
- **Base color and zebra striping**: near-white, light gray, or extremely pale light-green backgrounds may group rows; zebra striping, if used, must be very subtle. Avoid large areas of pink/purple spread across dense tables.
- **Key rows/columns**: use a light-green background, deep-purple text, or a thin border; summary rows may be slightly bolded or given a light background — do not use strong red/yellow warnings.
- **Number/text alignment**: text is left-aligned, numbers are right-aligned by column or aligned by decimal place, and percentages/units use a consistent measurement basis within the same column. Footnote markers use small superscripts or symbols, with the explanation placed below the table.
- **Symbol markers/rating dots**: the source file shows no stable icon-rating system — do not add complex red/yellow/green lights or star ratings.
## 9. Components and Graphic Elements
- **Top navigation bar**: the most important global component, containing the logo, report name, section/subsection list, current position, page number, and a thin wave line; must be light, thin, and small.
- **Table-of-contents list**: large section names + numbers + a column of page numbers, with a small circle/link symbol optionally on the right. Used only on the table-of-contents page — do not repeat a large table of contents on regular pages.
- **Rounded-corner cards**: used for parallel themes, strategy dimensions, and key actions. Pronounced rounded corners, backgrounds mostly light green/purple/pink, text aligned at the upper left; even spacing, no shadows added.
- **Button-style labels**: used for jumps or supplementary actions, such as a blue rounded-corner button; small area — do not turn every small heading into a button.
- **Wave terrain/curves**: used on the cover, section pages, and header. A large wave at the bottom serves composition; a thin wave in the header serves navigation. Do not add a large wave to data-table pages, which would disrupt reading.
- **Flat illustrations**: including megaphones, hands, hearts, stars, leaves, and music symbols, using the brand color palette with black/deep-purple outlines; placed at the right, bottom, or corner, not carrying complex information.
- **Small icons/symbols**: music notes, arrows, and stars may serve as accents; the colorful icon system is not stable and cannot replace text labels.
- **Tip boxes/side columns**: use light-colored rounded-corner boxes to carry supplementary information or annual highlights; layered apart from the body text, avoiding confusion with the main cards.
- **Dividers**: use thin gray lines, wave lines, and card boundaries; do not use heavy borders, double-line frames, or strong shadow boundaries.
## 10. Texture and Prohibited Items
Overall adopts a flat, friendly, branded, lightly decorated texture, establishing identity through color blocks, illustrations, rounded-corner cards, and the navigation system, with almost no real photography or complex textures used.
**Prohibited**:
- 3D graphics, dimensional buttons, glow, metallic texture, strong shadows, glassmorphism.
- Large photo backgrounds, real-people photo collages, or screenshot stacking as the primary visual.
- Complex gradients, textured backgrounds, noise decoration, heavy borders.
- Emoji, social-media-sticker-style icons, rainbow-style icon sets.
- Large centered blocks of copy, a full page of body text with no navigation, body text pressed onto illustrations or complex dark backgrounds.
**Use with caution**:
- Illustrations: usable on sections, opinion, and image-text pages; should be reduced on table/audit/high-density data pages.
- Full-bleed colored backgrounds: suitable for covers, sections, and value manifestos; not suitable for long tables and dense small print.
- Blue buttons: used only for jump/action prompts, not as a universal accent color.
- Multi-color cards: control the number of hues on a single page, avoiding one strong color per card.
**Usable on special pages**:
- Covers and section pages may use large wave terrain, full-bleed color backgrounds, and large illustrations.
- Opinion pages may use full-bleed deep green or light purple, paired with a large manifesto in white or deep-purple text.
- Appendix/data pages may sacrifice visual interest, returning to a white-background, thin-line table.
## 11. Generation Checklist
- Skeleton: is it 16:9; do content pages have wide margins, an upper-left logo, top navigation, page number/current section; is a heavy footer avoided?
- Copy grammar: is the title short and report-style; are sections numbered; does the opinion page make only one main point; is body text organized in left-aligned short paragraphs?
- Hierarchy: body text = 1x; is navigation/footnote smaller than body text; is the page title about 2–3x; are section/cover titles the largest; has no specific font size been hardcoded?
- Color: is light green/deep green/deep purple primary, with pink/purple/blue secondary; does any single page avoid exceeding 1 primary background color + 1–2 accent colors; is text contrast sufficient?
- Layout: is a layout chosen based on content — multi-column, card grid, image-text pairing, opinion page, or table page; is stuffing a long table into a section title page avoided?
- Charts: are they restrained, with thin grids and few series; are 3D, colorful gradients, and excessive status colors avoided?
- Tables: are headers, rows/columns, number alignment, and footnotes clear; is there no overcrowding, truncation, or low contrast?
- Components: do rounded-corner cards, wave lines, buttons, and illustrations serve a clear informational function; is icon overuse in place of text avoided?
- Prohibited items: is there no photo background, emoji, complex decoration, strong shadows, glow, textures, glassmorphism, or large centered long text?
- Output quality: check for no overflow, garbled characters, overlap, occlusion, empty cards, low contrast, or wrong proportions; navigation should not mechanically repeat to the point of covering body text, and illustrations should not press onto text.