Editorial SaaS Onboarding

# Editorial SaaS Onboarding

{
  "summary": "A high-end, calibration-focused onboarding UI that feels like a professional internal tool. It utilizes a split-screen architecture (45/55 ratio), combining minimalist typography (Serif/Sans pairing) with interactive role-selection cards and an abstract UI preview panel.",
  "style": {
    "description": "Editorial-meets-utility style using a dark graphite (#111827) and warm off-white (#FDFBF9) color scheme. Typography pairings include DM Serif Display for headlines and Inter for functional text. Animations are smooth and restrained, utilizing cubic-bezier curves for a premium feel.",
    "prompt": "Create a design system using a palette of Graphite (#111827), Stone (25: #FDFBF9, 200: #E7E5E4), and Oxidized Green (#3E5C45). Typography: Headings in 'DM Serif Display', Body and UI labels in 'Inter' (weights 300-600), and small metadata/status in a monospace font. Use a warm off-white background (#FDFBF9) instead of pure white. Micro-interactions should use 'cubic-bezier(0.16, 1, 0.3, 1)' for transitions. Maintain sharp or slightly rounded corners (8px max). Selection colors should be oxidized green with white text. Scrollbars should be thin (6px) and subtle (#E7E5E4)."
  },
  "layout_and_structure": {
    "description": "Split-screen layout with a functional left column (interaction/form) and an illustrative right column (preview/context).",
    "prompts": [
      {
        "part": "Left Navigation Header",
        "prompt": "A minimalist header at the top of the interaction column. Left-aligned logo (24px graphite square) with the brand name in Inter Medium 14px. Right-aligned 'Skip setup' link in 12px Stone-400, transitioning to Graphite with a thin underline on hover."
      },
      {
        "part": "Progress Indicator",
        "prompt": "Text-based status indicator located above the main heading. Format: '01 / 04' in Monospace Oxidized Green 12px, followed by a 32px horizontal divider (#3E5C45 at 30% opacity), and a 'CONTEXT' label in uppercase tracking-widest 10px Stone-500."
      },
      {
        "part": "Content Hero Section",
        "prompt": "Large editorial heading using DM Serif Display at 48px, line-height 1.1, in Graphite. Below it, a descriptive paragraph in Stone-500, 18px size with relaxed line-height (1.6). Max-width restricted to 448px for optimal readability."
      },
      {
        "part": "Interactive Selection Cards",
        "prompt": "Vertical stack of cards with 12px spacing. Each card features an 8px radius, Stone-200 border, and white background. Internal layout: a custom 16px radio circle (Oxidized Green when active), Graphite font-medium title, and Stone-500 small descriptive text. On hover or selection, the card adds a 2px Oxidized Green border and a soft shadow (rgba(62,92,69,0.1))."
      },
      {
        "part": "Action Footer",
        "prompt": "Bottom section of the interaction column. Includes a left-aligned trust label (12px Stone-400 with a small lock icon) and a primary Graphite button. The button should have 32px horizontal padding, 12px vertical padding, 6px radius, and an arrow-right icon that slides 4px to the right on hover."
      },
      {
        "part": "Visual Preview Panel (Right Side)",
        "prompt": "A Stone-100 background with a subtle dot-grid pattern (1px Graphite dots at 3% opacity, 32px spacing). Contains a centered 'Abstract UI' card at 16:10 aspect ratio. This card should look like a browser window with skeleton UI components: a sidebar, top navigation, and content grid. Use Oxidized Green sparingly (10% opacity) for highlighting active UI elements in the preview."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Calibration Radio Card",
      "description": "A high-fidelity radio card that changes its internal border and typography color on focus/selection.",
      "prompt": "Construct a radio card component with a 1px Stone-200 border. Inside, include a hidden native radio input. The visible container should transition its border-color to #3E5C45 and add a 2px inner border on selection. The title text should transition from #111827 to #3E5C45 on hover. Layout should use a 16px gap between the radio circle and the text content block."
    },
    {
      "component": "Abstract UI Skeleton",
      "description": "A non-literal representation of an application interface used for contextual previews.",
      "prompt": "Create an abstract representation of a dashboard. Use rounded-sm shapes in Stone-50, Stone-100, and Stone-200 to represent buttons, lines of text, and icons. Add a single accent color (Oxidized Green at 10-20% opacity) to one 'active' module to draw the eye. The entire container should have a 12px corner radius and a shadow-2xl with Stone-200/50 color."
    }
  ],
  "special_notes": "MUST avoid pure black (#000) and pure white (#FFF). MUST use DM Serif Display for emotional emphasis and Inter for functional clarity. MUST use the specific cubic-bezier(0.16, 1, 0.3, 1) for all entrance animations to ensure the 'calm' feel. DO NOT use vibrant gradients, heavy shadows, or cartoonish illustrations."
}