UI Design System - Index
UI Design System — Index
Trystpilot.xyz · Anonymous Relationship Reviews
Design phase: ASCII Wireframes → Penpot → Implementation
Last updated: 2026-02-28
Documents
| File | Contents |
|---|---|
| COMPONENTS.md | 26 existing + 44 missing component ASCII art, gap analysis |
| FLOWS_1920x1080.md | 6 user flows × 3 layout variations at 1920×1080 with recommendations |
| FLOWS_MOBILE.md | 4 flows × 6 device sizes (375px iPhone → 1440px MacBook) |
| DESIGN_TOKENS.md | Design token system (Penpot integration — pending secret) |
Component Summary
Existing (26 components)
| # | Component | Category | Status |
|---|---|---|---|
| 1 | Header | Navigation | ✅ |
| 2 | Footer | Navigation | ✅ |
| 3 | HeroSection | Home | ✅ |
| 4 | HeroShapes | Home | ✅ |
| 5 | SearchDropdown | Home | ✅ (placeholder data) |
| 6 | CategoriesSection | Home | ✅ |
| 7 | AuthBannerSection | Home | ✅ |
| 8 | ValuePropositionSection | Home | ✅ |
| 9 | TopCompaniesSection | Home | ✅ (placeholder data) |
| 10 | TopCompanyCard | Home | ✅ |
| 11 | RecentReviewsSection | Home | ✅ (placeholder data) |
| 12 | ReviewCard | Home | ✅ |
| 13 | BlogSection | Home | ✅ |
| 14 | BlogCard | Home | ✅ |
| 15 | TrystpilotAppBanner | Home | ✅ |
| 16 | Separator | Layout | ✅ |
| 17 | ProfileHeader | Profile | ✅ |
| 18 | RatingBreakdown | Profile | ✅ |
| 19 | ProfileReviewCard | Profile | ✅ |
| 20 | ResponseThread | Profile | ✅ |
| 21 | StarRating | UI Primitive | ✅ |
| 22 | RatingBar | UI Primitive | ✅ |
| 23 | Button | UI Primitive | ✅ |
| 24 | Input | UI Primitive | ✅ |
| 25 | LocaleProvider | i18n | ✅ |
| 26 | LocaleSwitcher | i18n | ✅ |
Missing — Priority Matrix (44 components)
| Priority | Count | Components |
|---|---|---|
| P0 — Critical path | 22 | SearchResultCard, SearchFiltersPanel, ReviewFormStepper, ReviewFormStep_RateDimensions, ReviewFormStep_Details, ReviewFormStep_Captcha, ReviewSuccessScreen, ClaimProfileBanner, ClaimProfileModal, CreateAccountForm, VerificationCodeInput, ProfileDashboard, RespondToReviewForm, ModerationQueueTable, ModerationReviewDetail, ModerationActionBar, RemovalRequestForm, AbuseReportForm, SearchResultsPage, ProfileSearchTypeahead, ReportProfileModal, EmptySearchState |
| P1 — Important | 17 | ActiveFilterTags, PaginationControls, SortDropdown, CharacterCounter, ReportSuccessToast, CategoryFilterBar, VerificationPendingScreen, ModerationNotificationBanner, FlaggedTextHighlighter, AdminStatsDashboard, RemovalRequestSuccess, AbuseReportSuccess, OnboardingWelcomeScreen, OnboardingStepIndicator, NotFoundProfileState, LoadingSkeleton, Toast/AlertBanner |
| P2 — Enhancement | 5 | ConfirmationDialog, SelectDropdown, Textarea, Badge, Tooltip, ProgressBar |
User Journey Gap Analysis
Journey 1: Home → Search → Profile → Review
Status: 🟡 Partial
Missing: SearchResultsPage, SearchResultCard, SearchFiltersPanel, ActiveFilterTags, ProfileSearchTypeahead, ReviewFormStepper, ReviewFormStep_* (×3), ReviewSuccessScreen, CharacterCounter
Journey 2: Home → Browse Categories → Filter → Report
Status: 🟡 Partial
Missing: CategoryFilterBar, SortDropdown, PaginationControls, EmptySearchState, ReportProfileModal, ReportSuccessToast
Journey 3: Profile → Claim → Account → Dashboard
Status: 🔴 Missing
Missing: ClaimProfileBanner, ClaimProfileModal, CreateAccountForm, VerificationCodeInput, VerificationPendingScreen, ProfileDashboard, RespondToReviewForm
Journey 4: Admin Moderation Queue
Status: 🟡 Partial (scaffold exists)
Missing: ModerationQueueTable, ModerationReviewDetail, ModerationActionBar, ModerationNotificationBanner, FlaggedTextHighlighter, AdminStatsDashboard, ConfirmationDialog
Journey 5: Removal Request
Status: 🟡 Partial (API exists)
Missing: RemovalRequestForm (wired), RemovalRequestSuccess
Journey 6: Abuse Report
Status: 🟡 Partial (API exists)
Missing: AbuseReportForm (wired), AbuseReportSuccess
Journey 7: Onboarding
Status: 🔴 Missing
Missing: OnboardingWelcomeScreen, OnboardingStepIndicator, NotFoundProfileState
Recommended Layout Decisions (from wireframe evaluation)
| Flow | Recommended Variation | Rationale |
|---|---|---|
| Home/Discovery | C — Card-Grid | Max profiles above fold; pill filter row saves sidebar space |
| Profile View | A — Classic Columns | Sticky sidebar keeps all 5 rating dims visible while scrolling reviews |
| Review Submission | B — Full-Width Stepped | Step accordion reduces abandonment for sensitive anonymous submission |
| Search Results | A — Classic Columns | Persistent sidebar filter essential for alias disambiguation |
| Admin Moderation | B — Full-Width Centered | Stat tile header enables priority triage before queue work |
| Removal Request | A — Classic Columns | Info sidebar educates on valid grounds while user fills form |
Penpot Design Tokens (Pending)
See DESIGN_TOKENS.md
Status: Waiting for PENPOT_ACCESS_TOKEN secret.
Once provided, will run @zcubekr/penpot-mcp-server to generate and push all design tokens.
Token categories to generate:
- Color tokens (brand, semantic, neutral scales)
- Typography tokens (scale, weight, line-height)
- Spacing tokens (4px base grid, named scale)
- Border radius tokens
- Shadow tokens (elevation system)
- Motion tokens (duration, easing)
- Z-index tokens (layer system)