chore: 1.1.0 release
This commit is contained in:
@@ -0,0 +1,84 @@
|
||||
# Sky Blue Wayfinding · Work STYLE DESIGN SYSTEM
|
||||
|
||||
## PART A — Category Baseline (General Minimum Standard)
|
||||
|
||||
A conclusion-first business performance report benchmarked against top-tier operating review meetings and project progress briefings. Every page in this deck must be scannable within 30 seconds, and every number must withstand drill-down questions: status is evidenced, variances are attributed, and requests are explicit.
|
||||
|
||||
Content and layout:
|
||||
1. Executive structure: conclusion overview (a one-page completion verdict) → key metrics vs targets → revenue/mix analysis → variance attribution → project status (red/amber/green) → cost and efficiency → next-period actions → items requiring decisions and support.
|
||||
2. Status visualization is the signature: red/amber/green status lights, target vs actual tables, progress bars with numeric labels, variance waterfalls, and milestone timelines.
|
||||
3. Medium-high density with strict grid discipline: pages are built from aligned status modules and tables; zero decoration; every module answers “So what?” in place.
|
||||
|
||||
Visual style:
|
||||
1. Aesthetic: crisp, corporate, and tool-like; the reader should be able to audit the quarter from the pages alone.
|
||||
2. Typography: one sans-serif family throughout the deck; hierarchy comes from weight and size, not decorative type; numbers are always column-aligned and never set in serif display faces.
|
||||
3. Color: a neutral structural palette (deep slate/graphite + gray), with status colors reserved strictly for meaning—green/amber/red indicate status only, while one style-specific accent color marks priorities and current-period highlights; never use status colors decoratively.
|
||||
4. Graphics: simple charts (bar comparisons, line trends, variance waterfalls); thin table rules and right-aligned numbers; no 3D, no pictograms as data, and no gradient fills.
|
||||
|
||||
Structure and discipline (distilled from the work we recognize as benchmarks):
|
||||
1. The first page is always the verdict: one sentence on overall completion + target vs actual for 3–5 headline metrics; never pad the deck with generic cover copy.
|
||||
2. Every metric must show all three: target, actual, and attainment rate; an actual without a target is a defect.
|
||||
3. Variance pages must quantify attribution: split the gap into named causes whose amounts sum to the total gap; unexplained residuals are not allowed.
|
||||
4. Every project status requires the full triad: status light + evidence (progress %, milestones) + corrective action (with owner and date); a red item without a recovery plan is a defect.
|
||||
5. Next-period actions are commitments, not wishes: every item includes an owner, timing, and expected quantified impact.
|
||||
6. Trend pages mark the reporting-period boundary and annotate causes of inflection points inside the chart; forecast segments use dashed lines and are labeled as plan/estimate.
|
||||
7. Parallel modules follow the grid precisely: modules in the same row share height and baseline; mixed content is grouped by meaning, never scattered.
|
||||
8. Every number includes its unit, period, and definition (GMV or revenue, order volume or sales value); estimated values are labeled as internally defined examples.
|
||||
9. The deck must end with items requiring management decisions and support—list each item with the consequence of delay; never close with a thank-you page.
|
||||
|
||||
Default baseline (derived from the layout skill; PART B may override): use one consistent lightweight component system throughout for progress, attainment, and red/amber/green status; each page has 1 theme + 2–4 supporting points, with the conclusion evident within 5 seconds; every metric must include a “So what?”—the cause, impact, or next action—rather than a pile of bare numbers.
|
||||
|
||||
**Headline read-through test**: reading only the slide titles should tell the complete story; if the sequence does not flow, the structure is not working.
|
||||
|
||||
Density anchor: the specific minimum for each style (number of evidence modules and charts per page, plus annotation conventions) follows that style’s 【Density Baseline】 reverse-engineered from the source deck—this baseline does not impose a single universal number.
|
||||
|
||||
### Global Prohibitions (AI Default Patterns · Mandatory)
|
||||
|
||||
1. **Do not default to cards**: unless explicitly requested by the user, do not use rounded rectangles or rectangular cards to create hierarchy or alignment—containers with a genuine information function (status lights, assumption boxes, quote frames) do not count as cards. Lines, whitespace, and differences in type size and weight are better tools.
|
||||
2. **Do not default to equal-split compositions**: unless no other layout is viable, do not use default three-way, four-way, or two-by-two grids—equal division must be justified by the content structure (three scenarios naturally warrant three columns; frameworks explicitly named in the brief are exempt).
|
||||
3. **Do not use ungrounded AI color schemes**: institution-specific palettes defined in the body are exempt; what is prohibited is a generic, conventional, unjustified default—blue-purple gradients, cyan-purple neon, rainbow glows, glass cards, and luminous borders.
|
||||
4. **Do not use elements inconsistent with the overall style**: nothing outside the visual language may appear, such as rounded icons or rounded rectangles in a sharp-edged style.
|
||||
5. **Keep chart backgrounds transparent**: use transparency or the page background, except for reversed charts on dark backgrounds.
|
||||
6. **Do not leave planned regions empty**: no large blank area may remain in the main content zone; every planned region must be filled with real content, and failure to fill it is the most serious form of roughness.
|
||||
|
||||
## PART B — Signature System (Distinctive Template Signatures; This Section Prevails over PART A in Case of Conflict)
|
||||
|
||||
One-sentence style signature: a calm operating-review aesthetic built on white and pale sky blue, with electric blue as the sole strong accent and deep navy anchoring the data; medium-high density throughout, with the rigor of an auditable worksheet.
|
||||
|
||||
【Color Palette】
|
||||
Use #FFFFFF as the primary background across most body content and tables. Use #C2E6FF as a sectional background only for right-side explanation panels, full data regions, or section transitions—not as the deck-wide background. Use #D6F1FF for row and column highlights, limited to the current period, priority rows, and small label bands. #000000 is the primary text color for body copy, tables, and footnotes; avoid blue for long-form reading. Use #007ACC consistently for titles, rules, primary bars, and key numbers, concentrating it in title areas, primary chart series, and conclusion values rather than spreading it across ordinary pages. Use #001142 for dark contrast, limited to comparison bars, baselines, dark stacked segments, and a small amount of emphasized text; use #F2F2F2/#F5F6F7 for fine rules and alternating fills. Only feature pages may introduce #00948A and #7E59BD, respectively for two thematic series or color-blocked sections; do not let them spread into standard metric pages. Positive/negative coloring follows PART A, because the source deck has no stable red-green semantics; express negative values with #001142, parentheses, or downward bars. Standard body pages should generally retain only the blue family plus neutrals, with no more than three chromatic colors; flag/feature-chart pages may make localized exceptions without carrying them elsewhere. Never use #007ACC as a full-page fill; reserve an intense full-blue page for special slides such as disclaimers.
|
||||
|
||||
【Layout Skeleton】
|
||||
Source-deck facts: the canvas is 720×405pt, 16:9. Body-slide titles are fixed near the upper-left boundary at approximately 34pt, at around 18pt type size. Many slides begin with a pale-blue horizontal bar spanning roughly one quarter of the canvas width, containing a shorter section label; the evidence area begins below the title. The standard reading path is title conclusion → left-side table/chart → right-side explanation or action → bottom footnote and page number. Two columns form the primary skeleton, typically with 55–65% on the left for data and 35–45% on the right for explanation/small charts; side-by-side comparison may also be created with square-corner white and #C2E6FF regions. In multi-period tables, left-align labels and right-align numbers. Project status pages use approximately 25–30% of the left side as a metadata rail and 70–75% of the right side for three to four narratives with leader lines. Only cover, section, Q&A, and appendix divider slides use full-bleed photography or a white title frame; special slides do not inherit the standard body grid.
|
||||
|
||||
【Typography】
|
||||
Source-deck font facts: the embedded fonts are the sans-serif OrstedSansOffice (body copy, tables, and standard titles, Regular/Bold) and OrstedSans (cover and section display titles, Regular/Bold); no serif fonts are used. Keep numbers and English text in the same sans-serif family. Record dense body text at approximately 8–9pt as 1x; sparse narrative text may increase to 11–12pt. Standard titles are approximately 18pt≈2x, key figures approximately 12–14pt≈1.5–1.8x, and footnotes approximately 6pt≈0.7x. Section-card titles are approximately 28pt, and Q&A divider titles are larger; both belong only to special slides. Titles generally use English sentence case or Title Case and are limited to two lines. Table numbers consistently include units/percent signs and align by column; negative values use parentheses or a minus sign, never a decorative numeric typeface. Render with Liter (Latin text/numerals) and MiSans (Chinese).
|
||||
|
||||
【Chart Language】
|
||||
Chart types present in the source include horizontal or vertical bar charts, waterfall/bridge charts, paired columns, 100% stacked columns, donut charts (occasional), dense multi-period tables, and combination slides with a “table + small chart on the right.” ⭐Waterfall charts use thin connector lines and values above the bars to break down movement from opening to closing, followed immediately by two to four causal explanations. ⭐Paired-column charts place “before/after” or “baseline/current state” side by side, with leader-line annotations above showing the matching ratio or difference. ⭐Multi-period tables use thin blue top/bottom rules, a pale-blue highlight across the entire current-period column, bold total rows, and a methodology footnote at the bottom. Bar charts generally label each bar or group directly; the primary series uses #007ACC and comparison series use #C2E6FF/#001142. Keep legends to the essential two or three items; do not rely on hover states or large color-block legends.
|
||||
|
||||
【Signature Components】
|
||||
1. Header section rail: a pale-blue horizontal bar at the upper left overlaid with a shorter label, providing section navigation; place it once at the top of each body slide.
|
||||
2. Project arc rail: 5–7 concentric blue arcs on the left with a small number of nodes and horizontal leader lines, linking metadata such as “location/scale/stage/next milestone” to the narrative on the right; use one group per project-progress slide only, never as a decorative background.
|
||||
3. Current-period highlight: use #D6F1FF or #C2E6FF in multi-period or metric tables to identify the current column/priority row, paired with a thin #007ACC rule; use only when comparing time periods or versions.
|
||||
4. Photographic section board: photography is a hard requirement, but it appears only on covers, section transitions, Q&A/appendix dividers, or in a right-side image column occupying approximately 30–45% of a body slide. A section card may place a square-corner white title frame and circular portrait in the left 20–30%. In ordinary evidence areas, never use photography in place of a table, chart, or explanation.
|
||||
5. Page numbers remain in a small fixed position at the lower left; reverse them to white on photographic slides for legibility. Do not add a decorative footer bar to body slides.
|
||||
|
||||
【Prohibited】
|
||||
1. Do not use full-slide photography or large image backgrounds on ordinary body slides; photography may appear only in the positions defined by the “Photographic section board.”
|
||||
2. Do not use #007ACC as the background of an ordinary body slide; an intense full-blue slide is limited to one-off special pages, while data slides remain primarily white with pale-blue sections.
|
||||
3. Do not use rounded cards, pill labels, or luminous borders inside data modules; the square-corner white frame on a photographic section card is the exception.
|
||||
4. Do not use concentric arcs as general decoration; the arc rail should not appear outside a project-status narrative slide.
|
||||
5. Do not give all columns equal-weight black-and-white treatment in dense multi-period tables; the current period must be located with a pale-blue column, blue rule, or an equally strong locator.
|
||||
6. Use #00948A/#7E59BD only for semantic segmentation on thematic feature slides; do not let these secondary colors compete with the primary blue on standard metric, risk, or capital slides.
|
||||
|
||||
【Slide Types and Layouts】
|
||||
Photographic section board (occasional)|Opening, section transitions, Q&A/appendix|Full-bleed photograph or photograph + white title frame, title area approximately 20–30% wide|1 theme|Photographic section board|Not suitable for multiple metrics.
|
||||
Conclusion two-column slide|Operating summary, decision conclusion|Left 45–55% numbered/metric list; right 45–55% highlight narrative or small table; 2 primary regions and 4–8 independent blocks|Section rail, pale-blue section|Not suitable for long row-by-row tables.
|
||||
Project-progress arc slide|Single-project status, risks, and next steps|Left 25–30% title + 4 metadata items; right 70–75% three to four leader-linked narratives; 4–6 blocks|Project arc rail|Not suitable for comparing multiple projects side by side.
|
||||
Table + chart two-column slide|Multi-period metrics, risk exposure, capital movement|Table 55–65%; chart/explanation 35–45%; 1–2 charts and 2–4 evidence blocks|Current-period highlight, pale-blue side panel|Not suitable for bare numbers without a defined basis.
|
||||
Three-chart feature slide|Three parallel metric categories or thematic framework|Three approximately equal-width columns, shared top baseline, shared bottom footnote; 3 primary charts + explanation|Blue bars or thematic secondary colors|Not suitable for long-form narrative.
|
||||
Dense appendix table slide|Definitions, lists, historical series|Full-slide table with multiple columns and rows (approximately 15–30 rows), with a methodology footnote along the bottom|Blue table header, total-row rule|Not suitable for adding photography or a second primary narrative.
|
||||
|
||||
【Density Baseline】
|
||||
Most body slides in the source deck have medium-high density: conclusion slides typically contain 2 primary regions and 4–8 independent evidence blocks; project arc slides contain 4 metadata items plus 3–4 explanations; chart slides contain 1–3 charts, with most values labeled directly above or beside bars; appendix table slides commonly contain 1 main table with 15–30 rows. New slides should retain 1 theme and 2–4 supporting modules per page; table slides should use 1 primary table + no more than 1 supporting chart. Explanatory text usually comprises 2–4 blocks, each approximately 20–60 words/characters equivalent or 2–4 short sentences; footnotes occupy 1–3 lines within the bottom boundary. Whitespace should appear primarily in the left/right margins, at the two-column division, between arcs and leader lines, and above footnotes; it must not create a large empty void in the center of the body content.
|
||||
Reference in New Issue
Block a user