| name | talosix-design-system |
| description | Talosix design language, component patterns, UX guidelines, design tokens, and Stitch wireframing specifications for the clinical trial EDC platform. Load when generating UI designs, wireframes, user flows, frontend code, or reviewing designs for Talosix. Covers eCRF patterns, accessibility (WCAG 2.1 AA), 21 CFR Part 11 compliance, and Figma/Stitch consistency rules. |
| user-invocable | false |
Talosix Design System
This skill defines the complete design language for the Talosix clinical trial EDC platform. It is loaded automatically whenever generating UI designs, wireframes, user flows, or frontend code.
Design Principles
Clinical Trial UX Philosophy
- Accuracy Over Speed: Users enter regulated data; design for precision, not rapid clicking
- Audit Trail Transparency: Every action should feel traceable and documented
- Error Prevention: Prevent mistakes through smart defaults, constraints, and validation
- Context Persistence: Users work across long sessions; never lose their place or data
- Role-Aware Interfaces: CRAs, Site Coordinators, Data Managers, and Medical Monitors have different needs
Regulatory Compliance (21 CFR Part 11)
- All data entry must support electronic signatures
- Audit trails must be visible and accessible
- Session timeouts must warn users before logout
- Form changes must show clear before/after states
- Reason for change must be capturable for any edit
Design Tokens
Color Palette
--talosix-primary-900: #1a365d;
--talosix-primary-700: #2c5282;
--talosix-primary-500: #3182ce;
--talosix-primary-100: #ebf8ff;
--talosix-secondary-700: #553c9a;
--talosix-secondary-500: #805ad5;
--talosix-success-700: #276749;
--talosix-success-500: #38a169;
--talosix-success-100: #f0fff4;
--talosix-warning-700: #c05621;
--talosix-warning-500: #dd6b20;
--talosix-warning-100: #fffaf0;
--talosix-error-700: #c53030;
--talosix-error-500: #e53e3e;
--talosix-error-100: #fff5f5;
--talosix-query-open: #e53e3e;
--talosix-query-answered: #dd6b20;
--talosix-query-closed: #38a169;
--talosix-gray-900: #1a202c;
--talosix-gray-700: #4a5568;
--talosix-gray-500: #718096;
--talosix-gray-300: #cbd5e0;
--talosix-gray-100: #f7fafc;
--talosix-white: #ffffff;
--talosix-status-blank: #e2e8f0;
--talosix-status-incomplete: #fbd38d;
--talosix-status-complete: #9ae6b4;
--talosix-status-verified: #38a169;
--talosix-status-locked: #a0aec0;
Typography
--talosix-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--talosix-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--talosix-text-xs: 0.75rem;
--talosix-text-sm: 0.875rem;
--talosix-text-base: 1rem;
--talosix-text-lg: 1.125rem;
--talosix-text-xl: 1.25rem;
--talosix-text-2xl: 1.5rem;
--talosix-font-normal: 400;
--talosix-font-medium: 500;
--talosix-font-semibold: 600;
--talosix-font-bold: 700;
--talosix-leading-tight: 1.25;
--talosix-leading-normal: 1.5;
--talosix-leading-relaxed: 1.75;
Spacing System
--talosix-space-1: 0.25rem;
--talosix-space-2: 0.5rem;
--talosix-space-3: 0.75rem;
--talosix-space-4: 1rem;
--talosix-space-5: 1.25rem;
--talosix-space-6: 1.5rem;
--talosix-space-8: 2rem;
--talosix-space-10: 2.5rem;
--talosix-space-12: 3rem;
--talosix-space-16: 4rem;
--talosix-form-field-gap: var(--talosix-space-4);
--talosix-section-gap: var(--talosix-space-8);
--talosix-card-padding: var(--talosix-space-6);
--talosix-table-cell-padding: var(--talosix-space-3);
Border & Shadow
--talosix-radius-sm: 0.25rem;
--talosix-radius-md: 0.375rem;
--talosix-radius-lg: 0.5rem;
--talosix-radius-full: 9999px;
--talosix-border-width: 1px;
--talosix-border-color: var(--talosix-gray-300);
--talosix-border-focus: var(--talosix-primary-500);
--talosix-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--talosix-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--talosix-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--talosix-shadow-focus: 0 0 0 3px rgba(49, 130, 206, );
Component Patterns
Form Fields (eCRF Data Entry)
Every field must support: label, input control, help text, validation messages, query indicator, audit trail access, edit reason capture.
+-------------------------------------------------------------+
| [Label]* ----------------------------------------- [?] [Query] |
| +----------------------------------------------------------+ |
| | [Input Field] | |
| +----------------------------------------------------------+ |
| Help text appears here in gray |
| Warning/error appears here in red |
+-------------------------------------------------------------+
Field States:
- Blank: Light gray background, no data
- In Progress: White background, partial entry
- Complete: Light green left border
- Has Query: Red dot indicator, field highlighted
- Locked: Gray background, edit disabled
- Verified: Green checkmark, SDV complete
Data Tables
Tables display subject lists, visit schedules, and query logs.
Requirements: sortable columns, filterable, selectable rows (checkbox column), inline status indicators, action column (rightmost), sticky header on scroll, pagination or infinite scroll.
+--------------------------------------------------------------------------+
| [x] Subject ID | Site | Visit | Status | Queries | Actions |
+--------------------------------------------------------------------------+
| [x] 001-0001 | Site 101 | Visit 3 | * Complete | 2 open | ... v |
| [x] 001-0002 | Site 101 | Visit 2 | o Partial | - | ... v |
| [x] 001-0003 | Site 102 | Screen | ! Overdue | 1 open | ... v |
+--------------------------------------------------------------------------+
| Showing 1-25 of 342 | < 1 2 3 ... 14 > |
Navigation Patterns
Global Navigation (Left Sidebar):
+------------------+
| [Talosix Logo] |
+------------------+
| Dashboard |
| Subjects |
| Forms |
| Queries |
| Reports |
| Study Setup |
+------------------+
| Study: ABC-123 v |
| Site: 101 v |
+------------------+
| [User Avatar] |
| Settings | Logout|
+------------------+
Breadcrumb: Study ABC-123 > Site 101 > Subject 001-0001 > Visit 2 > Demographics
Tabs: [Overview] [Forms] [Queries] [Documents] [Audit Trail]
Modals & Dialogs
Confirmation Dialog (Destructive Actions):
+--------------------------------------------+
| Warning: Confirm Action [X] |
+--------------------------------------------+
| Are you sure you want to [action]? |
| This will affect [X] records. |
| |
| Reason for change: * |
| +----------------------------------------+ |
| | | |
| +----------------------------------------+ |
| [Cancel] [Confirm Action] |
+--------------------------------------------+
Electronic Signature Modal:
+--------------------------------------------+
| Electronic Signature Required [X] |
+--------------------------------------------+
| You are signing: [Action Description] |
| Meaning: I confirm that I have reviewed |
| this data and it is accurate. |
| |
| Username: [_________________________] |
| Password: [_________________________] |
| [Cancel] [Sign & Submit] |
+--------------------------------------------+
Query Management
+-------------------------------------------------------------+
| OPEN QUERY Query #1234 |
+-------------------------------------------------------------+
| Form: Demographics | Field: Date of Birth |
| Subject: 001-0001 | Visit: Screening |
+-------------------------------------------------------------+
| Data Manager (Jan 15, 2025 10:32 AM) |
| Please verify the date of birth. The value entered |
| (01/01/1800) appears to be invalid. |
+-------------------------------------------------------------+
| Site Coordinator (Jan 15, 2025 2:15 PM) |
| Corrected. The correct DOB is 01/01/1980. Source |
| document attached. |
+-------------------------------------------------------------+
| Response: [____________________________________] |
| [Attach File] [Cancel] [Answer Query] [Close Query] |
+-------------------------------------------------------------+
Status Badges
* Complete (green solid)o Incomplete (gray hollow)~ In Progress (half-filled)! Warning (orange triangle)x Error (red X)v Verified (green checkmark)# Locked (lock icon, gray)
Page Templates
Dashboard
+--------------------------------------------------------------------------+
| Dashboard Study: ABC-123 v |
+--------------------------------------------------------------------------+
| +----------------+ +----------------+ +----------------+ +--------------+ |
| | Total Subjects | | Open Queries | | Overdue Visits | | SDV Rate | |
| | 247 | | 18 | | 5 | | 78% | |
| | +12 this week | | -3 from last | | Action needed | | Target: 85% | |
| +----------------+ +----------------+ +----------------+ +--------------+ |
| |
| +-------------------------------------+ +------------------------------+ |
| | Enrollment Trend | | My Tasks | |
| | [Line Chart: Target vs Actual] | | [ ] Review 3 answered queries| |
| | | | [ ] Complete SDV for Site 102| |
| | | | [ ] Sign off Visit 4 forms | |
| +-------------------------------------+ +------------------------------+ |
| |
| +----------------------------------------------------------------------+ |
| | Recent Activity | |
| | Subject 001-0045 enrolled at Site 103 - 2 hours ago | |
| | Query #1234 closed by J. Smith - 3 hours ago | |
| | Visit 3 completed for Subject 001-0032 - 5 hours ago | |
| +----------------------------------------------------------------------+ |
+--------------------------------------------------------------------------+
eCRF Form Entry
+--------------------------------------------------------------------------+
| < Back to Subject Subject 001-0001 | Visit 2 | Demographics |
+--------------------------------------------------------------------------+
| [Form Info] [Data Entry] [Queries (2)] [Audit Trail] |
+--------------------------------------------------------------------------+
| Demographics Form Status: ~ Partial |
| ---------------------------------------------------------------- |
| IDENTIFICATION |
| +------------------------------------------------------------------+ |
| | Subject Initials * [?] | |
| | [JDS_______________________________________________] | |
| | Enter first, middle, last initials | |
| +------------------------------------------------------------------+ |
| |
| +------------------------------------------------------------------+ |
| | Date of Birth * [?] [QUERY] | |
| | [01/01/1980_______________________________________] [calendar] | |
| | ! Query open: Please verify date of birth | |
| +------------------------------------------------------------------+ |
| |
| +------------------------------------------------------------------+ |
| | Sex * [?] | |
| | ( ) Male ( ) Female ( ) Other ( ) Unknown | |
| +------------------------------------------------------------------+ |
| |
| [Save Draft] [Mark Complete & Sign] |
+--------------------------------------------------------------------------+
Responsive Breakpoints
--talosix-breakpoint-sm: 640px;
--talosix-breakpoint-md: 768px;
--talosix-breakpoint-lg: 1024px;
--talosix-breakpoint-xl: 1280px;
--talosix-breakpoint-2xl: 1536px;
Clinical users primarily use tablets and desktops. Minimum supported: 768px (iPad portrait). Optimal: 1280px+.
Accessibility (WCAG 2.1 AA)
- Color contrast: minimum 4.5:1 for text, 3:1 for large text
- Focus indicators visible on all interactive elements (minimum 2px outline)
- All form fields have programmatically associated labels
- Error messages announced to screen readers
- Keyboard navigation for all functionality; no keyboard traps
- Touch targets minimum 44x44px for tablet use
- High contrast mode available
- Form fields readable at 200% zoom
- Session timeout warnings with extension option
- No seizure-inducing animations
--talosix-transition-fast: 150ms ease-out;
--talosix-transition-normal: 250ms ease-out;
--talosix-transition-slow: 350ms ease-out;
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
Icon System
Use Lucide icons (https://lucide.dev):
- Add: Plus | Edit: Pencil | Delete: Trash-2 | Save: Save
- Search: Search | Filter: Filter | Settings: Settings | User: User
- Calendar: Calendar | File: FileText | Query: MessageCircle
- Warning: AlertTriangle | Error: AlertCircle | Success: CheckCircle
- Lock: Lock | Signature: PenTool | Audit: History
Stitch Wireframe Specifications
Mandatory Global Layout for Stitch
Every Stitch prompt MUST include this identical structure:
Left Sidebar (200px, background #2c5282):
- Talosix logo (white)
- Nav items (white text, hover #3182ce): Dashboard, Subjects, Forms, Queries, Reports, Study Setup
- Active section: background #1a365d
- Bottom: Study selector, Site selector, User avatar + Settings/Logout
Top Header (64px, white, border-bottom 1px #cbd5e0):
- Left: Breadcrumb (gray #4a5568)
- Right: User profile avatar + name
Main Content (background #f7fafc, padding 32px):
- Page title: 24px bold, #1a202c
- Content starts 16px below title
Tab Consistency Rules
- Active tab: Navy underline #2c5282, bold text
- Inactive: Gray #718096, normal weight
- 16px spacing, 48px height, 16px font
- CRITICAL: First screen establishes tab order; all subsequent screens use identical order
- Never reorder, add, or remove tabs between screens of the same feature
Exact Color Codes for All Stitch Prompts
Navy Blue (sidebar, buttons): #2c5282
Darker Navy (headers): #1a365d
Light Blue (links): #3182ce
Pale Blue (backgrounds): #ebf8ff
Success Green: #38a169
Warning Orange: #dd6b20
Error Red: #e53e3e
Near Black (text): #1a202c
Dark Gray (secondary): #4a5568
Mid Gray (borders): #cbd5e0
Light Gray (backgrounds): #f7fafc
White: #ffffff
Stitch Prompt Template
Desktop web application screen for Talosix clinical trial EDC platform.
SCREEN: [Name]
Design: Navy blue primary (#2c5282), white backgrounds, clinical EDC aesthetic, 2560px width.
LEFT SIDEBAR (200px, #2c5282): [Copy nav spec exactly]
TOP HEADER (64px, white): [Copy header spec exactly]
MAIN CONTENT (#f7fafc, 32px padding): [Screen-specific content]
[IF TABS]: List all tabs in canonical order, mark active tab.
Professional clinical software aesthetic. Navy blue (#2c5282) for all primary actions.
Consistency Checklist
Before every Stitch prompt verify: sidebar is #2c5282, nav order is canonical (Dashboard > Subjects > Forms > Queries > Reports > Study Setup), header has breadcrumb left / profile right, tabs follow canonical order, all hex codes match spec, page title is 24px bold #1a202c, background is #f7fafc, status colors are standard.
Implementation Notes
When Generating Wireframes
- Use Stitch for wireframe generation; maximize wireframes per call
- Chain additional Stitch calls for complex features
- Include global navigation, form field states, breadcrumbs, status indicators, action buttons (bottom-right for forms)
When Generating User Flows
- Start with user role and goal
- Include decision points for validation
- Show error recovery paths
- Include regulatory touchpoints (signatures, audit)
- End with clear success state
When Generating Code
- Use the design tokens defined above
- Follow component patterns exactly
- Include all field states
- Ensure form fields support reason-for-change
- Build in audit trail hooks
- Use
data-testid attributes for QA
File Structure
/wireframes/[feature-name]/
user-flow.mermaid
wireframe-desktop.html
wireframe-tablet.html
states.md
consistency-checklist.md
/components/[component-name]/
component.tsx
component.stories.tsx
component.test.tsx
