---
name: Obsidian Gallery
colors:
  surface: '#fbf9f9'
  surface-dim: '#dbdad9'
  surface-bright: '#fbf9f9'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f5f3f3'
  surface-container: '#efeded'
  surface-container-high: '#e9e8e7'
  surface-container-highest: '#e3e2e2'
  on-surface: '#1b1c1c'
  on-surface-variant: '#4c4546'
  inverse-surface: '#303031'
  inverse-on-surface: '#f2f0f0'
  outline: '#7e7576'
  outline-variant: '#cfc4c5'
  surface-tint: '#5e5e5e'
  primary: '#000000'
  on-primary: '#ffffff'
  primary-container: '#1b1b1b'
  on-primary-container: '#848484'
  inverse-primary: '#c6c6c6'
  secondary: '#5d5f5f'
  on-secondary: '#ffffff'
  secondary-container: '#dcdddd'
  on-secondary-container: '#5f6161'
  tertiary: '#000000'
  on-tertiary: '#ffffff'
  tertiary-container: '#1b1b1b'
  on-tertiary-container: '#848484'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#e2e2e2'
  primary-fixed-dim: '#c6c6c6'
  on-primary-fixed: '#1b1b1b'
  on-primary-fixed-variant: '#474747'
  secondary-fixed: '#e2e2e2'
  secondary-fixed-dim: '#c6c6c7'
  on-secondary-fixed: '#1a1c1c'
  on-secondary-fixed-variant: '#454747'
  tertiary-fixed: '#e2e2e2'
  tertiary-fixed-dim: '#c6c6c6'
  on-tertiary-fixed: '#1b1b1b'
  on-tertiary-fixed-variant: '#474747'
  background: '#fbf9f9'
  on-background: '#1b1c1c'
  surface-variant: '#e3e2e2'
typography:
  display:
    fontFamily: Manrope
    fontSize: 40px
    fontWeight: '700'
    lineHeight: 48px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Manrope
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Manrope
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: '0'
  body-md:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
    letterSpacing: '0'
  label-caps:
    fontFamily: Manrope
    fontSize: 12px
    fontWeight: '700'
    lineHeight: 16px
    letterSpacing: 0.1em
  label-sm:
    fontFamily: Manrope
    fontSize: 11px
    fontWeight: '500'
    lineHeight: 14px
    letterSpacing: 0.02em
spacing:
  unit: 4px
  margin-edge: 24px
  gutter-grid: 2px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 32px
---

## Brand & Style

The design system is anchored in a **Minimalist** philosophy, functioning as a silent frame for the user's visual content. The objective is to vanish the interface in favor of the imagery, creating a gallery-like experience that feels premium and focused. 

The brand personality is sophisticated and utilitarian. It targets creators and collectors who value clarity over decoration. By utilizing significant white space and a restricted color palette, the UI evokes a sense of calm and technical precision. The movement is contemporary, drawing from architectural modernism where form strictly follows the function of viewing.

## Colors

The palette is strictly monochromatic to ensure zero color interference with photographs. 

- **Deep Black (#000000):** Used for primary actions, high-contrast text, and heavy structural strokes.
- **Pure White (#FFFFFF):** The primary background surface, providing the ultimate "blank canvas" feel.
- **Light Gray (#F2F2F2):** Utilized for secondary surfaces, subtle dividers, and inactive states.
- **Medium Gray (#757575):** Reserved for metadata and less critical informational text.

In "Immersive Mode," the interface should transition to a true-black environment to maximize the dynamic range of the mobile display and allow the photography to glow.

## Typography

This design system utilizes **Manrope** for its technical yet approachable geometric qualities. The type hierarchy is intentionally flat to prevent the UI from becoming "loud."

- **Headlines:** Use a tighter letter-spacing and heavier weights to provide structural anchors on the page.
- **Body:** Standardized at 16px for optimal legibility against high-contrast backgrounds.
- **Labels:** Small caps with generous letter-spacing are used for metadata (e.g., ISO, aperture, date) to give the app a professional, archival feel.
- **Alignment:** Primarily left-aligned to maintain a strong vertical axis, echoing the edges of image frames.

## Layout & Spacing

The layout philosophy is **Edge-to-Edge Fluidity**. 

- **The Grid:** While a standard 12-column grid is used for text-heavy settings, the gallery view utilizes a high-density "No-Margin" grid for content discovery. 
- **Gutters:** Photo thumbnails are separated by a minimal 2px gutter to create a monolithic wall of imagery.
- **Safe Areas:** Navigation and system bars use a 24px side margin to ensure touch targets are clear of the screen edges.
- **Photography Priority:** Full-screen views must bypass all margins and padding, occupying 100% of the viewport. UI overlays (like back buttons) should float with a backdrop blur or simple scrim.

## Elevation & Depth

This design system avoids traditional shadows to maintain its minimalist aesthetic. Instead, it uses **Tonal Layers** and **Low-Contrast Outlines**.

- **Surfaces:** Depth is communicated by color shifts from White (#FFFFFF) to Light Gray (#F2F2F2). 
- **Outlines:** When a container is required (like a search bar or chip), a 1px solid stroke in Light Gray is used rather than a shadow.
- **Overlays:** For modals or floating menus, a subtle 10% black tint is applied to the background to focus attention on the foreground layer without adding visual "fuzziness" from blurs or heavy shadows.
- **Interaction:** A slight scale-down (98%) on press is the primary method for indicating tactile feedback, rather than an elevation lift.

## Shapes

The shape language is **Sharp (0)**. 

To reinforce the professional gallery aesthetic, every element—from image containers to buttons—uses 90-degree corners. This creates a rigorous, architectural structure that complements the rectangular nature of photography. Circular elements are strictly reserved for profile avatars or specific status indicators to provide a clear visual exception to the rule.

## Components

- **Buttons:** Primary buttons are solid Deep Black with White text. Secondary buttons are 1px Deep Black outlines with no fill. All buttons are rectangular with no corner radius.
- **Icons:** Use ultra-thin (1pt or 0.5pt) strokes. Avoid filled icons unless indicating an active state (e.g., a "favorited" heart).
- **Chips:** Rectangular boxes with 1px Light Gray borders. Text is set in `label-sm`.
- **Inputs:** Simple bottom-border (1px Deep Black) or a full rectangular outline. No background fill.
- **Cards:** For editorial content, cards use the full width of the screen. No shadows; the image occupies the top portion, followed by a tight 16px padding for the text area below.
- **The "Lightroom" Slider:** A custom component for metadata browsing or photo editing, using a single-pixel horizontal line and a small vertical tick for the thumb.
- **Lists:** Separated by 1px Light Gray dividers that do not span the full width (inset by the margin-edge of 24px).