Uranus Design System

Wrapper para fluxos de autenticação - split-screen com painel de marca ou centered.

AuthLayout é o invólucro compartilhado por todos os formulários de autenticação. Renderiza um <main> com o formulário e, no variant split, um <aside aria-hidden> com o painel de marca à esquerda em telas grandes.

Variantes

split (default) — painel de marca + formulário lado a lado em lg+. No mobile só o formulário aparece.
centered — formulário centralizado, sem painel. Use para fluxos curtos como verificação de email.

Paleta do painel de marca

No variant split, o painel usa gradientes do preset Uranus (packages/tailwind-config/preset.css): cosmic, aurora, nebula, galaxy. Controle com a prop brandTone (default cosmic). Os utilitários (bg-cosmic, etc.) vêm dos tokens — não use hex nos produtos.

'use client';
import { AuthLayout, OAuthProviderButton, SignInForm } from '@uranus-workspace/blocks';
import { Sparkles } from 'lucide-react';

export default function AuthLayoutDefault() {
  return (
    <div className="w-full min-w-0 overflow-hidden rounded-lg border border-fd-border">
      <AuthLayout
        variant="split"
        brandTone="nebula"
        brandPanel={
          <div className="flex h-full min-h-[420px] flex-col justify-between gap-10 text-white">
            <div className="flex items-center gap-2 text-sm font-medium text-white/80">
              <Sparkles aria-hidden className="size-4" />
              Uranus Technologies
            </div>
            <div className="flex flex-col gap-4">
              <h2 className="max-w-md text-balance text-3xl font-semibold leading-tight text-white">
                O hub de serviços flexível e escalável.
              </h2>
              <p className="max-w-sm text-sm leading-relaxed text-white/85">
                Tokens cósmicos, componentes prontos e acessibilidade como erro — não aviso. Em
                produção em poucos minutos.
              </p>
            </div>
            <figure className="flex flex-col gap-3 border-t border-white/15 pt-6">
              <blockquote className="text-sm leading-relaxed text-white/90">
                “Reduzimos o tempo de onboarding de novos engenheiros de meses para semanas com o
                Uranus.”
              </blockquote>
              <figcaption className="text-xs text-white/70">
                Maria Silva — VP de Engenharia, Apollo
              </figcaption>
            </figure>
          </div>
        }
      >
        <div className="flex flex-col gap-6 rounded-xl border border-border bg-card p-6 shadow-sm sm:p-8">
          <SignInForm
            title="Entrar na sua conta"
            description="Use sua conta corporativa para acessar o workspace."
            socialProviders={
              <>
                <OAuthProviderButton provider="google" onClick={() => {}}>
                  Continuar com Google
                </OAuthProviderButton>
                <OAuthProviderButton provider="microsoft" onClick={() => {}}>
                  Continuar com Microsoft
                </OAuthProviderButton>
              </>
            }
            forgotPasswordHref="#"
            signUpHref="#"
            onSubmit={() => {}}
          />
        </div>
      </AuthLayout>
    </div>
  );
}

Uso

import { AuthLayout, SignInForm } from '@uranus-workspace/blocks';

<AuthLayout
  brandTone="nebula"
  brandPanel={
    <div className="flex h-full flex-col justify-between">
      <Logo />
      <p className="text-sm">O hub de serviços flexível e escalável da Uranus.</p>
    </div>
  }
>
  <SignInForm onSubmit={handleSignIn} />
</AuthLayout>

Diretrizes

O painel de marca é decorativo (aria-hidden). Toda informação importante mora no formulário.
O <h1> da tela é responsabilidade do formulário, não do layout.
Largura máxima do formulário: max-w-sm (24rem). Consistente entre todas as auth screens.
O texto do painel é sempre branco (text-white) porque os gradientes são sempre escuros, em qualquer tema. Não use text-primary-foreground aqui — em dark mode ele inverteria para navy e sumiria sobre o gradiente.

AuthLayout

Variantes

Paleta do painel de marca

Uso

Diretrizes

On this page