1. Core Visual Identity
-
Primary Background: Pure White (
#FFFFFF) or high-clarity Off-White (#F9FAFB). -
Brand Accent: Charcoal Green (
#2D3A3A) used for all primary Call-to-Action (CTA) buttons and the navigation sidebar. -
Secondary Accents: Emerald Green (
#6BDB9B) for active status indicators and avatar glow effects. -
Design Aesthetic: Advanced, professional SaaS aesthetic with high use of white space, soft shadows, and rounded corners (16px to 24px).
2. Component Architecture
-
Navigation Sidebar: A vertical, slim sidebar anchored to the left. Icons should be centered with a 40px padding. The "Active" state is indicated by an Emerald Green highlight.
-
Team Member Cards: * Layout: Vertical Auto Layout with internal horizontal sections for data points.
-
Avatar: Circular with a 2px Emerald glow ring.
-
Data Points: "Recording" (Orange indicator) and "Speaking Time" (Green indicator) displayed in a split-row format.
-
CTA: Full-width Charcoal Green button at the bottom of the card.
-
-
Search Interface: Pill-shaped (fully rounded) input field with a subtle inner shadow and a centered placeholder.
3. Animation & Interaction Spec
-
Hover Transitions: All Team Member cards should utilize a "Smart Animate" hover state (Ease-out, 300ms) that scales the card to 102% and deepens the drop shadow.
-
Button Feedback: CTA buttons should shift to a slightly lighter green on hover and scale to 98% on "Press" to provide tactile feedback.
-
Entrance: Staggered fade-in for the card grid using "After Delay" triggers to create a professional loading sequence.
4. Grid & Spacing
-
System: 8pt Grid System.
-
Card Grid: 4-column layout for desktop views with a 24px gutter.
-
Margins: 40px outer container padding.