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,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