scan-receipts/DESIGN (1).md

---
name: Zenith Silver
colors:
  surface: '#f6f9ff'
  surface-dim: '#d4dbe2'
  surface-bright: '#f6f9ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#eef4fc'
  surface-container: '#e8eef6'
  surface-container-high: '#e3e9f1'
  surface-container-highest: '#dde3eb'
  on-surface: '#161c22'
  on-surface-variant: '#444749'
  inverse-surface: '#2b3137'
  inverse-on-surface: '#ebf1f9'
  outline: '#747779'
  outline-variant: '#c4c7c9'
  surface-tint: '#5c5f61'
  primary: '#5c5f61'
  on-primary: '#ffffff'
  primary-container: '#f5f7f9'
  on-primary-container: '#6e7173'
  inverse-primary: '#c4c7c9'
  secondary: '#5e5e5e'
  on-secondary: '#ffffff'
  secondary-container: '#e2e2e2'
  on-secondary-container: '#646464'
  tertiary: '#515f74'
  on-tertiary: '#ffffff'
  tertiary-container: '#f5f7ff'
  on-tertiary-container: '#647287'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#e0e3e5'
  primary-fixed-dim: '#c4c7c9'
  on-primary-fixed: '#191c1e'
  on-primary-fixed-variant: '#444749'
  secondary-fixed: '#e2e2e2'
  secondary-fixed-dim: '#c6c6c6'
  on-secondary-fixed: '#1b1b1b'
  on-secondary-fixed-variant: '#474747'
  tertiary-fixed: '#d5e3fc'
  tertiary-fixed-dim: '#b9c7df'
  on-tertiary-fixed: '#0d1c2e'
  on-tertiary-fixed-variant: '#3a485b'
  background: '#f6f9ff'
  on-background: '#161c22'
  surface-variant: '#dde3eb'
typography:
  display-lg:
    fontFamily: Hanken Grotesk
    fontSize: 72px
    fontWeight: '700'
    lineHeight: 80px
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Hanken Grotesk
    fontSize: 48px
    fontWeight: '600'
    lineHeight: 56px
    letterSpacing: -0.02em
  headline-lg-mobile:
    fontFamily: Hanken Grotesk
    fontSize: 32px
    fontWeight: '600'
    lineHeight: 40px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Hanken Grotesk
    fontSize: 24px
    fontWeight: '500'
    lineHeight: 32px
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  label-caps:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.1em
  label-md:
    fontFamily: JetBrains Mono
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
    letterSpacing: 0em
spacing:
  unit: 4px
  container-max: 1440px
  gutter: 24px
  margin-mobile: 16px
  margin-desktop: 64px
  stack-sm: 8px
  stack-md: 24px
  stack-lg: 48px
  stack-xl: 80px
---

## Brand & Style
The design system embodies a premium, gallery-like aesthetic that prioritizes clarity, structural integrity, and negative space. The brand personality is "Architectural Minimalist"—sophisticated, cold, and intentional. It is designed for high-end SaaS, luxury editorial, or architectural portfolios where the content is elevated by a rigorous, unadorned framework.

The style is a fusion of **Modern Minimalism** and **Swiss International Style**. It avoids decorative flourishes like gradients or organic shapes, instead relying on strict alignment, razor-sharp edges, and a monochromatic palette to evoke an atmosphere of precision and quiet luxury.

## Colors
The palette is rooted in a monochromatic "Zenith Silver" foundation.
- **Primary (#F5F7F9):** The "Zenith Silver" base. Used for large surface areas and page backgrounds to create an airy, expansive feel.
- **Secondary (#000000):** Pure black. Used exclusively for typography and structural strokes to provide aggressive contrast against the silver base.
- **Tertiary (#475569):** Slate Blue-Grey. Used for subtle accents, secondary actions, and metadata to soften the binary contrast of black and silver where necessary.
- **Neutral (#E2E8F0):** A mid-tone silver used for borders, dividers, and disabled states.

Do not use gradients. Transparency should only be used for overlays, maintaining a solid color logic elsewhere.

## Typography
Typography is the primary driver of the visual hierarchy. This design system utilizes a trio of fonts to delineate roles:
- **Hanken Grotesk** is used for headlines. It should be set with tight tracking in larger sizes to create a "locked" architectural feel.
- **Inter** provides high legibility for body copy and long-form text, maintaining a neutral, professional tone.
- **JetBrains Mono** is used for labels, captions, and technical data. It introduces a subtle "precision" layer reminiscent of blueprints and architectural annotations.

All labels should default to uppercase when using the `label-caps` role to reinforce the structured, gallery aesthetic.

## Layout & Spacing
The layout follows a **Fixed Grid** philosophy for desktop to maintain a "frame" around the content, and a fluid 4-column system for mobile. 

- **Desktop (1440px+):** 12-column grid with a 1200px max-width container, 24px gutters, and 64px outer margins.
- **Tablet (768px - 1439px):** 8-column grid with 24px gutters and 32px margins.
- **Mobile (Up to 767px):** 4-column fluid grid with 16px gutters and 16px margins.

Spacing follows a strict 4px base unit. Use large vertical stacks (`stack-xl`) between major sections to emphasize the "Airy" nature of the brand. Alignment should be rigorous; elements should always snap to the grid lines, never floating arbitrarily.

## Elevation & Depth
This design system rejects traditional shadows and depth. It uses **Low-contrast Outlines** and **Tonal Layering** to create hierarchy.

- **Level 0 (Background):** Zenith Silver (#F5F7F9).
- **Level 1 (Cards/Containers):** White (#FFFFFF) with a 1px solid border in Neutral (#E2E8F0).
- **Interactive States:** On hover, elements do not lift; they shift color (e.g., a button fill turns from Black to Slate Blue-Grey) or thickness (a border moves from 1px to 2px).

Depth is implied through overlapping planes and high-contrast typography rather than lighting effects.

## Shapes
The shape language is strictly **Sharp**. All UI elements—including buttons, input fields, and cards—must have a 0px radius. This reinforces the architectural and precision-engineered feel of the system. 

Photography should be treated as "windows" within the grid, always rectangular and never cropped with rounded corners.

## Components
- **Buttons:** Solid #000000 background with #FFFFFF text for primary actions. 1px solid #000000 border with no fill for secondary. All buttons are rectangular with no padding-inline under 24px.
- **Input Fields:** 1px solid #E2E8F0 bottom-border only (minimalist style) or full 1px border. Use `label-caps` for field labels placed strictly above the input.
- **Cards:** White backgrounds with 1px borders in #E2E8F0. No shadows. Content within cards should follow the 24px internal padding rule.
- **Chips/Tags:** Using `label-md` typography, these are small rectangular boxes with #F5F7F9 fills and no borders.
- **Lists:** Separated by 1px horizontal dividers in #E2E8F0. No bullets; use JetBrains Mono numbers (01, 02, 03) for ordered lists.
- **Photography Placeholders:** Use large-scale imagery with desaturated or high-contrast treatments. Images should span multiple columns to act as structural anchors for the text.