Warm Commerce

---
version: "1.0"
name: "Warm Commerce"
description: "Earthy, inviting design system for e-commerce and lifestyle brands. Serif headlines with Lora, warm palette, generous spacing, product-first layout."

colors:
  primary: "#292524"
  primary-foreground: "#fafaf9"
  secondary: "#f5f5f4"
  secondary-foreground: "#292524"
  accent: "#c2410c"
  accent-foreground: "#ffffff"
  background: "#fafaf9"
  surface: "#f5f5f4"
  surface-raised: "#ffffff"
  border: "#e7e5e4"
  border-strong: "#d6d3d1"
  text-primary: "#1c1917"
  text-secondary: "#57534e"
  text-muted: "#a8a29e"
  success: "#15803d"
  warning: "#b45309"
  error: "#b91c1c"
  info: "#1d4ed8"

typography:
  headline:
    family: "Lora"
    weight: 600
    use: "Product titles, section headers, hero headlines — serif conveys craftsmanship and warmth"
  body:
    family: "Inter"
    weight: 400
    use: "Product descriptions, reviews, form labels, navigation items, footer text"
  mono:
    family: "JetBrains Mono"
    weight: 400
    use: "Prices, order numbers, tracking codes, discount codes"
  scale:
    - { label: "xs", size: "12px", lineHeight: "16px" }
    - { label: "sm", size: "14px", lineHeight: "20px" }
    - { label: "base", size: "16px", lineHeight: "26px" }
    - { label: "lg", size: "18px", lineHeight: "28px" }
    - { label: "xl", size: "20px", lineHeight: "30px" }
    - { label: "2xl", size: "26px", lineHeight: "34px" }
    - { label: "3xl", size: "32px", lineHeight: "40px" }
    - { label: "4xl", size: "40px", lineHeight: "48px" }

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128]
  unit: "px"

rounded:
  none: "0px"
  sm: "6px"
  md: "10px"
  lg: "16px"
  full: "9999px"

components:
  button:
    variants:
      - name: "primary"
        background: "#292524"
        text: "#fafaf9"
        radius: "md"
        weight: 500
      - name: "secondary"
        background: "#f5f5f4"
        text: "#292524"
        radius: "md"
        weight: 500
      - name: "outline"
        background: "transparent"
        text: "#292524"
        border: "#d6d3d1"
        radius: "md"
        weight: 500
      - name: "ghost"
        background: "transparent"
        text: "#57534e"
        radius: "md"
        weight: 500
      - name: "destructive"
        background: "#b91c1c"
        text: "#ffffff"
        radius: "md"
        weight: 500
      - name: "cta"
        background: "#c2410c"
        text: "#ffffff"
        radius: "full"
        weight: 600
    sizes:
      - { name: "sm", height: "36px", padding: "0 16px", fontSize: "14px" }
      - { name: "md", height: "44px", padding: "0 24px", fontSize: "15px" }
      - { name: "lg", height: "52px", padding: "0 32px", fontSize: "16px" }
  input:
    background: "#ffffff"
    border: "#e7e5e4"
    radius: "md"
    height: "44px"
    focusRing: "#c2410c"
    placeholder: "#a8a29e"
  card:
    background: "#ffffff"
    border: "#e7e5e4"
    radius: "lg"
    padding: "0"
    shadow: "0 1px 3px rgba(0,0,0,0.06)"
    hoverShadow: "0 4px 12px rgba(0,0,0,0.08)"

x-stylebase:
  version: "1.0.0"
  template: "warm-commerce"
  generated-by: "stylebase"
  ai-rules:
    always:
      - "Use Lora (serif) for headlines. Use Inter for body text. Never mix."
      - "Product images are the hero. Cards use padding: 0 so images bleed to edges."
      - "CTA buttons use accent (#c2410c) with full radius. They must stand out above all else."
      - "Prices use mono font. Always display with two decimal places."
      - "Use generous spacing — minimum 24px gap between content sections."
      - "Border-radius is rounder than typical SaaS: sm=6px, md=10px, lg=16px."
    never:
      - "Never use sharp corners (0px radius) on interactive elements."
      - "Never use the dark palette for large background fills — keep it warm and light."
      - "Never place text directly on product images without an overlay."
      - "Never use more than one CTA button per viewport section."
      - "Never use colors outside the 18 defined tokens."
---

# Warm Commerce Design System

## Design Philosophy

Warm Commerce treats shopping as a sensory experience. The design system draws from physical retail: warm lighting (stone/amber palette), considered spacing (like shelf merchandising), and serif typography (like premium packaging). The goal is to make digital products feel tangible.

Every design decision asks: "Does this make the product look desirable?" If a UI element competes with product photography for attention, the element is wrong.

## Color Usage

The stone palette (#1c1917 through #fafaf9) replaces cold neutrals. Stone gray has an amber undertone that pairs naturally with product photography — especially food, fashion, furniture, and lifestyle goods.

Accent orange (#c2410c) is the call-to-action color. It appears on exactly two element types: CTA buttons and sale/discount badges. Using it anywhere else dilutes conversion power. Primary buttons use dark stone (#292524) for all non-conversion actions.

Semantic colors are muted compared to SaaS systems. Success green is #15803d (not neon). Error red is #b91c1c (not fire-engine). The restraint keeps the palette feeling premium.

## Typography Rules

Lora (serif) headlines create an editorial, magazine-quality feel. Weight 600 is the only headline weight — bold enough to anchor a page, not so bold it screams. Serif type is the strongest brand signal in this system.

Inter (sans-serif) handles all body text. The serif/sans contrast creates a clear visual hierarchy without needing size differences. A 16px Lora headline and 16px Inter paragraph feel distinct.

Mono font appears only for prices and codes. Monospace numerals ensure prices align vertically in lists and grids — critical for comparison shopping.

Line heights are generous: base text is 16px/26px (1.625 ratio). This creates an airy, readable feel that matches the overall spacious aesthetic.

## Spacing Philosophy

Warm Commerce uses more space than typical SaaS systems. The scale goes up to 128px for hero sections. Minimum gap between content blocks is 24px. This breathing room makes products feel curated, not crammed.

Card padding is intentionally 0 — product images should bleed to card edges. Internal content padding lives inside sub-elements, not the card wrapper.

## Component Principles

Six button variants. The CTA variant is special: accent background, full radius (pill shape), weight 600. It is visually distinct from every other button. Use it for "Add to Cart," "Buy Now," "Subscribe" — one per section maximum.

Cards are designed for product display. Zero padding lets images fill the container. A subtle shadow (not border-first like SaaS) creates the "floating card" effect common in e-commerce. Hover increases the shadow for a lift effect.

Input height is 44px — taller than SaaS defaults — for comfortable touch targets on mobile devices. Focus ring uses the accent orange to tie forms to the conversion flow.

## What This System Is Not

This is not a dashboard system. It has no data tables, no dense settings panels, no monospace-heavy layouts. Use it for storefronts, product pages, checkout flows, and brand landing pages. If the primary user action is "read data," this system is wrong — use Clean SaaS instead.