{"slug":"business/design","title":"Design Document","section":"business","sectionLabel":"Business","status":"unclassified","type":"document","path":"business/design.mdx","bytes":9456,"description":null,"updated":null,"source":"integratewise/Integratewise-docs-wiki","content":"\n## 1. Profile Baseline Declaration\n\n- **Profile selection**: `profiles/strategic.md`\n- **Selection rationale**: This is a strategic architecture review presentation for stakeholders (executives, tech leads, product owners). It requires conveying strategic height, clear storyline, and authority — matching the strategic planning profile.\n- **Referenced dimensions**: Design philosophy (grand vision, key points prominent, premium feel), information density (medium-high), color guidance (steady, premium, powerful), font guidance (sans-serif bold titles + readable body), content expression (framework diagrams, milestone roadmaps).\n- **Deviation notes**:\n  - Using a dark background theme instead of the profile's default light backgrounds, because this is a technical architecture presentation and dark mode conveys modern tech authority.\n  - Adding more diagram/flowchart-style pages than typical strategic decks, because architecture is inherently visual.\n\n## 2. Style Baseline Declaration\n\n- **Style anchor selection**:\n  - **Stripe's developer documentation aesthetic** — clean, dark, authoritative, with amber/gold accents on deep charcoal. Referenced for: color scheme temperament, information hierarchy, and the balance between technical depth and visual clarity.\n  - **McKinsey strategic reports** — structured, data-forward, confident. Referenced for: information density, page title construction (titles as core arguments), and the Objective-Path-Returns framework.\n- **Referenced dimension explanation**: From Stripe: the dark-mode palette, restrained accent usage, and monospace/code-friendly aesthetic. From McKinsey: the structural rigor, big-number displays, and argument-forward page titles.\n\n## 3. Style Details\n\n### Color Design Principles\n\n- **Overall tendency**: In-between — stability as foundation with local highlights. Dark backgrounds convey authority; amber accents draw attention to key architectural concepts.\n- **Temperature**: Cool-neutral with warm accents. Deep charcoal (cool) + warm amber (accent) creates tension and visual interest.\n- **Primary color**: `#1a1a2e` — deep charcoal with a subtle blue undertone. Not pure black; has depth. Used for backgrounds and primary surfaces.\n- **Background**: `#0f0f1a` — near-black, slightly lighter than primary. Used for page backgrounds.\n- **Text color**: `#e8e8f0` — off-white with a cool tint. High contrast on dark backgrounds without the harshness of pure white.\n- **Secondary color**: `#4a4a6a` — muted slate. Used for dividers, secondary text, subtle borders.\n- **Accent color**: `#d4a574` — warm amber/gold. Used sparingly for key data, CTAs, highlighted architectural components, and chapter dividers. Same family as primary (warm-neutral pairing).\n\n### Font Usage Principles\n\n- **Title font**: `Liter` — modern neo-grotesque, clean and rational. Perfect for tech architecture authority. Used with ALL CAPS + expanded letter spacing for cover and chapter titles.\n- **Body font**: `QuattrocentoSans` — classic elegant sans-serif, highly readable at small sizes. Used for all body content.\n- **Font size hierarchy**:\n  - Cover title: 48px (Liter, ALL CAPS, letter-spacing 4px)\n  - Page title: 28px (Liter, bold)\n  - Subtitle/section header: 22px (Liter)\n  - Body text: 18px (QuattrocentoSans, line-height 1.6)\n  - Annotations/labels: 14px (QuattrocentoSans)\n  - Big numbers: 56px (Liter, light weight for breathing room)\n\n### Text Box and Container Styles\n\n- Content separation: Primarily whitespace and font size differences. Cards used sparingly for grouping related architectural components.\n- Cards: Sharp-cornered rectangles, no border, filled with `#1a1a2e` (primary) on `#0f0f1a` (background) pages. Subtle difference creates depth without heavy shadows.\n- Decorative elements: Thin horizontal lines (`#4a4a6a`) as section dividers. Small amber accent bars (4px wide, full height) on left side of content blocks for visual hierarchy.\n\n### Image Style\n\n- **Icons**: Solid icons (fas style), used sparingly. Amber color for emphasis. Used to mark subsystem categories (e.g., database icon for Spine, brain icon for Twin).\n- **Tables**: Minimal style. Dark header row with amber text. Alternating row backgrounds (`#1a1a2e` / `#151525`). No outer borders; only subtle horizontal dividers.\n- **Charts**: Not heavily used in this deck; architecture diagrams built with shapes + text instead.\n- **Illustrations**: No photographic illustrations. Architecture is conveyed through geometric diagrams, flowcharts built with shapes and connectors.\n\n## 4. Layout System\n\n### Global Layout Characteristics\n\n- **Page size**: 1280 x 720 (16:9)\n- **Page margins**: 60px left/right, 50px top, 40px bottom\n- **Unified page elements**:\n  - Top-left: small \"IW\" logo text (Liter, 14px, amber, on every page)\n  - Bottom-right: page number (QuattrocentoSans, 12px, secondary color)\n  - Bottom-left: document version \"v1.0 ARCHITECTURE FREEZE\" (12px, secondary)\n  - Thin horizontal rule at y=50 across full width (secondary color, 1px) below the logo area\n\n### Special Page Layouts\n\n- **Cover**: Full dark background. Centered large title (48px, ALL CAPS, amber). Subtitle below (22px, off-white). Thin amber horizontal line separating title from subtitle. Bottom: version badge.\n- **Table of Contents**: Left side large \"CONTENTS\" vertical text (Liter, 72px, rotated 90°, secondary color). Right side: 4 chapter entries in a grid, each with number (amber, 36px) + title (22px) + one-line description (16px).\n- **Chapter dividers**: Dark background with large chapter number (120px, amber, Liter) on left. Chapter title (36px, off-white) right-aligned. Thin amber accent line. Minimal, high-impact.\n- **Final page**: Similar to cover. Centered \"ARCHITECTURE FREEZE v1.0\" in large amber text. Below: the three key stats (35 documents, 00–34, Complete).\n\n### Content Page Layout Patterns\n\n- **Pattern A — Left-right split**: Left 40% = title + key bullets. Right 60% = architecture diagram built with shapes.\n- **Pattern B — Full-width flow**: Title at top. Horizontal flow diagram across middle (shapes connected by lines). Annotations below.\n- **Pattern C — Card grid**: Title at top. 3-4 equal cards in a row, each with icon + title + 2-3 bullets.\n- **Pattern D — Big number + detail**: Left 30% = one big number/stat. Right 70% = explanatory content.\n\n## 5. Style Usage Rules\n\n- **$title** textStyle: Used for all page titles (28px, Liter, off-white).\n- **$subtitle** textStyle: Used for section headers within pages (22px, Liter, off-white).\n- **$body** textStyle: Used for all body content (18px, QuattrocentoSans, off-white, line-height 1.6).\n- **$caption** textStyle: Used for annotations, labels, page numbers (14px, QuattrocentoSans, secondary color).\n- **$bigNumber** textStyle: Used for stats and KPIs (56px, Liter, amber).\n- **$chapterNumber** textStyle: Used for chapter divider numbers (120px, Liter, amber).\n- **Primary color ($primary)**: Card fills, shape fills for primary elements.\n- **Background color ($background)**: Page backgrounds.\n- **Accent color ($accent)**: Chapter numbers, big stats, key highlights, icon fills, accent bars.\n- **Secondary color ($secondary)**: Dividers, subtle borders, captions, secondary text.\n- **Text color ($text)**: All primary text content.\n\n## 6. Risk Prohibitions\n\n- [ ] **NO blue/cyan colors** — this is a dark+amber palette; do not introduce blue accents.\n- [ ] **NO rounded rectangles** — use sharp corners throughout for architectural rigor.\n- [ ] **NO body text below 18px** — minimum 18px for readability on dark backgrounds.\n- [ ] **NO annotation text below 12px** — minimum 12px for captions.\n- [ ] **NO title text below 28px** — page titles must be 28px minimum.\n- [ ] **NO more than 3 colors on any page** — stick to background, text, and one accent.\n- [ ] **NO gradients on text** — solid colors only; gradients on backgrounds only if very subtle.\n- [ ] **NO photographic images** — this is a technical architecture deck; use shapes, icons, and diagrams only.\n- [ ] **NO center-aligned body text** — left-align all body content for readability.\n- [ ] **NO pages with only title + 2 lines** — every content page must have substantial information (minimum 4-6 key points or a full diagram).\n\n## 7. Theme Definition\n\n```yaml\ntheme:\n  colors:\n    primary: \"#1a1a2e\"\n    secondary: \"#4a4a6a\"\n    accent: \"#d4a574\"\n    background: \"#0f0f1a\"\n    text: \"#e8e8f0\"\n    darktext: \"#0f0f1a\"\n  textStyles:\n    title:\n      fontSize: 28\n      color: \"$text\"\n      fontFamily: \"Liter\"\n      lineHeight: 1.3\n    subtitle:\n      fontSize: 22\n      color: \"$text\"\n      fontFamily: \"Liter\"\n      lineHeight: 1.3\n    body:\n      fontSize: 18\n      color: \"$text\"\n      fontFamily: \"QuattrocentoSans\"\n      lineHeight: 1.6\n    caption:\n      fontSize: 14\n      color: \"$secondary\"\n      fontFamily: \"QuattrocentoSans\"\n      lineHeight: 1.4\n    bigNumber:\n      fontSize: 56\n      color: \"$accent\"\n      fontFamily: \"Liter\"\n      lineHeight: 1.1\n    chapterNumber:\n      fontSize: 120\n      color: \"$accent\"\n      fontFamily: \"Liter\"\n      lineHeight: 1.0\n  tableStyles:\n    default:\n      fontSize: 16\n      fontFamily: \"QuattrocentoSans\"\n      headerFill: \"$primary\"\n      headerColor: \"$accent\"\n      headerBold: true\n      bodyFill: [\"#1a1a2e\", \"#151525\"]\n      bodyColor: \"$text\"\n      border:\n        style: solid\n        width: 1\n        color: \"#4a4a6a40\"\n```\n"}