CompanySite/.agents/frontend-specialist/VISUAL_GUIDE.md

About Us Page - Visual Design Guide

Color Palette Usage

Hero Section

• Background: from-secondary-900 via-secondary-800 to-primary-900
• Heading: White + gradient (from-primary-300 to-accent-400)
• Stats: text-primary-300
• Blur Orbs: primary/20, accent/10, primary/5

Company Timeline

• Year Badges: from-primary-500 to-primary-600
• Timeline Line: from-primary-500 via-primary-300 to-primary-500
• Cards: White with border-secondary-100 → border-primary-200 on hover
• Dots: bg-primary-500

Mission & Vision

• Mission Card: from-primary-500 to-primary-700
• Vision Card: from-secondary-800 to-secondary-900
• Icons: bg-white/20 with backdrop-blur
• Decorative Blur: bg-white/10 (Mission), bg-primary-500/10 (Vision)

Core Values

• Default: White cards with border-secondary-100
• Hover: Full gradient from-primary-500 to-primary-700
• Icons: from-primary-50 to-primary-100 → white on hover
• Background Decoration: primary-500/5, accent-500/5

Team Section

• Background: bg-secondary-50
• Cards: White with gradient border glow on hover
• Border Glow: from-primary-400 to-accent-400
• Image Overlay: from-secondary-900/90 via-secondary-900/30
• Social Buttons: bg-white/95 → bg-white

CTA Section

• Background: from-primary-600 via-primary-700 to-secondary-800
• Blur Orbs: accent-500/20, primary-400/20
• Badge: bg-white/10 with border-white/20
• Primary Button: bg-white text-primary-600
• Secondary Button: border-white/40 with backdrop-blur

Typography Scale

Hero Heading:      text-4xl sm:text-5xl lg:text-6xl xl:text-7xl
Section Headings:  text-3xl sm:text-4xl
Mission/Vision H3: text-2xl lg:text-3xl
Value Cards H3:    text-xl
Team Member H3:    text-xl
Body Text (Large): text-lg sm:text-xl
Body Text:         text-base
Small Text:        text-sm
Labels:            text-sm uppercase tracking-wider

Spacing System

Section Padding:     py-16 lg:py-24
Hero Padding:        py-20
CTA Padding:         py-20 lg:py-28
Card Padding:        p-6 lg:p-8 (values) | p-6 lg:p-7 (team) | p-8 lg:p-12 (mission/vision)
Container:           container-wrapper (max-w-7xl px-4 sm:px-6 lg:px-8)
Grid Gaps:           gap-6 lg:gap-8 (values) | gap-8 lg:gap-10 (team) | gap-8 lg:gap-12 (timeline)
Section Margins:     mb-12 lg:mb-16 (section headers)

Shadow Progression

Default:      shadow-sm
Hover Values: shadow-sm → shadow-xl
Hover Team:   shadow-md → shadow-2xl
Buttons:      shadow-xl → shadow-2xl
Icon Buttons: shadow-md → shadow-lg

Border Radius

Cards:          rounded-2xl (values) | rounded-3xl (team, mission/vision, timeline)
Buttons:        rounded-xl
Social Buttons: rounded-xl
Badges:         rounded-full
Icons:          rounded-xl (values) | rounded-2xl (mission/vision)

Animation Timings

Color Changes:    duration-300
Card Hover:       duration-300
Image Zoom:       duration-500 (timeline) | duration-700 (team)
Slide-Up:         duration-300 (team social links)
Scale:            transition-all (buttons)

Hover Transforms

Mission/Vision Cards:  group-hover:scale-105
Value Cards:           group-hover:translate-y-[-4px]
Team Cards:            group-hover:-translate-y-2
Button CTA:            hover:scale-105
Social Buttons:        hover:scale-110
Arrow Icon:            group-hover:translate-x-1
Images:                group-hover:scale-105 (timeline) | group-hover:scale-110 (team)

Interactive States

Value Cards

/* Default State */
- Background: white
- Border: border-secondary-100
- Text: text-secondary-900
- Icon bg: from-primary-50 to-primary-100
- Icon text: text-primary-600

/* Hover State */
- Background: gradient overlay (from-primary-500 to-primary-700)
- Border: border-primary-200
- Text: text-white
- Icon: bg-white text-white
- Transform: translate-y-[-4px]
- Shadow: shadow-sm → shadow-xl

Team Cards

/* Default State */
- Background: white
- Border: none (white background)
- Shadow: shadow-md
- Social: translate-y-full (hidden)

/* Hover State */
- Border glow: gradient blur effect
- Shadow: shadow-2xl
- Transform: -translate-y-2
- Social: translate-y-0 (visible)
- Image: scale-110
- Image overlay: opacity-60 → opacity-80

Timeline Cards

/* Default State */
- Border: border-secondary-100
- Shadow: shadow-sm
- Title: text-secondary-900

/* Hover State */
- Border: border-primary-200
- Shadow: shadow-lg
- Title: text-primary-600

Responsive Breakpoints

Mobile (< 640px)

• Single column layouts
• Smaller text sizes (text-4xl hero)
• Timeline: single column
• Stats: 2 columns
• Values: single column
• Team: single column

Tablet (640px - 1023px)

• Stats: 2 or 4 columns
• Values: 2 columns
• Team: 2 columns
• Timeline: single column

Desktop (1024px+)

• Full grid layouts
• Values: 4 columns
• Team: 3 columns
• Timeline: alternating left/right

Accessibility Features

Focus States

focus:outline-none
focus:ring-2
focus:ring-white (on dark backgrounds)
focus:ring-primary-400 (on light backgrounds)
focus:ring-offset-2

ARIA Labels

• All social links: aria-label="${name}'s ${platform} profile"
• Decorative elements: aria-hidden="true"

Color Contrast

• White on dark backgrounds: ≥7:1 (AAA)
• Primary text on white: ≥4.5:1 (AA)
• Links and buttons: sufficient contrast maintained

Touch Targets

• Minimum 44x44px (social buttons: w-11 h-11)
• Adequate spacing between interactive elements

Layout Grid Structure

Hero

Container → Max-width-4xl → Content + Stats Grid (2/4 columns)

Timeline

Container → Max-width-5xl → Relative positioning → Alternating 50% width cards

Mission/Vision

Container → 2 columns (md:) → Gradient cards

Values

Container → 2 columns (sm:) → 4 columns (lg:) → Value cards

Team

Container → 2 columns (sm:) → 3 columns (lg:) → Team cards

Icon Sizes

Value Icons:     w-7 h-7 (inside w-14 h-14 container)
Mission/Vision:  w-8 h-8 (inside w-16 h-16 container)
Social Icons:    w-5 h-5 (inside w-11 h-11 button)
Arrow Icons:     w-5 h-5
Timeline Dots:   w-4 h-4

Decorative Elements

Grid Patterns

bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),
   linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)]
bg-[size:64px_64px]

Blur Orbs

w-96 h-96 (standard)
w-64 h-64 (card decorations)
blur-3xl (large orbs)
blur-2xl (card decorations)

Gradients

• Text: text-transparent bg-clip-text bg-gradient-to-r
• Backgrounds: bg-gradient-to-br (cards) | bg-gradient-to-b (sections)
• Borders: Simulated with absolute positioned divs

Performance Optimizations

Images

loading="lazy"
decoding="async"
width="400" height="400"  (or appropriate dimensions)

CSS Optimizations

• Use Tailwind's JIT mode (automatic)
• Minimal custom CSS
• Leverage CSS containment (automatic via Tailwind)
• Use will-change sparingly (Tailwind handles)

Design Tokens Quick Reference

/* Primary Actions */
Primary: #0891b2 (cyan)
Hover: #0e7490 (darker cyan)

/* Backgrounds */
Light: #f8fafc (secondary-50)
Dark: #0f172a (secondary-900)

/* Accents */
Accent: #f59e0b (amber)
Gradient End: accent-400 (#fbbf24)

/* Text */
Heading: #0f172a (secondary-900)
Body: #475569 (secondary-600)
Light: #cbd5e1 (secondary-300)

/* Borders */
Default: #e2e8f0 (secondary-200)
Subtle: #f1f5f9 (secondary-100)
Hover: #a5f3fc (primary-200)

Component Composition

Each section follows this pattern:

1. Container - <section> with background
2. Decorative Layer - Blur orbs, patterns (if applicable)
3. Content Wrapper - container-wrapper class
4. Header - Badge + H2 + Description
5. Content Grid - Responsive grid layout
6. Interactive Cards - Hover states + content

This consistent structure makes the page feel cohesive while allowing each section to have unique personality through color and decoration choices.