chore: 1.1.0 release
This commit is contained in:
@@ -0,0 +1,125 @@
|
||||
# Cartographic Strategy · Map Strategy STYLE DESIGN SYSTEM
|
||||
|
||||
> Intended homepage tag: Strategic Planning / Strategy
|
||||
> Visual metaphor: contemporary atlas + strategy room
|
||||
|
||||
## 1. Style Positioning
|
||||
|
||||
For internationalization, regional expansion, business portfolios, ecosystem layout, resource allocation, and long-term roadmaps. It is not a traditional consulting blue-and-white template, but a map-style narrative that "puts strategy into space": warm white paper, deep navy, restrained cobalt blue, and vermilion coordinates, building a sense of direction through routes, regions, scales, numbering, and legends.
|
||||
|
||||
Underlying principles:
|
||||
|
||||
1. Every page first answers one decision question, then shows location, path, or priority evidence.
|
||||
2. Map language serves comparison and sequence — contour lines and lat-long grids are not decorative wallpaper.
|
||||
3. One main map leads the page; captions, numbers, and labels are organized around it.
|
||||
4. When geographic information is insufficient, use abstract location diagrams, route maps, or composite maps — never fabricate precise boundaries.
|
||||
5. Titles read like judgments management would actually say — avoid vague slogans like "strategic blueprint" or "marching into the future together".
|
||||
|
||||
## 2. Page Skeleton
|
||||
|
||||
The canvas is 16:9 landscape. Content pages are mainly warm white; section divider pages may use deep navy. Outer margins stay stable; tiny coordinate ticks may appear at the four corners, but content never touches the edges.
|
||||
|
||||
The top is the title and page-number coordinate zone, about 14%–18% of the page; the middle is the main-map workspace, 65%–72%; the bottom reserves space for sources, assumptions, and the legend. No full-width thick rule under the title — position with short ticks, the page number, and thin lines instead.
|
||||
|
||||
The cover uses "large title + abstract regional map + one main route". The title sits on the left or lower left; the map takes 45%–60% on the right. Content pages switch among maps, matrices, routes, and timelines, but always keep the same coordinate and legend grammar.
|
||||
|
||||
## 3. Content Organization
|
||||
|
||||
Titles use conclusion sentences or explicit questions, e.g., "The Middle East offers the fastest first-entry validation window". The subtitle adds scope, years, evaluation dimensions, or data definitions and measurement basis.
|
||||
|
||||
A single page carries only one strategic judgment, with at most 3 supporting pieces of evidence. Body text uses short sentences, numbering, and direct labels — no long explanatory passages.
|
||||
|
||||
Spatial grouping prioritizes regions, markets, stages, entry modes, capability nodes, and risk levels. Every route must have an origin, a destination, a sequence, and a meaning; every color must be explained in the legend.
|
||||
|
||||
Numbers sit immediately beside their objects, with units, time, and measurement basis. Sources and assumptions go in the footer, not hidden at the visual center.
|
||||
|
||||
## 4. Content Page Layout System
|
||||
|
||||
### A. Strategic map page
|
||||
|
||||
The left 25%–32% holds the conclusion and 2–3 key explanations; the right holds an abstract regional map. Dots mark markets or capability nodes, line width expresses priority, solid/dashed lines distinguish what is in place from what must be built. Suited for market selection, network layout, and resource migration.
|
||||
|
||||
### B. Three-market comparison band
|
||||
|
||||
The page divides horizontally into three parallel zones, each containing a market name, one main number, a small location map, and 2–3 evaluation dimensions. The three columns must be isomorphic; the recommended option may be emphasized with a cobalt edge line or vermilion coordinate point.
|
||||
|
||||
### C. Opportunity–difficulty matrix
|
||||
|
||||
The matrix takes 60%–70% of the page, with the recommendation conclusion on the right. Point labels name the markets directly without depending on a complex legend. Quadrant names are actionable judgments such as "enter first", "build partnerships", "keep watching" — not abstract star/cash-cow clichés.
|
||||
|
||||
### D. Route and stage page
|
||||
|
||||
One main route from lower left to upper right connects 3–5 stages. Each stage carries its timing, key actions, thresholds, and exit conditions. The route may turn corners; equal-width stacked process cards are not used.
|
||||
|
||||
### E. Capability network page
|
||||
|
||||
A central capability anchors the page, connecting channel, delivery, compliance, product, and talent nodes. Connecting lines express dependencies; node size expresses priority. Show only the 5–8 nodes that genuinely affect implementation.
|
||||
|
||||
### F. Decision page
|
||||
|
||||
One large conclusion on the left; on the right, a three-part list of "decide now / conditions to enter / 90-day actions". A scaled-down route map may review the whole journey — this is not an ordinary Thank You page.
|
||||
|
||||
## 5. Color System
|
||||
|
||||
- Warm paper white #F4F0E8: primary content background.
|
||||
- Deep navy #0B1F33: titles, section bases, the main route, and core text.
|
||||
- Cobalt blue #2F5BFF: recommended options, key paths, and key numbers.
|
||||
- Vermilion #E4572E: risks, key coordinates, and must-decide nodes; its area stays strictly smaller than cobalt.
|
||||
- Mist cyan #9BD5D8: secondary regions, historical stages, and de-emphasized data.
|
||||
- Graphite gray #5B6570: captions, axes, sources, and unselected options.
|
||||
|
||||
Regular pages use paper white + navy + cobalt; vermilion appears only once. Rainbow maps, fluorescent gradients, and large red-green oppositions are prohibited.
|
||||
|
||||
## 6. Fonts and Text Hierarchy
|
||||
|
||||
Chinese uses MiSans; English uses Liter; page titles and conclusion emphasis use a serif ({latin: Unna, ea: 思源宋体}) as the atlas-style display face, with body and secondary information in sans; never mix more than two font families.
|
||||
|
||||
- Cover title: 4–5x body size, bold, at most two lines.
|
||||
- Page title: 2–2.6x body size, left-aligned.
|
||||
- Key numbers: 2.5–3.5x body size, set in bold sans-serif.
|
||||
- Body text: 1x, short sentences.
|
||||
- Coordinates, legends, sources: 0.55–0.75x, kept readable.
|
||||
|
||||
Numbers, years, and region codes may use JetBrains Mono (brought in via customFonts). No all-caps long sentences, italic long passages, or multi-layer shadows.
|
||||
|
||||
## 7. Chart Language
|
||||
|
||||
Prefer dot plots, bubble charts, slope charts, path charts, two-dimensional matrices, regional small-multiple maps, and bar charts with direct annotations.
|
||||
|
||||
Chart backgrounds stay transparent or paper white; gridlines use extremely fine mist gray. Key series use cobalt; history/baselines use mist cyan or gray; risk thresholds use a single vermilion line.
|
||||
|
||||
Maps must carry a legend, a direction or scale cue. Abstract maps must be clearly marked as "schematic" — false administrative precision is not allowed. Key differences are annotated directly beside points, reducing standalone legends.
|
||||
|
||||
## 8. Tables and High-Density Information
|
||||
|
||||
Tables serve market scoring, entry conditions, and risk lists. Headers use deep navy text or a light mist-cyan base; thin lines between rows, no heavy borders.
|
||||
|
||||
Recommended rows are emphasized with a cobalt coordinate bar on the left; risk cells use small vermilion dots or text labels — never flood the whole cell red. Numbers right-aligned, text left-aligned, scoring criteria and basis noted at the table bottom.
|
||||
|
||||
High-density content is preferably split into "map/matrix + right-side explanation" — do not crush it into a ten-column-wide table.
|
||||
|
||||
## 9. Components and Graphic Elements
|
||||
|
||||
Stable components include coordinate points, routes, region outlines, short ticks, page-number codes, legends, scale-style separators, and thin-line annotations.
|
||||
|
||||
Nodes use solid circles or concentric circles; lines divide into three types — main path, alternative path, and dependency line. Arrows appear only when direction matters.
|
||||
|
||||
Photos are not a default element. If a city or scene photo is used, allow only one large image with desaturated treatment — no stock-photo collages.
|
||||
|
||||
## 10. Texture and Prohibited Items
|
||||
|
||||
Overall like a contemporary strategy atlas: precise, quiet, clearly directed. The paper base may carry an extremely light texture; dark pages stay pure; no glassmorphism.
|
||||
|
||||
Prohibited: default consulting blue card walls, random world-map watermarks, fake national borders, 3D globes, glowing routes, rainbow heat maps, rounded UI panels, emoji, decorative compasses, and full-page maps with no conclusion.
|
||||
|
||||
## 11. Generation Checklist
|
||||
|
||||
- Can every page state in one sentence what decision it asks for?
|
||||
- Do the map, matrix, or route genuinely carry comparative relationships?
|
||||
- Do all colors, line styles, and node sizes have explicit meanings?
|
||||
- Are regions and paths clearly labeled, with no fabricated precise geographic information?
|
||||
- Is the recommended option clearly highlighted while alternatives remain visible?
|
||||
- Does the page keep the stable grammar of paper white, navy, cobalt, and vermilion?
|
||||
- Are the title, legend, sources, units, and assumptions complete?
|
||||
- Are card walls, 3D globes, random decorative lines, and template-like slogans avoided?
|
||||
- Have you checked for overlap, cropping, garbled characters, low contrast, and text wrapping?
|
||||
Reference in New Issue
Block a user