Renders branded UI elements for OpenFrame authentication screens: the OpenFrame logo + wordmark and a "Powered by Flamingo" footer mark. ## Key Components ### `OpenFrameWordmark` Displays the OpenFrame logo icon alongside the "OpenFrame" wordmark text. Uses CSS custom properties for theming (`--color-accent-primary`, `--color-text-primary`). ### `PoweredByFlamingo` Renders a "Powered by Flamingo" attribution footer. Accepts a `compact` prop to control logo sizing across breakpoints. ### `PoweredByFlamingoProps` | Prop | Type | Default | Description | |------|------|---------|-------------| | `compact` | `boolean` | `false` | Keeps logo at 56×16px at all breakpoints; when `false`, grows to 83×24px on tablet and above | ## Usage Example ```typescript import { OpenFrameWordmark, PoweredByFlamingo } from './auth-branding' // Auth screen header function AuthLayout() { return (

{/* ... auth form content ... */}

) } ``` ## Notes - This is a `'use client'` component (Next.js App Router). - Logo colors are driven entirely by CSS custom properties — no hardcoded values. - The `FlamingoLogoIcon` source aspect ratio is 416×120 (~3.47:1); explicit `w`/`h` classes prevent the SVG from being rendered as a square.