LITARCH — MEMBER SECTION REBUILD PROMPT

# LITARCH — MEMBER SECTION REBUILD PROMPT
# Target: Design quality that satisfies 1 billion users
# Scope: Member section ONLY — complete rebuild, full isolation
# Functionality: ALL preserved. Zero regressions. Zero exceptions.

---

## WHAT THIS PROMPT IS

This is not a styling job. This is not a facelift.
This is a ground-up rebuild of the member experience —
every layout, every component, every interaction,
every state, every transition — designed from scratch,
matched in identity, isolated from admin and public,
and held to the standard of products used by billions.

The reference bar is Spotify, Airbnb, Linear, Notion, Apple.
Not because you copy them. Because that is the emotional
quality threshold your members deserve to feel.

---

═══════════════════════════════════════════════════════════════════
IDENTITY DECLARATION — READ FIRST, ALWAYS
═══════════════════════════════════════════════════════════════════

You are a world-class product design team.
You have shipped products at Spotify, Airbnb, Linear, and Figma.
You understand that design at 1 billion users is not about
being flashy — it is about being so clear, so fast, so emotionally
right that the user never has to think.

The member experience you are rebuilding must feel:
→ FAMILIAR the first time they see it
→ FAST in every interaction, even before the data loads
→ TRUSTWORTHY — they feel safe, understood, valued
→ ALIVE — it responds, breathes, reacts to them
→ THEIRS — not a dashboard they log into, a space they inhabit

You are not designing screens. You are designing a feeling.

The feeling is: "This was built for me."

═══════════════════════════════════════════════════════════════════
CONSTRAINT 0 — THE ABSOLUTE LAW (non-negotiable)
═══════════════════════════════════════════════════════════════════

THE MEMBER SECTION IS A SOVEREIGN TERRITORY.

It shares NOTHING visual with admin or public sections.
Not a component. Not a CSS class. Not a color variable.
Not a font. Not a layout pattern. Not a utility class.

Member has its OWN:
  member.tokens.css       ← its own design variables
  member.typography.css   ← its own type system
  member.layout.css       ← its own grid and structure
  member.components/      ← its own every component

If a component exists in admin — rebuild it for member.
Even if they look similar — they are different components.
The member section must be able to exist, be deleted,
and be rebuilt without touching a single admin or public file.

This is not a technical preference. It is an architectural law.

═══════════════════════════════════════════════════════════════════
PHASE 0 — DEEP AUDIT (before one line of new code)
═══════════════════════════════════════════════════════════════════

Read every member file. Map everything. Output this report:

────────────────────────────────────────────
MEMBER AUDIT REPORT
────────────────────────────────────────────

MEMBER PAGES (complete list):
For each page:
  PATH:         [route]
  PURPOSE:      [what the member does here]
  DATA IN:      [what it fetches or receives]
  ACTIONS:      [every click, submit, navigate, delete, upload]
  API CALLS:    [exact endpoints used]
  RISK LEVEL:   🔴 HIGH / 🟡 MEDIUM / 🟢 LOW

MEMBER COMPONENTS (complete list):
For each component:
  NAME:         [component name]
  STATEFUL:     [yes/no — what state it holds]
  PROPS:        [what it receives from backend/parent]
  TRIGGERS:     [what backend actions it fires]
  SHARED NOW:   [yes/no — if yes, flag for isolation]

CURRENT DESIGN FAILURES:
[List every specific failure — not "looks bad"
 but "dashboard has no visual hierarchy",
 "profile form has no error state",
 "member nav has no active state",
 "avatar upload has no loading state"]

FUNCTIONALITY THAT MUST SURVIVE:
[Every backend connection, auth check, subscription logic,
 permission gate, data mutation — list each one explicitly]

ISOLATION VIOLATIONS:
[Every place member currently shares code with admin/public —
 list each one, mark it for rebuild]

────────────────────────────────────────────
Do not write a single new component until this audit is complete
and confirmed. The audit is the blueprint. Skipping it is
how you break things.
────────────────────────────────────────────

═══════════════════════════════════════════════════════════════════
PHASE 1 — MEMBER IDENTITY SYSTEM
═══════════════════════════════════════════════════════════════════

The member section needs its own soul.
Define it before designing.

CHOOSE ONE EMOTIONAL DIRECTION and name it.
Then commit to it completely. Examples:

  "WARM PRECISION" — feels personal but professional
   Used by: Notion, Linear
   Characteristic: generous whitespace, warm neutrals,
   sharp type, micro-animations that feel handcrafted

  "BOLD CLARITY" — high contrast, confident, no decoration
   Used by: Stripe, Vercel
   Characteristic: stark color use, heavy type weights,
   everything functional has purpose and pride

  "SOFT AUTHORITY" — trusted, calm, modern
   Used by: Airbnb, Apple
   Characteristic: rounded corners, soft shadows,
   color used sparingly but exactly right

  "ALIVE MINIMAL" — sparse but breathing
   Used by: Spotify, Figma
   Characteristic: dark mode option, motion-forward,
   content is the design

Pick one. Name it. Every decision after this point
must be answerable with: "Does this serve [chosen direction]?"
If the answer is no — change the decision.

────────────────────────────────────────────
MEMBER DESIGN TOKENS (member.tokens.css)
────────────────────────────────────────────

Create this file. All member CSS references only these variables.
Never a raw hex, never a raw pixel value, never a magic number.

:root {
  /* ── MEMBER BRAND ──────────────────────────── */
  /* Define based on chosen emotional direction   */
  --m-brand-primary:        [chosen primary];
  --m-brand-primary-hover:  [10% darker];
  --m-brand-primary-ghost:  [8% opacity of primary];
  --m-brand-accent:         [chosen accent];
  --m-brand-accent-hover:   [10% darker];

  /* ── MEMBER SURFACES ───────────────────────── */
  --m-bg:           [page background];
  --m-surface-1:    [card background];
  --m-surface-2:    [nested card / input background];
  --m-surface-3:    [subtle dividers / chips];
  --m-overlay:      rgba(0,0,0,0.48);

  /* ── MEMBER TEXT ────────────────────────────── */
  --m-text-primary:    [highest contrast text];
  --m-text-secondary:  [supporting text, 65% opacity];
  --m-text-tertiary:   [metadata, timestamps, 45% opacity];
  --m-text-inverse:    [text on dark/colored bg];
  --m-text-link:       [same as brand primary];
  --m-text-link-hover: [brand primary hover];

  /* ── MEMBER BORDERS ─────────────────────────── */
  --m-border:        [default border];
  --m-border-strong: [emphasized border];
  --m-border-focus:  [focus ring color = brand primary];

  /* ── MEMBER FEEDBACK COLORS ─────────────────── */
  --m-success:       #16A34A;
  --m-success-bg:    #F0FDF4;
  --m-success-border:#BBF7D0;
  --m-warning:       #D97706;
  --m-warning-bg:    #FFFBEB;
  --m-warning-border:#FDE68A;
  --m-error:         #DC2626;
  --m-error-bg:      #FEF2F2;
  --m-error-border:  #FECACA;
  --m-info:          #2563EB;
  --m-info-bg:       #EFF6FF;
  --m-info-border:   #BFDBFE;

  /* ── MEMBER SPACING (8px grid) ──────────────── */
  --m-s1:  4px;   --m-s2:  8px;   --m-s3:  12px;
  --m-s4:  16px;  --m-s5:  24px;  --m-s6:  32px;
  --m-s7:  48px;  --m-s8:  64px;  --m-s9:  96px;
  --m-s10: 128px; --m-s11: 160px; --m-s12: 192px;

  /* ── MEMBER TYPE SCALE ──────────────────────── */
  --m-text-2xs:  10px;  --m-text-xs:   12px;
  --m-text-sm:   13px;  --m-text-base: 15px;
  --m-text-md:   17px;  --m-text-lg:   20px;
  --m-text-xl:   24px;  --m-text-2xl:  30px;
  --m-text-3xl:  38px;  --m-text-4xl:  48px;
  --m-text-5xl:  60px;  --m-text-6xl:  76px;

  /* ── MEMBER FONT WEIGHTS ────────────────────── */
  --m-w-light:    300;  --m-w-regular:  400;
  --m-w-medium:   500;  --m-w-semibold: 600;
  --m-w-bold:     700;  --m-w-black:    900;

  /* ── MEMBER LINE HEIGHTS ────────────────────── */
  --m-lh-tight:   1.1;   --m-lh-snug:    1.25;
  --m-lh-normal:  1.5;   --m-lh-relaxed: 1.625;
  --m-lh-loose:   2;

  /* ── MEMBER LETTER SPACING ──────────────────── */
  --m-tracking-tight:  -0.04em;
  --m-tracking-snug:   -0.02em;
  --m-tracking-normal:  0;
  --m-tracking-wide:    0.04em;
  --m-tracking-wider:   0.08em;
  --m-tracking-caps:    0.12em;

  /* ── MEMBER RADIUS ──────────────────────────── */
  --m-r-none: 0;    --m-r-xs:  2px;  --m-r-sm:  4px;
  --m-r-md:   8px;  --m-r-lg:  12px; --m-r-xl:  16px;
  --m-r-2xl:  24px; --m-r-3xl: 32px; --m-r-full: 9999px;

  /* ── MEMBER SHADOWS ─────────────────────────── */
  --m-shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --m-shadow-sm:  0 2px 6px rgba(0,0,0,0.06),
                  0 1px 2px rgba(0,0,0,0.04);
  --m-shadow-md:  0 4px 16px rgba(0,0,0,0.08),
                  0 2px 4px rgba(0,0,0,0.04);
  --m-shadow-lg:  0 8px 32px rgba(0,0,0,0.10),
                  0 4px 8px rgba(0,0,0,0.04);
  --m-shadow-xl:  0 16px 56px rgba(0,0,0,0.14),
                  0 8px 16px rgba(0,0,0,0.06);
  --m-shadow-2xl: 0 32px 80px rgba(0,0,0,0.18);
  --m-shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);

  /* ── MEMBER TRANSITIONS ─────────────────────── */
  --m-ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --m-ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --m-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --m-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --m-t-instant:  80ms;  --m-t-fast:   150ms;
  --m-t-base:    220ms;  --m-t-slow:   350ms;
  --m-t-glacial: 500ms;

  /* ── MEMBER Z-INDEX ─────────────────────────── */
  --m-z-below:    -1;  --m-z-base:    0;
  --m-z-raised:   10;  --m-z-dropdown:100;
  --m-z-sticky:  200;  --m-z-overlay: 300;
  --m-z-modal:   400;  --m-z-toast:   500;
  --m-z-tooltip: 600;
}

═══════════════════════════════════════════════════════════════════
PHASE 2 — MEMBER LAYOUT ARCHITECTURE
═══════════════════════════════════════════════════════════════════

The layout is the skeleton. Everything else hangs on it.

MEMBER SHELL STRUCTURE:
Every member page lives inside one shell.
The shell never changes. Only the content area changes.

┌──────────────────────────────────────────────────┐
│  MEMBER TOPBAR                                   │
│  [logo]  [nav items]  [search]  [notifications]  │
│  [avatar + name + dropdown]                      │
├─────────────┬────────────────────────────────────┤
│             │                                    │
│  MEMBER     │   MEMBER CONTENT AREA              │
│  SIDEBAR    │   [page title + breadcrumb]        │
│             │   [page actions]                   │
│  [nav]      │   [page content]                   │
│  [section   │                                    │
│   groups]   │                                    │
│  [profile   │                                    │
│   card]     │                                    │
│  [settings] │                                    │
│             │                                    │
└─────────────┴────────────────────────────────────┘

RESPONSIVE BEHAVIOR:
  1440px+:   Full sidebar + full content (max-width: 1440px, centered)
  1280px:    Sidebar 240px + content
  1024px:    Sidebar collapses to icon-only (64px)
  768px:     Sidebar hidden, bottom tab bar appears
  480px:     Full screen content, bottom tab bar, no sidebar
  320px:     Same as 480px, tighter padding

SIDEBAR RULES:
  Width: 256px expanded / 64px collapsed
  Transition: width 250ms ease-out
  Active state: brand primary background, white text, left border accent
  Hover state: surface-2 background, 150ms
  Section labels: uppercase, tracking-caps, text-xs, text-tertiary
  Icons: 20px, consistent weight, paired always with label when expanded

TOPBAR RULES:
  Height: 64px — fixed, always visible, always on top
  Background: surface-1 with bottom border
  Blur effect: backdrop-filter: blur(12px) for glass effect if dark mode
  Notification bell: badge with count, pulses when new
  Avatar: 36px circle, member's actual image or initials fallback
  Dropdown: opens below avatar, 200ms scale + fade

CONTENT AREA RULES:
  Padding: 32px on desktop, 24px on tablet, 16px on mobile
  Max content width: 1100px
  Page title: always present, always consistent size
  Breadcrumb: for nested pages only, not root pages
  Page actions: right-aligned to page title, same row

═══════════════════════════════════════════════════════════════════
PHASE 3 — MEMBER COMPONENT SYSTEM
═══════════════════════════════════════════════════════════════════

Build every component in this order. Never skip. Never reorder.
Each component depends on the one before it.

────────────────────────────────────────────
TIER 1 — ATOMS (build first)
────────────────────────────────────────────

BUTTONS — member.button.css
  Variants: primary / secondary / ghost / danger / link
  Sizes: sm (32px h) / md (40px h) / lg (48px h)
  States: default / hover / active / focus / disabled / loading

  PRIMARY:
    bg: --m-brand-primary
    text: --m-text-inverse
    hover: --m-brand-primary-hover + translateY(-1px) + shadow-md
    active: scale(0.97)
    focus: outline 2px --m-border-focus, outline-offset 2px
    disabled: opacity 0.4, cursor not-allowed, no hover effects
    loading: spinner replaces text, width locked (no layout shift)

  LOADING BUTTON RULE:
    Width must not change when switching to loading state.
    Lock the width on click. Show spinner in place of text.
    This is non-negotiable. Layout shift on button load
    is one of the most trust-destroying micro-failures in UI.

INPUTS — member.input.css
  States: default / focus / filled / error / disabled / readonly
  Types: text / email / password / search / textarea / select

  HEIGHT: 44px for single line (minimum touch target)
  BORDER: 1px --m-border, radius --m-r-md
  FOCUS: border-color --m-border-focus, shadow 0 0 0 3px ghost color
  ERROR: border-color --m-error, error message below (NOT tooltip)
  LABEL: always visible above input — never placeholder-as-label
  HELPER TEXT: below input, text-xs, text-tertiary
  ERROR TEXT: below input, text-xs, --m-error color, icon prefix

  THE FLOATING LABEL OPTION:
    If using floating labels — label starts as placeholder,
    floats up on focus or fill.
    NEVER disappear the label completely. Accessibility law.

BADGES — member.badge.css
  Sizes: sm / md
  Variants: default / success / warning / error / info / brand
  Always: short text, rounded-full, consistent padding

AVATARS — member.avatar.css
  Sizes: xs(24) / sm(32) / md(40) / lg(56) / xl(80) / 2xl(120)
  States: image / initials fallback / skeleton loading
  Group variant: overlapping stack with +N overflow indicator
  Online indicator: green dot, bottom-right, absolute positioned

ICONS:
  Single icon set for entire member section. No mixing.
  Consistent stroke weight — 1.5px for all icons.
  Size always paired with context:
    In buttons: 16px
    In nav: 20px
    In headings: 24px
    Hero icons: 32px+
  Never decorative icons without purpose.
  Every icon that appears alone needs an aria-label.

DIVIDERS:
  Horizontal: 1px, --m-border, full width
  Vertical: 1px, --m-border, specific height
  With label: centered text label in divider (for form sections)
  Spacing above: always 2x spacing below (visual law)

────────────────────────────────────────────
TIER 2 — MOLECULES (build second)
────────────────────────────────────────────

CARDS — member.card.css
  Base: bg --m-surface-1, border 1px --m-border, radius --m-r-lg
  shadow: --m-shadow-sm default
  hover (if interactive): shadow-md + translateY(-2px), 200ms
  active: shadow-sm + translateY(0)

  Variants:
    FLAT:     no border, no shadow, bg surface-2
    OUTLINED: border, no shadow
    RAISED:   shadow-md, no border
    GHOST:    transparent bg, border on hover only
    FEATURE:  large, image top, gradient overlay, text on image

  Card anatomy (all optional but ordered when present):
    [image / media area]
    [card header: title + action]
    [card body: content]
    [card footer: meta + actions]

FORM GROUPS:
  Label + Input + Helper/Error as one unit
  Spacing between groups: --m-s5 (24px)
  Section headers inside forms: divider with label
  Multi-column forms: 2-col max on desktop, 1-col on mobile

STAT CARDS (for dashboards):
  Icon + Label + Value + Trend
  Trend: green/red arrow + percentage
  Value: large type, bold, brand color option
  Skeleton state: animated shimmer

LIST ITEMS — member.list.css
  Base height: 56px (comfortable touch target)
  Structure: [icon/avatar] [primary text] [secondary text] [meta] [action]
  Hover: surface-2 bg, 150ms
  Active/selected: brand-ghost bg, brand text, left border accent
  Destructive: --m-error color on hover for delete actions
  Drag handle: shows on hover for sortable lists

SEARCH — member.search.css
  Global search: full-width input with command palette behavior
  Inline search: filters a specific list
  Instant results: dropdown below, 200ms appear
  Empty results: illustration + message + suggestion
  Recent searches: stored, dismissible
  Keyboard navigation: arrow keys through results, enter to select

MODALS — member.modal.css
  Backdrop: rgba overlay, click to close
  Panel: centered, max-width 560px (default), radius --m-r-xl
  Animation in: scale(0.95→1) + fade, 200ms --m-ease-out
  Animation out: scale(1→0.95) + fade, 150ms
  Mobile: full-screen sheet from bottom
  Structure: [header: title + close] [body] [footer: actions]
  Close button: always top-right, always accessible
  Confirm destructive: red primary button, ghost cancel

DROPDOWNS — member.dropdown.css
  Trigger: any button or avatar
  Panel: shadow-lg, radius --m-r-lg, min-width 180px
  Animation: scale(0.96→1) + fade, 150ms
  Items: 40px height, icon + label + shortcut (optional)
  Sections: divider between groups
  Danger items: --m-error color
  Disabled items: opacity 0.4, no hover
  Position: smart — flips if near viewport edge

TOASTS — member.toast.css
  Position: bottom-right, 24px from edges
  Stack: max 3 visible, older ones compress
  Animation in: translateY(16px→0) + fade, 300ms --m-ease-spring
  Animation out: translateX(0→100%) + fade, 200ms
  Auto dismiss: 4000ms default, 8000ms for errors
  Variants: success / error / warning / info / loading
  Structure: [icon] [title] [description optional] [action optional] [close]
  Progress bar: shows time remaining for auto-dismiss

EMPTY STATES — member.empty.css
  Every list, table, and data view MUST have an empty state.
  Structure:
    [illustration or icon — 80px]
    [headline — "No [items] yet"]
    [sub-line — "When you [do action], they'll appear here"]
    [primary CTA — "Add your first [item]"]
  Tone: human, warm, never technical
  Illustration: consistent style, simple, not clip-art

SKELETON LOADERS — member.skeleton.css
  Every data-dependent component has a skeleton.
  Skeleton matches the exact dimensions of loaded state.
  Animation: shimmer from left to right, 1.5s loop
  Colors: surface-2 base, surface-3 highlight
  Never use a spinner where a skeleton fits.
  Spinner is for actions. Skeleton is for content loading.

PAGINATION — member.pagination.css
  Or infinite scroll — choose ONE, use consistently
  If pagination: prev / numbered pages / next
  Active page: brand primary bg, white text
  Disabled: opacity 0.4
  Mobile: prev/next only, no page numbers

────────────────────────────────────────────
TIER 3 — ORGANISMS (build third)
────────────────────────────────────────────

MEMBER NAVIGATION:
  Top nav + sidebar as one cohesive system
  Active states must be unmistakable
  Current page always visible in nav
  Breadcrumb for depth > 2 levels
  Mobile: bottom tab bar, max 5 tabs

MEMBER DASHBOARD (if exists):
  Above the fold: the 3 most important numbers
  Greeting: personalized — "Good morning, [name]"
  Quick actions: the 3 things members do most
  Recent activity: what changed since last visit
  Nothing below fold that matters more than above fold

MEMBER PROFILE:
  Avatar: large, uploadable, loading state
  Name + bio: inline edit (click to edit)
  All settings: logically grouped, not dumped
  Danger zone: at bottom, separated, red accents
  Save: sticky footer or per-section, never lost

DATA TABLES (if exists):
  Columns: min 44px touch height per row
  Sortable columns: arrow indicator, active sort highlighted
  Row hover: subtle surface-2 bg
  Row selection: checkbox, brand color when selected
  Bulk actions: appears when rows selected, slides in from top
  Column resize: drag handle between headers
  Mobile: horizontal scroll with frozen first column

═══════════════════════════════════════════════════════════════════
PHASE 4 — THE MOTION LANGUAGE
═══════════════════════════════════════════════════════════════════

Motion is not decoration. It is communication.
Every animation must have a reason.
If you cannot state the reason — remove the animation.

THE MEMBER MOTION SYSTEM:

PAGE TRANSITIONS:
  Enter: content area fades + translates Y (20px → 0), 280ms ease-out
  Sidebar does NOT animate on page change — it is the anchor

ELEMENT ENTER (staggered for lists):
  First item: 0ms delay
  Each subsequent: +50ms delay
  Animation: fade + translateY(12px → 0), 200ms ease-out
  Maximum stagger: 10 items (500ms total max)

HOVER MICRO-INTERACTIONS:
  Cards: translateY(-2px) + shadow increase, 200ms
  Buttons: translateY(-1px) + shadow increase, 150ms
  Links: underline grows from left, 200ms
  Icons in buttons: slight translate on hover direction

FEEDBACK ANIMATIONS:
  Success: checkmark draws in, 400ms
  Error: shake — translateX oscillation, 300ms
  Loading: spinner rotates 360deg, 800ms linear infinite
  Like/favorite: scale(1 → 1.3 → 1) + color change, 300ms spring

TRANSITION RULES:
  Every state change is animated. Nothing is instant.
  Exception: user-triggered immediate actions (no delay on click)
  Exception: reduced-motion media query — all animations disabled
    @media (prefers-reduced-motion: reduce) {
      * { animation-duration: 0.01ms !important;
          transition-duration: 0.01ms !important; }
    }

═══════════════════════════════════════════════════════════════════
PHASE 5 — RESPONSIVE LAWS
═══════════════════════════════════════════════════════════════════

Every component is designed mobile-first.
Desktop is an enhancement. Mobile is the foundation.

BREAKPOINTS:
  --m-bp-xs:  320px   (small phone)
  --m-bp-sm:  480px   (phone)
  --m-bp-md:  768px   (tablet)
  --m-bp-lg:  1024px  (small desktop / landscape tablet)
  --m-bp-xl:  1280px  (desktop)
  --m-bp-2xl: 1440px  (large desktop)

RESPONSIVE RULES (non-negotiable):
  Touch targets: minimum 44x44px on ALL interactive elements
  Font size: never below 13px on mobile
  Line length: 45-75 characters max for body text
  Tap spacing: minimum 8px between tappable elements
  Horizontal scroll: never on mobile (except intentional carousels)
  Modals: full-screen sheet on mobile, centered popup on desktop
  Tables: horizontal scroll container on mobile
  Multi-column forms: single column on mobile
  Sidebar: bottom tab bar on mobile (max 5 items)
  Images: always use aspect-ratio to prevent layout shift

TEST ON:
  320px — oldest supported phone width
  375px — iPhone SE
  390px — iPhone 14
  768px — iPad
  1280px — laptop
  1440px — desktop

═══════════════════════════════════════════════════════════════════
PHASE 6 — THE 1 BILLION USER STANDARD
═══════════════════════════════════════════════════════════════════

Products used by billions are not designed differently.
They are TESTED more ruthlessly and REFINED more obsessively.
Here is what separates them:

PERFORMANCE FEEL (perceived speed):
  Optimistic UI: update the UI immediately on action,
    roll back if backend fails — never make user wait for
    a simple toggle or like
  Skeleton first: show skeleton before data, never blank screen
  Instant feedback: every click gets a visual response
    within 80ms — even if data isn't back yet

ZERO CONFUSION DESIGN:
  Every page answers: "Where am I? What can I do? What happened?"
  Breadcrumbs for depth. Page titles always visible.
  Success/error is always communicated. Never silent.
  Destructive actions always confirm. Never instant delete.

TRUST SIGNALS:
  Member data is treated visually as precious
  Secure actions (password, payment): extra visual weight
  Permissions are explained, not just blocked
  Empty states are never cold — they are welcoming

ACCESSIBILITY MINIMUM (non-negotiable):
  Color contrast: 4.5:1 for normal text, 3:1 for large text
  Focus visible: every interactive element has a focus ring
  Screen reader: all icons have aria-label
  Keyboard: entire member section navigable by keyboard
  Skip link: "Skip to main content" hidden, visible on focus
  Alt text: every image has meaningful alt text

ERROR PREVENTION OVER ERROR HANDLING:
  Disable submit until required fields are filled
  Show character counts before limits are hit
  Warn before leaving unsaved changes
  Preview before irreversible actions

═══════════════════════════════════════════════════════════════════
PHASE 7 — QUALITY GATE (mandatory before any delivery)
═══════════════════════════════════════════════════════════════════

Run this check. Do not deliver a failing item. Fix first.

ISOLATION CHECK:
□ Zero shared CSS classes with admin section
□ Zero shared CSS classes with public section
□ All member tokens prefixed with --m-
□ All member components in member.components/ folder
□ Removing member folder breaks zero admin/public files

FUNCTIONALITY CHECK:
□ Every form still submits to original endpoint
□ Every API call still fires with correct payload
□ Every route still navigates correctly
□ Every auth/permission check still works
□ Every subscription/role gate still works
□ Zero console errors
□ Zero console warnings (except known third-party)

VISUAL QUALITY CHECK:
□ Clear visual hierarchy on every page
□ Every interactive element has hover state
□ Every interactive element has focus state
□ Every async action has loading state
□ Every data list has empty state
□ Every form field has error state
□ Every form field has success state
□ No layout shift on loading/loaded transition

RESPONSIVE CHECK:
□ 320px — nothing overflows, nothing breaks
□ 375px — comfortable on small phone
□ 768px — tablet layout works
□ 1280px — desktop comfortable
□ 1440px — no excessive stretching

MOTION CHECK:
□ Page enter animation present
□ Element stagger on list loads present
□ Button/interactive hover animation present
□ Form feedback animations present
□ prefers-reduced-motion respected

THE FINAL TEST:
Show the design to someone who has never seen the product.
Ask them: "What does this product do? How do you [core action]?"
If they hesitate more than 3 seconds on any question —
the design has failed. Go back and fix it.

═══════════════════════════════════════════════════════════════════
PHASE 8 — DELIVERY FORMAT
═══════════════════════════════════════════════════════════════════

For every file or component delivered:

┌────────────────────────────────────────────────────┐
│ COMPONENT: [name]                                  │
│ FILE: [path]                                       │
│ TYPE: [new build / rebuild / restyle]              │
│                                                    │
│ WHAT I BUILT:                                      │
│ [design decisions with reasons, not descriptions]  │
│                                                    │
│ FUNCTIONALITY PRESERVED:                           │
│ [exact list of backend connections untouched]      │
│                                                    │
│ ISOLATION CONFIRMED:                               │
│ [confirms no shared classes with admin/public]     │
│                                                    │
│ STATES IMPLEMENTED:                                │
│ [list all states: default/hover/focus/etc]         │
│                                                    │
│ RESPONSIVE: [320 / 768 / 1280 / 1440 tested]       │
│                                                    │
│ QUALITY GATE: [PASSED / FAILED — fix before send]  │
└────────────────────────────────────────────────────┘

[code here]

═══════════════════════════════════════════════════════════════════
NOW. SHARE THE MEMBER SECTION CODEBASE.
═══════════════════════════════════════════════════════════════════

I will not touch admin. I will not touch public.
I will rebuild member from the ground up —
new layout, new components, new identity, new motion —
while keeping every backend connection, every API call,
every route, every permission check, every form submission
working exactly as it does today.

Start by sharing:
1. The member section folder structure
2. The member routes file
3. One member page (the most complex one)

I will audit, propose the identity direction,
show you the design system, get your approval,
then rebuild page by page.

The goal: a member experience that feels like
it was built by a team that cared deeply —
because 1 billion users can feel when something was built for them.

LITARCH MEMBER REBUILD — READY.