|
| 1 | +# Forecast Visual Design System |
| 2 | + |
| 3 | +Reference for the Forecast brand visual language as implemented in crosslink docs and reusable across projects. |
| 4 | + |
| 5 | +## Brand Palette (from `_brand.yml`) |
| 6 | + |
| 7 | +| Name | Hex | Usage | |
| 8 | +|--------|-----------|------------------------------------------| |
| 9 | +| Red | `#F95838` | Primary accent, CTAs, crosslink branding | |
| 10 | +| Green | `#007C35` | Success, agents, session markers | |
| 11 | +| Blue | `#00A6DB` | Links, info, agent identity | |
| 12 | +| Yellow | `#FFCE02` | Warnings, highlights, knowledge | |
| 13 | +| Pink | `#FFB6C6` | Soft backgrounds, decorative | |
| 14 | +| Grey | `#ede2e4` | Confetti base (warm pinkish grey) | |
| 15 | +| Bg | `#F9F4F5` | Page background | |
| 16 | + |
| 17 | +## Typography |
| 18 | + |
| 19 | +- **Headings (h1)**: Helvetica, bold |
| 20 | +- **Subheadings (h2)**: Times New Roman, italic |
| 21 | +- **Body text**: Helvetica |
| 22 | +- **Code / slash-commands only**: IBM Plex Mono — never use mono for non-code text |
| 23 | + |
| 24 | +## Shape Vocabulary |
| 25 | + |
| 26 | +Shapes use only: ellipses, circles, rounded rectangles. No triangles or crescents. |
| 27 | + |
| 28 | +All shapes use `mix-blend-mode: multiply` — no alpha transparency on shapes. This creates the layered, overlapping Forecast look where colors interact. |
| 29 | + |
| 30 | +## Confetti Dots |
| 31 | + |
| 32 | +Small colored circles scattered as decorative accents, always with `mix-blend-mode: multiply`. |
| 33 | + |
| 34 | +### Color distribution (from forecast.bio homepage) |
| 35 | + |
| 36 | +Weighted random sampling matching the original site's `kConfetti` array: |
| 37 | + |
| 38 | +| Color | Hex | Weight | Probability | |
| 39 | +|-------------|-----------|--------|-------------| |
| 40 | +| Warm grey | `#ede2e4` | 25 | 57% | |
| 41 | +| Blue | `#00A6DB` | 7 | 16% | |
| 42 | +| Yellow | `#FFCE02` | 6 | 14% | |
| 43 | +| Pink | `#FFB6C6` | 3 | 7% | |
| 44 | +| Red | `#F95838` | 3 | 7% | |
| 45 | + |
| 46 | +Grey-dominant with colored accents. This keeps confetti subtle while the colored dots pop. |
| 47 | + |
| 48 | +### Static confetti (SVG diagrams) |
| 49 | + |
| 50 | +- Uniform radius (tunable via `CONFETTI_RADIUS` in `brand.py`, default: 5) |
| 51 | +- Wrapped in `<g style="mix-blend-mode: multiply">` |
| 52 | +- Uses solid brand colors only (red, green, blue, yellow, pink) — no grey in static diagrams |
| 53 | + |
| 54 | +### Animated confetti (footer JS) |
| 55 | + |
| 56 | +- 14 dots, 11px diameter |
| 57 | +- Positioned in a **cone shape** emanating up-right from the Forecast wordmark |
| 58 | +- Cone origin at logo baseline, slope drifts upward (-0.28 rise per px) |
| 59 | +- Spread grows with distance (cone half-angle 0.22) |
| 60 | +- Extra noise (±10px) on both axes for fuzzy edges |
| 61 | +- Fade in left-to-right on scroll (IntersectionObserver, 50ms stagger) |
| 62 | +- Random on every page load (`Math.random()`) |
| 63 | + |
| 64 | +## Diagram Generation Pipeline |
| 65 | + |
| 66 | +All diagrams generated programmatically via Python scripts in `scripts/`: |
| 67 | + |
| 68 | +- `scripts/brand.py` — shared module: palette, primitives, confetti, typography CSS |
| 69 | +- `scripts/generate-banner.py` — home page banner (1500×500) |
| 70 | +- `scripts/generate-diagram-*.py` — per-guide diagrams |
| 71 | +- `scripts/generate-card-icons.py` — 12 feature card icons (150×100 each) |
| 72 | +- `scripts/generate-all.sh` — regenerates everything |
| 73 | + |
| 74 | +### Diagram conventions |
| 75 | + |
| 76 | +- Sentence case titles (not Title Case) |
| 77 | +- Mono class only for actual code/commands |
| 78 | +- Subheading (Times italic) for secondary labels |
| 79 | +- Background: `#F9F4F5` (brand bg) |
| 80 | +- Confetti in top corners, 4-6 dots per cluster |
| 81 | +- Seeded RNG for reproducible output |
| 82 | + |
| 83 | +## Card Icons |
| 84 | + |
| 85 | +Small 2-4 shape compositions for feature cards, each evocative of the feature: |
| 86 | +- Session Memory: linked ellipses (continuity) |
| 87 | +- Local-First: stacked DB layers |
| 88 | +- Multi-Agent: triangle of overlapping circles |
| 89 | +- Hooks: tall rail with guided shape |
| 90 | +- Swarm: honeycomb cluster |
| 91 | +- Knowledge: fanned pages with search lens |
| 92 | +- TUI: terminal with content lines |
| 93 | +- Web Dashboard: browser with panels |
| 94 | +- Containers: nested boxes |
| 95 | +- Workflow: diagonal arrow flow |
| 96 | +- Maintenance: interlocking gears |
| 97 | +- Everywhere: dispersed shapes (breadth) |
| 98 | + |
| 99 | +## Footer |
| 100 | + |
| 101 | +Matches forecast.bio card pages: |
| 102 | +1. Thin rule (`#ede3e3`, 220px) |
| 103 | +2. Wordmark + animated confetti cone (same row, flex, aligned to baseline) |
| 104 | +3. Copyright notice (`© 2026 Forecast Bio, Inc. · Built with Quarto`) |
| 105 | + |
| 106 | +Footer is injected via `include-after-body` and JS-relocated into Quarto's `<main class="content">` for proper content-column alignment. |
| 107 | + |
| 108 | +## Quarto Layout |
| 109 | + |
| 110 | +- Two-column pattern: 35% / 5% spacer / 60% for chat-vs-command pages |
| 111 | +- `code-overflow: scroll` (not wrap) |
| 112 | +- `.column-page-right` on wider diagrams (>700px), wrapped in `:::` div fences |
| 113 | +- Full-width banner on index via CSS viewport breakout |
0 commit comments