---
name: Gold Wallet Institutional
colors:
  surface: '#fff8f0'
  surface-dim: '#e1d9cc'
  surface-bright: '#fff8f0'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#fbf3e5'
  surface-container: '#f5eddf'
  surface-container-high: '#efe7da'
  surface-container-highest: '#eae1d4'
  on-surface: '#1f1b13'
  on-surface-variant: '#4d4635'
  inverse-surface: '#343027'
  inverse-on-surface: '#f8f0e2'
  outline: '#7f7663'
  outline-variant: '#d0c5af'
  surface-tint: '#735c00'
  primary: '#735c00'
  on-primary: '#ffffff'
  primary-container: '#d4af37'
  on-primary-container: '#554300'
  inverse-primary: '#e9c349'
  secondary: '#5f5e5e'
  on-secondary: '#ffffff'
  secondary-container: '#e4e2e1'
  on-secondary-container: '#656464'
  tertiary: '#415ba4'
  on-tertiary: '#ffffff'
  tertiary-container: '#97b0ff'
  on-tertiary-container: '#254188'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#ffe088'
  primary-fixed-dim: '#e9c349'
  on-primary-fixed: '#241a00'
  on-primary-fixed-variant: '#574500'
  secondary-fixed: '#e4e2e1'
  secondary-fixed-dim: '#c8c6c5'
  on-secondary-fixed: '#1b1c1c'
  on-secondary-fixed-variant: '#474747'
  tertiary-fixed: '#dbe1ff'
  tertiary-fixed-dim: '#b4c5ff'
  on-tertiary-fixed: '#00174b'
  on-tertiary-fixed-variant: '#27438a'
  background: '#fff8f0'
  on-background: '#1f1b13'
  surface-variant: '#eae1d4'
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.3'
  headline-sm:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '600'
    lineHeight: '1.4'
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.5'
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: '1.5'
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: '400'
    lineHeight: '1.4'
  label-caps:
    fontFamily: Work Sans
    fontSize: 12px
    fontWeight: '600'
    lineHeight: '1'
    letterSpacing: 0.05em
  data-tabular:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '500'
    lineHeight: '1'
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  base: 4px
  xs: 0.5rem
  sm: 1rem
  md: 1.5rem
  lg: 2rem
  xl: 3rem
  gutter: 1.5rem
  sidebar_width: 260px
---

## Brand & Style

This design system is engineered for high-stakes financial operations, prioritizing precision, security, and institutional trust. The brand personality is stoic and reliable, catering to enterprise-grade users who require immediate clarity without visual distraction. 

The aesthetic follows a **Corporate Modern** approach with a focus on flat surfaces and high-density data. By utilizing a restrained "Gold Standard" accent against a neutral, high-contrast backdrop, the UI conveys premium value and stability. Every element is designed to feel operational; there are no decorative flourishes—only functional cues that facilitate rapid decision-making in a high-compliance environment.

## Colors

The color palette is strictly functional. The primary accent, **#D4AF37 (Metallic Gold)**, is used sparingly for high-priority actions and brand-specific highlights to maintain its premium impact. 

- **Primary Text:** Deep Charcoal (#2C2C2C) provides maximum legibility against light backgrounds.
- **Backgrounds:** A tiered system of neutrals, using #F8F9FA for the application shell and pure white (#FFFFFF) for content cards.
- **Status Indicators:** Success, Danger, and Warning colors are utilized in their deep, accessible tones to ensure semantic clarity for financial transactions and system alerts. 
- **Borders:** Subtle grays (#E0E0E0) define the structural grid without creating visual noise.

## Typography

This design system utilizes **Inter** for its neutral, highly legible characteristics and exceptional performance in dense data environments. For headers and metadata, a strict hierarchy is enforced to guide the eye through complex dashboards.

- **Data Legibility:** Tabular figures are enabled by default for all financial values to ensure vertical alignment in tables.
- **Labels:** Uppercase labels using **Work Sans** are reserved for section headers and table headers to provide a clear distinction between metadata and content.
- **Weights:** Use Semi-Bold (600) for emphasis and Regular (400) for all standard body copy.

## Layout & Spacing

The layout is a **Fixed-Fluid Hybrid**. The sidebar navigation remains at a fixed 260px width to ensure persistent access to core modules, while the main content area utilizes a 12-column fluid grid.

- **Rhythm:** An 8px/4px base grid ensures consistent alignment of all operational elements.
- **Content Area:** A standard 24px (1.5rem) padding is applied to the main viewport, providing a "breathable" frame around the card-based content.
- **Grid:** Gutters are set to 24px to separate complex data cards, preventing the UI from feeling cluttered during intense data review.

## Elevation & Depth

To maintain a secure and operational feel, this design system avoids aggressive shadows. Depth is communicated primarily through **Tonal Layers** and minimal **Low-Contrast Outlines**.

- **Surface 0:** The main application background (#F8F9FA).
- **Surface 1:** Content cards and modals, using #FFFFFF with a 1px border (#E0E0E0).
- **Shadows:** Only used on Surface 1 elements. Shadows are extremely soft (0px 4px 12px rgba(0,0,0,0.03)) to lift the card slightly without breaking the flat, professional aesthetic.
- **Active State:** Elements like buttons or selected sidebar items use a subtle 1px inner stroke rather than a shadow to indicate interaction.

## Shapes

The shape language is conservative and disciplined. A **Soft (0.25rem)** border radius is applied to most standard components (buttons, inputs, cards) to reduce the harshness of the UI while maintaining a serious, professional profile.

- **Cards:** Use `rounded-lg` (0.5rem) to provide a clear container boundary.
- **Buttons/Inputs:** Use the base 4px (0.25rem) radius for a precise, "machined" look.
- **Status Pills:** Use a full pill-radius to distinguish them from interactive action components.

## Components

### Buttons
- **Primary:** Solid Gold (#D4AF37) with White text. No gradients.
- **Secondary:** Transparent background with a 1px Charcoal border and Charcoal text.
- **Ghost:** Minimal padding, no border, used for utility actions in headers.

### Input Fields
- Standard inputs use a white background with a 1px gray border. 
- **Focus state:** The border shifts to Gold (#D4AF37) with a very thin (2px) outer glow in a highly transparent gold.

### Data Tables
- Row height is compact (48px) to maximize data density.
- Header rows use a light gray background (#F1F3F5) with uppercase labels.
- Borders are horizontal-only to emphasize the flow of data.

### Progress & Status
- **Status Indicators:** Use a solid dot (8px) paired with text. 
- **Activity Indicators:** Use thin, horizontal bars for volume or balance meters, avoiding circular loaders where possible to maintain the linear, operational feel.

### Sidebar & Navigation
- The sidebar utilizes a dark theme (#1A1A1A) to provide high contrast against the content area.
- Active links are marked with a vertical 4px gold bar on the left edge.