---
version: alpha
name: "Meta Store Design System"
description: "Tech retail store. Photography-first, black-and-white dual interface"
colors:
  primary: "#0467DF"
  on-primary: "#FFFFFF"
  secondary: "#68a4ec"
  on-secondary: "#000000"
  neutral: "#FFFFFF"
  on-neutral: "#000000"
  surface: "#FFFFFF"
  on-surface: "#000000"
typography:
  heading-lg:
    fontFamily: "Inter"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Inter"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  label-sm:
    fontFamily: "Inter"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: "0.02em"
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  full: 9999px
spacing:
  sm: 8px
  md: 12px
  lg: 24px
components:
  heading-lg:
    typography: "{typography.heading-lg}"
    textColor: "{colors.on-surface}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.md}"
    height: 40px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.md}"
    height: 40px
  input:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-neutral}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "{spacing.md}"
    height: 40px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.lg}"
  chip:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: "{spacing.sm}"
    height: 28px
  tooltip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: "{spacing.sm}"
---

# Meta Store Design System

## Overview

Meta Store design system. Tech retail store. Photography-first, black-and-white dual interface

The interface is built on a light `#FFFFFF` canvas with `#0467DF` as the primary accent. Interactive controls use fully rounded pill shapes. Depth is expressed through hairline borders and tonal layering rather than shadows.

## Colors

The palette is anchored by `primary`, a single accent reserved for the most important action on a screen, supported by a restrained set of neutrals and surfaces.

- **Primary (#0467DF):** the accent driver for primary actions, active states, and key highlights.
- **Secondary (#68a4ec):** a secondary tone for chips, badges, and subdued emphasis.
- **Neutral (#FFFFFF):** the page canvas that all content sits on.
- **Surface (#FFFFFF):** cards, panels, and elevated containers.

Every background token ships with a paired `on-*` text color calibrated for at least 4.5:1 contrast.

## Typography

Typography relies on **Inter** across the entire interface.

- **Headings:** 32px, bold weight, tight tracking.
- **Body:** 16px at regular weight with a 1.6 line height for comfortable reading.
- **Labels:** Inter at 13px with medium weight for buttons, chips, and controls.

## Layout

An 8px-based spacing scale keeps vertical rhythm consistent: 8px inside compact elements such as chips, 12px inside controls, and 24px inside cards. Content is centered in a comfortable max-width column with generous outer margins.

## Elevation & Depth

This is a flat, border-led system: hierarchy is conveyed with 1px hairline borders, tonal surface shifts, and contrast instead of shadows.

## Shapes

The shape language pairs fully rounded pills (9999px) for interactive controls with a 8px radius for containers, so buttons never compete with cards for attention.

## Components

- **Buttons:** solid `{colors.primary}` background with `{colors.on-primary}` text for primary actions; a `{colors.surface}` background with a hairline border for secondary actions. Pill radius, 12px padding, 40px height.
- **Inputs:** `{colors.neutral}` background with `{colors.on-neutral}` text, `{rounded.sm}` corners, 12px padding, 40px height.
- **Cards:** `{colors.surface}` background with `{colors.on-surface}` text, `{rounded.lg}` corners, 24px padding.
- **Chips:** `{colors.secondary}` background with `{colors.on-secondary}` text, `{rounded.full}` shape, 8px padding, 28px height.
- **Tooltips:** `{colors.surface}` background with `{colors.on-surface}` text, `{rounded.md}` corners, 8px padding.

Button radius token: `{rounded.full}`.

## Do's and Don'ts

- Do reserve `primary` for the single most important action per screen.
- Do keep every text/background pair at 4.5:1 contrast or better; the `on-*` tokens are calibrated for this.
- Do keep corner radii consistent: pills for controls, rounded containers elsewhere.
- Don't add drop shadows; rely on borders and tonal shifts for depth.
- Don't introduce colors outside this palette; the accent is the only chromatic driver.
- Don't mix pill and square controls in the same view.