Skip to content

Latest commit

 

History

History
43 lines (33 loc) · 2.19 KB

File metadata and controls

43 lines (33 loc) · 2.19 KB

Design Context

Users

Storyden web serves online communities of many kinds: clubs, gaming groups, fandoms, and similar member-driven spaces. Primary users are community members who visit, discuss, and curate content. Secondary users are moderators who keep conversations healthy, manage reports, and maintain quality. Tertiary users are operators/sysadmins who host and manage the instance. The core job to be done is to enable community participation and curation in a way that feels smooth for members and powerful for moderators/admins.

Brand Personality

Storyden itself is self-hosted and white-labeled, so it should not impose a rigid brand identity. The product must adapt to each community's identity through administrator-configured branding (accent color, images, icons, and custom theme CSS). Default emotional goals:

  • calm
  • premium
  • community-native (not corporate SaaS)

Aesthetic Direction

Visual direction should be subtle, minimal, and modern by default, while remaining themeable. Reference influences:

  • Linear: high-quality minimalism, precision, visual restraint
  • Luma: modern playful color moments and freshness
  • Discord (UX reference): strong community workflows, moderation and management ergonomics Anti-references:
  • legacy PHP forum aesthetics
  • generic corporate SaaS dashboards
  • dense, intimidating control surfaces similar to AWS Console Color guidance:
  • use accent-colour tokens where emphasis or brand expression is appropriate
  • keep base surfaces and layout understated so community branding remains the hero

Design Principles

  • Community-first workflows: optimize for reading, discussing, and curating with low friction.
  • Calm by default: reduce visual noise, keep hierarchy clear, and avoid heavy-handed decorative UI.
  • Premium through craft: focus on spacing, typography, motion restraint, and interaction polish over visual gimmicks.
  • White-label by design: preserve themeability, rely on tokenized color usage, and keep class names clear for host-level CSS overrides.
  • Accessibility is product quality: prioritize inclusive interaction patterns, strong contrast, keyboard/screen-reader support, reduced-motion respect, and performance on low-powered devices.