# Design Language for supplychain.wiki ## Aesthetics and Tone supplychain.wiki channels a swiss aesthetic — the mathematical precision, grid discipline, and typographic rigor of Swiss International Style applied to a supply chain knowledge encyclopedia. The site instructs — with the authoritative clarity of Josef Muller-Brockmann's grid systems, the informational density of Otl Aicher's Munich Olympics wayfinding, and the pedagogical confidence of a university reference library where every supply chain concept has been cataloged with Swiss watchmaker precision. Inspiration draws from the typographic systems of Armin Hofmann, the information architecture of Edward Tufte's visual displays, the encyclopedic completeness of Wikipedia's best technical articles, and the systematic beauty of Swiss railway timetables. The tone is tech-tutorial — instructional and precise language that teaches supply chain concepts with the methodical clarity of well-written technical documentation. The Swiss treatment transforms supply chain knowledge from scattered industry jargon into a unified visual system — terminology hierarchies rendered through typographic scale alone, concept relationships mapped in clean grid alignments, and process flows diagrammed with the geometric discipline of Swiss engineering schematics. Every wiki article follows the same strict visual grammar, creating the encyclopedic consistency that makes complex supply chain knowledge navigable and trustworthy. Each element adheres to the grid with zero tolerance for deviation — headings snap to baseline grids, images align to column edges, and white space is precisely calculated rather than casually estimated. The tech-tutorial tone ensures that supply chain concepts are explained with patient precision, building knowledge systematically from fundamentals to advanced topics like a well-structured curriculum. ## Layout Motifs and Structure The layout uses a **broken-grid** architecture — content blocks that strategically break the underlying Swiss grid creating dynamic visual tension between order and disruption that mirrors the complex interconnections of supply chain systems. **Broken Grid System:** - Base grid: 12-column, 80px gutter, max-width: 1140px centered - Primary content: spans 7 columns left-aligned - Sidebar annotations: spans 4 columns right-aligned, offset 20px upward from expected position - Feature blocks: deliberately span 9 columns, breaking left boundary by 1 column - The grid breaks create the informational quality of marginalia and annotations that characterize great reference works - Responsive: grid collapses to single column on mobile while maintaining typographic hierarchy **Section Sequence:** 1. **Index Hall:** Hero with commissioner-versatile typography on clean white ground, floral-botanical decorative borders at extreme subtlety, organic-blobs soft knowledge-cloud imagery 2. **Taxonomy Grid:** Supply chain concepts in broken-grid wiki layout — zoom-focus interactive magnification with organic-blobs concept-cluster visualizations 3. **Article Flow:** Detailed wiki articles in primary column with annotation sidebar — floral-botanical simplified margin decorations and organic-blobs inline diagram style 4. **Cross-Reference Matrix:** Related concepts in deliberately offset grid blocks with floral-botanical minimal connecting vines and organic-blobs relationship mapping 5. **Colophon:** Footer as encyclopedia closing page — tech-tutorial systematic credits with floral-botanical final ornament and clean Swiss closing **Spatial Philosophy:** - The broken grid creates surprise within order — readers expect Swiss precision and get strategic disruptions that highlight important supply chain connections - Sidebar annotations provide contextual depth without interrupting primary reading flow - Grid breaks at section transitions create visual chapter markers in the wiki's knowledge structure ## Typography and Palette **Typography:** - **Headlines:** "Commissioner" (Google Fonts) — commissioner-versatile at 1.8rem-2.6rem, weight 700. Its variable versatility allows the same typeface to shift from authoritative headings to friendly subheadings, creating the encyclopedic range of a comprehensive wiki. - **Body Text:** "Atkinson Hyperlegible" (Google Fonts) — clean legibility-optimized at 0.95rem, weight 400, line height 1.75. - **Data:** "Fira Code" (Google Fonts) — monospace at 0.8rem for supply chain codes, standards references, and technical identifiers. - **Labels:** "Commissioner" at 0.6rem, weight 500, uppercase, letter-spacing 0.15em. **Color Palette:** - **Swiss White:** #fafaf8 — crisp near-white for primary background - **Grid Cream:** #f0ede6 — subtle warm cream for sidebar and annotation backgrounds - **Pastel Lavender:** #b8a9d4 — soft lavender for primary wiki accent - **Pastel Sage:** #a4c3a2 — muted sage for secondary knowledge indicator - **Pastel Coral:** #e8a598 — soft coral for tertiary highlight and cross-references - **Swiss Black:** #1a1a1a — near-black for primary text - **Annotation Gray:** #6b6b6b — medium gray for sidebar annotations and secondary text - **Grid Line:** rgba(184,169,212,0.1) — faint lavender for visible grid lines ## Imagery and Motifs **Organic-Blobs Knowledge Clusters:** Supply chain concepts visualized as soft organic blob shapes — SVG blobs with smooth curves (border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%) in pastel palette at 0.06 opacity. Blobs cluster to show concept relationships, creating the visual quality of knowledge clouds forming around supply chain topics. **Zoom-Focus Magnification:** Interactive wiki elements trigger magnification on engagement — transform: scale(1.03) with box-shadow expansion (0 4px 20px rgba(184,169,212,0.12)) over 250ms. The zoom-focus creates the reference-book quality of leaning closer to examine detailed supply chain diagrams. **Floral-Botanical Wiki Borders:** Decorative botanical elements at extreme subtlety mark section boundaries — SVG simplified leaf and vine motifs (1px stroke, Pastel Sage at 0.04 opacity) creating the illuminated-manuscript quality of a scholarly encyclopedia with botanical marginalia that connects to supply chain's agricultural and organic origins. **Swiss Grid Overlay:** Visible grid lines at extreme subtlety — 1px lines in Grid Line color creating the underlying structure visible through content. The overlay creates the technical-drawing quality of Swiss design's commitment to visible underlying structure. **Annotation Sidebar Treatment:** Sidebar content with distinct treatment — background: #f0ede6; border-left: 2px solid rgba(184,169,212,0.2); padding: 20px 24px; font-size: 0.85rem. The annotation style creates the marginalia quality of scholarly texts where supplementary information enriches the primary narrative. ## Prompts for Implementation Build the page as a Swiss-designed supply chain encyclopedia. Broken grid: .wiki-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 80px; max-width: 1140px; margin: 0 auto; } .primary { grid-column: 1 / 8; } .sidebar { grid-column: 9 / 13; margin-top: -20px; } Annotation style: .annotation { background: #f0ede6; border-left: 2px solid rgba(184,169,212,0.2); padding: 20px 24px; font-size: 0.85rem; border-radius: 0 8px 8px 0; } Zoom focus: .wiki-card:hover { transform: scale(1.03); box-shadow: 0 4px 20px rgba(184,169,212,0.12); transition: all 250ms ease-out; } Grid overlay: .grid-visible::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(184,169,212,0.05) 0, rgba(184,169,212,0.05) 1px, transparent 1px, transparent calc(100%/12)); pointer-events: none; } AVOID: Standard wiki platforms with utilitarian styling, corporate knowledge bases with bland blue headers, and simple article lists. Let Swiss typographic precision and broken-grid dynamism create a supply chain encyclopedia where knowledge is as beautifully structured as a Swiss railway system. ## Uniqueness Notes 1. **Swiss for supply chain wiki:** Mathematical precision creates the authoritative, trustworthy quality essential for a knowledge reference while maintaining visual sophistication. 2. **Broken-grid as scholarly dynamism:** Strategic grid disruptions create the marginalia quality of great reference works where annotations enrich primary content. 3. **Floral-botanical as organic origins:** Subtle botanical decorations connect supply chain knowledge to its roots in agricultural and natural resource logistics. 4. **Organic-blobs as knowledge clusters:** Soft blob shapes visualize concept relationships in a way that feels organic and intuitive rather than rigidly diagrammatic. 5. **Zoom-focus as scholarly engagement:** Magnification interaction creates the physical quality of leaning closer to examine detailed reference material. **Seed/Style:** aesthetic: swiss, layout: broken-grid, typography: commissioner-versatile, palette: pastel, patterns: zoom-focus, imagery: organic-blobs, motifs: floral-botanical, tone: tech-tutorial **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, friendly tone, minimal imagery. This design uses swiss aesthetic, broken-grid layout, commissioner-versatile typography, pastel palette, zoom-focus patterns, organic-blobs imagery, and tech-tutorial tone.