@affinda/react 0.0.26 → 0.0.28

package/README.md

@@ -26,18 +26,18 @@ defineCustomElements();
 ### 2. Use Components
 
 ```tsx
-import { Button, Navbar, NavItem } from '@affinda/react';
+import { AfButton, AfNavbar, AfNavItem } from '@affinda/react';
 
 function App() {
   return (
     <div>
-      {/* Navbar displays the default Affinda logo automatically */}
-      <Navbar>
+      {/* AfNavbar displays the default Affinda logo automatically */}
+      <AfNavbar>
         <div slot="start">
-          <NavItem href="/products">Products</NavItem>
+          <AfNavItem href="/products">Products</AfNavItem>
         </div>
-        <Button slot="button" variant="primary">Get Started</Button>
-      </Navbar>
+        <AfButton slot="button" variant="primary">Get Started</AfButton>
+      </AfNavbar>
     </div>
   );
 }
@@ -70,144 +70,77 @@ Affinda components use the **NeuSans** font family. To get the authentic Affinda
 
 ## Usage
 
-> ⚠️ **Theme Container Requirement:** Always wrap your components in a theme-providing container like `Section`, `HeroSection`, or `Card`. These containers establish theme context via CSS custom properties that child components (Heading, Text, Button, etc.) consume for their colors.
+> ⚠️ **Theme Container Requirement:** Always wrap your components in a theme-providing container like `AfSection` or `AfCard`. These containers establish theme context via CSS custom properties that child components (AfHeading, AfText, AfButton, etc.) consume for their colors.
 >
 > ```tsx
-> <Section theme="white">
->   <Heading level="1">Title</Heading>
->   <Text>Content with proper colors</Text>
-> </Section>
+> <AfSection theme="white">
+>   <AfHeading level="1">Title</AfHeading>
+>   <AfText>Content with proper colors</AfText>
+> </AfSection>
 > ```
 
-### Import Components
-
-All components are available with or without the `Af` prefix:
-
-```tsx
-// With Af prefix
-import { AfButton, AfHeading, AfTypographyLockup } from '@affinda/react';
-
-// Without prefix (cleaner)
-import { Button, Heading, TypographyLockup } from '@affinda/react';
-```
-
 ### Available Components
 
 Components are organized by complexity level. **Always compose from these levels** — don't write custom HTML/CSS for layouts that components already handle.
 
 #### Atoms (Basic Building Blocks)
 
-- **Button** / AfButton - Primary buttons with variants and icons
-- **IconButton** / AfIconButton - Icon-only buttons
-- **Heading** / AfHeading - Typography headings (H1-H6) with theme support
-- **Text** / AfText - Body text components with theme support
-- **Tag** / AfTag - Categorization labels with sand and light variants
-- **Section** / AfSection - Page sections with consistent spacing and themes ⭐ *provides theme context*
-- **Card** / AfCard - Content cards with optional backgrounds and photo variants ⭐ *provides theme context*
-- **Container** / AfContainer - Layout containers with max-width
-- **IconBox** / AfIconBox - Themed container for displaying an icon with rounded background
-- **Logo** / AfLogo - Affinda logo component
-- **LogoWell** / AfLogoWell - Rounded container for client logos
-- **AspectRatio** / AfAspectRatio - Maintain aspect ratios for media
-- **ColorSwatch** / AfColorSwatch - Display color swatches
+- **AfButton** - Primary buttons with variants and icons
+- **AfIconButton** - Icon-only buttons
+- **AfHeading** - Typography headings (H1-H6) with theme support
+- **AfText** - Body text components with theme support
+- **AfTag** - Categorization labels with sand and light variants
+- **AfSection** - Page sections with consistent spacing and themes ⭐ *provides theme context*
+- **AfCard** - Content cards with optional backgrounds and photo variants ⭐ *provides theme context*
+- **AfContainer** - Layout containers with max-width
+- **AfIconBox** - Themed container for displaying an icon with rounded background
+- **AfLogo** - Affinda logo component
+- **AfLogoWell** - Rounded container for client logos
+- **AfAspectRatio** - Maintain aspect ratios for media
+- **AfColorSwatch** - Display color swatches
 
 #### Molecules (Composed from Atoms)
 
-- **ButtonGroup** / AfButtonGroup - Group multiple buttons together
-- **TypographyLockup** / AfTypographyLockup - Composite heading + text + button layouts
-- **IconText** / AfIconText - IconBox + TypographyLockup for feature items with icons
-- **FeatureCard** / AfFeatureCard - Card + image + TypographyLockup for feature showcase
-- **IllustratedCard** / AfIllustratedCard - Card + illustration slot
-- **NavItem** / AfNavItem - Navigation items
-- **NavCard** / AfNavCard - Navigation card with icon and description
-- **Testimonial** / AfTestimonial - Customer testimonials with background images, stats, and quotes
-- **TestimonialStat** / AfTestimonialStat - Individual statistics within testimonials
-- **FooterColumn** / AfFooterColumn - Navigation column for footer
-- **FooterLink** / AfFooterLink - Styled link for footer navigation
-- **SocialLink** / AfSocialLink - Circular social media icon link
-- **ContactItem** / AfContactItem - Label/value pair for contact info
-- **PaperclipDecoration** - Decorative paperclip vector for hero sections
+- **AfButtonGroup** - Group multiple buttons together
+- **AfTypographyLockup** - Composite heading + text + button layouts
+- **AfIconText** - AfIconBox + AfTypographyLockup for feature items with icons
+- **AfFeatureCard** - AfCard + image + AfTypographyLockup for feature showcase
+- **AfIllustratedCard** - AfCard + illustration slot
+- **AfNavItem** - Navigation items
+- **AfNavCard** - Navigation card with icon and description
+- **AfTestimonial** - Customer testimonials with background images, stats, and quotes
+- **AfTestimonialStat** - Individual statistics within testimonials
+- **AfFooterColumn** - Navigation column for footer
+- **AfFooterLink** - Styled link for footer navigation
+- **AfSocialLink** - Circular social media icon link
+- **AfContactItem** - Label/value pair for contact info
+- **AfPaperclipDecoration** - Decorative paperclip vector for hero sections
 
 #### Organisms (Page Sections)
 
-- **Navbar** / AfNavbar - Navigation bar with mobile hamburger menu
-- **HeroSection** / AfHeroSection - Hero sections for marketing pages ⭐ *provides theme context*
-- **FeatureGrid** / AfFeatureGrid - Responsive CSS grid container for feature cards/items
-- **FeatureAccordion** / AfFeatureAccordion - Expandable accordion with auto-cycling timer
-- **GridCallout** / AfGridCallout - Image + heading + IconText grid for feature sections
-- **SplitSection** / AfSplitSection - Two-column layouts with image and content
-- **ClientCarousel** / AfClientCarousel - Infinite scrolling carousel for client logos
-- **TestimonialCarousel** / AfTestimonialCarousel - Carousel for sliding between testimonials
-- **InPageBanner** / AfInPageBanner - Call-to-action banner card with illustration ⭐ *provides theme context*
-- **Footer** / AfFooter - Slot-based footer layout component
+- **AfNavbar** - Navigation bar with mobile hamburger menu
+- **AfFeatureGrid** - Responsive CSS grid container for feature cards/items
+- **AfFeatureAccordion** - Expandable accordion with auto-cycling timer
+- **AfGridCallout** - Image + heading + AfIconText grid for feature sections
+- **AfSplitSection** - Two-column layouts with image and content
+- **AfClientCarousel** - Infinite scrolling carousel for client logos
+- **AfTestimonialCarousel** - Carousel for sliding between testimonials
+- **AfInPageBanner** - Call-to-action banner card with illustration ⭐ *provides theme context*
+- **AfFooter** - Slot-based footer layout component
 
 ## Quick Start Components
 
-### HeroSection
-
-The hero section component makes it easy to create marketing page heroes with consistent styling. It uses **TypographyLockup** internally to handle proper spacing and layout of heading, description, and buttons.
-
-```tsx
-import { HeroSection, Heading, Text, Button, ButtonGroup, PaperclipDecoration } from '@affinda/react';
-
-<HeroSection 
-  theme="inkwell" 
-  withDecoration={true} 
-  minHeight="60vh"
-  headingSize={1}
-  textAlignment="center"
-  buttonAlignment="horizontal"
->
-  {/* Position the paperclip decoration - adjust bottom/right values as needed */}
-  <PaperclipDecoration 
-    slot="decoration" 
-    style={{ position: 'absolute', bottom: -80, right: -800 }} 
-  />
-  <Heading slot="heading" level="1">
-    Harness AI to transform business processes
-  </Heading>
-  <Text slot="description" variant="large">
-    Around the world, leading enterprises use Affinda's AI agents...
-  </Text>
-  <ButtonGroup slot="buttons" direction="horizontal" gap="12px">
-    <Button variant="primary">Discover the platform</Button>
-    <Button variant="secondary">Explore solutions</Button>
-  </ButtonGroup>
-</HeroSection>
-```
-
-**Props:**
-- `theme`: `"white"` | `"inkwell"` | `"mist-green"` | `"soft-clay"` (default: `"inkwell"`)
-- `withDecoration`: boolean - Shows decoration slot
-- `minHeight`: string - CSS min-height value
-- `headingSize`: `1` | `2` | `3` | `4` | `5` - Controls heading size and spacing (default: `1`)
-- `textAlignment`: `"left"` | `"center"` - Text alignment (default: `"center"`)
-- `buttonAlignment`: `"horizontal"` | `"vertical"` - Button layout direction (default: `"horizontal"`)
-- `maxWidth`: number - Maximum width for the copy section in pixels
-
-**Slots:**
-- `heading` - The main heading (typically a `<Heading>` component)
-- `description` - Description text (typically a `<Text>` component)
-- `buttons` - CTA buttons (typically a `<ButtonGroup>` or individual buttons)
-- `decoration` - Optional decorative element (e.g., `<PaperclipDecoration>`)
-
-**Features:**
-- Uses TypographyLockup internally for consistent heading/description/button layout
-- Child components (Heading, Text, Button) automatically inherit theme colors - no manual theme props needed
-- Built-in padding that accounts for floating navbar
-- Responsive on mobile
-
-### Section
+### AfSection
 
 The section component provides consistent spacing and backgrounds for page sections.
 
 ```tsx
-import { Section, Heading, Text } from '@affinda/react';
+import { AfSection, AfHeading, AfText } from '@affinda/react';
 
-<Section padding="default" theme="mist-green" container={true}>
-  <Heading level="2" align="center">Work smarter, grow faster</Heading>
-  <Text variant="large" align="center">Feature content here...</Text>
-</Section>
+<AfSection padding="default" theme="mist-green" container={true}>
+  <AfHeading level="2" align="center">Work smarter, grow faster</AfHeading>
+  <AfText variant="large" align="center">Feature content here...</AfText>
+</AfSection>
 ```
 
 **Props:**
@@ -215,33 +148,33 @@ import { Section, Heading, Text } from '@affinda/react';
 - `theme`: `"white"` | `"inkwell"` | `"mist-green"` | `"soft-clay"` (default: `"white"`)
 - `container`: boolean - Auto-wraps content in Container
 
-> **Theme inheritance:** Child components (Heading, Text, Button) automatically inherit the section's theme colors. No manual theme props needed on children!
+> **Theme inheritance:** Child components (AfHeading, AfText, AfButton) automatically inherit the section's theme colors. No manual theme props needed on children!
 
-### Card
+### AfCard
 
 Cards support themed backgrounds and photo backgrounds. Use the `theme` prop for consistent styling with theme inheritance.
 
 ```tsx
-import { Card, Heading, Text } from '@affinda/react';
+import { AfCard, AfHeading, AfText } from '@affinda/react';
 
 // Themed card (recommended) - children inherit theme colors automatically
-<Card theme="mist-green">
-  <Heading level="3">Automate any document with 99%+ accuracy</Heading>
-  <Text variant="large">Extract any information...</Text>
+<AfCard theme="mist-green">
+  <AfHeading level="3">Automate any document with 99%+ accuracy</AfHeading>
+  <AfText variant="large">Extract any information...</AfText>
   <img src="screenshot.webp" alt="Feature" />
-</Card>
+</AfCard>
 
 // Dark themed card
-<Card theme="inkwell">
-  <Heading level="3">Build models in minutes</Heading>
-  <Text variant="large">Affinda is the only AI platform...</Text>
-</Card>
+<AfCard theme="inkwell">
+  <AfHeading level="3">Build models in minutes</AfHeading>
+  <AfText variant="large">Affinda is the only AI platform...</AfText>
+</AfCard>
 
 // Photo background card (for custom backgrounds)
-<Card backgroundImage="photo.jpg" darkOverlay={true}>
-  <Heading level="3">Build models in minutes</Heading>
-  <Text variant="large">Affinda is the only AI platform...</Text>
-</Card>
+<AfCard backgroundImage="photo.jpg" darkOverlay={true}>
+  <AfHeading level="3">Build models in minutes</AfHeading>
+  <AfText variant="large">Affinda is the only AI platform...</AfText>
+</AfCard>
 ```
 
 **Props:**
@@ -250,26 +183,28 @@ import { Card, Heading, Text } from '@affinda/react';
 - `backgroundImage`: URL to background image
 - `darkOverlay`: boolean - Applies gradient overlay for text readability on photos
 
-### PaperclipDecoration
+### AfPaperclipDecoration
 
 Decorative SVG paperclip graphic for hero sections.
 
-⚠️ **Important**: When using with `HeroSection`, you must manually position the paperclip using inline styles, as the component uses scoped styles rather than shadow DOM.
+Use with `AfSection` and position absolutely within the section:
 
 ```tsx
-import { HeroSection, PaperclipDecoration } from '@affinda/react';
+import { AfSection, AfContainer, AfTypographyLockup, AfPaperclipDecoration } from '@affinda/react';
 
-<HeroSection theme="inkwell" withDecoration={true}>
-  <PaperclipDecoration 
-    slot="decoration" 
+<AfSection theme="inkwell" padding="loose" style={{ position: 'relative', overflow: 'hidden' }}>
+  <AfPaperclipDecoration 
     style={{ 
       position: 'absolute', 
       bottom: -80,    // Adjust to move vertically
-      right: -800     // Adjust to move horizontally
+      right: -800,    // Adjust to move horizontally
+      zIndex: 0
     }} 
   />
-  {/* Hero content */}
-</HeroSection>
+  <AfContainer style={{ position: 'relative', zIndex: 1 }}>
+    {/* Hero content */}
+  </AfContainer>
+</AfSection>
 ```
 
 **Positioning Tips:**
@@ -277,7 +212,7 @@ import { HeroSection, PaperclipDecoration } from '@affinda/react';
 - **bottom**: Controls vertical position (negative = move down/off-screen)
 - **right**: Controls horizontal position (negative = move right/off-screen)
 - Start with `bottom: -80, right: -800` and adjust to taste
-- The paperclip automatically sits behind content (`z-index: 0`)
+- Set `overflow: hidden` on the section to clip the decoration
 
 ## Component Guide
 
@@ -285,44 +220,44 @@ import { HeroSection, PaperclipDecoration } from '@affinda/react';
 
 #### Layout & Structure
 
-**Container**
+**AfContainer**
 - Use for all page sections to maintain consistent max-width and horizontal padding
 - Creates responsive layouts that don't span the full viewport on large screens
-- Best practice: Wrap each major section of your page in a Container
+- Best practice: Wrap each major section of your page in an AfContainer
 
 ```tsx
-<Container>
-  <Heading level="2">Section Title</Heading>
-  <Text>Section content goes here...</Text>
-</Container>
+<AfContainer>
+  <AfHeading level="2">Section Title</AfHeading>
+  <AfText>Section content goes here...</AfText>
+</AfContainer>
 ```
 
-**AspectRatio**
+**AfAspectRatio**
 - Maintain consistent dimensions for images, videos, or media
 - Prevents layout shift during content loading
 - Common ratios: `16/9` (video), `1/1` (square), `4/3` (legacy video)
 
 ```tsx
-<AspectRatio ratio="16/9">
+<AfAspectRatio ratio="16/9">
   <img src="video-thumbnail.jpg" alt="Preview" />
-</AspectRatio>
+</AfAspectRatio>
 ```
 
-**Card**
+**AfCard**
 - Group related content with visual separation
 - Use for feature highlights, product listings, or content previews
 - Supports borders and elevation for depth
 
 ```tsx
-<Card>
-  <Heading level="3">Feature Title</Heading>
-  <Text>Feature description...</Text>
-</Card>
+<AfCard>
+  <AfHeading level="3">Feature Title</AfHeading>
+  <AfText>Feature description...</AfText>
+</AfCard>
 ```
 
 #### Typography
 
-**Heading**
+**AfHeading**
 - Use semantic heading levels (1-6) for SEO and accessibility
 - Level 1: Page title (use once per page)
 - Level 2: Major sections
@@ -330,104 +265,104 @@ import { HeroSection, PaperclipDecoration } from '@affinda/react';
 - Never skip heading levels
 
 ```tsx
-<Heading level="1">Page Title</Heading>
-<Heading level="2">Section Title</Heading>
-<Heading level="3">Subsection</Heading>
+<AfHeading level="1">Page Title</AfHeading>
+<AfHeading level="2">Section Title</AfHeading>
+<AfHeading level="3">Subsection</AfHeading>
 ```
 
-**Text**
+**AfText**
 - Use for all body text, descriptions, and paragraphs
 - Variants: `default`, `small`, `large`
 - Automatically uses NeuSans font
 
 ```tsx
-<Text variant="large">Introductory paragraph with emphasis</Text>
-<Text>Standard body text</Text>
-<Text variant="small">Fine print or captions</Text>
+<AfText variant="large">Introductory paragraph with emphasis</AfText>
+<AfText>Standard body text</AfText>
+<AfText variant="small">Fine print or captions</AfText>
 ```
 
-**TypographyLockup**
+**AfTypographyLockup**
 - Composite component for hero sections and major content blocks
 - Automatically handles heading + description + buttons layout
 - Supports different breakpoints and alignments
 - Use for: Hero sections, feature highlights, CTAs
 
 ```tsx
-<TypographyLockup
+<AfTypographyLockup
   headingSize={1}
   textAlignment="center"
   buttonAlignment="horizontal"
 >
-  <Heading level="1">Automate Your Workflow</Heading>
-  <Text slot="description">Extract data from documents in seconds</Text>
-  <ButtonGroup slot="buttons" direction="horizontal">
-    <Button variant="primary">Get Started</Button>
-    <Button variant="secondary">Learn More</Button>
-  </ButtonGroup>
-</TypographyLockup>
+  <AfHeading level="1">Automate Your Workflow</AfHeading>
+  <AfText slot="description">Extract data from documents in seconds</AfText>
+  <AfButtonGroup slot="buttons" direction="horizontal">
+    <AfButton variant="primary">Get Started</AfButton>
+    <AfButton variant="secondary">Learn More</AfButton>
+  </AfButtonGroup>
+</AfTypographyLockup>
 ```
 
 #### Buttons & Actions
 
-**Button**
+**AfButton**
 - Primary actions: Use `variant="primary"` (sparingly, 1-2 per screen)
 - Secondary actions: Use `variant="secondary"`
 - Sizes: `small`, `default`
 - Can include icons in left or right slots
-- Buttons automatically inherit theme colors from parent Section/HeroSection/Card
+- Buttons automatically inherit theme colors from parent AfSection/AfCard
 
 ```tsx
-<Button variant="primary">Sign Up Now</Button>
-<Button variant="secondary">Learn More</Button>
+<AfButton variant="primary">Sign Up Now</AfButton>
+<AfButton variant="secondary">Learn More</AfButton>
 ```
 
-**ButtonGroup**
+**AfButtonGroup**
 - Group related buttons with consistent spacing
 - Maintains visual hierarchy and alignment
 
 ```tsx
-<ButtonGroup>
-  <Button variant="primary">Save</Button>
-  <Button variant="secondary">Cancel</Button>
-</ButtonGroup>
+<AfButtonGroup>
+  <AfButton variant="primary">Save</AfButton>
+  <AfButton variant="secondary">Cancel</AfButton>
+</AfButtonGroup>
 ```
 
-**IconButton**
+**AfIconButton**
 - Use for toolbar actions, navigation controls, or when space is limited
 - Always include aria-label for accessibility
 - Common uses: Close buttons, navigation arrows, menu toggles
 
 ```tsx
-import { IconButton, Close, Menu } from '@affinda/react';
+import { AfIconButton, Close, Menu } from '@affinda/react';
 
-<IconButton variant="secondary" aria-label="Close dialog">
+<AfIconButton variant="secondary" aria-label="Close dialog">
   <Close size={24} />
-</IconButton>
+</AfIconButton>
 
-<IconButton variant="tertiary" size="small" aria-label="Toggle menu">
+<AfIconButton variant="tertiary" size="small" aria-label="Toggle menu">
   <Menu size={20} />
-</IconButton>
+</AfIconButton>
 ```
 
 #### Tags
 
-**Tag**
+**AfTag**
 - Use for categorization, topics, filters, or metadata display
 - Variants: `sand` (default - soft-clay/tan) or `light` (mist-green)
 - Sizes: `x-small`, `small` (default), `large`
 - Can be clickable links with `href` prop
 
 ```tsx
-<Tag>AI</Tag>
-<Tag variant="light">OCR</Tag>
-<Tag variant="sand" size="large" href="/topics/ml">Machine Learning</Tag>
+<AfTag>AI</AfTag>
+<AfTag variant="light">OCR</AfTag>
+<AfTag variant="sand" size="large" href="/topics/ml">Machine Learning</AfTag>
 ```
 
 #### Navigation
 
-**Navbar**
+**AfNavbar**
 
-⚠️ **IMPORTANT**: The Navbar component uses **slots** for positioning elements. Items placed as direct children will not be visible. You must wrap them in divs with the appropriate `slot` attribute.
+⚠️ **IMPORTANT**: The AfNavbar component uses **slots** for positioning elements. Items placed as direct children will not be visible. You must wrap them in divs with the appropriate `slot` attribute.
 
 Site-wide navigation header with responsive design and mobile menu support.
 
@@ -453,38 +388,38 @@ This prevents page content from being hidden behind the navbar. The spacer autom
 - `button` - Call-to-action button (far right)
 
 ```tsx
-<Navbar>
+<AfNavbar>
   {/* Start slot - main navigation items */}
   <div slot="start">
-    <NavItem hierarchy="primary" variant="01" href="/platform">
+    <AfNavItem hierarchy="primary" variant="01" href="/platform">
       Platform
-    </NavItem>
-    <NavItem hierarchy="primary" variant="01" href="/solutions">
+    </AfNavItem>
+    <AfNavItem hierarchy="primary" variant="01" href="/solutions">
       Solutions
-    </NavItem>
-    <NavItem hierarchy="primary" variant="01" href="/pricing">
+    </AfNavItem>
+    <AfNavItem hierarchy="primary" variant="01" href="/pricing">
       Pricing
-    </NavItem>
+    </AfNavItem>
   </div>
   
   {/* End slot - secondary navigation */}
   <div slot="end">
-    <NavItem hierarchy="primary" variant="02" href="/contact">
+    <AfNavItem hierarchy="primary" variant="02" href="/contact">
       Talk to us
-    </NavItem>
-    <NavItem hierarchy="primary" variant="02" href="/login">
+    </AfNavItem>
+    <AfNavItem hierarchy="primary" variant="02" href="/login">
       Log in
-    </NavItem>
+    </AfNavItem>
   </div>
   
   {/* Button slot - CTA */}
-  <Button slot="button" variant="primary" size="default">
+  <AfButton slot="button" variant="primary" size="default">
     Try for free
-  </Button>
-</Navbar>
+  </AfButton>
+</AfNavbar>
 ```
 
-**NavItem**
+**AfNavItem**
 - Individual navigation links
 - Hierarchy: `primary` (main nav), `secondary` (utility nav)
 - Variant: `"01"` (primary links), `"02"` (secondary/utility links)
@@ -492,18 +427,18 @@ This prevents page content from being hidden behind the navbar. The spacer autom
 
 #### Feature Showcase
 
-**FeatureAccordion**
+**AfFeatureAccordion**
 - Expandable accordion for showcasing product features
 - Auto-cycles through items with a visual progress timer
 - Displays accompanying images that change with each item
 - Timer resets when user clicks an item
-- **Must be wrapped in a Section** which provides theme context and padding
+- **Must be wrapped in an AfSection** which provides theme context and padding
 
 ```tsx
-import { Section, FeatureAccordion } from '@affinda/react';
+import { AfSection, AfFeatureAccordion } from '@affinda/react';
 
-<Section theme="mist-green" padding="default">
-  <FeatureAccordion
+<AfSection theme="mist-green" padding="default">
+  <AfFeatureAccordion
     heading="Give AI agents your paperwork"
     items={JSON.stringify([
       {
@@ -522,7 +457,7 @@ import { Section, FeatureAccordion } from '@affinda/react';
     cycleInterval={6000}
     autoCycle={true}
   />
-</Section>
+</AfSection>
 ```
 
 **Props:**
@@ -535,17 +470,17 @@ import { Section, FeatureAccordion } from '@affinda/react';
 - `theme`: `"white"` | `"inkwell"` | `"mist-green"` | `"soft-clay"` - Sets background and typography colors
 - `padding`: `"tight"` | `"default"` | `"loose"` - Vertical spacing (default: `"default"`)
 
-**InPageBanner**
+**AfInPageBanner**
 - Call-to-action banner card with illustration and decorative wave background
-- Place inside a neutral (white) Section to show off its themed background
+- Place inside a neutral (white) AfSection to show off its themed background
 - Use `getIllustrationUrlByScene()` from `@affinda/illustrations` for theme-matched illustrations
 
 ```tsx
-import { Section, InPageBanner } from '@affinda/react';
+import { AfSection, AfInPageBanner } from '@affinda/react';
 import { getIllustrationUrlByScene } from '@affinda/illustrations';
 
-<Section padding="default" theme="white" container={true}>
-  <InPageBanner
+<AfSection padding="default" theme="white" container={true}>
+  <AfInPageBanner
     theme="mist-green"
     heading="See what our AI agents can do for you"
     description="Upload your documents and watch our AI agents get to work."
@@ -555,7 +490,7 @@ import { getIllustrationUrlByScene } from '@affinda/illustrations';
     secondaryButtonUrl="/contact"
     illustrationUrl={getIllustrationUrlByScene('automate', 'mist-green')}
   />
-</Section>
+</AfSection>
 ```
 
 **Props:**
@@ -571,52 +506,52 @@ import { getIllustrationUrlByScene } from '@affinda/illustrations';
 
 #### Social Proof & Testimonials
 
-**Testimonial**
+**AfTestimonial**
 - Showcase customer success stories with rich media
 - Include: background image, logo, quote, attribution, and statistics
-- Use within TestimonialCarousel for multiple testimonials
+- Use within AfTestimonialCarousel for multiple testimonials
 
 ```tsx
-<Testimonial
+<AfTestimonial
   backgroundImage="https://example.com/background.jpg"
   logoImage="https://example.com/company-logo.png"
   quote="Affinda transformed our document processing workflow."
   attribution="– Jane Doe, CEO, Company Name"
   readMoreLink="https://example.com/case-study"
 >
-  <TestimonialStat slot="stats" value="95%" description="reduction in processing time" />
-  <TestimonialStat slot="stats" value="10×" description="increase in throughput" />
-</Testimonial>
+  <AfTestimonialStat slot="stats" value="95%" description="reduction in processing time" />
+  <AfTestimonialStat slot="stats" value="10×" description="increase in throughput" />
+</AfTestimonial>
 ```
 
-**TestimonialCarousel**
-- Wrap with Section for theming and Container for layout (like other components)
+**AfTestimonialCarousel**
+- Wrap with AfSection for theming and AfContainer for layout (like other components)
 - Automatically handles navigation between multiple testimonials
 - Includes progress indicator
 
 ```tsx
-<Section padding="default" theme="white" container>
-  <TestimonialCarousel>
-    <Testimonial {...testimonial1Props}>
-      <TestimonialStat slot="stats" value="95%" description="processing time reduction" />
-      <TestimonialStat slot="stats" value="10×" description="throughput increase" />
-    </Testimonial>
-    <Testimonial {...testimonial2Props}>
-      <TestimonialStat slot="stats" value="99%" description="accuracy rate" />
-    </Testimonial>
-  </TestimonialCarousel>
-</Section>
+<AfSection padding="default" theme="white" container>
+  <AfTestimonialCarousel>
+    <AfTestimonial {...testimonial1Props}>
+      <AfTestimonialStat slot="stats" value="95%" description="processing time reduction" />
+      <AfTestimonialStat slot="stats" value="10×" description="throughput increase" />
+    </AfTestimonial>
+    <AfTestimonial {...testimonial2Props}>
+      <AfTestimonialStat slot="stats" value="99%" description="accuracy rate" />
+    </AfTestimonial>
+  </AfTestimonialCarousel>
+</AfSection>
 ```
 
-**TestimonialStat**
+**AfTestimonialStat**
 - Display key metrics within testimonials
 - Use `slot="stats"` on each stat to position correctly
 - Use 2-4 stats per testimonial for best impact
 - Optional accent border for qualitative statements
 
 ```tsx
-<TestimonialStat slot="stats" value="99%" description="accuracy rate" />
-<TestimonialStat 
+<AfTestimonialStat slot="stats" value="99%" description="accuracy rate" />
+<AfTestimonialStat 
   slot="stats"
   value="" 
   description="Reduced manual errors significantly" 
@@ -626,21 +561,21 @@ import { getIllustrationUrlByScene } from '@affinda/illustrations';
 
 #### Branding
 
-**Logo**
+**AfLogo**
 - Affinda logo component with consistent sizing
-- Use in Navbar and footer
+- Use in AfNavbar and footer
 - Renders as inline SVG for crisp display at any size
 
 ```tsx
-<Logo />
+<AfLogo />
 ```
 
-**ColorSwatch**
+**AfColorSwatch**
 - Display color palettes or design tokens
 - Useful for style guides and documentation
 
 ```tsx
-<ColorSwatch color="#C6D5D1" label="Mist Green" />
+<AfColorSwatch color="#C6D5D1" label="Mist Green" />
 ```
 
 ### Icons
@@ -658,28 +593,28 @@ import {
 
 ## Example Usage
 
-### Basic Button
+### Basic AfButton
 
 ```tsx
-import { Button } from '@affinda/react';
+import { AfButton } from '@affinda/react';
 
 function App() {
   return (
-    <Button variant="primary" size="default">
+    <AfButton variant="primary" size="default">
       Click me
-    </Button>
+    </AfButton>
   );
 }
 ```
 
-### Button with Icons
+### AfButton with Icons
 
 ```tsx
-import { Button, ArrowRightIcon } from '@affinda/react';
+import { AfButton, ArrowRightIcon } from '@affinda/react';
 
 function App() {
   return (
-    <Button variant="primary">
+    <AfButton variant="primary">
       <svg slot="icon-left">
         <ArrowRightIcon />
       </svg>
@@ -687,19 +622,19 @@ function App() {
       <svg slot="icon-right">
         <ArrowRightIcon />
       </svg>
-    </Button>
+    </AfButton>
   );
 }
 ```
 
-### Typography Lockup
+### AfTypographyLockup
 
 ```tsx
-import { TypographyLockup, Button } from '@affinda/react';
+import { AfTypographyLockup, AfButton } from '@affinda/react';
 
 function Hero() {
   return (
-    <TypographyLockup
+    <AfTypographyLockup
       headingSize={1}
       breakpoint="desktop"
       textAlignment="center"
@@ -709,9 +644,9 @@ function Hero() {
       <p slot="description">
         Extract data from documents with AI-powered accuracy
       </p>
-      <Button slot="buttons" variant="primary">Get Started</Button>
-      <Button slot="buttons" variant="secondary">Learn More</Button>
-    </TypographyLockup>
+      <AfButton slot="buttons" variant="primary">Get Started</AfButton>
+      <AfButton slot="buttons" variant="secondary">Learn More</AfButton>
+    </AfTypographyLockup>
   );
 }
 ```
@@ -719,27 +654,27 @@ function Hero() {
 ### Navigation
 
 ```tsx
-import { Navbar, NavItem, Button } from '@affinda/react';
+import { AfNavbar, AfNavItem, AfButton } from '@affinda/react';
 
 function Header() {
   return (
-    // Navbar displays the default Affinda logo automatically
-    <Navbar>
+    // AfNavbar displays the default Affinda logo automatically
+    <AfNavbar>
       <div slot="start">
-        <NavItem hierarchy="primary" variant="01" href="/">
+        <AfNavItem hierarchy="primary" variant="01" href="/">
           Home
-        </NavItem>
-        <NavItem hierarchy="primary" variant="01" href="/products">
+        </AfNavItem>
+        <AfNavItem hierarchy="primary" variant="01" href="/products">
           Products
-        </NavItem>
+        </AfNavItem>
       </div>
       <div slot="end">
-        <NavItem hierarchy="primary" variant="02" href="/docs">
+        <AfNavItem hierarchy="primary" variant="02" href="/docs">
           Documentation
-        </NavItem>
+        </AfNavItem>
       </div>
-      <Button slot="button" variant="primary">Get Started</Button>
-    </Navbar>
+      <AfButton slot="button" variant="primary">Get Started</AfButton>
+    </AfNavbar>
   );
 }
 ```
@@ -803,16 +738,16 @@ Full TypeScript type definitions are included for all components and props.
 All components accept a `style` prop for applying inline CSS styles directly to the component's root element:
 
 ```tsx
-import { Button, Section, Heading } from '@affinda/react';
+import { AfButton, AfSection, AfHeading } from '@affinda/react';
 
 // Apply custom styles to any component
-<Button variant="primary" style={{ marginTop: '20px', opacity: 0.9 }}>
+<AfButton variant="primary" style={{ marginTop: '20px', opacity: 0.9 }}>
   Custom Styled Button
-</Button>
+</AfButton>
 
-<Section theme="white" style={{ borderRadius: '16px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}>
-  <Heading level="2">Styled Section</Heading>
-</Section>
+<AfSection theme="white" style={{ borderRadius: '16px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}>
+  <AfHeading level="2">Styled Section</AfHeading>
+</AfSection>
 ```
 
 The `style` prop is passed through to the web component's host element, allowing you to override or extend component styles as needed.
@@ -824,114 +759,122 @@ Use these component combinations for common marketing page patterns. **Always ch
 ### Grid of Feature Items with Icons
 
 ```tsx
-import { Section, FeatureGrid, IconText } from '@affinda/react';
+import { AfSection, AfFeatureGrid, AfIconText } from '@affinda/react';
 
-<Section theme="mist-green" container={true}>
-  <FeatureGrid columns={4} mobileLayout="list">
-    <IconText icon="time" headingSize={4}>
+<AfSection theme="mist-green" container={true}>
+  <AfFeatureGrid columns={4} mobileLayout="list">
+    <AfIconText icon="time" headingSize={4}>
       Fast Processing
       <span slot="description">Process documents in seconds.</span>
-    </IconText>
-    <IconText icon="verification-01" headingSize={4}>
+    </AfIconText>
+    <AfIconText icon="verification-01" headingSize={4}>
       High Accuracy
       <span slot="description">99%+ extraction accuracy.</span>
-    </IconText>
-    <IconText icon="security-01" headingSize={4}>
+    </AfIconText>
+    <AfIconText icon="security-01" headingSize={4}>
       Secure & Compliant
       <span slot="description">Enterprise-grade security.</span>
-    </IconText>
-    <IconText icon="code" headingSize={4}>
+    </AfIconText>
+    <AfIconText icon="code" headingSize={4}>
       Easy Integration
       <span slot="description">Works with your existing systems.</span>
-    </IconText>
-  </FeatureGrid>
-</Section>
+    </AfIconText>
+  </AfFeatureGrid>
+</AfSection>
 ```
 
 ### Grid of Feature Cards with Images
 
 ```tsx
-import { FeatureGrid, FeatureCard } from '@affinda/react';
+import { AfFeatureGrid, AfFeatureCard } from '@affinda/react';
 
-<FeatureGrid columns={3} mobileLayout="scroll">
-  <FeatureCard theme="mist-green" cardSize="flexible" imageSrc="/feature1.jpg">
+<AfFeatureGrid columns={3} mobileLayout="scroll">
+  <AfFeatureCard theme="mist-green" cardSize="flexible" imageSrc="/feature1.jpg">
     Extract Any Document
     <span slot="body">AI-powered extraction for all document types.</span>
-  </FeatureCard>
-  <FeatureCard theme="soft-clay" cardSize="flexible" imageSrc="/feature2.jpg">
+  </AfFeatureCard>
+  <AfFeatureCard theme="soft-clay" cardSize="flexible" imageSrc="/feature2.jpg">
     Validate Automatically
     <span slot="body">Built-in validation catches errors.</span>
-  </FeatureCard>
-</FeatureGrid>
+  </AfFeatureCard>
+</AfFeatureGrid>
 ```
 
 ### Grouped Buttons
 
 ```tsx
-import { ButtonGroup, Button } from '@affinda/react';
+import { AfButtonGroup, AfButton } from '@affinda/react';
 
-<ButtonGroup direction="horizontal" gap="16px">
-  <Button variant="primary">Get Started</Button>
-  <Button variant="secondary">Learn More</Button>
-</ButtonGroup>
+<AfButtonGroup direction="horizontal" gap="16px">
+  <AfButton variant="primary">Get Started</AfButton>
+  <AfButton variant="secondary">Learn More</AfButton>
+</AfButtonGroup>
 ```
 
 ### Feature Section with Image + Grid of Items
 
 ```tsx
-import { Section, GridCallout, IconText, Button } from '@affinda/react';
+import { AfSection, AfGridCallout, AfIconText, AfButton } from '@affinda/react';
 
-<Section theme="white" container={true}>
-  <GridCallout imageSrc="/team.jpg" imagePosition="left" columns={2}>
+<AfSection theme="white" container={true}>
+  <AfGridCallout imageSrc="/team.jpg" imagePosition="left" columns={2}>
     Why Choose Affinda
     <span slot="description">Industry-leading AI for document processing.</span>
     
-    <IconText slot="items" icon="sparkle" headingSize={4}>
+    <AfIconText slot="items" icon="sparkle" headingSize={4}>
       AI-Powered
       <span slot="description">State-of-the-art machine learning.</span>
-    </IconText>
-    <IconText slot="items" icon="security-01" headingSize={4}>
+    </AfIconText>
+    <AfIconText slot="items" icon="security-01" headingSize={4}>
       Enterprise Security
       <span slot="description">SOC 2 Type II certified.</span>
-    </IconText>
+    </AfIconText>
     
-    <Button slot="cta" variant="primary">Learn More</Button>
-  </GridCallout>
-</Section>
+    <AfButton slot="cta" variant="primary">Learn More</AfButton>
+  </AfGridCallout>
+</AfSection>
 ```
 
 ### Icons in Feature Lists
 
 ```tsx
-import { IconBox, IconText } from '@affinda/react';
+import { AfIconBox, AfIconText } from '@affinda/react';
 
 // Standalone icons
-<IconBox icon="verification-01" size="default" />
+<AfIconBox icon="verification-01" size="default" />
 
 // Icon + text combinations
-<IconText icon="time" headingSize={4}>
+<AfIconText icon="time" headingSize={4}>
   Fast Processing
   <span slot="description">Documents processed in seconds.</span>
-</IconText>
+</AfIconText>
 ```
 
-### Hero with Heading, Description, and Buttons
+### Hero Section (Recipe)
+
+Hero sections are composed from `AfSection` + `AfContainer` + `AfTypographyLockup`:
 
 ```tsx
-import { HeroSection, Heading, Text, ButtonGroup, Button } from '@affinda/react';
-
-<HeroSection theme="inkwell" minHeight="80vh" headingSize={1} textAlignment="center">
-  <Heading slot="heading" level="1">Document Automation</Heading>
-  <Text slot="description" variant="large">
-    Extract data from any document with AI.
-  </Text>
-  <ButtonGroup slot="buttons" direction="horizontal" gap="16px">
-    <Button variant="primary">Start Free Trial</Button>
-    <Button variant="secondary">Watch Demo</Button>
-  </ButtonGroup>
-</HeroSection>
+import { AfSection, AfContainer, AfTypographyLockup, AfHeading, AfText, AfButtonGroup, AfButton } from '@affinda/react';
+
+<AfSection theme="inkwell" padding="loose" style={{ minHeight: '80vh' }}>
+  <AfContainer>
+    <AfTypographyLockup headingSize={1} textAlignment="center">
+      <AfHeading level="1">Document Automation</AfHeading>
+      <AfText slot="description" variant="large">
+        Extract data from any document with AI.
+      </AfText>
+      <AfButtonGroup slot="buttons" direction="horizontal" gap="16px">
+        <AfButton variant="primary">Start Free Trial</AfButton>
+        <AfButton variant="secondary">Watch Demo</AfButton>
+      </AfButtonGroup>
+    </AfTypographyLockup>
+  </AfContainer>
+</AfSection>
 ```
 
+This composition pattern gives you full control over each layer while maintaining consistent spacing and theme inheritance.
+
 ---
 
 ## For AI Agents
@@ -944,20 +887,20 @@ When generating Affinda UI code:
 
 | If you need... | Use this component |
 |----------------|-------------------|
-| Grid of items | `FeatureGrid` |
-| Card with icon + text | `IconText` |
-| Standalone icon | `IconBox` |
-| Card with photo/screenshot | `FeatureCard` |
-| Card with @affinda/illustrations | `IllustratedCard` |
-| Button group | `ButtonGroup` |
-| Heading + description + buttons | `TypographyLockup` |
-| Section with image + feature grid | `GridCallout` |
-| Two-column layout | `SplitSection` |
-| Responsive grid container | `FeatureGrid` with `mobileLayout` prop |
+| Grid of items | `AfFeatureGrid` |
+| Card with icon + text | `AfIconText` |
+| Standalone icon | `AfIconBox` |
+| Card with photo/screenshot | `AfFeatureCard` |
+| Card with @affinda/illustrations | `AfIllustratedCard` |
+| Button group | `AfButtonGroup` |
+| Heading + description + buttons | `AfTypographyLockup` |
+| Section with image + feature grid | `AfGridCallout` |
+| Two-column layout | `AfSplitSection` |
+| Responsive grid container | `AfFeatureGrid` with `mobileLayout` prop |
 
 ### Available Icons
 
-Use icons from `@affinda/icons` with `IconBox` or `IconText`. Never use emoji.
+Use icons from `@affinda/icons` with `AfIconBox` or `AfIconText`. Never use emoji.
 
 **Common icons:**
 - `time` - speed/performance
@@ -973,14 +916,14 @@ Use icons from `@affinda/icons` with `IconBox` or `IconText`. Never use emoji.
 - `gear` - settings/configuration
 
 ```tsx
-// Use with IconBox
-<IconBox icon="verification-01" size="default" />
+// Use with AfIconBox
+<AfIconBox icon="verification-01" size="default" />
 
-// Use with IconText
-<IconText icon="sparkle" headingSize={4}>
+// Use with AfIconText
+<AfIconText icon="sparkle" headingSize={4}>
   AI-Powered Processing
   <span slot="description">State-of-the-art machine learning.</span>
-</IconText>
+</AfIconText>
 ```
 
 ### Theme System (Important!)
@@ -988,14 +931,42 @@ Use icons from `@affinda/icons` with `IconBox` or `IconText`. Never use emoji.
 Use the 4-value theme system on container components. Child components inherit colors automatically:
 
 ```tsx
-<Section theme="inkwell">
-  <Heading level="2">Title</Heading>  {/* Automatically light text */}
-  <Text>Content</Text>                {/* Automatically light text */}
-  <Button variant="primary">Action</Button>  {/* Automatically themed */}
-</Section>
+<AfSection theme="inkwell">
+  <AfHeading level="2">Title</AfHeading>  {/* Automatically light text */}
+  <AfText>Content</AfText>                {/* Automatically light text */}
+  <AfButton variant="primary">Action</AfButton>  {/* Automatically themed */}
+</AfSection>
 ```
 
-**Available themes:** `"white"` | `"inkwell"` | `"mist-green"` | `"soft-clay"`
+**Available themes:** `"white"` | `"inkwell"` | `"mist-green"` | `"soft-clay"` | `"white-ivory"`
+
+### Theme Override
+
+Use `AfThemeOverride` to explicitly set a theme for child components, overriding any inherited theme from parent containers. This is useful when you need specific components to use a different theme than their container.
+
+```tsx
+<AfSection theme="inkwell">
+  <AfHeading level="1">Inherits inkwell theme</AfHeading>
+  
+  {/* Override just this button to use white theme colors */}
+  <AfThemeOverride theme="white">
+    <AfButton variant="secondary">Uses white theme</AfButton>
+  </AfThemeOverride>
+</AfSection>
+```
+
+You can also wrap multiple components:
+
+```tsx
+<AfSection theme="mist-green">
+  <AfThemeOverride theme="inkwell">
+    <AfHeading level="2">Dark heading on green background</AfHeading>
+    <AfText>Dark text styling</AfText>
+  </AfThemeOverride>
+</AfSection>
+```
+
+**Note:** `AfThemeOverride` only sets the CSS custom properties for child component colors — it does NOT change the background color. The visual background remains from the parent container.
 
 ### Self-Theming Components (No Section Wrapper!)
 
@@ -1003,38 +974,63 @@ Some components provide their own themed backgrounds. **Do NOT wrap these in a S
 
 | Component | Provides Own Background | Correct Usage |
 |-----------|------------------------|---------------|
-| `HeroSection` | Yes | Use directly, set `theme` prop |
-| `ClientCarousel` | Yes | Use directly, set `theme` prop to match adjacent section |
-| `InPageBanner` | Yes | Wrap in neutral `Section theme="white"` to show contrast |
+| `AfClientCarousel` | Yes | Use directly, set `theme` prop to match adjacent section |
+| `AfInPageBanner` | Yes | Wrap in neutral `AfSection theme="white"` to show contrast |
+
+```tsx
+<AfClientCarousel theme="inkwell">...</AfClientCarousel>
+```
+
+### AfClientCarousel Theme Matching
+
+When using `AfClientCarousel`, set its `theme` prop to match the section **above** it for visual continuity. This creates a seamless transition between sections.
 
 ```tsx
-<ClientCarousel theme="inkwell">...</ClientCarousel>
+{/* Hero section using composition pattern */}
+<AfSection theme="inkwell" padding="loose">
+  <AfContainer>
+    <AfTypographyLockup headingSize={1} textAlignment="center">
+      {/* Hero content */}
+    </AfTypographyLockup>
+  </AfContainer>
+</AfSection>
+<AfClientCarousel theme="inkwell">
+  {/* Logo wells - theme matches preceding section */}
+</AfClientCarousel>
 ```
 
-### ClientCarousel Theme Matching
+### AfSplitSection Theme Context
 
-When using `ClientCarousel`, set its `theme` prop to match the section **above** it for visual continuity. This creates a seamless transition between sections.
+`AfSplitSection` creates a two-tone background split at 50%. By default, child content inherits the **top theme's** colors. When content visually sits in the bottom half, wrap it with `AfThemeOverride` to use the appropriate theme colors:
 
 ```tsx
-<HeroSection theme="inkwell">
-  {/* Hero content */}
-</HeroSection>
-<ClientCarousel theme="inkwell">
-  {/* Logo wells - theme matches preceding HeroSection */}
-</ClientCarousel>
+<AfSplitSection topTheme="inkwell" bottomTheme="white">
+  {/* Header in top half - uses inherited inkwell theme (light text) */}
+  <AfHeading level="2">Dark Header</AfHeading>
+  
+  {/* Card in bottom half - override to white theme for proper contrast */}
+  <AfThemeOverride theme="white">
+    <AfCard theme="white">
+      <AfHeading level="3">Card Content</AfHeading>
+      <AfButton variant="primary">Action</AfButton>
+    </AfCard>
+  </AfThemeOverride>
+</AfSplitSection>
 ```
 
-### FeatureAccordion (Wrap in Section!)
+This pattern gives you full control over which theme context each piece of content uses, regardless of its visual position.
+
+### AfFeatureAccordion (Wrap in AfSection!)
 
-Unlike self-theming components, `FeatureAccordion` should be wrapped in a `Section` which provides the theme context, padding, and container.
+Unlike self-theming components, `AfFeatureAccordion` should be wrapped in an `AfSection` which provides the theme context, padding, and container.
 
 ```tsx
-<Section theme="soft-clay" padding="default">
-  <FeatureAccordion
+<AfSection theme="soft-clay" padding="default">
+  <AfFeatureAccordion
     heading="Give AI agents your paperwork"
     items={JSON.stringify([...])}
   />
-</Section>
+</AfSection>
 ```
 
 ### Slot-Based Components
@@ -1042,26 +1038,26 @@ Unlike self-theming components, `FeatureAccordion` should be wrapped in a `Secti
 Several components require `slot` attributes on children:
 
 ```tsx
-// Navbar slots: logo, start, end, button
-<Navbar>
-  <div slot="start"><NavItem href="/">Home</NavItem></div>
-  <Button slot="button">CTA</Button>
-</Navbar>
-
-// Footer slots: logo, social, contact, nav, legal, badges
-// ClientCarousel slots: row-1, row-2
-// Button slots: icon-left, icon-right
-// TypographyLockup slots: description, buttons
+// AfNavbar slots: logo, start, end, button
+<AfNavbar>
+  <div slot="start"><AfNavItem href="/">Home</AfNavItem></div>
+  <AfButton slot="button">CTA</AfButton>
+</AfNavbar>
+
+// AfFooter slots: logo, social, contact, nav, legal, badges
+// AfClientCarousel slots: row-1, row-2
+// AfButton slots: icon-left, icon-right
+// AfTypographyLockup slots: description, buttons
 ```
 
-### FeatureAccordion Items
+### AfFeatureAccordion Items
 
 The `items` prop requires JSON.stringify():
 
 ```tsx
-<Section theme="mist-green" padding="default">
-  <FeatureAccordion items={JSON.stringify([{ title: "...", description: "..." }])} />
-</Section>
+<AfSection theme="mist-green" padding="default">
+  <AfFeatureAccordion items={JSON.stringify([{ title: "...", description: "..." }])} />
+</AfSection>
 ```
 
 ### Brand Colors
@@ -1085,21 +1081,21 @@ The `items` prop requires JSON.stringify():
 
 4. **Never use purple colors** - those were placeholder colors and have been removed
 
-### Footer
+### AfFooter
 
 A flexible, slot-based footer component for composing marketing page footers.
 
 ```tsx
 import { 
-  Footer, 
-  FooterColumn, 
-  FooterLink, 
-  SocialLink, 
-  ContactItem,
-  Logo 
+  AfFooter, 
+  AfFooterColumn, 
+  AfFooterLink, 
+  AfSocialLink, 
+  AfContactItem,
+  AfLogo 
 } from '@affinda/react';
 
-<Footer
+<AfFooter
   copyrightText="© 2025 Your Company. All rights reserved."
   statusText="All systems are operational"
   statusUrl="https://status.example.com"
@@ -1107,33 +1103,33 @@ import {
   showStatus={true}
 >
   {/* Logo */}
-  <Logo slot="logo" />
+  <AfLogo slot="logo" />
 
   {/* Social Links */}
   <div slot="social" style={{ display: 'flex', gap: '12px' }}>
-    <SocialLink href="https://linkedin.com/company/..." icon="linkedin" label="LinkedIn" />
-    <SocialLink href="https://youtube.com/..." icon="youtube" label="YouTube" />
-    <SocialLink href="https://github.com/..." icon="github" label="GitHub" />
+    <AfSocialLink href="https://linkedin.com/company/..." icon="linkedin" label="LinkedIn" />
+    <AfSocialLink href="https://youtube.com/..." icon="youtube" label="YouTube" />
+    <AfSocialLink href="https://github.com/..." icon="github" label="GitHub" />
   </div>
 
   {/* Contact Info */}
   <div slot="contact" style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
-    <ContactItem label="Sales enquiries" value="sales@example.com" />
-    <ContactItem label="Support" value="support@example.com" />
+    <AfContactItem label="Sales enquiries" value="sales@example.com" />
+    <AfContactItem label="Support" value="support@example.com" />
   </div>
 
   {/* Navigation Columns */}
   <div slot="nav" style={{ display: 'contents' }}>
-    <FooterColumn heading="Products">
-      <FooterLink href="/product-a">Product A</FooterLink>
-      <FooterLink href="/product-b">Product B</FooterLink>
-    </FooterColumn>
-
-    <FooterColumn heading="Company">
-      <FooterLink href="/about">About</FooterLink>
-      <FooterLink href="/careers">Careers</FooterLink>
-      <FooterLink href="https://external.com" external>Partner Site</FooterLink>
-    </FooterColumn>
+    <AfFooterColumn heading="Products">
+      <AfFooterLink href="/product-a">Product A</AfFooterLink>
+      <AfFooterLink href="/product-b">Product B</AfFooterLink>
+    </AfFooterColumn>
+
+    <AfFooterColumn heading="Company">
+      <AfFooterLink href="/about">About</AfFooterLink>
+      <AfFooterLink href="/careers">Careers</AfFooterLink>
+      <AfFooterLink href="https://external.com" external>Partner Site</AfFooterLink>
+    </AfFooterColumn>
   </div>
 
   {/* Legal Links */}
@@ -1146,7 +1142,7 @@ import {
   <div slot="badges">
     {/* Your certification badge SVGs or images */}
   </div>
-</Footer>
+</AfFooter>
 ```
 
 **Footer Props:**
@@ -1166,16 +1162,16 @@ import {
 
 **Helper Components:**
 
-- **FooterColumn**: Navigation column with heading
+- **AfFooterColumn**: Navigation column with heading
   - Props: `heading` (string)
   
-- **FooterLink**: Styled footer link
+- **AfFooterLink**: Styled footer link
   - Props: `href` (string), `external` (boolean - adds external link icon)
   
-- **SocialLink**: Circular social media icon link
+- **AfSocialLink**: Circular social media icon link
   - Props: `href`, `label`, `icon` ('linkedin' | 'youtube' | 'github' | 'twitter' | 'facebook' | 'custom')
   
-- **ContactItem**: Label + value pair for contact info
+- **AfContactItem**: Label + value pair for contact info
   - Props: `label`, `value`
 
 **Features:**