Web/professional_decision_intelligence/DESIGN.md

metadata

name: Professional Decision Intelligence
colors:
  surface: '#faf8ff'
  surface-dim: '#d9d9e5'
  surface-bright: '#faf8ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f3f3fe'
  surface-container: '#ededf9'
  surface-container-high: '#e7e7f3'
  surface-container-highest: '#e1e2ed'
  on-surface: '#191b23'
  on-surface-variant: '#434655'
  inverse-surface: '#2e3039'
  inverse-on-surface: '#f0f0fb'
  outline: '#737686'
  outline-variant: '#c3c6d7'
  surface-tint: '#0053db'
  primary: '#004ac6'
  on-primary: '#ffffff'
  primary-container: '#2563eb'
  on-primary-container: '#eeefff'
  inverse-primary: '#b4c5ff'
  secondary: '#505f76'
  on-secondary: '#ffffff'
  secondary-container: '#d0e1fb'
  on-secondary-container: '#54647a'
  tertiary: '#943700'
  on-tertiary: '#ffffff'
  tertiary-container: '#bc4800'
  on-tertiary-container: '#ffede6'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#dbe1ff'
  primary-fixed-dim: '#b4c5ff'
  on-primary-fixed: '#00174b'
  on-primary-fixed-variant: '#003ea8'
  secondary-fixed: '#d3e4fe'
  secondary-fixed-dim: '#b7c8e1'
  on-secondary-fixed: '#0b1c30'
  on-secondary-fixed-variant: '#38485d'
  tertiary-fixed: '#ffdbcd'
  tertiary-fixed-dim: '#ffb596'
  on-tertiary-fixed: '#360f00'
  on-tertiary-fixed-variant: '#7d2d00'
  background: '#faf8ff'
  on-background: '#191b23'
  surface-variant: '#e1e2ed'
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
    letterSpacing: '-0.01em'
  title-sm:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '600'
    lineHeight: 24px
  body-base:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
  label-caps:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '600'
    lineHeight: 16px
    letterSpacing: 0.05em
  metric-lg:
    fontFamily: JetBrains Mono
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 32px
  metric-md:
    fontFamily: JetBrains Mono
    fontSize: 18px
    fontWeight: '500'
    lineHeight: 24px
  metric-sm:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: '500'
    lineHeight: 20px
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  unit: 4px
  gutter: 24px
  margin: 32px
  container-max: 1440px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 24px

Brand & Style

The design system is engineered for the high-stakes environment of real estate investment, where clarity equals confidence. The aesthetic follows a Corporate / Modern approach, prioritizing functional realism over decorative trends. It evokes "Professional Decision Intelligence"—a state of focused analysis where the UI recedes to highlight actionable data.

The brand personality is authoritative, institutional, and precise. It targets institutional investors and fund managers who require rapid cognitive processing of complex portfolios. The interface utilizes a "flat-plus" philosophy: primarily flat surfaces distinguished by subtle depth markers to establish a clear information hierarchy without visual fatigue.

Colors

This design system employs a high-trust palette rooted in functional utility.

• Primary Blue is reserved for core intent: primary actions, active navigation states, and focus indicators.
• Semantic Colors (Emerald, Amber, Red) are used strictly for performance indicators—ROI growth, risk assessment, and legal alerts. These must maintain high contrast against white surfaces.
• Surface Strategy: A slate-tinted background (#f8fafc) provides a soft canvas that makes pure white (#ffffff) card surfaces "pop," indicating interactive or data-rich containers.
• Text Hierarchy: Deep slate (#1e293b) ensures maximum legibility for body text, while a secondary slate (#64748b) is used for metadata and labels to reduce visual noise.

Typography

The system uses a dual-font strategy to separate narrative from empirical data.

• Inter handles all UI chrome, labels, and descriptive text. Its neutral, systematic geometry supports the "Professional" tone.
• JetBrains Mono is utilized exclusively for financial metrics, cap rates, and numerical data. This technical precision ensures that digits align vertically in tables, facilitating faster price and percentage comparisons.
• Hierarchy: Use label-caps for table headers and section overviews to create a distinct structural "anchor" for the eyes.

Layout & Spacing

This design system utilizes a 12-column fluid grid designed for high-density data visualization.

• Density: Spacing is tighter than consumer applications to allow for significant data "above the fold." Use an 8px base grid, with 4px increments for internal component spacing.
• Layout Model: A fixed left-hand navigation (240px) with a fluid content area. In dashboard views, cards should span 3, 4, 6, or 12 columns depending on the complexity of the chart.
• Padding: Large data tables use a "compact" vertical padding (8px or 12px per row) to maximize the visible records without sacrificing touch/click targets.

Elevation & Depth

Depth is communicated through Low-contrast outlines combined with Ambient shadows.

• Card Definition: Every data container must use a 1px solid border (#e2e8f0). This provides a hard "legal" boundary for the data.
• Shadows: Use a single, soft "Shadow-SM" (0px 1px 2px rgba(0,0,0,0.05)) to lift cards slightly off the Light Slate background.
• Interaction: On hover, interactive cards may transition to a "Shadow-MD" (0px 4px 6px rgba(0,0,0,0.07)) to indicate clickability.
• Layering: Avoid multiple nested shadows. Depth should feel like layers of physical paper stacked on a desk.

Shapes

The shape language is conservative and disciplined. A Soft (0.25rem) border radius is the standard for primary UI components like buttons, input fields, and small badges.

• Cards: Use rounded-lg (0.5rem) to provide a slightly softer frame for high-density data, preventing the UI from feeling overly "sharp" or aggressive.
• Progress Bars: Use fully rounded ends (pill-shaped) to distinguish linear progress from structural containers.
• Buttons: Square corners are avoided to maintain a modern feel, but the radius never exceeds 4px for primary actions to maintain the "Enterprise" look.

Components

• Buttons: Solid #2563eb with white text for primary actions. Ghost buttons with #e2e8f0 borders for secondary actions.
• Status Badges: Small, semi-transparent background tints with high-contrast text (e.g., Red 100 bg with Red 800 text). Labels must be concise (e.g., "High Risk", "Underperforming").
• Opportunity Scoring: Progress bars should use a tri-color logic: Emerald for 80-100%, Amber for 50-79%, and Red for below 50%.
• Data Tables: Use zebra-striping (light slate #f8fafc) on hover only. Table headers are sticky with a subtle bottom shadow to maintain context during long scrolls.
• Charts: Use a professional categorical palette (Blue, Slate, Emerald, Indigo). Avoid "rainbow" palettes. Lines should be 2px thick with no area-fill unless comparing volume.
• Input Fields: 1px #e2e8f0 border, white background. On focus, a 2px #2563eb ring with 0% offset.
• Property Cards: High-resolution thumbnail on the left/top, followed by a JetBrains Mono metric block for the "Asking Price" or "Yield."