Every band of a page. It paints edge to edge; the container inside is what is constrained. `frame` adds the 1px rules in the gutter between viewport and content edges.

• tone?: "page" | "raised" | "sunken" | "inverse" | "brand-deep"
• theme?: "dark" | "light"
• size?: "sm" | "md" | "lg" | "xl"
• container?: "page" | "content" | "prose" | "none"
• frame?: boolean | { sides?, top?, bottom? }
• texture?: "grain" | "dotgrid" | "none"
• background? (section-level art layer)
• as?
• id?
• className?

The frame rules themselves, shared by Section, Hero and MarketingHeader so a header line and the line of the section below it land on the same x. `FRAME_VARS[container]` must be set on the enclosing element. Rule colour always comes from `--section-rule`, never `--border` — on a brand-deep surface `--border` resolves to a solid brand colour, which reads as a stripe rather than a hairline. Short surfaces pass `bottomEdge` so `frame.bottom` paints flush with their own edge (`frame-edge-bottom`) instead of lifting into the gutter, where it would land mid-height on an 84px row.

• frame?: boolean | { sides?, top?, bottom? }
• guideLines?: boolean (deprecated alias)
• bottomEdge?: boolean

The start of a Section. Left-aligned by default; centre only when it is the whole band.

• eyebrow?
• title
• description?
• align?: "left" | "center"
• aside? (slot)
• className?

The first screen of a marketing page. Supports centered ordina-style marketing stack or classic 7/5 split.

• layout?: "split" | "centered"
• eyebrow?
• title
• lede?
• primary?
• secondary?
• artifact? (slot)
• trust? (slot)
• socialProof? (slot)
• bento? (slot)
• marquee? (slot)
• frame?: boolean | { sides?: boolean; top?: boolean; bottom?: boolean }
• container?: 'page' | 'content' | 'prose' | 'none'
• guideLines?: boolean (deprecated alias for frame={{ sides: true }})
• tone?: "page" | "brand-deep"
• theme?: "dark" | "light"
• className?

The title block of an app or info page — replaces the centred heading in a box.

• eyebrow?
• title
• description?
• aside? (slot)
• tone?: SectionTone
• className?

The closing ask. Full-bleed, copy left, actions right — never a box in whitespace. `overflow="visible"` is for the band that sits directly on top of the marketing footer: it unseals the clip so the watermark bleeds downward and pairs with the footer drawing the same `FRAME_VARS.page` sides, which is how ordina's CTA and footer read as one section while remaining two components.

• title
• description?
• actions
• tone?: "brand-deep" | "inverse"
• theme?: "dark" | "light"
• frame?
• ghostMarks?
• overflow?: "clip" | "visible"
• className?

A grid item that explains one capability with borderless shadow boundary.

• icon?
• title
• description
• href?
• className?

An icon that anchors a card. tone="brand" at most once per page.

• size?: "sm" | "md" | "lg"
• tone?: "muted" | "brand" | "accent"
• icon?
• className?

A command, a config shape, or a hero artifact with accessible keyboard scrolling.

• code
• filename?
• className?

Trust or stack row under a hero. Wordmarks, not images.

• items: { label }[]
• className?

Hero kicker or section category badge in uppercase kicker or sentence-case label format.

• variant?: "uppercase" | "label"
• tone?: "neutral" | "brand" | "accent" | "sky" | "mint" | "cream" | "navy"
• icon?
• dot?: boolean
• className?

Gradient-hairline pill chip with outer border-radius 6px and 1px lighting.

• tone?: "neutral" | "mint" | "cream" | "navy" | "brand"
• icon?
• className?

Metric card with 64px Inter Display w500 numeral and footnote lead-in.

• numeral
• unit?
• label
• chip?
• className?

Responsive grid for stat cards with ordina-style staggered top offsets.

• items
• offsets?: number[]
• className?

Alternating text column ↔ visual panel row with dark mode support.

• eyebrow?
• title
• description
• bullets?: string[]
• visual
• reverse?: boolean
• theme?: "light" | "dark"
• className?

Two-column feature tile with ArtifactPanel visual and copy below.

• title
• description
• visual
• className?

Accessible tabbed workflow section built on Radix Tabs with active hairlines.

• tabs: { id, title, description, content }[]
• defaultValue?
• className?

Data-driven rating glyphs and trust statement row.

• items: { glyph?, label }[]
• className?

Token-driven brand mark with 6-sided isometric hexagon Z and Inter Display wordmark.

• variant?: "badge" | "icon" | "monochrome"
• size?: "sm" | "md" | "lg" | "display"
• withWordmark?: boolean
• className?

Marketing header whose logo, wordmark, nav and buttons invert with its surface. `brand-deep` reuses the section tone so a header over a dark hero is painted the same colour; `transparent-on-brand` inverts without a surface. Sticky by default, and a transparent resting tone resolves to `solid` once scrolled. A sticky header occupies flow above the hero, so the hero's lines begin at y=header height — it normally needs `frame={{ sides: true, bottom: true }}` to keep the frame continuous, the bottom hairline being the same full-bleed 10%-white rule ordina draws. `solid` already carries a `border-b border-border` card edge, so do not add `frame.bottom` on top of it.

• tone?: 'transparent' | 'transparent-on-brand' | 'solid' | 'brand-deep'
• sticky?: boolean
• scrolledTone?: HeaderTone
• scrolled?: boolean
• frame?: SectionFrame
• container?: 'page' | 'content' | 'prose' | 'none'
• className?

Floating white sheet footer on surface-brand with 5 link columns and status pill. Draws its own frame (`FRAME_VARS.page` + `FrameLayers frame={{ sides: true, bottom: true }}`) so the vertical pair continues straight down from the closing CTA band above it, and the bottom rule is the section-scale inset one — ordina's sits 41px above the band end, not flush. Set `[--section-rule:var(--guide-line-color)]` explicitly: on this surface `--border` resolves to a solid brand colour and would read as a stripe.

• className?

Minimal legal footer for authenticated dashboard and admin shells.

• version?
• className?

Scroll-triggered entrance animation with reduced-motion fallback.

• children
• direction?: 'up' | 'down' | 'left' | 'right' | 'none'
• distance?: 'sm' | 'md' | 'lg'
• once?: boolean
• className?

Parent orchestration container for staggered child reveals.

• children
• staggerMs?: number
• className?

Child item inside a Stagger container receiving motion timings.

• children
• className?

Continuous pure-CSS horizontal ticker with edge fade masks.

• children
• speed?: 'slow' | 'normal' | 'fast'
• pauseOnHover?: boolean
• reverse?: boolean
• className?

Scroll-bound narrative pinning text while artifacts scroll past.

• steps: { statement, artifact }[]
• reducedMotion?: boolean
• className?

Elevated container for product UI specimens with shadow-float.

• children
• tone?: 'glass' | 'card' | 'sunken'
• className?

1px vertical rules at container edges for layout framing.

• tone?: 'brand' | 'light'
• className?

Local SVG noise texture overlay at 0.04 opacity.

• className?

Local SVG dot-pattern background for narrative sections.

• className?

Oversized decorative Z watermark behind dark CTA bands. Marks sit flush on the section frame lines — left mirrored at the top, right rising from the bottom; pass via Section's `background` slot. Alpha comes from `--texture-ghost-opacity` (0.03, which is ordina's measured SVG fill alpha — it bakes the fade into the fill and leaves CSS opacity at 1), so never add an `opacity-*` class at a call site: tailwind-merge drops the primitive's own value and the mark silently renders several times too strong. `bleed` drops the clip and lifts the layer to `z-[1]` so the overshoot stays visible in the band below — ordina's closing CTA does this, its right mark runs 70px into the footer; leave it off unless the neighbouring band draws the same frame geometry.

• variant?: "single" | "dual"
• theme?: "light" | "brand" | "inverse"
• bleed?: boolean
• className?

Customer proof card in portrait photo or wide dark quote format.

• quote
• author
• role
• image?
• logo?
• variant?: 'portrait' | 'quote'
• className?

Drag-and-snap horizontal customer quote carousel built on Embla.

• items: TestimonialCardProps[]
• className?

Full-bleed photo card with top-left title and subtitle overlay for hero bentos.

• title
• subtitle?
• imageSrc
• imageAlt
• href?
• className?

Full-bleed horizontal carousel with display stats and brand logos.

• slides: { title, stat, label, imageSrc, imageAlt }[]
• className?

Ecosystem integration grid with trademark-safe wordmarks in UI sans.

• items: { label, icon? }[]
• variant?: 'static' | 'marquee'
• className?

Continuous grayscale wordmark marquee with edge fades.

• items: { label }[]
• speed?: 'slow' | 'normal' | 'fast'
• className?

Standard editorial blog post card with category chip and metadata.

• category
• date
• readTime
• title
• excerpt
• href
• imageSrc
• imageAlt
• className?

Large featured blog card capable of straddling navy to white section boundaries.

• category
• date
• readTime
• title
• excerpt
• href
• imageSrc
• imageAlt
• straddle?: boolean
• className?

Long-form editorial article typography at 759px measure with 1.6 line height.

• children
• className?

Author avatar, title, and bio card for article readers.

• name
• role
• bio
• avatarSrc
• className?

Accessible FAQ accordion with hairline rows built on Radix Accordion.

• items: { question, answer }[]
• headerAside? (slot)
• className?

Plan pricing card with 64px display numeral and D-2 brass accent CTA when highlighted.

• name
• price
• period?
• description
• features: string[]
• highlighted?: boolean
• ctaLabel?
• ctaHref?
• className?

Multi-tier pricing grid layout for subscription plans.

• children
• className?

Segmented monthly vs annual billing toggle control.

• value: 'monthly' | 'annual'
• onChange: (val) => void
• discountLabel?
• className?

Accessible USD vs INR currency selector.

• value: 'USD' | 'INR'
• onChange: (val) => void
• className?

Accessible feature comparison table with real thead and row/col scopes.

• columns: string[]
• categories: { name, rows: { feature, values: (string | boolean)[] }[] }[]
• className?

Data-driven commercial covenant and guarantee list.

• items: { promise, evidence }[]
• className?

Generic catalog card with prominent '100% Free Forever' badge for blocks and themes.

• title
• description
• archetype?
• category?
• preview? (slot)
• actions? (slot)
• className?

Category filter pills built on ToggleGroup.

• options: { id, label }[]
• selected: string | string[]
• onChange
• multiple?: boolean
• className?

Live operational status pill with pulsing indicator.

• status?: 'online' | 'degraded' | 'offline'
• label?: string
• className?

Accessible email capture form with inline error validation.

• actionUrl?
• onSuccess?
• className?

Responsive iframe viewport switcher (1440 / 768 / 375).

• url
• title
• initialDevice?: 'desktop' | 'tablet' | 'mobile'
• className?

Tabbed code specimen container with copy-to-clipboard button.

• tabs: { filename, code, language? }[]
• className?