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,163 @@
# Organization Name — Q2 2025 Crypto Industry Report STYLE DESIGN SYSTEM
## 1. Style Positioning
A dark, data-driven PPT design system for quarterly crypto-industry research reports, aimed at professional readers fluent in metrics across markets, assets, trading volume, ETFs, DeFi, NFTs, and exchanges, supporting high-density data, longer explanatory text, and multi-series charts. The body adopts a dark research dashboard with Organization Name's green visual identity; the cover, section dividers, and product/closing pages use high-saturation green or purple frames, large rounded cards, and mascot illustrations.
The whole deck is a 16:9 landscape canvas; content pages use a near-black background with white ultra-heavy sans-serif titles (Archivo Black, via customFonts), body and footnotes in Inter (via customFonts); the header holds a fixed small brand wordmark; the footer contains the report name, copyright, sources, and page numbers. Main content includes line, column, stacked-column, and area charts, timelines, tables, and text lists/avatar matrices; accent colors are fluorescent green, purple, pink, yellow, and other high-saturation colors.
Underlying principles:
1. **Data over decoration.** Pages prioritize charts, tables, numbers, and explanatory text; illustrations, borders, bright colors, and identity marks are used only for brand recognition, classification, emphasis, or section transitions.
2. **Body-skeleton consistency over layout showboating.** Ordinary data pages keep the black background, upper-left brand mark, white title, insight line on the right or above, and bottom sources and page numbers; large-area green/purple brand pages appear only at the cover, section dividers, product, or closing positions.
3. **Accent colors must carry semantics.** Fluorescent green is used for the brand, positive/growth values, key series, or button-like components; purple/pink for insight lines, section transitions, and special annotations; red only for negative change or risk-type data. If bright colors hinder reading values, prioritize the clarity of axes, labels, units, and legends.
## 2. Page Skeleton
The canvas is 16:9 landscape widescreen. Content-page backgrounds are pure black or near-black; covers/section/closing pages use a bright-green outer background, or a purple outer frame with a dark rounded inner card. Keep stable margins with no key data at the outer edges; high-density pages may approach full-bleed, but the header, title, and footer must keep their safety zones.
**Cover page**: bright-green outer background with a large deep-green rounded card at the center, and a notch-style split or dual-card structure at the top. The upper left holds the identity mark — plain small text with the new topic name, or left blank; no graphic logo is drawn. The main title is huge, the year or keywords may be layered with a dark-green/light-green gradient feel, and the report name is in white/light green; the lower middle holds the Organization Name mascot illustration, a thin-line trend line, and halftone dots; the sponsor text list sits at the right or lower right, smaller in area than the main title and the mascot.
**Table of contents page**: black background with a large "Content"-style title at the upper left; the body is a multi-column contents list, with level-one section titles larger and white, entries in small white/gray text, and page numbers right-aligned; author avatars, names, and titles may sit below. The contents page uses no large charts and little decoration.
**Section dividers**: a bright-green or purple outer frame/background, with a large deep-green or deep-blue-black rounded card inside. The left holds the section name and a small label; the right or bottom holds the large Organization Name mascot and theme graphics. Section titles take the dominant level, with minimal information.
**Content data pages**: a fixed small brand wordmark at the upper left, with the white page title below it or to its right; the title area occupies a compact horizontal band at the top. The insight line sits to the right of the title, at the page's upper right, or atop the explanation column, usually opening in purple and continuing in gray-white text. The body may use a single large chart, left-right columns, chart + explanation column, a timeline, a table, or a matrix. The bottom left holds the report name/copyright, Source sits below the chart or at the lower left, and the page number sits at the lower right. Reading path: brand and title → purple insight line/key information line → main chart or table → explanatory text/legend → source and page number.
Dividers are used only for chart axes, table lines, card borders, and timeline rules — no heavy header rules are set. Content pages use no watermarks or large background graphics; backgrounds stay clean.
## 3. Content Organization
Titles are object-type or metric-type, such as "a certain asset's price and trading volume," "a certain market share," "notable events," or "exchange trading volume," responsible for topic positioning; conclusions are expressed by the insight line. Titles should be 1 line, 2 lines if necessary; avoid more than two lines, which compresses the chart area.
Each page prioritizes one information line, located to the right of the title or atop the explanation column, structured as "key change/conclusion + data definitions and measurement basis/time range + cause or impact." Use purple to highlight the opening phrase or core number, with the rest in gray-white. Do not stack multiple conclusions into one paragraph; each page prioritizes one main judgment.
The body uses short paragraphs and bullets, usually in the narrow column to the left or right of a chart; each paragraph explains one cause, data finding, or impact. Keep paragraphs broken and line lengths moderate; the text column in left-right layouts exists to explain the chart and does not become a long article on its own.
Group by market category, asset class, time, platform, chain, exchange, or metric definition and basis. High-density pages use subtitles, labels, legends, colored series, and thin-line separation. A single page carries one core question; it may contain multiple data series, but must not discuss multiple unrelated topics at once.
Numbers and units stay close to data labels or axes, retaining the relevant formats and units — percentages, dollars, multiples, dates, and quarters. Time axes remain continuous and readable; big numbers may be highlighted in the insight line or chart annotations. Source footnotes sit below charts or in the footer, in small gray-white text that does not compete with the main data.
## 4. Content Page Layout System
**A. Left explanation column + right large chart**
Suited to single-theme time series such as price, trading volume, index, and capital flows. The left column holds the title, insight line, 2–4 explanation paragraphs, and the source; the right large chart occupies most of the body width, complete with axes, legend, and data annotations. Emphasize with bright lines, peak labels, vertical annotation lines, or key-point text. Not suited to table-type content requiring extensive categorical comparison.
**B. Top title-and-insight + full-width chart below**
Suited to horizontal time-axis charts such as multi-series lines, stacked columns, and market-share change. A compact title and one insight line sit on top; the main chart spans the page; the legend stays near the chart's top or right, and series colors keep high contrast. If there is too much explanation, switch to left-right columns to avoid compressing chart height.
**C. Large chart + right annotation/sponsor/note column**
Suited to pages needing supplementary event background, such as IPOs, ETFs, and trading volume. The main chart sits on the left or in the middle; the right narrow column holds short notes, wordmarks, or secondary legends; the right column must not exceed the main chart in width. This layout is not suited to multiple long paragraphs or multiple unrelated wordmarks.
**D. Timeline/event-band layout**
Suited to "Notable Events"-type content. Use multiple rows of horizontal date bars; date blocks distinguish periods or categories with high-saturation green, pink, purple, etc., with small-size event notes beneath; the title area is minimal. Do not add complex charts; event copy must be short — long explanations break the timeline rhythm.
**E. Table/ranking/matrix page**
Suited to asset returns, stablecoins, exchanges, chain ecosystems, and team or platform comparisons. The body uses dark tables, ranking bars, text lists, or multi-column cards; a note column may sit on the left, and colored bars, dots, icons, or text color highlight positive/negative change inside the table. This layout suits high-density classification, not continuous trends.
**F. Brand/product/section-style body variant**
Uses green or purple cards, buttons, screenshot-style interfaces, and the mascot for product promotion, section intros, or closing pages; lower information content than data pages. Must not be abused as a template for ordinary research pages.
## 5. Color System
**Background black / near-black #000000–#080808**: the main background of content pages, largest in area. Cannot be replaced with light colors; even if the new theme uses a brand color, keep body backgrounds dark.
**Deep-green cards #183F2D / #1A412E**: the main base color of covers, section dividers, and brand cards, usually paired with bright-green outer frames. Brand pages may use it over large areas; ordinary content pages use only small amounts for labels or borders — it should not replace the black background over large areas.
**Fluorescent green #A6F05F / #9EE45A / #4BCC00**: used for the cover outer base, section frames, identity marks, positive values, key data lines, button-like labels, and a few chart series. Area may be large on brand pages and small-to-medium on content pages. It may be replaced with a new brand primary color, but must keep dark-background high contrast and consistent "positive/key" semantics.
**White #FFFFFF / light gray-white #DDE5E0**: used for titles, key labels, main axis text, and high-priority numbers. Cannot be replaced by low-contrast colors.
**Gray-blue/gray-green text #8A9492 / #B9BCA6 / #808963**: used for body text, notes, secondary legend text, axis labels, sources, and footers; low brightness, but never so low as to be unreadable.
**Purple #7A54FF / #6B4CFF**: used for section dividers, insight-line openings, key lines, labels, and brand variants, at small-to-medium areas; it does not represent positive/negative status by default.
**Pink #F19EE2 / #F4A0E5**: used for event timelines, chart series, and emphasis blocks, at small areas, expressing categories. Avoid large simultaneous use with purple, which becomes garish.
**Yellow #FAEB6A / #E7D84A**: used for column charts, key values, event or return-type series; not for long text passages.
**Red/coral #FF5A6A / #BE827F**: used for negative returns, declines, risks, or negative values. For status/data only, never as decoration.
Content pages keep their main hues to black-white-gray + 1 brand accent + 2–4 data series colors. Multi-series charts may add colors, but legends must stay clear; color serves classification/status only — no meaningless decoration.
## 6. Fonts and Text Hierarchy
Fonts are modern sans-serif: titles use Archivo Black (via customFonts); body is dominated by Inter (via customFonts), with weights handled through the bold field. Chart axis/category labels may use a serif italic (e.g. EB Garamond Italic via customFonts); everywhere else, do not mix in serif or handwritten fonts; special sponsor/logo fonts exist only as images or marks.
With body note text = 1x:
- **Cover main title/year**: approx. 4–6x, bold or semi-bold, tight letter spacing allowed.
- **Section titles**: approx. 3–5x, white or light green, usually 1–2 lines.
- **Content-page titles**: approx. 2–3x, white, medium-bold to bold.
- **Insight line/information line**: approx. 1.4–2x, usually medium-bold, purple keywords + gray-white continuation.
- **Subtitles/group titles**: approx. 1.1–1.4x, medium-bold or semi-bold, white/light gray.
- **Body paragraphs and bullets**: 1x, regular weight, gray-white or gray-blue.
- **Table text/chart labels**: approx. 0.7–1x, compress per space, keeping numbers readable.
- **Footnotes, sources, footers, page numbers**: approx. 0.6–0.8x, gray, low-level but never absent.
Numeric labels use the same fonts as body text, with increased weight or a different color; no ornamental numeral forms. Titles and body build hierarchy through size, weight, and color, without relying on shadows or strokes.
## 7. Chart Language
Core charts include line charts, column charts, stacked columns, area charts, dual-axis price/volume charts, horizontal-bar rankings, timelines, share/market-share charts, donut/pie mini-widgets, and tabular leaderboards.
Charts use dark bases; axes and gridlines are low-brightness gray thin lines; no white-background chart boxes. Main data lines use high-contrast colors such as fluorescent green, yellow, purple, pink, and cyan; secondary series lower saturation or line width. Column charts use bright columns against the dark grid, and volume columns may combine with price lines. Multi-series stacked columns need clear legends, placed above the chart, to the right, or in empty chart areas.
Key data uses peak/trough labels, vertical event lines, endpoint values, local text annotations, color brightening, and red for negative values. Annotations stay close to their points and should not form long passages. Forecasts, targets, or baselines use dashed/thin lines and explicit labels, distinguished from historical data; never let a forecast line blur into an actual line.
Axes keep units and time bases — especially dollars, percentages, quarters, dates, and trading volume. Gridlines must be thin, dark, and few; no heavy borders. The page title states the chart's subject; the chart itself keeps only the necessary subtitle and legend, avoiding repetition.
## 8. Tables and High-Density Information
Tables are used for rankings, asset comparisons, exchange/chain/protocol metrics, returns, market share, and team/author information. They adopt a dark-base, high-density style: headers in white or light-gray medium-bold text, row-column dividers in low-brightness thin gray, and cells usually without obvious fills; when necessary, use dark gray/deep green for light zoning.
Number columns are right-aligned or visually aligned by decimal point; text columns left-aligned; name columns may add small icons or circular token placeholder blocks. Positive/negative values are distinguished in green/red; rankings or strength may use horizontal bars, color-block lengths, heat colors, or small dots. Summary rows or key rows use brighter text, thin borders, or a light fill — but no heavy highlight fills.
High-density side-by-side modules use cards, column groups, text lists, or small chart collections. Each module keeps a title, a key value, and one minimal explanation; modules are separated by alignment, spacing, and thin lines — no large shadows. Zebra striping is not a primary language; extremely low-contrast dark gray may be used cautiously, and where dividers suffice, no zebra striping is added.
If a table exceeds what one screen can scan, split it into multiple pages or focus on the Top N — do not compress it into illegibility.
## 9. Components and Graphic Elements
**Brand wordmark header**: fixed at the upper left of content pages, small in size, white brand word + green "Research." Keep it on new pages; do not enlarge it into decoration.
**Insight line component**: purple keyword/opening + gray-white explanation, located to the right of the title or atop the body column; at most one main insight per page — avoid multiple purple sentences competing.
**Rounded brand cards**: covers, section pages, and product pages use large rounded deep-green/deep-blue cards with bright-green or purple outer frames. Content data pages do not by default frame all content in large cards.
**Labels/badges**: used for section codes, asset symbols, button-like CTAs, or chart categories; outlined rounded rectangles or bright fills with short text. Cannot carry long sentences.
**Thin dividers and axis lines**: low-brightness gray lines for tables, charts, and timelines; thin and restrained — no decorative thick lines.
**Event timeline blocks**: horizontal date color blocks + event notes beneath, colored by date period or category. Suited to event lists, not numeric trends.
**Text lists/avatar matrices**: used for contents-page authors, sponsors, exchanges, ecosystem projects, etc.; institution names are presented as text lists or neutral placeholder blocks, avatars may remain; unified sizes, alignment, and label text. Do not mix in colorful icon decoration; no graphic logos are drawn.
**Mascot illustrations**: the Organization Name green/purple character is used on covers, section dividers, and closing pages. On ordinary data pages it may appear only on special brand/product pages, and must not cover charts.
## 10. Texture and Prohibited Items
Overall flat, dark, data-driven, and restrainedly branded; content pages rely on color contrast, type-size hierarchy, chart density, and alignment — not photography, complex textures, shadows, or 3D.
**Prohibited**: on ordinary content pages, large-area photo backgrounds, complex gradient backgrounds, 3D graphics, glowing strokes, emoji, garish illustrations, decorative colorful icons, large stretches of centered copy, heavy shadows, low-contrast gray text, unsourced charts, unit-less numbers, or decorations covering axes.
**Use with caution**: rounded cards, large-area bright-green bases, large purple blocks, text lists, avatars, screenshot-style interfaces, donut mini-charts, zebra-striped tables. They must serve an information function or a brand-node function — never added just to fill whitespace.
**Special pages allowed**: covers, section dividers, product pages, and closing pages may use the mascot, large rounded cards, bright-green/purple outer frames, halftone dots, trend-line backgrounds, and sponsor text lists. Even on special pages, keep the title readable and never let brand elements overshadow the main information.
Images/screenshots are not the core language of the body; if they must be used, place them within fixed boundaries with a title and a source — no fullscreen photographic storytelling. If gradients appear, they are limited to subtle treatment of the cover title or brand atmosphere, not a body-background system.
## 11. Generation Checklist
- Skeleton: is it 16:9; are content pages black-based; is there a small brand wordmark at the upper left; does the footer include the report name/copyright, sources, and page numbers?
- Copy: is the title a clear object/metric; is there only one main insight per page; is the body in short paragraphs or bullets; do numbers carry units, time ranges, and measurement bases?
- Hierarchy: are the title, insight line, body, chart labels, and footnotes separated by relative sizes and colors; is dependence on specific font sizes avoided?
- Color: does it stay at black-white-gray + fluorescent green/purple + necessary data colors; are positive/negative states clearly green/red; are there too many bright colors on one page?
- Layout: does the main chart/table occupy the largest area; does the explanation column assist the chart; is there meaningless whitespace or overcrowding?
- Charts: are axes, units, legends, gridlines, data labels, and emphasis annotations complete; are multi-series colors distinguishable; are forecasts/baselines marked?
- Tables: are headers, alignment, dividers, key rows/columns, and positive/negative colors consistent; is text readable; is over-compression avoided?
- Components: do rounded cards, labels, timelines, wordmarks, and the mascot appear only on appropriate pages; do they serve information rather than decoration?
- Prohibited items: no photo backgrounds, emoji, 3D, glow, heavy shadows, complex textures, meaningless icons, or large stretches of centered copy.
- Quality: check overflow, truncation, garbled text, overlap, low contrast, occlusion, empty content, wrong chart proportions, missing page numbers, missing sources, and mechanical template repetition.
- No default use of cards: unless the user explicitly requests it, it is strictly forbidden to use rounded rectangles or rectangular cards to build hierarchy or alignment — line segments, whitespace, and font and font-size differences are better solutions.
- No equal-division composition: unless no other layout is available, do not default to three-way splits, four-way splits, or 2×2 matrices — including three-part structures such as three-way split + title + conclusion.