configure/template/public/brand.css

Identity layer SDK for AI agents

:root {
  --hero-image:
    radial-gradient(ellipse 58% 56% at 10% 14%, rgba(255, 130, 80, 0.22) 0%, transparent 68%),
    radial-gradient(ellipse 52% 52% at 88% 18%, rgba(140, 80, 240, 0.2) 0%, transparent 68%),
    radial-gradient(ellipse 56% 52% at 84% 84%, rgba(60, 140, 255, 0.18) 0%, transparent 68%),
    radial-gradient(ellipse 48% 44% at 50% -4%, rgba(255, 150, 100, 0.16) 0%, transparent 68%),
    linear-gradient(180deg, #0d1220 0%, #0a0f1a 52%, #060911 100%);
  --hero-position: center;
  --hero-overlay: linear-gradient(to bottom, rgba(6, 10, 18, 0.12) 0%, rgba(6, 10, 18, 0.24) 44%, rgba(6, 10, 18, 0.52) 100%);
  --hero-text: #ffffff;
  --hero-muted: rgba(236, 241, 255, 0.78);

  --glass-bg: rgba(12, 17, 30, 0.4);
  --glass-border: rgba(255, 255, 255, 0.16);
  --send-bg: linear-gradient(135deg, #4f8cff 0%, #77a6ff 100%);
  --send-fg: #ffffff;

  --chat-bg: #f3f6fa;
  --chat-border: rgba(15, 23, 42, 0.08);
  --chat-border-strong: rgba(15, 23, 42, 0.12);
  --assistant-bubble: rgba(255, 255, 255, 0.97);
  --user-bubble: #111827;
  --user-fg: #f8fafc;

  --text-primary: #101828;
  --text-secondary: #667085;
  --text-placeholder: #98a2b3;
  --accent: #4f8cff;
  --success: #16a34a;
  --warning: #d97706;
  --error: #dc2626;
  --logout-bg: rgba(15, 23, 42, 0.06);
}

:root[data-ui-mode='dark'] {
  --hero-image:
    radial-gradient(ellipse 58% 56% at 10% 14%, rgba(255, 130, 80, 0.22) 0%, transparent 68%),
    radial-gradient(ellipse 52% 52% at 88% 18%, rgba(140, 80, 240, 0.2) 0%, transparent 68%),
    radial-gradient(ellipse 56% 52% at 84% 84%, rgba(60, 140, 255, 0.18) 0%, transparent 68%),
    radial-gradient(ellipse 48% 44% at 50% -4%, rgba(255, 150, 100, 0.16) 0%, transparent 68%),
    linear-gradient(180deg, #0d1220 0%, #0a0f1a 52%, #060911 100%);
  --hero-overlay: linear-gradient(to bottom, rgba(6, 10, 18, 0.12) 0%, rgba(6, 10, 18, 0.24) 44%, rgba(6, 10, 18, 0.52) 100%);
  --hero-text: #ffffff;
  --hero-muted: rgba(236, 241, 255, 0.78);
  --glass-bg: rgba(12, 17, 30, 0.4);
  --glass-border: rgba(255, 255, 255, 0.16);
  --send-bg: linear-gradient(135deg, #4f8cff 0%, #77a6ff 100%);
  --send-fg: #ffffff;
  --chat-bg: #f3f6fa;
  --chat-border: rgba(15, 23, 42, 0.08);
  --chat-border-strong: rgba(15, 23, 42, 0.12);
  --assistant-bubble: rgba(255, 255, 255, 0.97);
  --user-bubble: #111827;
  --user-fg: #f8fafc;
  --text-primary: #101828;
  --text-secondary: #667085;
  --text-placeholder: #98a2b3;
  --accent: #4f8cff;
  --success: #16a34a;
  --warning: #d97706;
  --error: #dc2626;
  --logout-bg: rgba(15, 23, 42, 0.06);
}

:root[data-ui-mode='light'] {
  --hero-image:
    radial-gradient(ellipse 56% 54% at 8% 12%, rgba(255, 170, 122, 0.26) 0%, transparent 68%),
    radial-gradient(ellipse 48% 48% at 88% 16%, rgba(129, 140, 248, 0.18) 0%, transparent 68%),
    radial-gradient(ellipse 52% 50% at 82% 82%, rgba(96, 165, 250, 0.16) 0%, transparent 68%),
    radial-gradient(ellipse 44% 40% at 52% 0%, rgba(255, 214, 102, 0.14) 0%, transparent 68%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 54%, #e9f0f8 100%);
  --hero-overlay: linear-gradient(to bottom, rgba(248, 250, 252, 0.18) 0%, rgba(238, 244, 251, 0.22) 46%, rgba(233, 240, 248, 0.34) 100%);
  --hero-text: #0f172a;
  --hero-muted: rgba(15, 23, 42, 0.72);
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-border: rgba(148, 163, 184, 0.32);
  --send-bg: linear-gradient(135deg, #365fce 0%, #6d92f4 100%);
  --send-fg: #ffffff;
  --chat-bg: #f5f8fc;
  --chat-border: rgba(15, 23, 42, 0.08);
  --chat-border-strong: rgba(15, 23, 42, 0.12);
  --assistant-bubble: rgba(255, 255, 255, 0.98);
  --user-bubble: rgba(17, 24, 39, 0.08);
  --user-fg: #101828;
  --text-primary: #101828;
  --text-secondary: #667085;
  --text-placeholder: #94a3b8;
  --accent: #365fce;
  --success: #16a34a;
  --warning: #d97706;
  --error: #dc2626;
  --logout-bg: rgba(15, 23, 42, 0.06);
}

/*
  Brand the template here.
  There are not separate light and dark Configure component builds. The same
  hosted surfaces accept a `theme` option. Keep the shell mode and the hosted
  surface theme decisions explicit here.

  Recommended default today:
  - shell mode toggle enabled
  - Configure hosted surfaces stay on `light` in both modes
  - only switch hosted surfaces to `dark` after verifying auth and tool renders
    in a real browser for your agent
*/