name: zapier-design
version: alpha
description: >
  Clean, optimistic automation. A warm white canvas (#fffefb) with warm
  near-black ink (#201515) and the unmistakable Zapier Orange (#ff4f00) as the
  single brand voltage — logo underscore, big stat numbers, and the primary CTA.
  Headlines run in Degular Display (medium weight, tight) over Inter body. The
  signatures: orange stat figures, a soft off-white "FOR BUILDERS" panel of
  bordered app tiles, small 4–6px radii on buttons (no heavy rounding), and a
  deep forest-green footer band. Surfaces studied via Playwright: home
  (computed styles on representative elements).
colors:
  # Brand
  primary: '#FF4F00'              # Zapier Orange — logo mark, stats, primary CTA
  on-primary: '#FFFFFF'
  # Surface
  surface: '#FFFEFB'              # warm white canvas
  surface-secondary: '#F7F5F2'    # off-white "FOR BUILDERS" panel
  surface-inverse: '#2D3A2E'      # deep forest-green footer/section band
  # Text
  on-surface: '#201515'           # warm near-black ink
  on-surface-secondary: '#36342E'
  on-surface-muted: '#605D52'     # eyebrow / caption grey
  on-inverse: '#FFFEFB'
  hairline: '#E8E5DF'
typography:
  display:                        # "Your tools. Your rules. Any AI."
    fontFamily: '"Degular Display", Inter, system-ui, sans-serif'
    fontSize: 56px
    fontWeight: 500
    lineHeight: 56px
    letterSpacing: 0
  heading:
    fontFamily: '"Degular Display", Inter, sans-serif'
    fontSize: 28px
    fontWeight: 500
    lineHeight: 32px
  eyebrow:                        # "AI AUTOMATION, GOVERNED" / "FOR BUILDERS"
    fontFamily: 'Inter, system-ui, sans-serif'
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0.48px
    transform: uppercase
  stat:                           # "450K+", "3.39M+"
    fontFamily: '"Degular Display", Inter, sans-serif'
    fontSize: 40px
    fontWeight: 500
    color: '{colors.primary}'
  body-md:
    fontFamily: 'Inter, system-ui, sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body-sm:
    fontFamily: 'Inter, system-ui, sans-serif'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
rounded:
  sm: 4px                         # buttons
  md: 6px                         # inputs / link chips
  lg: 8px                         # app tiles
  full: 9999px                    # "Sign up" nav pill
spacing:
  sm: 16px
  md: 24px
  lg: 40px
  xl: 64px
components:
  button-primary:                 # "Start free with email"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: '14px 24px'
  button-secondary:               # "Start free with Google"
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.sm}'
    note: 'leading provider logo'
  nav-pill:                       # "Sign up"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.full}'
  app-tile:                       # Claude / ChatGPT / Cursor cards
    backgroundColor: '{colors.surface}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.lg}'
    note: 'square-ish bordered tile, app logo + label, on the off-white panel'
  segmented-control:              # MCP / SDK / CLI
    backgroundColor: '{colors.surface-secondary}'
    rounded: '{rounded.md}'
motion:
  easing-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-standard: 200ms
  note: 'friendly, light; tab switches and hover lifts'
icons:
  style: line / app logos
  stroke: 1.5px
  sizes: { sm: 16px, md: 24px }
  color-rule: 'ink or muted grey; orange reserved for brand mark'