Layouts

BluAuth ships five layouts. They all render the same form and the same provider list — the difference is composition, the amount of room given to your brand, and the idiom each one uses to present hero content. Every layout is fully responsive and renders every concept (login, forgot, reset, force-reset, verify-email, error) without additional configuration.

The five layouts are selected via the Layout dropdown in the theme editor. The underlying field is layoutPreset with values centered-card, split-hero, minimal, cinematic-split, or aurora.

Centered Card

A single card floating on a softly tinted background. Fast to recognize, reads as neutral-professional. This is the right default when you don't have a strong design system yet, or when the login screen should feel light and unbranded — a utility rather than a destination.

• Hero treatment: no dedicated hero panel. Hero eyebrow and action cards render inline at the bottom of the card as footer links — compact, text-only, separated by a thin divider.
• Logo position: top of the form card.
• Background behavior: honors both framed and full-bleed modes. Framed places the image behind the card with a vignette; full-bleed reaches to the viewport edges.
• Mobile: no change. The card stays centered; background images crop to cover.
• When to pick: brand-light tenants, internal tools, MVP apps that haven't invested in brand copy yet.

Split Hero

The most-used layout. A two-column composition with a branded hero panel on the left and the form on the right. Editorial and brand-forward — this is the layout that most tenants graduate to once they have a logo, a tagline, and at least one link they want to put in front of users.

• Hero treatment: an editorial list in the hero column. Eyebrow → heading → subheading → hero cards as a vertical stack of stacked title+description rows, separated by whitespace rather than dividers. If the tenant fills both hero card slots, both show; if only one is filled, only that one shows; if neither is filled, the list collapses cleanly.
• Logo position: top of the hero column.
• Hero cards: Hero Card 1 and Hero Card 2 support eyebrow, title, description, and an optional url. Cards with a URL become links (opens in a new tab); cards without a URL are static.
• Background behavior: framed mode treats the hero column as the image container; full-bleed extends the image across both columns.
• Mobile (<768px): collapses to stacked. Hero on top, form below. Cards drop to a single column.
• When to pick: the default for a tenant with brand copy and a hero image. This is a good choice if you're unsure.

Minimal

A flat, centered form with no card chrome — just fields floating on the background color. Type-forward, near-invisible, intended for apps where sign-in should be a utility and the brand lives elsewhere.

• Hero treatment: hero eyebrow renders as a small all-caps tag above the heading. Hero action cards render as inline footer links at the bottom of the form — plain text with a chevron, no card styling. If both hero card slots are empty, the footer is omitted.
• Logo position: above the heading (small — minimal is designed around type).
• Background behavior: does not render a background image, even if one is set. That's the whole point of minimal.
• Mobile: no change. Already the narrowest layout.
• When to pick: internal tools, developer-facing apps, utility sign-ins for apps users open dozens of times a day and don't want decoration on.
• Best paired with: surfaceStylePreset: solid, fieldStylePreset: quiet.

Cinematic Split

A tall two-column treatment with an atmospheric hero (mesh gradient by default, or a background image with overlay) and a form panel on the right. The most product-marketing-forward layout — best suited to consumer-facing apps and launch moments.

• Hero treatment: the hero column renders eyebrow, heading, subheading, support text, and plaques — monochrome card tiles in the hero column that stack vertically. Plaques are the cinematic idiom of the hero cards: larger type, more breathing room than split-hero's list, and a subtle backdrop-blurred fill.
• Logo position: top of the hero column, framed by a soft glow.
• Background behavior: if a background image is set, it fills the hero column (not the form side) with a gradient overlay for text legibility. Without an image, the hero uses a mesh gradient derived from the primary color.
• Exposes two additional controls:
  • Panel Mode (cinematicPanelMode) — contained (rounded-corner panels with a small gap between hero and form) or edge-to-edge (panels meet at the viewport edges, no gap, no corner rounding).
  • Height Mode (cinematicHeightMode) — full (min-height: 100dvh — fills the viewport) or contained (natural content height with a max width of 72rem).
• Mobile: collapses to stacked, hero on top. Plaques become full-width cards. Panel mode still controls corner rounding of the collapsed stack.
• When to pick: consumer or go-to-market-facing apps where the login page is effectively a marketing surface. Use edge-to-edge + full for the most dramatic treatment — the studio removes outer canvas padding when both are set so the split truly reaches the edges.

Aurora

Atmospheric, motion-forward. Animated gradient "blobs" wash behind a glassy form card. The newest and most distinctive layout; use it when you want the login page to feel alive.

• Hero treatment: hero eyebrow renders as a glass chip above the heading (small, all-caps, backdrop-blurred pill). Hero action cards render as glass chips at the bottom — two-up at desktop, stacked on mobile — with the same backdrop-blurred aesthetic so they feel like part of the aurora, not attachments to it.
• Logo position: above the heading, centered.
• Background behavior: ignores background images. The animated aurora is the background.
• Exposes one additional control:
  • Aurora Intensity (auroraIntensity) — three tiers:

• Mobile: the aurora adjusts to the viewport. reactive mode falls back to atmospheric in preview (cursor events in the embedded frame eat form clicks), but behaves as reactive in production.
• Reduced-motion respect: all animations honor @media (prefers-reduced-motion: reduce) — blobs freeze, chips lose their hover transitions.
• When to pick: brand-expressive tenants, launch experiences, landing pages dressed up as login. Use reactive sparingly — it can distract on longer forms.

Cross-cutting hero treatment

Every layout now handles hero eyebrow and hero action cards in its own idiom:

This means the same heroCard1Title field renders faithfully across all five layouts — you don't need to rewrite hero content when you switch layouts. See the concept copy guide for the full list of hero fields.

Responsive behavior

How to pick

Any layout can be combined with any styling preset, any color palette, and any copy. Switch freely — the studio preview is live, and no data is lost when you change layouts.

Next

• Styling tokens — drive colors, typography, and the four preset families.
• Concept copy — hero eyebrow, hero cards, and per-concept copy overrides.
• Design tokens — the authoritative visual contract behind the presets.