Pairty™ Design Tokens

Feature Cards

Feature cards use glassmorphism with backdrop blur and subtle borders. On hover, they transition to a gradient background with all text turning white.

/* Feature Card CSS */
.feature-card {
  border-radius: 24px;
  padding: 2rem;
  background: rgba(12, 24, 41, 0.9);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(30, 58, 95, 0.6);
  transition: all 0.5s ease;
}

.feature-card:hover {
  background: linear-gradient(135deg, #0049E7, #47EBE0);
  border-color: transparent;
}

Glass Utilities

FAQ Accordion

Glassmorphic accordion with smooth expand/collapse animation.

Member Card

Complex glassmorphic card with gradient border and multi-color glow shadow.

Glow Effects

Asymmetric Grid Layout

The landing page uses 55/45 and 60/40 asymmetric splits for visual interest.

/* Asymmetric grid using Tailwind */
<div className="grid md:grid-cols-12 gap-8">
  <div className="md:col-span-7">Content</div>
  <div className="md:col-span-5">Visual</div>
</div>

Section Badge

Pill-shaped badges introduce each section with a label.

<span className="inline-flex items-center px-4 py-2 rounded-full 
  bg-[rgba(255,255,255,0.05)] border border-[rgba(255,255,255,0.1)] 
  text-sm text-pairty-teal">
  ✨ Features
</span>

Gradient Headlines

Headlines use gradient text with optional text-shadow for glow effect.

/* Gradient text with optional glow */
.gradient-heading {
  background: linear-gradient(278deg, #47EBE0 28.45%, #0049E7 100.49%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(71, 235, 224, 0.5); /* optional glow */
}

Ambient Background Glow

Large blurred circles create ambient atmosphere behind content.

Video Background Pattern

Hero sections can use video backgrounds with gradient overlays.

/* Video background with overlay */
.hero-video {
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(15, 15, 15, 0.95) 0%, 
    rgba(26, 26, 26, 0.85) 40%, 
    rgba(38, 38, 38, 0.7) 100%);
}

/* Always include poster for loading state */
<video poster="/images/hero-poster.jpg" ...>

Dynamic Hero Corners

Hero sections have rounded corners at bottom that animate on scroll.

/* Dynamic corners based on scroll */
const cornerRadius = isScrolled ? '4rem' : '2rem';

<section style={{ borderRadius: `0 0 ${cornerRadius} ${cornerRadius}` }}>
  ...
</section>

Section Backgrounds

Alternating section gradients create visual rhythm.

SmartAppDownloadButton with Shimmer

Primary CTA button with animated shimmer effect and gradient swap on hover.

/* Shimmer button CSS */
.shimmer-button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #47EBE0 0%, #249AE3 50%, #0049E7 100%);
  background-size: 200% 100%;
}

.shimmer-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

.shimmer-button:hover {
  background: linear-gradient(90deg, #0049E7 0%, #249AE3 50%, #47EBE0 100%);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

Gradient Hover Swap

Gradient direction reverses on hover for visual feedback.

/* Two-layer gradient swap */
.gradient-swap-button {
  position: relative;
}

.gradient-swap-button .default {
  background: linear-gradient(90deg, #47EBE0, #249AE3, #0049E7);
  transition: opacity 300ms;
}

.gradient-swap-button .hover {
  background: linear-gradient(90deg, #0049E7, #249AE3, #47EBE0);
  opacity: 0;
  transition: opacity 300ms;
}

.gradient-swap-button:hover .default { opacity: 0; }
.gradient-swap-button:hover .hover { opacity: 1; }

Size Variants

Consistent sizing across button variants.

/* Size variants */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
}

.btn-md {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 0.75rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  border-radius: 0.75rem;
}

Touch Target Minimums

All interactive elements maintain minimum 44px touch target for accessibility.

/* Touch target tokens */
component.button.minHeight: "44px"

/* WCAG 2.2 requires 44x44px minimum for touch targets */
.touch-target {
  min-width: 44px;
  min-height: 44px;
}

Secondary Buttons

Ghost and outline variants for secondary actions.

Buttons with Icons

Consistent icon spacing using gap property.

/* Icon button token */
component.button.gap: "0.5rem"
component.button.iconSize: "20px"

.icon-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-button svg {
  width: 20px;
  height: 20px;
}

Modal Glassmorphism

Modals use a glassmorphic background with spring animation on entrance.

/* Modal with Framer Motion spring animation */
<motion.div
  initial={{ scale: 0.95, opacity: 0 }}
  animate={{ scale: 1, opacity: 1 }}
  exit={{ scale: 0.95, opacity: 0 }}
  transition={{ type: 'spring', stiffness: 300, damping: 30 }}
  className="modal-content"
>
  {/* Modal content */}
</motion.div>

/* Modal glass styling */
.modal-content {
  border-radius: 24px;
  padding: 2rem;
  background: rgba(10, 22, 40, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(30, 58, 95, 0.6);
}

Multi-Step Verification Flow

Authentication modals with platform selection and OTP verification.

Platform Selection Cards

Selection cards with selected/unselected states.

/* Selected state */
.card-selected {
  border: 2px solid #47EBE0;
  background: rgba(71, 235, 224, 0.1);
}

/* Unselected state */
.card-unselected {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.card-unselected:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

OTP Input Pattern

Individual character inputs with auto-focus and auto-advance.

/* OTP input styling */
.otp-input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  transition: border-color 150ms ease;
}

.otp-input:focus {
  border-color: #47EBE0;
  outline: none;
}

/* Auto-advance logic */
const handleChange = (index: number, value: string) => {
  if (value && index < 5) {
    inputRefs[index + 1].current?.focus();
  }
};

Header Scroll Show/Hide

Header hides on scroll down (after 300px), shows on scroll up (after 10px).

const [isHeaderVisible, setIsHeaderVisible] = useState(true);
const [lastScrollY, setLastScrollY] = useState(0);

useEffect(() => {
  const handleScroll = () => {
    const currentScrollY = window.scrollY;
    
    if (currentScrollY > 300 && currentScrollY > lastScrollY) {
      setIsHeaderVisible(false); // Scrolling down
    } else if (currentScrollY < lastScrollY - 10) {
      setIsHeaderVisible(true);  // Scrolling up
    }
    
    setLastScrollY(currentScrollY);
  };
  
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, [lastScrollY]);

Scroll-Spy Navigation

Navigation highlights active section based on scroll position.

// Using Intersection Observer for scroll-spy
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        setActiveSection(entry.target.id);
      }
    });
  },
  { rootMargin: '-50% 0px -50% 0px' }
);

sections.forEach((section) => observer.observe(section));

Top Banner with Shimmer

Announcement banner with shimmer animation and live indicator.

/* Banner shimmer animation */
@keyframes banner-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Live ping indicator */
<span className="relative flex h-2.5 w-2.5">
  <span className="absolute inline-flex h-full w-full 
    rounded-full bg-emerald-500 opacity-75 animate-ping" />
  <span className="relative inline-flex h-2.5 w-2.5 
    rounded-full bg-emerald-500" />
</span>

Auto-Cycling Carousel

Infinite scroll carousel that pauses on hover.

/* Carousel auto-scroll */
@keyframes carousel {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.carousel-track {
  animation: carousel 20s linear infinite;
}

.carousel-track:hover {
  animation-play-state: paused;
}

Hover Transitions

Consistent hover timing across components.

Framer Motion Easing

Standardized easing curves for consistent motion across the app.

// easing constants
export const EASING = {
  smooth: [0.25, 0.46, 0.45, 0.94],
  spring: { stiffness: 300, damping: 30 },
  tween: { type: 'tween', duration: 0.4 },
};

// Usage
<motion.div
  transition={{ ease: EASING.smooth, duration: 0.5 }}
>

<motion.div
  transition={{ type: 'spring', ...EASING.spring }}
>

PageTransition Component

Wrapper for smooth page transitions using AnimatePresence.

'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { usePathname } from 'next/navigation';

const pageVariants = {
  initial: { opacity: 0, y: 20 },
  animate: { 
    opacity: 1, 
    y: 0,
    transition: { 
      duration: 0.4, 
      ease: [0.25, 0.46, 0.45, 0.94] 
    }
  },
  exit: { 
    opacity: 0, 
    y: -20,
    transition: { duration: 0.3 }
  }
};

export function PageTransition({ children }) {
  const pathname = usePathname();
  
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={pathname}
        variants={pageVariants}
        initial="initial"
        animate="animate"
        exit="exit"
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}

FadeIn Scroll Animation

Elements fade in when they enter the viewport using whileInView.

'use client';

import { motion } from 'framer-motion';

interface FadeInProps {
  children: React.ReactNode;
  delay?: number;
  direction?: 'up' | 'down' | 'left' | 'right';
}

export function FadeIn({ 
  children, 
  delay = 0, 
  direction = 'up' 
}: FadeInProps) {
  const directionOffset = {
    up: { y: 20 },
    down: { y: -20 },
    left: { x: 20 },
    right: { x: -20 },
  };

  return (
    <motion.div
      initial={{ 
        opacity: 0, 
        ...directionOffset[direction] 
      }}
      whileInView={{ 
        opacity: 1, 
        x: 0, 
        y: 0 
      }}
      viewport={{ once: true, margin: '-50px' }}
      transition={{ 
        duration: 0.5, 
        delay,
        ease: [0.25, 0.46, 0.45, 0.94] 
      }}
    >
      {children}
    </motion.div>
  );
}

StaggerContainer Pattern

Parent container that staggers child animations.

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: { 
      duration: 0.5,
      ease: [0.25, 0.46, 0.45, 0.94] 
    }
  },
};

// Usage
<motion.div
  variants={containerVariants}
  initial="hidden"
  whileInView="visible"
  viewport={{ once: true }}
>
  {items.map((item) => (
    <motion.div key={item.id} variants={itemVariants}>
      {item.content}
    </motion.div>
  ))}
</motion.div>

Spring Configurations

Physics-based spring animations for natural motion.

transition: {
  type: 'spring',
  stiffness: 300,
  damping: 30
}

transition: {
  type: 'spring',
  stiffness: 400,
  damping: 10
}

CSS Animations (Tailwind)

Tailwind keyframe animations for simple effects.

5-Column Grid Layout

Footer uses a 5-column grid on desktop, collapsing to 2 columns on mobile.

/* Footer grid layout */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Tailwind */
<div className="grid grid-cols-2 md:grid-cols-5 gap-8">
  ...
</div>

Gradient Top Border

Subtle gradient border separates footer from content.

/* Gradient border */
.footer-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(71, 235, 224, 0.5),
    transparent
  );
}

Social Icon Styling

Social icons with muted default state and white on hover.

/* Social icon styling */
.social-icon {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 150ms ease;
}

.social-icon:hover {
  color: #ffffff;
}

/* Token reference */
component.socialIcon: {
  size: "20px",
  color: {
    default: "rgba(255, 255, 255, 0.6)",
    hover: "#ffffff"
  },
  transition: "150ms ease"
}

Footer Link Colors

Links use muted text that brightens on hover.

/* Footer links */
.footer-link {
  color: rgba(255, 255, 255, 0.6);
  transition: color 150ms ease;
}

.footer-link:hover {
  color: #ffffff;
}

/* Token reference */
component.footer.linkColor: {
  default: "rgba(255, 255, 255, 0.6)",
  hover: "#ffffff"
}

MobileBottomCTA

Sticky bottom CTA that appears after scrolling past the header. Uses safe-area-inset for notched devices.

/* MobileBottomCTA styling */
.mobile-bottom-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(38, 38, 38, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px 24px 0 0;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
}

/* Show/hide based on scroll */
const [showCTA, setShowCTA] = useState(false);

useEffect(() => {
  const handleScroll = () => {
    // Show after scrolling past header
    setShowCTA(window.scrollY > 500);
  };
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

CookieConsent

Floating cookie consent banner with glassmorphic styling.

/* CookieConsent styling */
.cookie-consent {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  max-width: 450px;
  z-index: 50;
  border-radius: 16px;
  padding: 1.5rem;
  background: rgba(38, 38, 38, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
  .cookie-consent {
    left: auto;
  }
}

Safe Area Handling

Bottom padding accounts for device safe areas (notch, home indicator).

/* Safe area padding */
.floating-cta {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Tailwind */
className="pb-[calc(1rem+env(safe-area-inset-bottom))]"

/* Or using custom property */
:root {
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

.floating-cta {
  padding-bottom: calc(1rem + var(--safe-area-bottom));
}

Z-Index Layering

Floating elements layer below modals but above content.

Visibility Logic

Floating CTAs have conditional visibility based on scroll position.

// MobileBottomCTA visibility
const [showMobileCTA, setShowMobileCTA] = useState(false);

useEffect(() => {
  const handleScroll = () => {
    // Only show on mobile, after scrolling past hero
    const isMobile = window.innerWidth < 768;
    const scrolledPastHero = window.scrollY > 500;
    setShowMobileCTA(isMobile && scrolledPastHero);
  };
  
  window.addEventListener('scroll', handleScroll);
  window.addEventListener('resize', handleScroll);
  return () => {
    window.removeEventListener('scroll', handleScroll);
    window.removeEventListener('resize', handleScroll);
  };
}, []);

// CookieConsent visibility
const [showCookie, setShowCookie] = useState(false);

useEffect(() => {
  const consent = localStorage.getItem('cookieConsent');
  if (!consent) {
    // Delay showing for better UX
    setTimeout(() => setShowCookie(true), 1500);
  }
}, []);

Gradient Stroke Icons

SVG icons with gradient strokes using inline SVG defs.

/* SVG with gradient stroke */
<svg viewBox="0 0 56 56" fill="none">
  <path 
    stroke="url(#iconGradient)" 
    stroke-width="1.5" 
    stroke-linecap="round"
    d="..." 
  />
  <defs>
    <linearGradient 
      id="iconGradient" 
      x1="7" y1="7" x2="49" y2="49" 
      gradientUnits="userSpaceOnUse"
    >
      <stop stop-color="#0049E7"/>
      <stop offset="1" stop-color="#47EBE0"/>
    </linearGradient>
  </defs>
</svg>

Hover State Icon Switching

Icons switch from gradient to solid white on hover within feature cards.

/* Icon hover switching */
.feature-card:hover .icon path {
  stroke: #ffffff;
}

/* React implementation */
<path
  stroke={isHovered ? '#ffffff' : 'url(#iconGradient)'}
  className="transition-colors duration-500"
  ...
/>

Icon Sizes

Standard icon sizes used across the application.

Dollar Icon Asset

Available in gradient and dark variants at assets/icons/

ROI Calculator

Interactive calculator with glassmorphic container and selection cards.

Selection Card States

Interactive selection cards with clear visual feedback.

/* Selection card tokens */
component.roiCalculator.scenarioCard: {
  borderRadius: "12px",
  borderDefault: "2px solid rgba(255, 255, 255, 0.1)",
  borderSelected: "2px solid #47EBE0",
  backgroundSelected: "rgba(71, 235, 224, 0.1)"
}

/* Tailwind implementation */
<button className={cn(
  "p-4 rounded-xl border-2 transition-all",
  isSelected
    ? "border-pairty-teal bg-[rgba(71,235,224,0.1)]"
    : "border-[rgba(255,255,255,0.1)] bg-[rgba(255,255,255,0.05)]"
)}>
  ...
</button>

Value Display Formatting

Large numerical values use gradient text for emphasis.

/* Network worth gradient text */
.value-display {
  background: linear-gradient(90deg, #47EBE0 0%, #249AE3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.25rem;
  font-weight: 700;
}

/* Gradient token */
gradient.text.networkWorth: "linear-gradient(90deg, #47EBE0 0%, #249AE3 100%)"

Calculator Container

Glassmorphic container styling for calculator widgets.

/* Calculator container tokens */
component.roiCalculator: {
  borderRadius: "24px",
  background: "rgba(255, 255, 255, 0.05)",
  border: "1px solid rgba(255, 255, 255, 0.1)"
}

/* CSS */
.calculator-container {
  border-radius: 24px;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Logo Variants

Three logo variants available for different contexts.

Theme Variants

Logo adapts to light and dark backgrounds.

Default Dimensions

Standard logo sizing for different contexts.

Clear Space

Minimum padding around logo equal to the height of the symbol.

Usage Examples

Common logo placement patterns.

Logo Component

interface LogoProps {
  variant?: 'full' | 'symbol' | 'text';
  theme?: 'light' | 'dark';
  className?: string;
}

export function Logo({ 
  variant = 'full', 
  theme = 'dark',
  className 
}: LogoProps) {
  const textColor = theme === 'dark' ? 'text-white' : 'text-pairty-charcoal';
  
  return (
    <div className={cn('flex items-center gap-2', className)}>
      {variant !== 'text' && (
        <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-pairty-blue to-pairty-teal" />
      )}
      {variant !== 'symbol' && (
        <span className={cn('text-2xl font-bold', textColor)}>
          Pairty
        </span>
      )}
    </div>
  );
}

Logo Don'ts

.glass Utility

Quick glassmorphism effect for overlays and cards.

.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Glow Utilities

Box shadow utilities for glow effects.

.glow-teal {
  box-shadow: 0 0 30px rgba(71, 235, 224, 0.25);
}

.glow-teal-strong {
  box-shadow: 0 0 40px rgba(71, 235, 224, 0.3);
}

.glow-blue {
  box-shadow: 0 0 25px rgba(0, 73, 231, 0.2);
}

.glow-blue-strong {
  box-shadow: 0 0 40px rgba(0, 73, 231, 0.3);
}

.gradient-border Utility

Creates gradient borders using background-clip technique.

.gradient-border {
  background: 
    linear-gradient(#0c1829, #0c1829) padding-box,
    linear-gradient(to bottom, #1e3a5f, #0a1628) border-box;
  border: 1px solid transparent;
}

Text Selection

Brand-colored text selection for consistent experience.

::selection {
  background-color: rgba(71, 235, 224, 0.3);
  color: #ffffff;
}

::-moz-selection {
  background-color: rgba(71, 235, 224, 0.3);
  color: #ffffff;
}

Focus Ring

Accessible focus indicators using brand teal color.

:focus-visible {
  outline: 2px solid #47EBE0;
  outline-offset: 2px;
}

/* Tailwind */
focus-visible:ring-2 focus-visible:ring-pairty-teal focus-visible:ring-offset-2

Reduced Motion

Respect user preferences for reduced motion.

/* Global reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Tailwind variant */
motion-reduce:transition-none
motion-reduce:animate-none

.text-gradient Utility

Gradient text effect for headings and emphasis.

.text-gradient {
  background: linear-gradient(to right, #47EBE0, #0049E7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Tailwind */
bg-gradient-to-r from-pairty-teal to-pairty-blue bg-clip-text text-transparent

Reduced Motion Support

Respect user preferences for reduced motion with CSS media query.

/* Global reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Framer Motion hook */
import { useReducedMotion } from 'framer-motion';

function AnimatedComponent() {
  const shouldReduceMotion = useReducedMotion();
  
  return (
    <motion.div
      animate={{ x: 100 }}
      transition={shouldReduceMotion ? { duration: 0 } : { duration: 0.5 }}
    />
  );
}

/* Token reference */
effects.reducedMotion: {
  duration: "0.01ms",
  iterations: "1"
}

Focus Ring Styling

Visible focus indicators using brand teal color for keyboard navigation.

/* Focus ring styling */
:focus-visible {
  outline: 2px solid #47EBE0;
  outline-offset: 2px;
}

/* Remove default focus, add custom */
button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid #47EBE0;
  outline-offset: 2px;
}

/* Token reference */
effects.focus: {
  ring: "2px solid #47EBE0",
  offset: "2px"
}

Text Selection

Brand-colored text selection for consistent visual experience.

/* Custom text selection */
::selection {
  background-color: rgba(71, 235, 224, 0.3);
  color: #ffffff;
}

::-moz-selection {
  background-color: rgba(71, 235, 224, 0.3);
  color: #ffffff;
}

/* Token reference */
color.selection: {
  background: "rgba(71, 235, 224, 0.3)",
  text: "#ffffff"
}

Touch Target Minimums

WCAG 2.2 requires minimum 44x44px touch targets for mobile accessibility.

/* Touch target tokens */
mobile.touchTarget: {
  min: 44,        // WCAG 2.2 minimum
  comfortable: 48, // Better for mobile
  large: 56       // Primary actions
}

/* Ensure minimum size */
.interactive-element {
  min-width: 44px;
  min-height: 44px;
}

Color Contrast

Text colors maintain WCAG AA contrast ratios against backgrounds.

Common ARIA Patterns

Semantic ARIA attributes used throughout the application.

/* Modal dialog */
<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
>
  <h2 id="modal-title">Modal Title</h2>
</div>

/* Accordion */
<button
  aria-expanded={isOpen}
  aria-controls="accordion-content"
>
  Toggle
</button>
<div id="accordion-content" hidden={!isOpen}>
  Content
</div>

/* Navigation */
<nav aria-label="Main navigation">
  <a href="#" aria-current={isActive ? 'page' : undefined}>
    Link
  </a>
</nav>

/* Live region for dynamic content */
<div aria-live="polite" aria-atomic="true">
  {statusMessage}
</div>

/* Loading states */
<button aria-busy={isLoading} disabled={isLoading}>
  {isLoading ? 'Loading...' : 'Submit'}
</button>