System Requirements Document for adrian-ai-studio

1. Introduction

ADRIAN AI STUDIO is a generative AI creation suite — AI Chat, AI Image, and AI Writer — delivered as a modern SaaS product. This document specifies a complete visual redesign of the entire product into a premium pink identity: every surface, control, state, and motion treatment is retuned so that pink reads as the brand of a premium AI technology company rather than a playful or cosmetic one.

The product intent is unchanged in function and entirely changed in appearance: the studio must feel elegant, futuristic, luxurious, clean, and professional, with a single saturated pink signal (#EC4899) owning primary actions, active navigation, AI-generation highlights, and key statistics, while blue, purple, and cyan are removed as primary accents anywhere in the identity.

The audience is the AI Studio Creator — a creator, marketer, or small-team member who produces and refines AI-generated chat, image, and written output — and the Studio Visitor, a prospective user who evaluates the product on the landing page before entering the studio.

2. System Overview

ADRIAN AI STUDIO currently consists of five first-party surfaces: a public Landing Page, a Dashboard shell, and three creation workspaces — AI Chat, AI Image, and AI Writer. This redesign applies a single pink design system across all five, in both light and dark mode, at desktop, laptop, tablet, Android, and iPhone widths.

The redesign is a presentation-and-identity change. It does not add new creation capabilities, new destinations, or new account mechanics. It replaces the previous primary accent language (blue/purple/cyan) with the specified pink palette, defines gradients and where they may and may not appear, specifies component-level treatments for sidebar, topbar, credit indicator, chat bubbles, image cards, and the writer editor/toolbar, and specifies the motion vocabulary (Framer Motion: fade, slide, scale, hover, glow, page transition, skeleton loading) with smooth, restrained easing.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. All five surfaces are first-party application pages rendered by the product itself. The Landing Page is the anonymous public entry surface; the Dashboard, AI Chat, AI Image, and AI Writer are the studio's working surfaces. No surface in this scope is provider-owned or externally hosted, and no headless delivery is requested.

Access boundary. The accepted page contract assigns no access requirement to any of the five pages, and no accepted journey in the source requires an account, sign-in, or identity establishment to reach the studio, its chat, its image generation, or its writer. This document therefore does not introduce authentication, registration, account management, or permission tiers. The Landing Page's [Start Creating] and [Explore AI Tools] CTAs lead into the studio surfaces directly.

Current vs. future. Everything specified here is current. No future-horizon requirements were accepted in the source thread; nothing in this document is deferred.

Narrow exclusions. This document does not specify billing, subscription management, team administration, analytics dashboards, or content moderation workflows — none were requested. It also does not specify any blue, purple, or cyan primary accent, any full-page gradient wash, any childish pink cue, or any salon/fashion/cosmetics framing, all of which are explicitly prohibited.

2b. Source Content Inventory

Not applicable — no reference directive in this request declares a content_source.

2c. Page Content and Component Coverage

Landing Page

• Information and state. Anonymous public entry surface. Presents the product identity and the two entry paths into the studio. No user-specific state is held here.
• Primary actions. [Start Creating] — capsule button filled with the pink gradient, soft pink glow shadow, leading into the studio creation surfaces. [Explore AI Tools] — white capsule with a 1px #EC4899 border, leading to the AI tool surfaces (Chat, Image, Writer).
• Supporting content. Headline "Create Anything. Powered by AI." with the word "AI" filled with the 135deg pink gradient and the remainder in #2A1720. Feature rows below the hero on a 12-column grid with alternating 7/5 column offsets (never symmetrical card grids).
• Domain entities. None persisted; the page is presentational plus navigation.
• Component responsibilities.
  • Hero band — full-bleed #FFF7FA ground, not a centred SaaS stack. Left two-thirds: oversized flush-left headline in Plus Jakarta Sans 800 at clamp(44px, 11vw, 128px), allowed to run to the viewport edge on desktop, with "Powered by AI." as a second line one step smaller. Directly beneath, a left-aligned action row containing the two CTAs.
  • Pink glowing orb — large radial pink light field (#EC4899 → #FB7185 → transparent) at roughly 60% viewport width, softly blurred, bleeding off the right edge. Decorative; may be cropped.
  • Soft gradient blur — layered blurred pink fields behind the hero content establishing depth without a full-page gradient wash.
  • Floating AI cards — three glassmorphism panels (Chat, Image, Writer), each with a 1px #FBCFE8 border, 8% pink inner glow, a 1px top highlight arc, a real Lucide icon, and one line of live-looking output. They float over the orb at different depths and slight rotations, drifting on independent 12–18s parallax paths, and reflow to a single stacked column under the headline on mobile.
  • Glassmorphism panels — reserved for the hero and floating overlays only; the workspace surfaces stay crisp white.
  • Subtle particles — faint pink particles drifting across the band at approximately 6% opacity.
  • Logo mark — a single continuous-stroke "A" whose crossbar resolves into a four-point AI sparkle, drawn as one unbroken path in pink so it survives favicon scale.
• States.
  • Loading: skeleton loading treatment for any deferred hero media; the headline and CTAs render immediately and are never blocked.
  • Empty: not applicable — the page has no user data.
  • Success: the visitor reads the headline, understands the two entry paths, and activates a CTA.
  • Error: if a CTA target fails to load, the CTA remains visible and re-activatable; no dead-end state.
  • Recovery: the visitor can retry the CTA or remain on the landing page and re-read the tool cards.

Dashboard

• Information and state. The studio navigation shell. Holds the persistent sidebar, the topbar, and the credit indicator. Hosts the shared frame in which Chat, Image, and Writer workspaces render.
• Primary actions. Navigate between AI Chat, AI Image, and AI Writer via the sidebar; on mobile, navigate via the bottom bar.
• Supporting content. Credit indicator as a persistent pink gradient capsule in the topbar with tabular numerals and a thin inner highlight.
• Domain entities. Navigation destinations; credit balance (displayed, not transacted in this scope).
• Component responsibilities.
  • Sidebar — fixed 264px, background #FFFFFF. Active menu item is a #FCE7F3 capsule with a 3px vertical pink gradient rail on its left edge, a #EC4899 icon, and a #DB2777 label. Inactive items use gray icons. Collapses to a pink-indicator bottom bar under 768px.
  • Topbar — 64px, white, with a very soft pink hairline (#FBCFE8) bottom border. A matching gradient hairline runs the full width of the topbar's bottom edge.
  • Credit indicator — pink gradient pill pinned right in the topbar, tabular numerals, thin inner highlight.
  • Workspace frame — shared by Chat, Image, and Writer: left control rail, centre canvas, right history drawer that slides over on tablet.
  • Logo — the same continuous-stroke "A" + AI sparkle mark, legible in light mode, dark mode, mobile, and as a favicon.
• States.
  • Loading: skeleton loading for the shell and any deferred panel content.
  • Empty: a workspace with no prior output shows an empty canvas with its own generation affordance, not a blank void.
  • Success: the creator moves between tools and sees the active destination clearly indicated.
  • Error: if a workspace fails to load, the shell, sidebar, and topbar remain intact and the destination can be re-selected.
  • Recovery: re-selecting the destination from the sidebar or bottom bar retries the load.

AI Chat

• Information and state. The AI conversation workspace. Holds the message thread and the composer state.
• Primary actions. Send a message via the pink circular send button; read the AI response.
• Supporting content. The conversation thread itself, rendered as alternating user and AI messages.
• Domain entities. Conversation; message (role: user or AI; content).
• Component responsibilities.
  • User message bubble — pink gradient bubble.
  • AI message card — white or soft pink card.
  • Send button — pink circular button.
  • Typing indicator — three pink animated dots on a staggered 1.2s loop.
  • Generation treatment — while generating, a pink gradient stroke traces the canvas border and a soft-pink shimmer skeleton holds the space; the result then scales in from 0.98 with a blur-out.
• States.
  • Loading: pink animated dots while the AI response is pending; shimmer skeleton holds the response space.
  • Empty: a new conversation shows an empty thread with the composer ready and the send button visible.
  • Success: the user message appears as a pink gradient bubble and the AI response appears as a white/soft pink card.
  • Error: if a response fails, the pending indicator resolves to a recoverable state and the composer remains usable so the message can be resent.
  • Recovery: the creator can resend or continue the conversation; the thread is not lost.

AI Image

• Information and state. The image-generation workspace. Holds the generation controls and the resulting image cards.
• Primary actions. Generate an image via the pink gradient generate button; review generated images.
• Supporting content. The image card grid.
• Domain entities. Generation request; generated image (thumbnail and full view).
• Component responsibilities.
  • Generate button — pink gradient.
  • Image cards — white card, soft shadow, pink hover glow. On hover: scale 1.02 and a pink border.
  • Generation treatment — the shared pink gradient stroke tracing the canvas border, soft-pink shimmer skeleton, and result scaling in from 0.98 with a blur-out.
• States.
  • Loading: shimmer skeleton in the position where the image will appear, with the pink gradient stroke tracing the active canvas.
  • Empty: no images yet — the canvas shows the generate affordance rather than an empty grid.
  • Success: the generated image appears on a white card with soft shadow.
  • Error: a failed generation resolves to a recoverable state with the generate button still available.
  • Recovery: the creator can regenerate; previously generated images remain in the workspace.

AI Writer

• Information and state. The writing workspace. Holds the editor content and the toolbar state.
• Primary actions. Write and edit text in the editor; apply tools from the toolbar; generate text via the pink gradient generate button.
• Supporting content. The editor surface and the tool set.
• Domain entities. Document; tool selection; generated text.
• Component responsibilities.
  • Editor — white background.
  • Toolbar — soft pink background; active tools render in pink.
  • Generate button — pink gradient.
  • Generation treatment — the shared pink gradient stroke, shimmer skeleton, and blur-out result entrance, reused so generation always looks like the brand.
• States.
  • Loading: shimmer skeleton while generated text is pending.
  • Empty: an empty document shows the editor with the toolbar and generate button ready.
  • Success: generated or edited text appears in the white editor with the active tool clearly marked in pink.
  • Error: a failed generation leaves the existing document intact and the generate button available.
  • Recovery: the creator can regenerate or continue editing; no written content is lost.

3. Functional Requirements

FR-1 — Premium pink identity across the whole application As an AI Studio Creator, I should see the entire studio rendered in a premium pink identity so that the product reads as a premium AI technology brand.

• Provenance: explicit.
• Lifecycle: trigger — any page load; input — the applied design tokens; observable result — every page uses the pink palette consistently; access state — none; failure/recovery — if a token fails to apply, the affected surface falls back to the nearest defined pink token rather than a blue/purple/cyan default; continuation — the creator continues working in the same pink identity.
• Acceptance: pink is the primary identity on all pages; visual consistency holds across Landing Page, Dashboard, AI Chat, AI Image, and AI Writer.

FR-2 — Light-mode palette As an AI Studio Creator, I should see the specified light-mode palette applied so that the studio's canonical identity is correct.

• Provenance: explicit.
• Lifecycle: trigger — light mode active; input — the token set; observable result — background #FFF7FA, foreground #2A1720, primary #EC4899, primary-hover #DB2777, primary-light #FCE7F3, secondary #F9A8D4, accent #FB7185, card #FFFFFF, border #FBCFE8; access state — none; failure/recovery — a missing token resolves to its nearest defined neighbour in the same palette; continuation — the creator continues in light mode.
• Acceptance: each listed token resolves to its exact specified hex value.

FR-3 — Dark-mode palette As an AI Studio Creator, I should see the specified dark-mode palette applied so that dark mode retains the pink identity.

• Provenance: explicit.
• Lifecycle: trigger — dark mode active; input — the dark token set; observable result — background #160B10, foreground #FFF1F7, card #211018, primary #F472B6, primary-hover #EC4899, border #4A1D32; access state — none; failure/recovery — a missing dark token resolves to its nearest defined dark neighbour; continuation — the creator continues in dark mode.
• Acceptance: each listed dark token resolves to its exact specified hex value; no pure black background appears.

FR-4 — Design style register As an AI Studio Creator, I should experience a design style that is premium pink, elegant, futuristic, soft glassmorphism, minimalist, modern SaaS, luxury, clean, and professional so that the tool feels like a premium product rather than a utility.

• Provenance: explicit.
• Lifecycle: trigger — any page view; input — the applied style system; observable result — the surfaces read as premium and futuristic; access state — none; failure/recovery — if a surface drifts toward a childish or cosmetic read, it is corrected back to the specified register; continuation — the creator continues working.
• Acceptance: the UI does not read as childish, and pink reads as a premium technology brand.

FR-5 — Gradient usage and limits As an AI Studio Creator, I should see gradients used elegantly and only in the permitted places so that the identity stays premium and the pages stay readable.

• Provenance: explicit.
• Lifecycle: trigger — rendering a gradient-bearing element; input — the gradient definitions (pink→rose, pink→soft pink, rose→peach; e.g. linear-gradient(135deg, #EC4899, #F472B6, #FB7185)); observable result — gradients appear only on hero, CTA, primary buttons, AI generation highlights, active navigation, important statistics, and decorative elements; access state — none; failure/recovery — a gradient applied outside the permitted set is removed and replaced with the flat token; continuation — the creator continues working.
• Acceptance: no entire page carries a gradient wash.

FR-6 — Landing page hero composition As a Studio Visitor, I should see a hero with a very soft white/pink background and layered decorative elements so that the product's premium identity is immediately legible.

• Provenance: explicit.
• Lifecycle: trigger — visiting the Landing Page; input — the hero composition; observable result — the hero shows a pink glowing orb, soft gradient blur, floating AI cards, glassmorphism panels, and subtle particles on a very soft white/pink background; access state — anonymous, no requirement; failure/recovery — if a decorative layer fails, the headline and CTAs remain fully visible and usable; continuation — the visitor proceeds to a CTA.
• Acceptance: all five listed hero elements are present; the headline and CTAs remain whole and inside the viewport at 375px, 768px, and 1280px.

FR-7 — Landing page headline As a Studio Visitor, I should read the headline "Create Anything. Powered by AI." with "AI" highlighted in pink gradient so that the product's promise and identity land together.

• Provenance: explicit.
• Lifecycle: trigger — visiting the Landing Page; input — the headline string; observable result — the headline renders with "AI" filled by the pink gradient and the remaining words in #2A1720; access state — anonymous; failure/recovery — if the gradient fails, "AI" falls back to #EC4899 rather than an unstyled or off-brand color; continuation — the visitor proceeds to a CTA.
• Acceptance: the exact headline text is present and the word "AI" carries the pink gradient.

FR-8 — Landing page CTAs As a Studio Visitor, I should see [Start Creating] as a pink gradient button and [Explore AI Tools] as a white button with a pink border so that I can choose how to enter the studio.

• Provenance: explicit.
• Lifecycle: trigger — visiting the Landing Page; input — CTA activation; observable result — [Start Creating] renders with the pink gradient and [Explore AI Tools] renders with a white background and pink border; access state — anonymous; failure/recovery — if a CTA target fails, the CTA remains visible and re-activatable; continuation — the visitor enters the studio.
• Acceptance: both CTAs are present with their specified treatments and both are activatable.

FR-9 — Dashboard sidebar treatment As an AI Studio Creator, I should see a white sidebar with a clearly marked active menu item so that I always know where I am.

• Provenance: explicit.
• Lifecycle: trigger — navigating within the studio; input — the selected destination; observable result — sidebar background #FFFFFF; the active menu item shows background #FCE7F3, icon #EC4899, text #DB2777; access state — none; failure/recovery — if the active state fails to render, the destination still loads and the state is re-applied on next navigation; continuation — the creator continues in the selected workspace.
• Acceptance: the sidebar background and the three active-item values match their specified hex values.

FR-10 — Dashboard topbar and credit indicator As an AI Studio Creator, I should see a white topbar with a very soft pink border and a pink gradient credit pill so that my credit state is always visible in the brand language.

• Provenance: explicit.
• Lifecycle: trigger — any studio view; input — the credit value; observable result — topbar is white with a very soft pink border; the credit indicator renders as a pink gradient pill; access state — none; failure/recovery — if the credit value fails to load, the pill remains rendered with a neutral placeholder rather than disappearing; continuation — the creator continues working.
• Acceptance: the topbar border is a very soft pink and the credit indicator is a pink gradient pill.

FR-11 — AI Chat message and control treatment As an AI Studio Creator, I should see my messages as pink gradient bubbles, AI messages as white/soft pink cards, a pink circular send button, and pink animated typing dots so that the conversation reads in the brand language.

• Provenance: explicit.
• Lifecycle: trigger — sending a message; input — the message text; observable result — the user message renders as a pink gradient bubble, the AI response renders as a white/soft pink card, the send button is a pink circular button, and the typing indicator is pink animated dots; access state — none; failure/recovery — if a response fails, the pending indicator resolves and the composer stays usable so the message can be resent; continuation — the creator continues the conversation.
• Acceptance: all four chat treatments match their specified descriptions.

FR-12 — AI Image generation and card treatment As an AI Studio Creator, I should see a pink gradient generate button and white image cards with a pink hover glow so that image generation feels like the brand.

• Provenance: explicit.
• Lifecycle: trigger — activating generate; input — the generation request; observable result — the generate button is a pink gradient; image cards are white with soft shadow and pink hover glow; on hover the card scales to 1.02 and gains a pink border; access state — none; failure/recovery — if generation fails, the generate button remains available and prior images remain; continuation — the creator regenerates or reviews existing images.
• Acceptance: the generate button is a pink gradient; hover produces scale 1.02 and a pink border.

FR-13 — AI Writer editor and toolbar treatment As an AI Studio Creator, I should see a white editor, a soft pink toolbar, pink active tools, and a pink gradient generate button so that writing feels like the brand.

• Provenance: explicit.
• Lifecycle: trigger — opening the writer; input — tool selection and generation; observable result — editor background white, toolbar background soft pink, active tools pink, generate button pink gradient; access state — none; failure/recovery — if generation fails, the document is preserved and the generate button remains available; continuation — the creator continues editing or regenerates.
• Acceptance: all four writer treatments match their specified descriptions.

FR-14 — Button style system As an AI Studio Creator, I should see a consistent button system so that action hierarchy is always clear.

• Provenance: explicit.
• Lifecycle: trigger — rendering any button; input — the button variant; observable result — primary buttons use the pink gradient with a slightly darker pink hover and a soft pink glow shadow; secondary buttons are white/transparent with a pink border; danger buttons use a red distinct from the primary pink; access state — none; failure/recovery — if a variant style fails, the button falls back to the primary pink treatment rather than an off-brand color; continuation — the creator completes the action.
• Acceptance: the three variants render as specified and the danger red is visually distinct from the primary pink.

FR-15 — Card style system As an AI Studio Creator, I should see a consistent card treatment so that content surfaces feel cohesive.

• Provenance: explicit.
• Lifecycle: trigger — rendering a card; input — the card content; observable result — border-radius 18px–24px, 1px solid #FBCFE8 border, soft subtle shadow; on hover transform: translateY(-2px) with a very light pink glow; access state — none; failure/recovery — if the hover transform is unavailable, the card remains fully readable and interactive; continuation — the creator interacts with the card.
• Acceptance: radius, border, shadow, and hover behavior match the specification.

FR-16 — Typography As an AI Studio Creator, I should see a clear typographic hierarchy so that the interface is easy to scan.

• Provenance: explicit.
• Lifecycle: trigger — rendering text; input — the type scale; observable result — Inter or Plus Jakarta Sans is used, headlines are bold/extra-bold, body is regular, and the hierarchy is clear; access state — none; failure/recovery — if the preferred family fails to load, a geometric sans fallback preserves the hierarchy; continuation — the creator reads and works.
• Acceptance: headings are bold/extra-bold, body is regular, and the hierarchy is visually unambiguous.

FR-17 — Icon system As an AI Studio Creator, I should see Lucide icons with restrained color so that the interface stays clean.

• Provenance: explicit.
• Lifecycle: trigger — rendering an icon; input — the icon state; observable result — Lucide icons are used; active icons are pink, normal icons are gray; access state — none; failure/recovery — if an icon fails to render, its label or accessible name remains; continuation — the creator completes the action.
• Acceptance: icons are Lucide; active icons pink, normal icons gray; no excessive icon color variety.

FR-18 — Dark mode identity As an AI Studio Creator, I should see dark mode retain the pink identity so that the brand holds in both modes.

• Provenance: explicit.
• Lifecycle: trigger — dark mode active; input — the dark token set; observable result — background #160B10, cards #211018, borders #4A1D32, primary #F472B6, glow pink at low opacity; access state — none; failure/recovery — if a dark token fails, the nearest defined dark neighbour is used; continuation — the creator continues in dark mode.
• Acceptance: the listed dark values apply and no pure black background appears.

FR-19 — Animation vocabulary As an AI Studio Creator, I should see smooth, restrained motion so that the product feels premium and never frantic.

• Provenance: explicit.
• Lifecycle: trigger — page load, navigation, hover, generation; input — the motion definitions; observable result — Framer Motion drives fade, slide, scale, hover, glow, page transition, and skeleton loading with smooth easing; access state — none; failure/recovery — if motion is unavailable or reduced, content appears immediately in its final state; continuation — the creator continues working.
• Acceptance: all seven listed animation types are present; motion is not too fast or excessive; prefers-reduced-motion is honored.

FR-20 — Branding and logo As an AI Studio Creator, I should see the ADRIAN AI STUDIO name and a simple pink logo based on an AI sparkle plus the letter A so that the brand is recognizable everywhere.

• Provenance: explicit.
• Lifecycle: trigger — rendering the brand mark; input — the logo asset; observable result — the name ADRIAN AI STUDIO and a pink AI-sparkle-plus-A mark render legibly in light mode, dark mode, mobile, and as a favicon; access state — none; failure/recovery — if the mark fails to load, the wordmark remains legible; continuation — the creator continues working.
• Acceptance: the logo is legible in all four required contexts.

FR-21 — Responsive behavior As an AI Studio Creator, I should see the pink design hold up on desktop, laptop, tablet, Android, and iPhone so that the studio is usable on any device.

• Provenance: explicit.
• Lifecycle: trigger — viewport change; input — the responsive layout rules; observable result — the design remains visually correct at desktop, laptop, tablet, Android, and iPhone widths; mobile navigation uses a pink active indicator; access state — none; failure/recovery — if a layout breaks, content reflows rather than clipping readable text or controls; continuation — the creator continues working.
• Acceptance: the design is visually correct at all five device classes; mobile navigation shows a pink active indicator.

FR-22 — Whole-application pink consistency As an AI Studio Creator, I should see pink as the primary identity on every page so that the studio feels like one product.

• Provenance: explicit.
• Lifecycle: trigger — visiting any page; input — the shared design system; observable result — every page carries the pink identity consistently; access state — none; failure/recovery — a page that drifts from the system is corrected to the shared tokens; continuation — the creator moves between pages without a visual break.
• Acceptance: all five pages share the pink identity with no page reverting to a blue/purple/cyan primary accent.

4. User Personas

AI Studio Creator

Product context. The primary active human in ADRIAN AI STUDIO. This person uses the studio as a working instrument: they hold conversations with the AI assistant, generate images, and write and edit text. They are a creator, marketer, or small-team member who wants a tool that feels like a premium product rather than a utility, and who works across all three creation surfaces in a single session.

Primary goal. Produce and refine finished creative output — chat responses, generated images, and written text — through a studio that feels elegant, futuristic, and professional.

Distinct accepted responsibilities. The Creator is the only persona who operates the three creation workspaces. Their work is differentiated by surface: in AI Chat they compose and send messages and read AI responses; in AI Image they issue generation requests and review generated images; in AI Writer they write and edit text, apply toolbar tools, and generate text. They also navigate between these surfaces through the Dashboard shell and monitor their credit state via the topbar pill.

Relevant inputs and decisions. The message they type and send; the image generation request they issue; the text they write, the tools they select, and the generation they trigger. Their recurring decision is which tool to use for the output they need, and whether a generated result is good enough to keep or worth regenerating.

Interactions with other accepted participants. The Creator interacts with the AI assistant inside AI Chat, which produces the AI message cards they read. They do not interact with the Studio Visitor within the studio; the Visitor's journey ends where the Creator's begins.

Observable success. Finished creative work produced through the pink-branded studio surfaces: a completed conversation thread, a set of generated images on white cards, and a written document in the white editor. Their progress is visible through the active-navigation state, the credit pill, and the generation treatments that mark work in progress.

Source-backed constraints. The Creator works within a pink identity where blue, purple, and cyan are never primary accents, gradients appear only in the permitted places, and motion stays smooth and restrained. Their destructive actions are marked with a red distinct from the brand pink.

Studio Visitor

Product context. A prospective user who arrives at the Landing Page without any prior relationship to the product. They are evaluating whether ADRIAN AI STUDIO is the kind of tool they want to use, and they form that judgment from the hero composition, the headline, and the two entry CTAs.

Primary goal. Understand what the studio does and decide whether to enter it.

Distinct accepted responsibilities. The Visitor is the only persona who occupies the anonymous public entry surface. Their responsibility is to read the hero headline "Create Anything. Powered by AI.", take in the floating AI-tool cards that preview Chat, Image, and Writer, and choose an entry path. This is a materially different responsibility from the Creator's: it is evaluative and pre-entry, with no workspace state, no generation, and no persistent output.

Relevant inputs and decisions. The headline and its pink-gradient "AI" highlight; the floating glass AI-tool cards showing what each tool does; the two CTAs. Their decision is which CTA to activate — [Start Creating] to begin creating, or [Explore AI Tools] to look at the tools first.

Interactions with other accepted participants. The Visitor does not interact with the AI Studio Creator. Their journey is the on-ramp that precedes the Creator's work; the handoff is the CTA activation that carries them into the studio surfaces.

Observable success. Entry into the creation workflow via [Start Creating] or [Explore AI Tools].

Source-backed constraints. The Visitor sees the hero on a very soft white/pink background with the pink glowing orb, soft gradient blur, floating AI cards, glassmorphism panels, and subtle particles. The headline and CTAs stay whole and inside the viewport at 375px, 768px, and 1280px, and no decorative element covers any part of them.

5. Core User Flows

Flow 1 — Studio Visitor evaluates the product and enters the studio

1. The Studio Visitor arrives at the Landing Page anonymously, with no account and no prior state.
2. The hero renders on a very soft white/pink background: the pink glowing orb bleeds off the right edge, soft gradient blur sits behind the content, three glassmorphism AI-tool cards (Chat, Image, Writer) float over the orb at different depths, and subtle pink particles drift across the band at low opacity.
3. The Visitor reads the headline "Create Anything. Powered by AI.", with the word "AI" filled by the pink gradient and the rest in #2A1720.
4. The Visitor reads the three floating AI-tool cards to understand what each tool produces.
5. The Visitor decides between the two entry paths and activates one:
   • [Start Creating] — a capsule filled with the pink gradient with a soft pink glow shadow, carrying them into the studio creation surfaces.
   • [Explore AI Tools] — a white capsule with a 1px #EC4899 border, carrying them to the AI tool surfaces.
6. Observable result: the Visitor has entered the studio and the Landing Page's role is complete.
7. Failure and recovery: if a CTA target fails to load, the CTA remains visible and re-activatable; the Visitor can retry or remain on the landing page and re-read the tool cards. No dead-end state occurs.
8. Continuation: the Visitor proceeds into the studio as an AI Studio Creator.

Flow 2 — AI Studio Creator orients in the studio shell

1. The AI Studio Creator enters the Dashboard shell.
2. The fixed 264px white sidebar renders with the studio's destinations; the active item is a #FCE7F3 capsule with a 3px vertical pink gradient rail on its left edge, a #EC4899 icon, and a #DB2777 label. Inactive items show gray icons.
3. The 64px white topbar renders with a very soft pink hairline bottom border and a matching gradient hairline running its full width; the credit indicator appears as a pink gradient pill with tabular numerals pinned right.
4. The Creator selects a destination — AI Chat, AI Image, or AI Writer — and the active-navigation state moves to that item.
5. Observable result: the selected workspace loads inside the shared frame (left control rail, centre canvas, right history drawer that slides over on tablet).
6. Failure and recovery: if a workspace fails to load, the shell, sidebar, and topbar remain intact and the Creator re-selects the destination to retry.
7. Continuation: the Creator works in the selected workspace.
8. Mobile variant: under 768px the sidebar collapses to a bottom bar whose active indicator is a pink gradient underline; the same navigation and the same active-state clarity are preserved.

Flow 3 — AI Studio Creator holds a conversation in AI Chat

1. The Creator opens AI Chat from the Dashboard.
2. The conversation thread renders: prior user messages as pink gradient bubbles and prior AI messages as white/soft pink cards. If the conversation is new, the thread is empty and the composer is ready.
3. The Creator types a message and activates the pink circular send button.
4. The message appears immediately as a pink gradient bubble.
5. While the AI response is pending, three pink animated dots run on a staggered 1.2s loop, and a pink gradient stroke traces the canvas border while a soft-pink shimmer skeleton holds the response space.
6. The AI response arrives as a white/soft pink card, scaling in from 0.98 with a blur-out.
7. Observable result: the conversation thread contains the Creator's pink gradient bubble and the AI's white/soft pink card.
8. Failure and recovery: if the response fails, the pending indicator resolves to a recoverable state and the composer remains usable so the Creator can resend; the thread is not lost.
9. Continuation: the Creator continues the conversation or moves to another workspace.

Flow 4 — AI Studio Creator generates an image in AI Image

1. The Creator opens AI Image from the Dashboard.
2. The workspace renders with the generate button as a pink gradient. If no images exist yet, the canvas shows the generate affordance rather than an empty grid.
3. The Creator issues a generation request and activates the pink gradient generate button.
4. While generating, a pink gradient stroke traces the active canvas border and a soft-pink shimmer skeleton holds the space where the image will appear.
5. The generated image appears on a white card with a soft shadow, scaling in from 0.98 with a blur-out.
6. The Creator hovers a card to inspect it: the card scales to 1.02 and gains a pink border with a pink hover glow.
7. Observable result: the generated image is present on a white card in the workspace.
8. Failure and recovery: if generation fails, the generate button remains available and previously generated images remain in the workspace; the Creator can regenerate.
9. Continuation: the Creator reviews existing images or generates another.

Flow 5 — AI Studio Creator writes and generates text in AI Writer

1. The Creator opens AI Writer from the Dashboard.
2. The workspace renders with a white editor, a soft pink toolbar, and a pink gradient generate button. If the document is empty, the editor shows with the toolbar and generate button ready.
3. The Creator writes or edits text directly in the white editor.
4. The Creator selects a tool from the soft pink toolbar; the active tool renders in pink.
5. The Creator activates the pink gradient generate button.
6. While generating, a pink gradient stroke traces the canvas border and a soft-pink shimmer skeleton holds the space; the generated text then appears, scaling in from 0.98 with a blur-out.
7. Observable result: the generated or edited text is present in the white editor with the active tool clearly marked in pink.
8. Failure and recovery: if generation fails, the existing document is preserved and the generate button remains available; the Creator can regenerate or continue editing without losing written content.
9. Continuation: the Creator continues editing, applies another tool, or moves to another workspace.

Flow 6 — AI Studio Creator works across modes and devices

1. The Creator is working in any studio workspace in light mode, with the canonical pink identity applied: #FFF7FA ground, #FFFFFF cards, #FBCFE8 hairlines, #EC4899 as the single saturated signal.
2. The Creator switches to dark mode. The identity inverts to #160B10 ground, #211018 cards, #4A1D32 borders, and #F472B6 primary, with the same gradient logic at low-opacity pink glows. No pure black appears anywhere.
3. The Creator moves between AI Chat, AI Image, and AI Writer. Page transitions cross-fade with a 12px upward slide, and the active-navigation state follows them.
4. The Creator resizes or changes device across desktop, laptop, tablet, Android, and iPhone. The pink design remains visually correct at every width; on mobile the sidebar becomes a bottom bar with a pink active indicator.
5. Observable result: the studio presents one consistent pink identity across both modes, all three workspaces, and all five device classes.
6. Failure and recovery: if a layout breaks at a given width, content reflows rather than clipping readable text or controls; headlines, labels, numbers, and controls stay entirely inside the viewport and their container.
7. Continuation: the Creator continues working without a visual break between surfaces.

6. Visuals Colors and Theme

Muse and headline. Karim Rashid — Sensual pop minimalism, retuned as a pink premium AI instrument. Rashid's native language is glossy, organic, colour-as-material minimalism: capsule and blob geometry, luminous grounds, and glossy highlights that read as premium technology rather than cosmetics. That is exactly the register the brief demands — soft glassmorphism, elegant futuristic surfaces, glowing orbs, and gradient accents, with pink as a designed, engineered material rather than a cute one.

Light mode tokens (canonical identity).

Dark mode tokens.

Gradient. linear-gradient(135deg, #EC4899, #F472B6, #FB7185) — pink→rose, pink→soft pink, rose→peach. Permitted only on hero, CTA, primary buttons, AI generation highlights, active navigation, important statistics, and decorative elements. Never a full-page wash.

Proportion. Roughly 70% pink-washed neutral ground, 20% white surfaces, 10% saturated pink gradient used as signal.

Typography. Headings: Plus Jakarta Sans, extra-bold (800), tracking −0.02em, set flush-left so the pink gradient can sit inside a single word. Labels and nav items: 600 weight, uppercase, +0.08em tracking, small — the instrument-panel voice. Body: Manrope 400/500 at 17px with 1.7 leading. Scale: 1.25 modular — display clamp(44px, 11vw, 128px) / h2 clamp(30px, 5vw, 56px) / h3 26px / lead 20px / body 17px / label 12px uppercase tracked. (The user's brief permits Inter or Plus Jakarta Sans; Plus Jakarta Sans is selected for headings, with Manrope for body.)

Shape language. Soft continuous curves as a system: cards and panels 18–24px radius, buttons and pills fully capsule (999px), inputs capsule or 16px, section dividers as wide low curves rather than straight rules. No sharp corners except inside data tables, where 4px keeps rows honest. Glossy highlight arcs — a 1px light stroke along the top edge of glass panels — are the recurring material signature.

Spacing rhythm. 4/8pt scale throughout; content column maxes at 1200px with 24px gutters at 375px, 40px at 768px, 64px at 1280px.

Imagery style. No photography of people, no stock. The imagery is the product's own output and the material itself: generated image thumbnails on white cards, glossy 3D primitives (soft pink torus, capsule, sphere) rendered with a single studio highlight, gradient light orbs as soft-blurred radial fields, and thin luminous connector lines that read as data flow. Decorative glass panels carry a 1px top highlight and 8% pink inner glow. Icons are Lucide throughout, stroke 1.75, gray at rest, #EC4899 when active — never multicoloured.

Logo. A single continuous-stroke "A" whose crossbar resolves into a four-point AI sparkle, drawn as one unbroken path in pink so it survives favicon scale and stays legible in light mode, dark mode, mobile, and as a favicon.

7. Signature Design Concept

The Pink Light Instrument.

The public entry is a full-viewport #FFF7FA band — not a centred SaaS stack. The left two-thirds carries "Create Anything." in Plus Jakarta Sans 800 at clamp(44px, 11vw, 128px), flush-left and allowed to run to the viewport edge on desktop, with "Powered by AI." as a second line one step smaller and the word "AI" filled with the 135deg pink gradient while the rest stays #2A1720. Type is the dominant object.

Directly beneath, a left-aligned action row: [Start Creating] as a capsule filled with the pink gradient and a soft pink glow shadow, and [Explore AI Tools] as a white capsule with a 1px #EC4899 border.

The right third bleeds off the right edge with a large radial pink light orb (#EC4899 → #FB7185 → transparent) at roughly 60% viewport width, softly blurred. Three glassmorphism AI-tool cards — Chat, Image, Writer — float over it at different depths and slight rotations, each with a 1px #FBCFE8 border, an 8% pink inner glow, a 1px top highlight arc, a real Lucide icon, and one line of live-looking output. Faint pink particles drift across the whole band at 6% opacity.

The orb and cards are decorative and may be cropped; every headline word, CTA, and card label stays whole and inside the viewport at 375px, 768px, and 1280px, with the cards reflowing to a single stacked column under the headline on mobile. This concept recomposes only accepted content, states, and controls — it adds no new behaviour, page, or destination.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: webgl

Landing Hero Motion Brief.

• Focal subject. The pink radial light orb bleeding off the right edge, with the three floating glass AI-tool cards (Chat, Image, Writer) suspended over it at different depths and slight rotations.
• Input → transformation → outcome thesis. As the pointer moves across the hero band, the orb and the floating cards shift on independent parallax paths, so the layered depth of the composition resolves; the "AI" word's pink gradient sweeps once on load, and the orb breathes on a 9s scale/opacity loop. The outcome is a hero that reads as a live, dimensional instrument rather than a static banner — using only the accepted hero elements and CTAs.
• Motion vocabulary. Framer Motion with cubic-bezier(0.22, 1, 0.36, 1) at 320–520ms for entrances and 140ms for control feedback. The orb breathes on a 9s loop; floating cards drift on independent 12–18s paths with pointer parallax; the "AI" gradient sweeps once on load. Generation states are the signature gesture: a pink gradient border traces the active canvas while a shimmer skeleton replaces content, then results scale in from 0.98 with a 24px blur-out. The typing indicator is three pink dots on a staggered 1.2s loop. Page transitions cross-fade with a 12px upward slide. Motion is expressive but never bouncy, never too fast, never excessive.
• Composed first frame. The #FFF7FA band at rest: "Create Anything." flush-left at display scale with "AI" already carrying the pink gradient, "Powered by AI." beneath it, the two CTAs in their left-aligned row, the blurred pink orb bleeding off the right edge, and the three glass cards settled at their resting depths with their top highlight arcs catching the light.
• Reduced-motion state. With prefers-reduced-motion, all loops stop: the orb holds its resting scale and opacity, the floating cards settle into their resting positions without drift or parallax, the "AI" gradient holds its final fill, marquees become static wrapped rows, and entrances become instant opacity changes. Every headline word, CTA, and card label remains whole and readable.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED.

A single crafted real-time object: a glossy soft-pink torus-and-capsule cluster rendered with one studio highlight, suspended in the hero's right third and bleeding off the viewport edge, lit by the radial pink orb behind it. The scene shows the product's defining state — a generative instrument at rest, material and luminous — rather than a decorative blob. It responds to pointer position with a slow, damped rotation and a subtle highlight shift, and it never covers or overlaps the headline, the CTAs, or the floating card labels. Under prefers-reduced-motion the object holds a fixed composed pose with no rotation and no highlight animation.

9. Non-Functional Requirements

NFR-1 — Palette fidelity. Every specified light-mode and dark-mode token must resolve to its exact hex value. Provenance: explicit. Rationale: the palette is the identity; approximate values break the brand.

NFR-2 — No blue, purple, or cyan primary accent. Blue, purple, and cyan must not appear as primary colors anywhere in the visual identity, including in charts, links, and focus rings. Provenance: explicit. Rationale: stated hard constraint.

NFR-3 — No full-page gradient. Gradients are limited to hero, CTA, primary buttons, AI generation highlights, active navigation, important statistics, and decorative elements. Provenance: explicit. Rationale: stated hard constraint; a full-page wash destroys the premium read.

NFR-4 — No pure black. Dark mode must avoid pure black backgrounds and pure black text; it uses #160B10 / #211018 / #4A1D32 with #FFF1F7 / #2A1720 text. Provenance: explicit. Rationale: stated hard constraint.

NFR-5 — Danger color separation. Destructive actions must use a red distinct from the primary pink so they remain unambiguous. Provenance: explicit. Rationale: stated hard constraint; brand pink must never signal destruction.

NFR-6 — Icon color restraint. Active icons pink, normal icons gray, with limited icon color variety. Provenance: explicit. Rationale: stated hard constraint.

NFR-7 — Motion restraint. Animations must not be too fast or excessive and must use smooth easing. Provenance: explicit. Rationale: stated hard constraint; the premium register depends on composed motion.

NFR-8 — Logo legibility. The logo must remain legible in light mode, dark mode, mobile, and as a favicon. Provenance: explicit. Rationale: stated hard constraint.

NFR-9 — Responsive integrity. The design must look good on desktop, laptop, tablet, Android, and iPhone, with a pink active indicator in mobile navigation. Provenance: explicit. Rationale: stated requirement.

NFR-10 — Readable text and controls stay whole. Headlines, wordmarks, labels, numbers, card text, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the direction asks, provided they cover no readable text or control. Provenance: explicit (creative direction). Rationale: legibility is non-negotiable at every viewport.

NFR-11 — Reduced-motion support. Full prefers-reduced-motion support: all loops stop, marquees become static wrapped rows, entrances become instant opacity changes, and moving content shows whole items. Provenance: explicit (creative direction). Rationale: accessibility and the direction's own motion contract.

NFR-12 — Glassmorphism restraint. Frosted glass panels are reserved for the hero and floating overlays; the workspace itself stays crisp white. Provenance: explicit (creative direction). Rationale: the direction's material rule; over-applied glass destroys the premium read.

NFR-13 — No childish or cosmetic framing. The UI must not read as childish, and must not resemble a salon, fashion, or cosmetics store website. Provenance: explicit. Rationale: stated hard constraint; the target register is a premium AI technology brand.

10. Tech Stack

• Frontend: React (web application, custom UI across all five surfaces).
• Styling and tokens: CSS custom properties for the light and dark token sets, with the specified palette values as the single source of truth.
• Typography: Plus Jakarta Sans (headings) and Manrope (body), loaded as web fonts with a geometric sans fallback.
• Icons: Lucide Icons, stroke 1.75.
• Animation: Framer Motion, with cubic-bezier(0.22, 1, 0.36, 1) easing and full prefers-reduced-motion handling.
• Hero dimensionality: WebGL / React Three Fiber for the direction-derived hero subject, with a static composed pose under reduced motion.
• Backend: Python / FastAPI for the AI Chat, AI Image, and AI Writer generation endpoints.
• Storage: appropriate persistent storage for conversations, generated images, and written documents.
• Packaging and deployment: Docker / docker-compose. Kubernetes is not required by any accepted requirement and is therefore not specified.

11. Assumptions and Constraints

Assumptions.

• A-1. The redesign is a presentation-and-identity change; the functional behaviour of AI Chat, AI Image, and AI Writer is preserved and only its visual treatment changes. [Assumption — derived from the source, which specifies visual treatment only.]
• A-2. The five pages in the accepted page contract are the complete current information architecture; no additional destinations are introduced by this redesign. [Assumption — grounded in the page contract.]
• A-3. The AI generation endpoints behind Chat, Image, and Writer already exist and are not re-specified here. [Assumption — the source specifies their visual treatment, not their backend.]
• A-4. The credit indicator displays a balance; credit purchase, top-up, and billing are outside this scope. [Assumption — no such capability was requested.]
• A-5. Plus Jakarta Sans is selected for headings from the user's permitted pair (Inter or Plus Jakarta Sans), with Manrope for body copy per the creative direction. [Assumption — the user permitted either heading family.]

Constraints.

• C-1. Blue, purple, and cyan must not be used as primary colors anywhere in the visual identity.
• C-2. Pink must not be mixed with blue or cyan as a primary accent.
• C-3. Gradients must not be applied to entire pages.
• C-4. The UI must not look childish; pink must read as a premium technology brand.
• C-5. The UI must not look like a salon, fashion, or cosmetics store website.
• C-6. Danger actions must use a red distinct from the primary pink.
• C-7. Pure black backgrounds must be avoided in dark mode.
• C-8. Icon colors must stay restrained: active pink, normal gray.
• C-9. Animations must not be too fast or excessive; easing must be smooth.
• C-10. The logo must remain legible in light mode, dark mode, mobile, and as a favicon.
• C-11. The generic indigo/blue-on-white SaaS template is forbidden for this project.
• C-12. Readable text and controls must stay whole at every viewport; where a direction, requirement, brief, or finding asks readable text or a control to be cropped, clipped, covered, or run off an edge, it must be kept whole and the gesture carried with imagery or decoration instead.

12. Glossary

• ADRIAN AI STUDIO — The product name; the generative AI creation suite specified in this document.
• AI Studio Creator — The primary active human persona who produces and refines AI-generated chat, image, and written output.
• Studio Visitor — The anonymous prospective-user persona who evaluates the product on the Landing Page and enters the studio via a CTA.
• AI Chat — The conversation workspace where the Creator sends messages and reads AI responses.
• AI Image — The image-generation workspace where the Creator issues generation requests and reviews generated images.
• AI Writer — The writing workspace with a white editor, soft pink toolbar, and pink gradient generate button.
• Credit indicator — The persistent pink gradient pill in the Dashboard topbar showing the Creator's credit balance.
• Generation treatment — The shared signature gesture used in Chat, Image, and Writer: a pink gradient stroke tracing the active canvas, a soft-pink shimmer skeleton, and a result scaling in from 0.98 with a blur-out.
• Glassmorphism — Frosted translucent panel treatment, reserved for the hero and floating overlays only.
• Pink gradient — linear-gradient(135deg, #EC4899, #F472B6, #FB7185), permitted only on hero, CTA, primary buttons, AI generation highlights, active navigation, important statistics, and decorative elements.
• Active-navigation signature — The sidebar's active item: a #FCE7F3 capsule with a 3px vertical pink gradient rail on its left edge, a #EC4899 icon, and a #DB2777 label; on mobile, a gradient underline indicator on the bottom bar.
• Danger red — #E11D48, a red distinct from the primary pink, used so destructive actions remain unambiguous.
• Reduced motion — The prefers-reduced-motion state in which all loops stop, marquees become static wrapped rows, and entrances become instant opacity changes.