Claude Design Prompt — Objectuve Teams: Sub-Community Browser (Invite Acceptance)
Paste the section below the line into Claude Design. Everything above is internal context for whoever's running the prototype.
Source PRD: phase-7-teams-prd.mdTarget moment: §7.2 — new member accepts a Team invite for a multi-sub-community Team, picks 1–3 sub-communities to join. Goal: User-testing-fidelity single screen + lightly interactive (toggle joins, see CTA enable/disable). Fidelity: Match Objectuve design tokens (gradient primary, Outfit + Inter, glassmorphism, dark mode default). Win condition: A coaching-group owner shown this screen says, "Oh — I get it. I'd pick the ones that match what I'm here for."
Prompt to paste into Claude Design
Build a polished, lightly-interactive prototype of a single screen called the Sub-Community Browser, shown to a new member the first time they accept an invite to a multi-community Objectuve Team. Objectuve is a gamified goal-tracking platform with an "anti-social-app" philosophy — short sessions, action over consumption, no dark patterns, calm and confident tone.
The moment
Maya, a productivity coach, runs a paid team called "Habit Lab" on Objectuve. Habit Lab has 47 members and four privately-scoped sub-communities under it. A new member, Devon, just clicked Maya's invite link, signed in, and is now seeing this screen for the first time. He needs to:
- Understand he's joining "Habit Lab" (the Team).
- See he's auto-joined the #welcome default sub-community (already opted in, not toggleable).
- Browse the four other sub-communities and self-select into one or more.
- Continue into the app.
The screen — required content
Top bar / hero
- Team logo + name: Habit Lab (use a circular avatar with a sunrise/leaf monogram)
- Subtitle: "Coached by Maya Okonkwo · 47 members"
- One-line welcome: "You're in. Pick the rooms that match what you're working on — you can join more anytime."
- Subtle progress indicator: "Step 2 of 2 · Almost there"
Default community card (pinned at top, locked-in state)
- Label: #welcome with a small "Default" pill
- Description: "The lobby — team-wide announcements, intros, and Maya's weekly nudges."
- Member count: 47 members
- State: Checked, slightly faded, with copy "You're already in here" — cannot be toggled off.
Sub-community grid (4 cards, toggleable) Each card shows: emoji-style icon, name, one-sentence purpose, member count, lead's first name + avatar, and a join toggle. When toggled on, the card lifts (subtle scale + glow) and shows a soft check.
- 🌅 Morning Movers — "5am club. Daily check-ins on whatever gets you out of bed." · 18 members · Led by Priya
- 📚 Deep Work Pod — "Two 90-minute focus blocks per weekday, plus a Friday recap." · 12 members · Led by Marcus
- 🥗 Quiet Plate — "Slow, judgment-free habit tracking around food and body." · 9 members · Led by Sam (badge: "Request to join" — this one is gated)
- 🧗 Weekend Warriors — "Saturday long-form goal work — endurance, creative projects, big rocks." · 14 members · Led by Jules
Privacy reassurance strip (small, between grid and CTA) A muted card with a soft lock icon:
Maya can see your activity inside Habit Lab — your check-ins, your team goal contributions, and your leaderboard points. She cannot see your personal goals, mood logs, or coach conversations. Ever. With a small "How this works" link.
Footer / CTA
- Primary button: "Join Habit Lab" — enabled at all times (because the default community is auto-joined), but the button label shifts based on selections:
- 0 extra selections: "Join Habit Lab" (faded one-liner under: "You'll start in #welcome. You can join more rooms anytime.")
- 1 extra: "Join Habit Lab + 1 room"
- 2+ extra: "Join Habit Lab + N rooms"
- Secondary link: "Skip for now" (only joins the default community)
- Tertiary, ghost: "I'm not Devon → switch account"
Interactions to wire up
- Toggling each non-default card on/off updates the primary CTA label live.
- Toggling the gated card (Quiet Plate) flips its state to "Request sent" with a soft confirmation toast at the bottom: "Sam will get back to you within a day." The card stays in that state for the session.
- Hovering "How this works" reveals a small popover repeating the privacy contract in two sentences.
- The primary CTA, when clicked, plays a 600ms ease-out scale-and-fade transition and reveals a "You're in. Heading to your team…" full-screen state for ~1.2s before fading back (this is the only "success" affordance — no confetti, no streak fireworks; Objectuve celebrates earned milestones, not signups).
Design language — match Objectuve exactly
Colors
- Primary gradient (used sparingly — hero accents, primary CTA):
from-#177bbb to-#05cbfc - Accent (warm orange — used on the join toggle "on" state):
#f28529 - Gold (used only on a single small detail — e.g., Maya's "Coach" pill):
#fcc419 - Backgrounds: deep desaturated navy/charcoal in dark mode (
hsl(220 30% 8%)ish); cards on glassmorphismbg-white/5 backdrop-blur-xl border border-white/10 - Text: high-contrast white on dark; muted variants for secondary copy
Type
- Headlines: Outfit, weight 600–700, slightly tight tracking
- Body: Inter, weight 400–500
- Use sentence case throughout (never title case for CTAs)
Layout
- Mobile-first — design at 390px width primarily, but make it look great at 768px+ too (two-column grid for sub-communities on tablet/desktop)
- Generous whitespace; cards have ~16px internal padding, 12px gap between cards
- Cards: 16px border-radius, glassmorphism, soft inner border, very subtle shadow
Tone of copy (this matters more than visuals — the brand voice is the product)
- Calm, confident, friendly. Coach-who's-also-a-friend.
- Action-forward verbs. Brief — one sentence if possible.
- Never empty cheerleading. Never "Welcome to the community!! 🎉🎉🎉". The screen should feel like Maya talking to Devon, not a SaaS onboarding modal.
- No emojis except the four small community icons listed above.
Anti-patterns to avoid
- No FOMO. Don't say "Other members are already in 3 rooms — don't miss out."
- No forced choice. "Skip for now" is a real option, not a gray-link afterthought.
- No fake urgency timers. Nothing pulses, nothing counts down.
- No request-to-join queue length for the gated room. Don't say "5 people waiting." Just "Sam will get back to you."
- No confetti on submit. Save it for earned moments.
- No "AI" labels anywhere — Objectuve calls its assistant "Coach," but Coach isn't on this screen at all.
Deliverable
- A single Claude Design artifact (React + Tailwind preferred, or whatever runs in the artifact sandbox)
- Light interactivity only — toggles, label updates, the request-to-join state change, the success transition. No routing.
- Dark mode is the default; include a small sun/moon toggle in the top-right so reviewers can flip to light mode and verify both look right.
- Realistic seed data exactly as listed above — don't substitute lorem ipsum.
If you have to make a judgment call about copy or composition, default to: calm, brief, action-forward, and quietly trustworthy.
Last updated: 2026-05-26