---
name: Memento Light
colors:
  surface: '#f7f9ff'
  surface-dim: '#d7dae0'
  surface-bright: '#f7f9ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f1f4fa'
  surface-container: '#ebeef4'
  surface-container-high: '#e5e8ee'
  surface-container-highest: '#dfe3e8'
  on-surface: '#181c20'
  on-surface-variant: '#3f4850'
  inverse-surface: '#2d3135'
  inverse-on-surface: '#eef1f7'
  outline: '#707881'
  outline-variant: '#bfc7d2'
  surface-tint: '#006398'
  primary: '#006194'
  on-primary: '#ffffff'
  primary-container: '#007bb9'
  on-primary-container: '#fdfcff'
  inverse-primary: '#93ccff'
  secondary: '#5c5f60'
  on-secondary: '#ffffff'
  secondary-container: '#dee0e2'
  on-secondary-container: '#606365'
  tertiary: '#894d00'
  on-tertiary: '#ffffff'
  tertiary-container: '#ac6200'
  on-tertiary-container: '#fffbff'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#cce5ff'
  primary-fixed-dim: '#93ccff'
  on-primary-fixed: '#001d31'
  on-primary-fixed-variant: '#004b73'
  secondary-fixed: '#e1e2e4'
  secondary-fixed-dim: '#c5c6c8'
  on-secondary-fixed: '#191c1e'
  on-secondary-fixed-variant: '#444749'
  tertiary-fixed: '#ffdcc0'
  tertiary-fixed-dim: '#ffb875'
  on-tertiary-fixed: '#2d1600'
  on-tertiary-fixed-variant: '#6b3b00'
  background: '#f7f9ff'
  on-background: '#181c20'
  surface-variant: '#dfe3e8'
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  display-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.3'
    letterSpacing: -0.01em
  headline:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '600'
    lineHeight: '1.4'
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: '1.5'
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '500'
    lineHeight: '1.2'
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  base: 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  gutter: 16px
  margin: 24px
---

## Brand & Style

This design system is engineered for high-performance productivity, emphasizing clarity, cognitive ease, and professional reliability. The brand personality is "The Quiet Assistant"—unobtrusive, organized, and precise. It targets professionals who require a distraction-free environment to manage complex workflows.

The visual style is **Corporate / Modern** with a strong leaning toward **Minimalism**. It prioritizes a high signal-to-noise ratio by using a restrained color palette, purposeful whitespace, and a flat design language. Depth is communicated through subtle tonal changes rather than heavy ornamentation, ensuring the interface feels lightweight and responsive.

## Colors

The palette is anchored in a cool-toned neutral base to reduce eye strain during long working sessions. The primary blue is used strategically for action intent and active states, providing a clear visual thread for navigation.

- **Foundations:** The background uses a crisp off-white, while the sidebar utilizes a slightly deeper grey to provide structural anchoring without the need for heavy borders.
- **Typography:** Headings utilize a deep slate for maximum legibility, while secondary information is pushed back using a muted grey-blue.
- **Accents:** The primary blue is the sole carrier of "active" meaning, ensuring that user attention is never fragmented by competing colors.

## Typography

This design system exclusively utilizes **Inter** for its utilitarian and highly readable characteristics at small sizes. The typographic scale is optimized for information density and hierarchy.

- **Hierarchy:** Bold weights are reserved for structural headings to anchor the page layout.
- **Readability:** Body text uses a generous line height (1.6) to facilitate the scanning of long lists or notes.
- **Utility:** Labels and metadata use a slightly smaller, medium-weight font to distinguish them from interactive text elements.

## Layout & Spacing

The layout is built on a strict **8px grid system**, ensuring every element is mathematically aligned and harmonious.

- **Grid Model:** A 12-column fluid grid is used for main content areas, allowing for flexible dashboard layouts.
- **Sidebar:** The sidebar is fixed at a width of 260px, creating a consistent navigation anchor on the left.
- **Rhythm:** Standardized padding of 16px (md) is used for container interiors, while 24px (lg) margins are used to separate major layout blocks.

## Elevation & Depth

This design system adopts a "Flat-Plus" approach. Depth is not used for realism but as a functional tool to indicate interactivity and containment.

- **Tonal Layering:** The primary method of separation is the use of the Sidebar color (#f4f5f7) against the Main Background (#f8fafc).
- **Subtle Shadows:** Shadows are extremely restrained, used only on floating elements like dropdowns and modals. Use a low-blur, low-opacity shadow: `0 1px 3px rgba(30, 41, 59, 0.08)`.
- **Ghost Outlines:** Containers and inputs use a 1px border (#cbd5e1) to define boundaries without adding visual weight.

## Shapes

The shape language is professional and approachable, moving away from sharp industrial corners toward softer, organic geometry.

- **Global Radius:** A standard 8px (0.5rem) radius is applied to cards, buttons, and input fields to maintain a consistent "Soft" appearance.
- **Interactive Pill:** Navigation items and tags utilize a full "pill" radius (100px) to distinguish them from static containers and emphasize their touch/click-friendly nature.

## Components

Consistency across components ensures the user can predict behavior through visual cues.

- **Buttons:** Primary buttons use the primary blue with white text. Secondary buttons use a white background with a subtle border and muted text.
- **Navigation Items:** When active, navigation items in the sidebar use a pill-shaped background in the primary blue (at 10-15% opacity) with a solid blue text or icon.
- **Inputs:** Use an 8px radius with the border color. On focus, the border shifts to the primary blue with a subtle 2px outer glow of the same color at 20% opacity.
- **Cards:** Cards should be flat with a 1px border. Use a white background to lift them slightly from the background color.
- **Chips/Badges:** Small pill shapes with medium font-weight labels, used for status indicators or category tags.
- **Lists:** Row items should have a subtle hover state using the sidebar color to provide clear feedback during interaction.