---
name: Upstream Professional
colors:
  surface: '#f8f9fa'
  surface-dim: '#d9dadb'
  surface-bright: '#f8f9fa'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f3f4f5'
  surface-container: '#edeeef'
  surface-container-high: '#e7e8e9'
  surface-container-highest: '#e1e3e4'
  on-surface: '#191c1d'
  on-surface-variant: '#3f4943'
  inverse-surface: '#2e3132'
  inverse-on-surface: '#f0f1f2'
  outline: '#6f7a72'
  outline-variant: '#bec9c0'
  surface-tint: '#006c49'
  primary: '#005237'
  on-primary: '#ffffff'
  primary-container: '#006d4a'
  on-primary-container: '#94ecbf'
  inverse-primary: '#81d8ad'
  secondary: '#2e694e'
  on-secondary: '#ffffff'
  secondary-container: '#afedcb'
  on-secondary-container: '#326d53'
  tertiary: '#84007c'
  on-tertiary: '#ffffff'
  tertiary-container: '#a4239a'
  on-tertiary-container: '#ffcaf1'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#9cf5c8'
  primary-fixed-dim: '#81d8ad'
  on-primary-fixed: '#002113'
  on-primary-fixed-variant: '#005236'
  secondary-fixed: '#b2f0ce'
  secondary-fixed-dim: '#96d4b3'
  on-secondary-fixed: '#002114'
  on-secondary-fixed-variant: '#115138'
  tertiary-fixed: '#ffd7f3'
  tertiary-fixed-dim: '#ffabed'
  on-tertiary-fixed: '#390035'
  on-tertiary-fixed-variant: '#83007b'
  background: '#f8f9fa'
  on-background: '#191c1d'
  surface-variant: '#e1e3e4'
  surface-white: '#FFFFFF'
  text-main: '#0D0C22'
  bg-subtle: '#F4F6F2'
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 30px
    fontWeight: '600'
    lineHeight: 38px
    letterSpacing: -0.02em
  headline-lg-mobile:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  headline-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: '600'
    lineHeight: 14px
    letterSpacing: 0.03em
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  sidebar-width: 64px
  top-bar-height: 72px
  gutter: 24px
  margin-page: 32px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 24px
---

## Brand & Style

The design system is engineered for high-performance SaaS environments where clarity, precision, and efficiency are paramount. The brand personality is authoritative yet approachable, utilizing a **Corporate Modern** aesthetic with subtle **Glassmorphic** influences. 

The target audience consists of enterprise operators and data analysts who require a focused workspace. To achieve this, the design system prioritizes a "calm" interface: a neutral, off-white canvas that allows data and primary action points to command attention. The emotional response is one of organized control, reliability, and modern sophistication.

## Colors

The palette is anchored by **Emerald Green (#006D4A)**, a color signifying growth and stability, used exclusively for primary actions, active states, and critical highlights. 

- **Primary & Secondary:** The emerald greens are used for brand identification and primary buttons.
- **Neutral Canvas:** The background utilizes an off-white `#F8F9FA` to reduce eye strain compared to pure white, while `#FFFFFF` is reserved for elevated cards and containers to create a distinct visual hierarchy.
- **Accent:** A vibrant magenta/pink (`#EA64D9`) is used sparingly for tertiary notifications or specific data visualizations to provide high-contrast "pop" against the green and neutral tones.
- **Typography:** All primary text is set in `#0D0C22` to ensure AAA accessibility.

## Typography

This design system utilizes **Inter** for its exceptional legibility in data-dense SaaS environments. The type scale is disciplined, relying on weight transitions (Regular 400 to Semi-Bold 600) to establish hierarchy rather than excessive size shifts.

Headlines use slight negative letter-spacing to appear tighter and more professional at larger scales. Labels for data points and status badges use a slightly increased letter-spacing and medium weights to ensure readability at small sizes.

## Layout & Spacing

The layout utilizes a **Fixed-Fluid Hybrid** model designed for maximum efficiency:

1.  **Primary Navigation:** A distinctive, ultra-narrow (64px) icon-only left sidebar. This saves horizontal real estate for data. Icons are centered with high-contrast active states.
2.  **Top Navigation:** A 72px high bar containing search and profile controls, pinned to the top of the viewport.
3.  **Main Content:** A fluid area that uses a 12-column grid system. 
4.  **Rhythm:** An 8px linear spacing scale governs all internal padding and margins. 

**Breakpoints:**
- **Desktop (1440px+):** Full 12-column grid, 32px page margins.
- **Tablet (768px - 1024px):** Sidebar remains; grid collapses to 6 columns. Top bar becomes the primary anchor for navigation.
- **Mobile (<768px):** Sidebar converts to a bottom navigation bar or hidden drawer. Content becomes a single column with 16px margins.

## Elevation & Depth

This design system avoids heavy, muddy shadows in favor of **Tonal Layering** and **Glassmorphism**:

- **Level 0 (Surface):** The `#F8F9FA` background—the lowest depth.
- **Level 1 (Cards):** Pure white containers with a very soft, highly diffused shadow (e.g., `0px 4px 20px rgba(0,0,0,0.04)`). These have a 1px border of `#EEEEEE` for definition.
- **Level 2 (Glassmorphism):** Overlays, dropdowns, and floating action panels use a backdrop blur (12px - 16px) with a semi-transparent white fill (`rgba(255, 255, 255, 0.7)`). This maintains context of the data beneath.
- **Interactive Depth:** Buttons use a slight lift on hover, but maintain a flat, crisp appearance to align with the professional SaaS aesthetic.

## Shapes

The shape language is **Soft and Professional**. A base radius of `0.25rem` (4px) is applied to standard inputs and small buttons, while `0.5rem` (8px) is the standard for cards and larger containers. This creates a balanced look that is modern without feeling overly "playful" or "bubbly."

- **Standard Elements:** 4px radius.
- **Cards & Sections:** 8px radius.
- **Status Badges:** 100px (Pill-shaped) for maximum distinction from square data cells.

## Components

### Buttons
- **Primary:** Solid `#006D4A` with white text. High-contrast, rectangular with 4px radius.
- **Secondary:** Transparent background with a 1px `#006D4A` border.
- **Ghost:** No border or background; text in `#0D0C22` or `#006D4A`. Used for sidebar icons.

### Status Badges
- High-contrast, pill-shaped elements.
- Use a light tint of the status color for the background (e.g., light green) and a dark, saturated version for the text to ensure legibility.

### Cards (Glassmorphic)
- White background at 70-90% opacity.
- 12px Backdrop-filter blur.
- Subtle 1px white inner-border to simulate a glass edge.

### Data Tables
- **Header:** Light gray (`#F4F6F2`) background, uppercase `label-sm` typography.
- **Rows:** White background with subtle hover states. No vertical lines; use horizontal dividers only for a clean, breathable look.

### Input Fields
- Flat design with a 1px light gray border.
- On focus, the border transitions to Primary Emerald with a soft 2px glow.