Institutional Light Design System
🎨 Institutional Light Design System
Section titled “🎨 Institutional Light Design System”Kryptofolio implements a strict Institutional Light design system.
Inspired by professional financial terminals (like Bloomberg, FactSet, or refined Swiss banking interfaces), the UI delivers maximum contrast, zero eye fatigue, and absolute numeric legibility.
[!IMPORTANT] Strict Light Mode: The interface is exclusively light mode. Backgrounds never leave the clean off-white family to maintain an authoritative, institutional appearance.
🎨 Color Palette & Design Tokens
Section titled “🎨 Color Palette & Design Tokens”1. Surfaces (Whites & Off-Whites)
Section titled “1. Surfaces (Whites & Off-Whites)”| Token | Hex Value | OKLCH | Usage |
|---|---|---|---|
--bg |
#ffffff |
oklch(100% 0 0) |
Global viewport canvas |
--surface |
#ffffff |
oklch(100% 0 0) |
Primary cards and panels |
--surface-2 |
#fafbfc |
oklch(98.5% 0.003 240) |
Alternating table rows, background bands |
--surface-3 |
#f4f6f8 |
oklch(96% 0.005 240) |
Active filter buttons, subtle hover fills |
2. High-Contrast Typography & Borders
Section titled “2. High-Contrast Typography & Borders”| Token | Hex Value | Usage |
|---|---|---|
--fg |
#0a0f1c |
Primary high-contrast text |
--fg-2 |
#1f2937 |
Subtitles, section headers |
--muted |
#6b7280 |
Auxiliary text, metadata, form labels |
--border |
#e5e7eb |
Crisp thin card and table borders |
3. Institutional Brand (Deep Indigo)
Section titled “3. Institutional Brand (Deep Indigo)”Deep institutional indigo is used as the single primary accent color. It is never rendered with heavy gradients:
| Variable | Hex Value | Usage |
|---|---|---|
--brand |
#1e3a8a |
Primary action buttons, active navigation indicators |
--brand-hover |
#1d4ed8 |
Interactive button hover states |
--brand-soft |
rgba(30, 58, 138, 0.08) |
Tinted badge backgrounds, active filter pills |
4. Semantic Financial Colors
Section titled “4. Semantic Financial Colors”| Semantic Token | Color | Soft Background | Context |
|---|---|---|---|
| Profit | #00875a (Green) |
rgba(0, 135, 90, 0.10) |
Positive PnL, capital gains, upward ticks |
| Loss | #d14343 (Red) |
rgba(209, 67, 67, 0.10) |
Negative PnL, capital losses, drawdowns |
| Warning | #b45309 (Amber) |
rgba(180, 83, 9, 0.10) |
Allocation drift alerts, missing FX rates |
| Info | #1d4ed8 (Blue) |
rgba(29, 78, 216, 0.08) |
Informational hints, tax agency notices |
🔤 Typography & Tabular Numerals
Section titled “🔤 Typography & Tabular Numerals”The design system enforces two complementary font families:
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;The Mandatory Monospace Rule
Section titled “The Mandatory Monospace Rule”- Mandatory Mono (
.numutility): All numbers — prices, quantities, percentages, ratios, timestamps, transaction hashes, lot IDs — must use JetBrains Mono withfont-variant-numeric: tabular-nums. - Vertical Alignment: Tabular figures ensure that decimals, positive numbers, and negative numbers align vertically in tables without jittering when values update.
📐 Radii & Elevation
Section titled “📐 Radii & Elevation”| Token | Size | Component Usage |
|---|---|---|
--radius-sm |
6px |
Small pills, table badge tags |
--radius |
10px |
Form inputs, dropdown controls |
--radius-lg |
14px |
KPI summary cards |
--radius-2xl |
24px |
Hero panels, major chart containers |
Soft Shadow Elevation
Section titled “Soft Shadow Elevation”Shadows are designed to be extremely subtle, avoiding muddy black shadows:
--shadow-soft: 0 1px 2px rgba(10, 14, 26, 0.04), 0 2px 6px rgba(10, 14, 26, 0.03);--shadow-card: 0 1px 2px rgba(10, 14, 26, 0.04), 0 8px 24px rgba(10, 14, 26, 0.04);