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