---
version: alpha
name: AI Editor RSP Design System
description: India-first AI photo editing prompt library and upload-to-edit interface. Concrete prompt cards, before/after previews, copy-first actions, and honest provider state.
colors:
  primary: "#F6C453"
  secondary: "#1E293B"
  tertiary: "#0EA5E9"
  neutral: "#0B1020"
  background: "#0B1020"
  surface: "#111827"
  surfaceRaised: "#172033"
  border: "#2D374F"
  textPrimary: "#F8FAFC"
  textSecondary: "#B7C1D6"
  textMuted: "#7D8AA3"
  accentWarm: "#F6C453"
  accentCool: "#38BDF8"
  success: "#22C55E"
  warning: "#F97316"
  danger: "#EF4444"
typography:
  headline-display:
    fontFamily: Sora
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1.02
    letterSpacing: "-0.045em"
  headline-section:
    fontFamily: Sora
    fontSize: 38px
    fontWeight: 760
    lineHeight: 1.08
    letterSpacing: "-0.03em"
  body:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.65
    letterSpacing: "-0.01em"
  label:
    fontFamily: Manrope
    fontSize: 12px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: "0.08em"
rounded:
  none: 0px
  sm: 8px
  md: 14px
  lg: 24px
  xl: 34px
spacing:
  xs: 6px
  sm: 10px
  md: 18px
  lg: 32px
  xl: 56px
  section: 88px
components:
  button-primary:
    backgroundColor: "{colors.accentWarm}"
    textColor: "#111827"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 14px
  button-secondary:
    backgroundColor: "{colors.surfaceRaised}"
    textColor: "{colors.textPrimary}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 14px
  prompt-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.textPrimary}"
    rounded: "{rounded.lg}"
    padding: 18px
  editor-shell:
    backgroundColor: "{colors.surfaceRaised}"
    textColor: "{colors.textPrimary}"
    rounded: "{rounded.xl}"
    padding: 24px
  provider-status:
    backgroundColor: "#1F2937"
    textColor: "{colors.textSecondary}"
    rounded: "{rounded.md}"
    padding: 12px
---

## Overview
AI Editor RSP is a prompt library first, upload-to-edit tool second. The system must make the user task visible in this order: find a concrete effect, inspect before/after, copy the prompt, then optionally open or apply it in the editor. The visual direction is dark editorial utility: social-search energy, dense but controlled prompt cards, and large honest editor surfaces.

## Colors
Use `#0B1020` as the page background and avoid white SaaS sections. Use `#F6C453` for the one dominant action per surface: Copy Prompt, Upload to apply, or Generate when provider is live. Use `#38BDF8` for links, provider hints, and secondary discovery states. Error, quota, and provider-unavailable states must be explicit, not decorative.

## Typography
Use Sora for display and section headings. Use Manrope for body, labels, controls, and prompt text. Do not use Inter, Roboto, Arial, or browser default system stacks. Hero H1 should be stacked above the editor module; avoid split hero title/description columns.

## Layout
Header is the first page structure. Footer is the last page structure. Public routes share the same nav, logo treatment, spacing scale, search/filter treatment, card style, and editor shell. Homepage first fold is vertical: title, short explanation, then a large full-width editor/prompt module. Library pages use search + filters + dense card grid. Detail pages use before/after and prompt block above explanatory SEO copy.

## Elevation & Depth
Depth comes from layered dark surfaces, thin borders, warm highlight rails, and before/after image frames. Avoid generic glassmorphism blobs, purple gradients, abstract 3D spheres, and large empty placeholders. Sample visuals should feel like generated photo previews, not neutral gray boxes.

## Shapes
Use mixed radius intentionally: sharp outer section edges, rounded prompt cards, and large rounded editor shells. Avoid a single uniform radius everywhere. Before/after frames should be paired and labeled clearly.

## Components
Header: compact logo, Prompt Library, RSP Trends, Gemini Prompts, ChatGPT Prompts, Editor, one primary Open Editor action only.
Prompt card: before/after pair, search-language title, category, provider tags, prompt excerpt, best for, avoid if, Copy Prompt, Open in Editor.
Editor shell: selected effect, prompt textarea, upload zone, provider status, Copy Prompt always available, Upload/Generate only when honest state allows, persistent result/error/quota panel.
Provider status: live, preview-only, unavailable, quota exhausted, and error states must have distinct copy and action hierarchy.
Footer: unofficial disclaimer, provider non-affiliation note, sitemap routes, privacy/terms/contact.

## Do's and Don'ts
Do make Copy Prompt instantly available without login, credits, upload, or provider. Do show provider-unavailable and preview/waitlist states before generation expectation is created. Do keep mobile 390px layouts free of horizontal overflow and clipped bottom actions. Do use concrete RSP/social/festival/provider effect titles.
Do not present AI Editor RSP as an official RSP, Gemini, ChatGPT, Instagram, or provider integration. Do not promise guaranteed same results, unlimited generation, or live generation when provider is disabled. Do not create a generic AI editor SaaS hero with marketing CTA buttons. Do not let interior routes invent new header, footer, fonts, colors, or card systems.