# Hawk — Design System **Grounded in:** LGT Group's real public brand signals (theme color `#2b5797`, "Forward-looking for generations" positioning, Princely Collections art imagery, heritage-meets-modern editorial tone) — reinterpreted for an **internal advisor tool**, not a re-skin of the public marketing site. **Note on provenance:** LGT does not publish an internal style guide, so this is not a leaked or official document. It's a token system built from what's genuinely observable about LGT's identity (their actual theme color, their tagline, their use of art/heritage imagery, their trust-first tone), adapted for the specific job Hawk has to do: help RMs read dense financial data quickly and trust AI-assisted recommendations. --- ## 1. Brand Grounding LGT's identity rests on three real things, not generic "private bank" tropes: 1. **Lineage** — 100+ years, family-owned, "forward-looking for generations." Continuity across time is their actual differentiator. 2. **Art & artifact** — they use real pieces from the Princely Collections in their marketing, not stock photography. Craft and provenance matter to how they present themselves. 3. **Quiet trust** — "Money is a matter of trust." The tone is restrained, not salesy; confidence is shown through composure, not noise. **Signature element for Hawk:** a **provenance thread** — a thin, consistent visual device (a fine connecting line with small waypoint marks) used specifically in the AI Recommendation Builder to trace a suggestion back to the data points that produced it. It's the one place in the product where "lineage" — LGT's actual brand idea — becomes a functional UI pattern: showing where a recommendation *came from*, the same way LGT talks about where the firm came from. This is the one bold, memorable move; everywhere else stays quiet. --- ## 2. Color | Token | Hex | Role | |---|---|---| | `--color-ink` | `#1B2A4A` | Primary text, headers, nav — deeper than LGT's public-site blue, for the gravitas of an internal pro tool | | `--color-brand-blue` | `#2B5797` | LGT's actual brand blue — primary interactive color (links, active states, primary buttons) | | `--color-parchment` | `#F7F5F0` | Page background — warm off-white, echoes archival paper / gallery wall rather than clinical SaaS white | | `--color-slate` | `#5C6773` | Secondary text, labels, borders | | `--color-bronze` | `#A88958` | Sparing accent reserved for AI/insight moments only (recommendation badges, provenance thread, confidence indicators) — never used decoratively | | `--color-surface` | `#FFFFFF` | Card/table surfaces on top of parchment background | | `--color-positive` | `#3A6B52` | Muted forest green — performance gains, positive deltas | | `--color-negative` | `#8B4A3B` | Muted umber-red — performance losses, risk flags | | `--color-border` | `#E3DFD6` | Hairline dividers, table borders | **Rule:** Bronze is the only "accent" color and it is rationed — it appears *only* where AI is doing something (a suggestion, a confidence score, the provenance thread). If bronze starts showing up as general decoration, that's a signal the palette is being misused. This scarcity is what makes AI moments feel distinct from routine UI. --- ## 3. Typography | Role | Typeface | Notes | |---|---|---| | Display / Headlines | **Fraunces** (serif) | Used with restraint — page titles, client names, section headers. Carries the "heritage/art" side of the identity. Avoid using it for body copy or UI labels. | | Body / UI | **Inter** | All interface chrome, labels, buttons, navigation, paragraph text. Neutral and highly legible at small sizes, which matters for dense advisor screens. | | Data / Figures | **IBM Plex Mono** (or Inter with `font-variant-numeric: tabular-nums`) | All financial figures — AUM, percentages, prices. Tabular alignment is non-negotiable for scannable tables. | **Type scale (base 16px):** ``` --text-xs: 12px (table captions, metadata) --text-sm: 14px (secondary text, labels) --text-base: 16px (body, table data) --text-lg: 20px (card titles) --text-xl: 28px (section headers) --text-2xl: 40px (page titles, serif display only) ``` Line height: 1.5 for body text, 1.2 for display/headline sizes, 1.4 for tabular data (tighter rows without feeling cramped). --- ## 4. Layout & Spacing **Spacing scale (4px base unit):** ``` --space-1: 4px --space-2: 8px --space-3: 12px --space-4: 16px --space-5: 24px --space-6: 32px --space-7: 48px --space-8: 64px ``` **Grid concept:** ``` ┌─────────────────────────────────────────────┐ │ [Logo] Nav [Persona] │ ← 64px header, fixed ├───────────┬───────────────────────────────────┤ │ │ │ │ Sidebar │ Main content │ │ (240px) │ - generous margins (32-48px) │ │ │ - cards on parchment bg │ │ │ - dense tables get their own │ │ │ full-width breathing room │ │ │ │ └───────────┴───────────────────────────────────┘ ``` - Sidebar nav is fixed-width, icon + label, collapsible on smaller viewports. - Content area uses a **12-column grid**, max-width ~1440px, with dashboard cards spanning 3–6–12 columns depending on density. - Tables get full column width and their own vertical rhythm — don't crowd them into narrow card containers when they carry the primary data (e.g., portfolio holdings). - Card corner radius: `4px` — sharp enough to feel precise/financial, not a soft consumer-app radius. --- ## 5. The Provenance Thread (Signature Element) Applies specifically to AI-generated suggestions (Recommendation Builder, next-best-action cards): - A thin `1px` bronze line connects a recommendation card to 2–4 small "waypoint" dots, each labeled with the data source that informed it (e.g., "Risk profile," "EUR exposure gap," "Recent inflow"). - On hover/tap, a waypoint expands to show the specific data value that contributed. - The thread visually echoes a *lineage diagram* — deliberately, since LGT's own brand story is about lineage across generations. Here it's repurposed to show a recommendation's lineage back to data, which is exactly the "explainable AI" requirement from the platform brief. - This pattern appears nowhere else in the product — its exclusivity to AI-rationale moments is what keeps it meaningful rather than decorative. --- ## 6. Components — Notes - **Buttons:** primary = solid `--color-brand-blue`, sharp `4px` radius, `Inter` medium weight, sentence case ("Add to proposal," not "ADD TO PROPOSAL" or "Submit"). - **Badges/flags:** risk tier, suitability status — use `--color-positive`/`--color-negative`/`--color-bronze` backgrounds at low opacity (10–15%) with full-opacity text, not solid fills, to stay quiet. - **Tables:** hairline row dividers (`--color-border`), no zebra striping (zebra striping fights with tabular-mono alignment at high density) — instead use generous row height (`--space-5` vertical padding) for scannability. - **Charts:** use `--color-brand-blue` as primary series color, `--color-slate` for secondary/benchmark lines, `--color-positive`/`--color-negative` reserved for performance deltas only. --- ## 7. Motion - Used only for: AI recommendation reveal (provenance thread draws in, ~300ms ease-out), drill-down transitions (summary → detail), and panel open/close. - No hover-bounce, no decorative micro-animation on static content. - Respect `prefers-reduced-motion` — disable thread-drawing animation, keep instant state changes. --- ## 8. CSS Variable Reference ```css :root { /* Color */ --color-ink: #1B2A4A; --color-brand-blue: #2B5797; --color-parchment: #F7F5F0; --color-slate: #5C6773; --color-bronze: #A88958; --color-surface: #FFFFFF; --color-positive: #3A6B52; --color-negative: #8B4A3B; --color-border: #E3DFD6; /* Type */ --font-display: 'Fraunces', serif; --font-body: 'Inter', sans-serif; --font-data: 'IBM Plex Mono', monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 40px; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Radius */ --radius-sm: 4px; --radius-md: 8px; } ``` --- ## 9. Self-Critique / What to Watch - **Risk:** Fraunces + navy + off-white can drift toward "generic elegant fintech" if not applied deliberately. Guardrail: keep serif use *strictly* to headlines/titles — the moment it appears in a table or button, the system loses its discipline. - **Risk:** Bronze accent is the one place this system could get diluted over time (designers reaching for it because it "looks nice"). Guardrail: if bronze appears outside AI-related UI, that's a review flag. - **Not addressed here:** dark mode, print/export styling for the Proposal Builder (deserves its own pass since it needs to look "client-facing" rather than "internal tool").