\n Welcome to Affinda
\n \n Extract data from documents with AI-powered accuracy\n
\n Get Started\n Learn More\n \n );\n}\n```\n\n### Navigation\n\n```tsx\nimport { AfNavbar, AfNavItem, AfButton } from '@affinda/react';\n\nfunction Header() {\n return (\n // AfNavbar displays the default Affinda logo automatically\n \n \n
\n Home\n \n
\n Products\n \n
\n Affinda branded content\n
\n);\n```\n\n```tsx\n// Via JavaScript\nimport { tokens } from '@affinda/tokens';\n\nconst MyComponent = () => (\n \n Affinda branded content\n
\n);\n```\n\n### Available Affinda Colors\n\n**Brand Colors:**\n- Mist Green: `#C6D5D1` - `var(--colour-brand-mist-green)`\n- Inkwell: `#14343B` - `var(--colour-brand-inkwell)`\n- Soft Clay: `#B09670` - `var(--colour-brand-soft-clay)`\n- Ice: `#A6FFF8` - `var(--colour-brand-ice)`\n- Azure: `#7FE2D4` - `var(--colour-brand-azure)`\n- Ivory Paper: `#FFF9E1` - `var(--colour-brand-ivory-paper)`\n- White: `#FFFFFF` - `var(--colour-brand-white)`\n\n**Tints:** Each color has tints from 20 (lightest) to 800 (darkest)\n- `var(--colour-tints-mist-green-20)` through `var(--colour-tints-mist-green-800)`\n- `var(--colour-tints-inkwell-20)` through `var(--colour-tints-inkwell-800)`\n- And more...\n\nSee the [@affinda/tokens documentation](https://www.npmjs.com/package/@affinda/tokens) for the complete color palette.\n\n## TypeScript Support\n\nFull TypeScript type definitions are included for all components and props.\n\n## Custom Styling\n\nAll components accept a `style` prop for applying inline CSS styles directly to the component's root element:\n\n```tsx\nimport { AfButton, AfSection, AfHeading } from '@affinda/react';\n\n// Apply custom styles to any component\n\n Custom Styled Button\n\n\n\n Styled Section\n\n```\n\nThe `style` prop is passed through to the web component's host element, allowing you to override or extend component styles as needed.\n\n## Common UI Patterns\n\nUse these component combinations for common marketing page patterns. **Always check this section before writing custom CSS or HTML.**\n\n### Grid of Feature Items with Icons\n\n```tsx\nimport { AfSection, AfFeatureGrid, AfIconText } from '@affinda/react';\n\n\n \n \n Fast Processing\n Process documents in seconds.\n \n \n High Accuracy\n 99%+ extraction accuracy.\n \n \n Secure & Compliant\n Enterprise-grade security.\n \n \n Easy Integration\n Works with your existing systems.\n \n \n\n```\n\n### Grid of Feature Cards with Images\n\n```tsx\nimport { AfFeatureGrid, AfFeatureCard } from '@affinda/react';\n\n\n \n Extract Any Document\n AI-powered extraction for all document types.\n \n \n Validate Automatically\n Built-in validation catches errors.\n \n\n```\n\n### Grouped Buttons\n\n```tsx\nimport { AfButtonGroup, AfButton } from '@affinda/react';\n\n\n Get Started\n Learn More\n\n```\n\n### Feature Section with Image + Grid of Items\n\n```tsx\nimport { AfSection, AfGridCallout, AfIconText, AfButton } from '@affinda/react';\n\n\n \n Why Choose Affinda\n Industry-leading AI for document processing.\n \n \n AI-Powered\n State-of-the-art machine learning.\n \n \n Enterprise Security\n SOC 2 Type II certified.\n \n \n Learn More\n \n\n```\n\n### Icons in Feature Lists\n\n```tsx\nimport { AfIconBox, AfIconText } from '@affinda/react';\n\n// Standalone icons\n\n\n// Icon + text combinations\n\n Fast Processing\n Documents processed in seconds.\n\n```\n\n### Hero Section (Recipe)\n\nHero sections are composed from `AfSection` + `AfContainer` + `AfTypographyLockup`:\n\n```tsx\nimport { AfSection, AfContainer, AfTypographyLockup, AfHeading, AfText, AfButtonGroup, AfButton } from '@affinda/react';\n\n\n \n \n Document Automation\n \n Extract data from any document with AI.\n \n \n Start Free Trial\n Watch Demo\n \n \n \n\n```\n\nThis composition pattern gives you full control over each layer while maintaining consistent spacing and theme inheritance.\n\n---\n\n## For AI Agents\n\nWhen generating Affinda UI code:\n\n### Component Selection (Critical!)\n\n**Always use existing components instead of custom CSS/HTML.** Before writing any layout code, check if a component exists for your use case.\n\n| If you need... | Use this component |\n|----------------|-------------------|\n| Grid of items | `AfFeatureGrid` |\n| Card with icon + text | `AfIconText` |\n| Standalone icon | `AfIconBox` |\n| Card with photo/screenshot | `AfFeatureCard` |\n| Card with @affinda/illustrations | `AfIllustratedCard` |\n| Button group | `AfButtonGroup` |\n| Heading + description + buttons | `AfTypographyLockup` |\n| Section with image + feature grid | `AfGridCallout` |\n| Two-column layout | `AfSplitSection` |\n| Responsive grid container | `AfFeatureGrid` with `mobileLayout` prop |\n\n### Available Icons\n\nUse icons from `@affinda/icons` with `AfIconBox` or `AfIconText`. Never use emoji.\n\n**Common icons:**\n- `time` - speed/performance\n- `verification-01` - accuracy/checking\n- `security-01`, `security-02` - security/compliance\n- `sparkle` - AI/magic\n- `productivity` - efficiency\n- `code` - integration/API\n- `document-upload` - documents\n- `lending-01`, `lending-02` - lending industry\n- `check-circle` - success/checkmarks\n- `data` - data/analytics\n- `gear` - settings/configuration\n\n```tsx\n// Use with AfIconBox\n\n\n// Use with AfIconText\n\n AI-Powered Processing\n State-of-the-art machine learning.\n\n```\n\n### Theme System (Important!)\n\nUse the 4-value theme system on container components. Child components inherit colors automatically:\n\n```tsx\n\n Title {/* Automatically light text */}\n Content {/* Automatically light text */}\n Action {/* Automatically themed */}\n\n```\n\n**Available themes:** `\"white\"` | `\"inkwell\"` | `\"mist-green\"` | `\"soft-clay\"` | `\"white-ivory\"`\n\n### Theme Override\n\nUse `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.\n\n```tsx\n\n Inherits inkwell theme\n \n {/* Override just this button to use white theme colors */}\n \n Uses white theme\n \n\n```\n\nYou can also wrap multiple components:\n\n```tsx\n\n \n Dark heading on green background\n Dark text styling\n \n\n```\n\n**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.\n\n### Self-Theming Components (No Section Wrapper!)\n\nSome components provide their own themed backgrounds. **Do NOT wrap these in a Section** — they handle their own background color and spacing.\n\n| Component | Provides Own Background | Correct Usage |\n|-----------|------------------------|---------------|\n| `AfClientCarousel` | Yes | Use directly, set `theme` prop to match adjacent section |\n| `AfInPageBanner` | Yes | Wrap in neutral `AfSection theme=\"white\"` to show contrast |\n\n```tsx\n...\n```\n\n### AfClientCarousel Theme Matching\n\nWhen using `AfClientCarousel`, set its `theme` prop to match the section **above** it for visual continuity. This creates a seamless transition between sections.\n\n```tsx\n{/* Hero section using composition pattern */}\n\n \n \n {/* Hero content */}\n \n \n\n\n {/* Logo wells - theme matches preceding section */}\n\n```\n\n### AfSplitSection Theme Context\n\n`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:\n\n```tsx\n\n {/* Header in top half - uses inherited inkwell theme (light text) */}\n Dark Header\n \n {/* Card in bottom half - override to white theme for proper contrast */}\n \n \n Card Content\n Action\n \n \n\n```\n\nThis pattern gives you full control over which theme context each piece of content uses, regardless of its visual position.\n\n### AfFeatureAccordion (Wrap in AfSection!)\n\nUnlike self-theming components, `AfFeatureAccordion` should be wrapped in an `AfSection` which provides the theme context, padding, and container.\n\n```tsx\n\n \n\n```\n\n### Slot-Based Components\n\nSeveral components require `slot` attributes on children:\n\n```tsx\n// AfNavbar slots: logo, start, end, button\n\n \n CTA\n\n\n// AfFooter slots: logo, social, contact, nav, legal, badges\n// AfClientCarousel slots: row-1, row-2\n// AfButton slots: icon-left, icon-right\n// AfTypographyLockup slots: description, buttons\n```\n\n### AfFeatureAccordion Items\n\nThe `items` prop requires JSON.stringify():\n\n```tsx\n\n \n\n```\n\n### Brand Colors\n\n1. **Always use Affinda brand colors:**\n - Primary: Mist Green (`#C6D5D1`)\n - Text: Inkwell (`#14343B`)\n - Accent: Soft Clay (`#B09670`)\n - Bright: Ice (`#A6FFF8`)\n\n2. **Use CSS custom properties:**\n ```css\n background: var(--colour-brand-mist-green);\n color: var(--colour-brand-inkwell);\n ```\n\n3. **Import the tokens CSS:**\n ```tsx\n import '@affinda/tokens/tokens.css';\n ```\n\n4. **Never use purple colors** - those were placeholder colors and have been removed\n\n### AfFooter\n\nA flexible, slot-based footer component for composing marketing page footers.\n\n```tsx\nimport { \n AfFooter, \n AfFooterColumn, \n AfFooterLink, \n AfSocialLink, \n AfContactItem,\n AfLogo \n} from '@affinda/react';\n\n\n {/* Logo */}\n \n\n {/* Social Links */}\n \n\n {/* Contact Info */}\n \n\n {/* Navigation Columns */}\n \n
\n Product A\n Product B\n \n\n
\n About\n Careers\n Partner Site\n \n
\n {/* Your certification badge SVGs or images */}\n
\n\n```\n\n**Footer Props:**\n- `copyrightText`: Copyright text (e.g., \"© 2025 Company. All rights reserved.\")\n- `statusText`: Status message text\n- `statusUrl`: Link to status page\n- `systemsOperational`: Boolean for green/red status indicator\n- `showStatus`: Whether to show the status section\n\n**Footer Slots:**\n- `logo`: Your logo component\n- `social`: Social media links (use SocialLink components)\n- `contact`: Contact information (use ContactItem components)\n- `nav`: Navigation columns (use FooterColumn + FooterLink components)\n- `legal`: Legal/policy links\n- `badges`: Certification badges\n\n**Helper Components:**\n\n- **AfFooterColumn**: Navigation column with heading\n - Props: `heading` (string)\n \n- **AfFooterLink**: Styled footer link\n - Props: `href` (string), `external` (boolean - adds external link icon)\n \n- **AfSocialLink**: Circular social media icon link\n - Props: `href`, `label`, `icon` ('linkedin' | 'youtube' | 'github' | 'twitter' | 'facebook' | 'custom')\n \n- **AfContactItem**: Label + value pair for contact info\n - Props: `label`, `value`\n\n**Features:**\n- Dark inkwell background with mist green text\n- Fully composable via slots\n- Built-in social media icons\n- External link indicators\n- System status indicator\n- Fully responsive design\n\n## Using Illustrations\n\nThe `@affinda/illustrations` package provides themed illustration assets:\n\n```tsx\nimport { getIllustrationUrlByScene } from '@affinda/illustrations';\n\n// Available scenes: 'document-raise', 'thinking', 'shapes', 'team-leader', \n// 'grow-business', 'document-type', 'industries', 'accuracy', 'intelligence', \n// 'page-turn', 'automate'\n\n// Available themes: 'white-ivory', 'mist-green', 'soft-clay', 'inkwell'\n\n
\n```\n\n## Related Packages\n\n- **@affinda/wc** - Core web components (used internally)\n- **@affinda/tokens** - Design tokens (colors, spacing, typography)\n- **@affinda/icons** - Icon library\n- **@affinda/illustrations** - Illustration assets (install separately: `npm install @affinda/illustrations`)\n- **@affinda/css** - Base CSS styles\n","readmeFilename":"README.md"}![\"Feature\"](\"screenshot.webp\")
\n![\"Preview\"](\"video-thumbnail.jpg\")
\n