moteva/refer/design/home/DESIGN.md

---
name: Moteva
colors:
  surface: '#fcf8fa'
  surface-dim: '#dcd9db'
  surface-bright: '#fcf8fa'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f6f3f5'
  surface-container: '#f0edef'
  surface-container-high: '#eae7e9'
  surface-container-highest: '#e4e2e4'
  on-surface: '#1b1b1d'
  on-surface-variant: '#45464d'
  inverse-surface: '#303032'
  inverse-on-surface: '#f3f0f2'
  outline: '#76777d'
  outline-variant: '#c6c6cd'
  surface-tint: '#565e74'
  primary: '#000000'
  on-primary: '#ffffff'
  primary-container: '#131b2e'
  on-primary-container: '#7c839b'
  inverse-primary: '#bec6e0'
  secondary: '#0058be'
  on-secondary: '#ffffff'
  secondary-container: '#2170e4'
  on-secondary-container: '#fefcff'
  tertiary: '#000000'
  on-tertiary: '#ffffff'
  tertiary-container: '#271901'
  on-tertiary-container: '#98805d'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#dae2fd'
  primary-fixed-dim: '#bec6e0'
  on-primary-fixed: '#131b2e'
  on-primary-fixed-variant: '#3f465c'
  secondary-fixed: '#d8e2ff'
  secondary-fixed-dim: '#adc6ff'
  on-secondary-fixed: '#001a42'
  on-secondary-fixed-variant: '#004395'
  tertiary-fixed: '#fcdeb5'
  tertiary-fixed-dim: '#dec29a'
  on-tertiary-fixed: '#271901'
  on-tertiary-fixed-variant: '#574425'
  background: '#fcf8fa'
  on-background: '#1b1b1d'
  surface-variant: '#e4e2e4'
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
    letterSpacing: -0.01em
  title-sm:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '600'
    lineHeight: 24px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
  label-caps:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '600'
    lineHeight: 16px
    letterSpacing: 0.05em
  label-xs:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: '500'
    lineHeight: 14px
  display-lg-mobile:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: '700'
    lineHeight: 36px
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  sidebar_width: 280px
  toolbar_height: 56px
---

## Brand & Style

The design system is engineered for high-velocity creative workflows, targeting E-commerce and UI designers who require a tool that recedes into the background while maintaining a premium, authoritative presence. 

The aesthetic is **Corporate / Modern** with a focus on **Minimalism**. It prioritizes extreme clarity, reducing visual noise to ensure the user’s content remains the focal point. The interface utilizes a "Canvas and Chrome" philosophy: the workspace is expansive and neutral, while the surrounding "Chrome" (panels, toolbars, and inspectors) is structured with surgical precision. The emotional response is one of calm control, reliability, and professional-grade efficiency.

## Colors

The palette is anchored by **Deep Navy (#0F172A)** for primary branding and high-level structural elements, providing a grounded, professional foundation. **Electric Blue (#3B82F6)** serves as the functional action color, reserved for primary buttons, active states, and selection highlights to drive focus.

The background strategy employs **Off-white (#F8FAFC)** for the main application canvas to reduce eye strain, while **Pure White (#FFFFFF)** is used for floating panels, cards, and inspector menus to create a clear layered hierarchy. Borders and dividers utilize **Soft Grays (#E2E8F0)** to define space without creating harsh visual breaks.

## Typography

This design system utilizes **Inter** exclusively to leverage its exceptional legibility and systematic optical sizing. The hierarchy is highly structured to facilitate rapid scanning of dense information.

- **Headlines:** Use tighter letter spacing and heavier weights to establish clear section anchors.
- **Labels:** Small-scale labels (11px-12px) are essential for tool property inspectors; use uppercase for category headers to create distinction without increasing size.
- **Body:** Standardized at 14px for utility-heavy areas to maximize information density while maintaining readability.

## Layout & Spacing

The layout follows a **Fixed-Fluid Hybrid** model. Sidebars (Layers and Properties) are fixed at 280px to provide a consistent control surface, while the central viewport (the Canvas) is fluid. 

A **4px baseline grid** governs all spatial relationships. High-productivity areas (like property inspectors) should use compact spacing (`sm` / 8px), while marketing or dashboard views should use more generous breathing room (`lg` / 24px). Breakpoints are set at 768px (Tablet) and 1280px (Desktop), with mobile views collapsing sidebars into bottom sheets or hidden drawers.

## Elevation & Depth

Hierarchy is established through **Tonal Layering** and **Ambient Shadows**. 

1. **Level 0 (Canvas):** The base layer using the Off-white background.
2. **Level 1 (Sidebars/Panels):** Pure white surfaces with a 1px subtle border (#E2E8F0) to separate them from the canvas.
3. **Level 2 (Popovers/Menus):** Elements that float above the UI use a soft, diffused shadow (0px 4px 12px rgba(15, 23, 42, 0.08)) to indicate interactivity and temporary state.
4. **Active State:** Selection boxes and focused inputs use a 2px Electric Blue stroke, omitting shadows to maintain a "flat" technical feel.

## Shapes

The shape language balances modern approachability with professional precision. A **Rounded (0.5rem / 8px)** corner radius is the standard for cards, buttons, and input fields. 

- Use **Sharp (0px)** for main structural dividers or the edge of the screen panels.
- Use **Large (1rem / 16px)** for main dashboard cards or onboarding modals.
- Interactive icons and status chips may use **Pill-shaped** geometry to differentiate them from functional input fields.

## Components

- **Buttons:** Primary buttons use Electric Blue with white text. Secondary buttons use a white fill with a 1px border (#E2E8F0) and Deep Navy text. 
- **Input Fields:** Use 14px typography. The default state has a subtle border; the active/focus state uses an Electric Blue ring. 
- **Cards:** White background, 8px corner radius, and a very light 1px border. Shadows are only applied if the card is "draggable" or "floating."
- **Chips:** Used for tags or status indicators. Use low-saturation backgrounds (e.g., light blue or light gray) with high-contrast text.
- **Layers List:** High-density list items (32px height) with subtle hover states (#F1F5F9). Active layers use a light blue tint.
- **Segmented Controls:** Used for switching between tools; use a light gray container with a white "slider" for the active selection.