chore: 1.1.0 release
This commit is contained in:
@@ -0,0 +1,73 @@
|
||||
# Pine Green Strategy · consulting STYLE DESIGN SYSTEM
|
||||
|
||||
## PART A — Category Baseline (General Minimum)
|
||||
|
||||
A professional, high-density consulting presentation benchmarked against top-tier strategy firms (McKinsey/BCG), with the aesthetic of a premium editorial publication.
|
||||
|
||||
Content and layout:
|
||||
1. Rich data visualization: fill the page with complex, precise charts (stacked columns, waterfall charts, line charts) and detailed data tables with complete rows and columns.
|
||||
2. Structured frameworks: include a strategy map or a 2×2 matrix built with fine, clear lines.
|
||||
3. High information density: use complex layouts and multi-column design that resemble a real business analysis presentation, not a cover with expansive blank space.
|
||||
|
||||
Visual style:
|
||||
1. Aesthetic: balance a technological feel with information richness. Keep it concise, clear, and authoritative.
|
||||
2. Typography: use a bold sans serif for main titles; use the same sans family for chart labels and data figures.
|
||||
3. Color: use a pure white background and pure black text; use deep royal blue for charts and graphic elements, with different gray values to distinguish hierarchy.
|
||||
4. Graphics: use fine borders for tables and precise vector lines for charts.
|
||||
|
||||
Structure and discipline (distilled from outputs we recognize as benchmarks):
|
||||
1. Every body-page title must be a complete assertion (a conclusion sentence), with a one-line scope/definition subtitle stating what the page covers and how to read it.
|
||||
2. Every body page carries a chapter breadcrumb/tab bar with the current chapter node highlighted, so any single page can be located in the storyline.
|
||||
3. One named analytical framework per page, not a loose collage: a pressure-convergence bar, a phased timeline with a TODAY marker and stage gates, a three-scenario table (conservative/base/accelerated), a five-forces diagram, a heat table, a difficulty × impact 2×2 (with an observation zone), an upstream/midstream/downstream value chain, a multidimensional persona matrix—choose the framework based on the content.
|
||||
4. Run parallel evidence in 2–3 equal-width columns; number independent judgments (1/2/3), each with a bold claim line + one brief explanation.
|
||||
5. Chart annotation discipline: place data labels on marks, growth/level callouts (such as「+42% p.a.」), and a TODAY marker; use dashed lines for forecasts; give uncertain quantities a named observable metric; never make a chart rely on the legend alone.
|
||||
6. Most pages close with a bottom synthesis bar (「how to read this page」/「persona interpretation」/a one-line so-what), converting the evidence above into a single takeaway.
|
||||
7. Fixed page trio: source/footnote line at bottom left and page number at bottom right; never omit them or use them as decoration. Generated decks never add watermarks, confidentiality notices/stamps, copyright lines, or logo placeholders.
|
||||
8. Open with one overview executive summary + a numbered page-by-page contents list; close with numbered conclusions (claims, not a summary) + an implications page split by reader type (such as policy makers/operators/buyers), with each column landing on an action.
|
||||
9. Numbers must carry units, time ranges, and definitions; express uncertainty through monitorable observable metrics, not hedging language.
|
||||
|
||||
Default baseline (distilled from the layout skill, PART B may override): body pages are high-density and multi-column, carrying at least one complex chart or one multi-row, multi-column data table; never use「one large sentence + expansive blank space」as a body page; build framework diagrams (strategy maps/2×2/driver trees) with fine, clear vector lines rather than stacked color blocks; use fine table borders with no heavy fills, and keep the dominant hues on one page ≤2.
|
||||
|
||||
**Read-the-titles test**: reading only the page titles across the deck should let you hear the complete story; if they do not read coherently, the structure is not working.
|
||||
|
||||
> Priority note: this section is the minimum baseline for consulting contexts. When the Signature System below (PART B) conflicts with it, follow the Signature System—especially for background, color, and typography; the font/color items above apply as defaults only when the Signature System is silent.
|
||||
|
||||
### Global Prohibitions (AI Default Patterns · Mandatory)
|
||||
|
||||
1. **Do not default to cards**: unless the user explicitly requests them, never use rounded rectangles or rectangular cards to build hierarchy or alignment—containers that carry information functions (status lights, assumption boxes, quotation boxes) do not count as cards. Lines, whitespace, type size, and weight differences are preferable.
|
||||
2. **Do not default to equal-split composition**: unless no other usable layout exists, do not default to thirds, quarters, or a two-by-two matrix—equal splits must be justified by the content structure (three scenarios naturally mean three columns; frameworks explicitly named in the body are exempt).
|
||||
3. **No ungrounded AI color schemes**: the institutional palette specified in the body is exempt; what is prohibited is bland, common, unsupported default color—blue-purple gradients, cyan-purple neon, rainbow flares, glass cards, and glowing borders.
|
||||
4. **No elements that clash with the overall style**: do not introduce styles outside the visual language, such as rounded icons or rounded rectangles in a sharp-edged style.
|
||||
5. **Make chart backgrounds transparent**: use transparency or the page background, except for reversed type on a dark background.
|
||||
6. **No empty regions**: leave no solid block of blank space in the body content area; every planned region must be filled with real content, and failing to fill it is the most serious form of roughness.
|
||||
|
||||
## PART B — Signature System (Template-Specific Signature; takes precedence over PART A in conflicts)
|
||||
|
||||
One-line style signature: use darkened technology photography as the header background, let deep forest green govern conclusions and structure, use bright mint green for emphasis, and keep the overall density high while allowing large light-gray/light-green zones to create breathing room.
|
||||
|
||||
【Color Palette】Use pure white #FFFFFF as the primary background (large body areas); use light gray #F1F1F1 for explanation columns and bottom so-what bars (sectioning only, never as the main text background); use medium gray #565656 for main text, with #7E7E7E available for footnotes/page numbers; use deep forest green #03522C (structural near-equivalent #04512C) for titles, skeleton lines, and chapter codes as the first structural color throughout; bright green #29B974 is the primary accent, reserved for key figures, icons, and action lines rather than spread across the page; mint base #D1F5E2 is for half-screen transitions/quotes/large explanation areas, light green #B8EDBC for metric cards/summary panels, with cover overlays additionally using #A8EFB8; for chart series, prioritize the same-color scale from deep green → bright green → olive yellow #D3DF33, adding cyan #2FC1D6 when needed; use magenta #E71C56 for negative/risk, with deep burgundy #670E30 only at its boundary. Structure pages usually show only green tones + neutrals; data pages use at most 3–4 hues, every color must correspond to a data category or positive/negative meaning, and the accent color must never cover the page.
|
||||
|
||||
【Layout Skeleton】Source-canvas facts: 16:9, 12192000×6858000 EMU (approximately 1467×825 px). Most body pages have a darkened technology/person/data photo band about 14–17% high across the top, with a white assertion-style title aligned left; below it is a navigation bar of “chapter code + vertical rule + section name,” then the white body. The body commonly uses a 2:1 two-column or three-column grid, with a light-gray explanation column on the right; charts, tables, and diagrams are separated by fine gray/green lines. The signature divider is a stripe band that fades from a solid deep-green block into fine vertical bars, usually attached to the top edge of the body or the right column. Cover only: overlay two translucent mint rectangles, a thick deep-green divider, and a bottom stripe on a full-bleed dark image; chapter page only: use a vertical photo + mint overlay on the left about 1/3, and list the chapter agenda on a white right side. Keep the reading path fixed as “black title band carrying the conclusion → chapter locator → main chart/table → sidebar explanation → one-line bottom close”; special transition pages may remove the photo title band but retain the navigation logic.
|
||||
|
||||
【Typography】Source-deck facts: use sans-serif Arial for body copy and data labels (render with {latin: Liter, ea: MiSans}); use Trebuchet MS for chapter codes, some section headings, and a small number of footnote/italic prompts (QuattrocentoSans is an acceptable substitute); cover date verification uses Times New Roman and the cover subtitle uses Georgia, both for low-frequency special use (render with Unna). Body copy is about 12–16pt=1x; black full-width title about 24pt≈1.8–2x; chapter code about 18–27pt≈1.5–2x; key conclusion/section title 20–24pt≈1.5–2x; large figures 32–40pt≈2.5–3x; cover main title about 36pt≈3x (dedicated page); footnotes about 7–9pt≈0.5–0.6x. Titles generally use bold, sentence case, or all-caps labels; body copy uses short sentence-style paragraphs; emphasize key phrases, figures, and positive/negative judgments in bright green/magenta bold; italics are only for quotations or metric definitions, never decoration.
|
||||
|
||||
【Chart Language】Actually used: stacked/segmented columns, phase curves, three-column metric cards, set-overlap diagrams/concentric rings, 2×2 risk matrices, four-quadrant discs, radial hub diagrams, horizontal timelines, three-column tables, and screenshot evidence collages.
|
||||
- Use green steps and olive yellow for layers in stacked columns, write values directly inside the columns, make growth rates/compound growth separate ellipse or capsule callouts, and optionally list same-color CAGR labels on the right.
|
||||
- Use a bright-green solid line to highlight the primary path in curve charts, gray dash-dot lines for assumptions/extensions, and numbered dots with short explanations for key stages; do not make viewers guess lines from a legend.
|
||||
- Use pale cyan #2FC1D6, pale yellow #D3DF33, and mint-green zones for 2×2s, set-overlap diagrams, and ring charts; place labels directly inside regions, prioritizing overlap zones or priorities 1–4.
|
||||
- Use a gray arrow track to carry deep-green numbered blocks on timelines, with icons above nodes and a fixed three-layer “name—fine rule—description” stack below each node.
|
||||
- Use deep-green headers, a white body, fine green grid lines, and a small amount of light-gray row fill in tables; the first column may use a mint sidebar navigation, and key rows use bold rather than heavy fill.
|
||||
|
||||
【Signature Components】1) Darkened technology-photo title band: once on most body pages; photos appear only in full-width headers, covers, or the left column of chapter pages, never beneath body charts; photography is a hard constraint: when substituted, retain the “person/technology scene + low-contrast darkening” function. 2) Chapter code + vertical-rule navigation: at most one per page, with the code in large deep-green type and the section name in gray bold. 3) Deep-green → fine-vertical-bar fading stripe: at most one per page, attached to an edge for rhythm/separation and never crossing body content. 4) Line-drawn icon + deep-green title rule: icons serve categories, processes, or risks only, never random decoration; at most one per evidence block. 5) Light-gray/mint explanation column and bottom close bar: carry one sentence on “why/how to read/action,” at most one of each. 6) Direct data-label components (numbered blocks, dots, capsules, concentric rings): mark key points directly rather than substituting a legend.
|
||||
|
||||
【Prohibited】Do not spread photography across the body or place body copy on top of a photo; prohibit blue-purple gradients, neon, rainbow series, and semantically ungrounded multicolor cards, with cyan/yellow/magenta used only as chart categories or positive/negative states; prohibit heavy borders, shadows, glow, and 3D charts; do not use rounded cards as default grouping containers, with rounded boxes appearing only occasionally in page types such as decision-process nodes; do not mix colorful emoji and colorful icons, and keep icons as single-color line drawings; do not place subtitles, legends, or multiple paragraphs of body copy inside a full-width title band. Screenshots/news clippings may appear occasionally, but must be independent evidence blocks with a white background and fine shadow, never becoming a full-page collage.
|
||||
|
||||
【Slide Types and Layouts】
|
||||
Full-width assertion + two-column evidence|One conclusion jointly proven by chart and explanation|Title band about 15%, main chart at left 55%, explanation/screenshot at right 45%, footnote at bottom|2–4 blocks|Navigation, stripe band, light-gray explanation column|Not suitable for multiple unrelated tables.
|
||||
Three-column contrast/comparison|Parallel dimensions, before/after differences, or three options|Three body columns about 30% each, icon + green mini-heading + fine rule + short paragraph, one so-what line at bottom|3 blocks|Line icons, green divider rules|Not suitable for long text or row-by-row data.
|
||||
Metric/cost cards|3–6 KPIs or option-cost comparisons|3×2 light-gray cards or three large cards, icon, oversized figure, 1–2 sentence definition, horizontal conclusion at bottom|3–6 blocks|Large figures, footnote links|Not suitable for causal chains.
|
||||
Framework diagram/matrix|Relationship structures such as 2×2s, set overlaps, rings, and radial hubs|Main diagram 60–70%, side/bottom explanation 30–40%, labels placed directly in the diagram|1 main diagram+2–4 explanations|Stripe band, numbered markers|Not suitable for stuffing every detail into the diagram.
|
||||
Evolution/transition contrast (occasional)|“From—to,” role change, or policy checklist|Mint/white half-screen split left and right, visual or quotation in the center, deep-green horizontal bar at bottom|2–4 blocks|Large quotation, photographic/illustrative evidence|Not suitable for routine data pages.
|
||||
High-density table/timeline|Role-task matrix, risk list, or phase sequence|Body 75–85% as a three-column table or an 8-node track, fine-line grid, direct numbering|6–8 blocks|Deep-green table header, numbered blocks|Not suitable for a single viewpoint.
|
||||
|
||||
【Density Baseline】Body evidence pages typically have 2–4 independent modules; metric cards have 3–6 cards, risk grids about 8 items, and timelines about 8 nodes. A single page typically has 1 main chart+1 sidebar/bottom explanation, with each column, point, or phase directly labeled inside the chart and a short callout added for key growth/risk. Explanation blocks are usually 2–5 blocks, each about 20–80 words/characters equivalent or 2–5 lines; lists have 2–4 items per block. Whitespace is concentrated below the title band, between columns, outside diagrams, and at the boundaries of light-gray/mint zones; leave no solid blank area in the body content region, organizing density through zones and fine lines rather than piling on more decoration.
|
||||
Reference in New Issue
Block a user