Código en

Button and branding rules

The Sign in with Atheron button kit, how the button must look, and what you may not do with our name.

Inicie sesión para ver su propio ID de cliente de prueba en los ejemplos.

The button

Use our button kit, below: one stylesheet, our mark and the labels in five languages. You can load the files from us or serve copies yourself.

Label it Sign in with Atheron or Continue with Atheron, in the reader's language. The labels are in /brand/labels.json: English, French (Canada), Spanish (Spain), German and Urdu.
Put our mark at the start of the button: the left, or the right on a right-to-left page.
Use the dark button (#0a0a0f) on dark pages and the white one on light pages, or the auto theme to follow the reader's colour scheme.
Make it 40 pixels tall. Use 48 on touch screens. Use 32 only in a dense toolbar, beside other 32 pixel buttons.
Give it the same size and weight as any other sign-in buttons on the page.
Do not change the mark's colours or proportions, or add effects to it. On a white button the mark sits on its own dark tile; keep the tile.

Our name

You may say your app works with Atheron. You may not suggest Atheron made, endorses or runs it.
Your app's name, logo and domain must not use Atheron, ATON or our product names. We refuse names that do.
Never ask people for their Atheron password, recovery codes or authenticator codes. Signing in always happens on our pages.

The button kit

Load our stylesheet, or download the three files and serve them yourself: atheron-button.css, atheron-glyph.svg and labels.json (the labels in all five languages).

Themes and sizes

Class	Height	Use it for
`atheron-signin--sm`	32 px	Dense toolbars, beside other 32 px buttons
`(none)`	40 px	The default
`atheron-signin--lg`	48 px	Touch screens and mobile apps

Themes: atheron-signin--dark on dark pages, atheron-signin--light on light ones, and atheron-signin--auto to follow the reader's colour scheme. Add atheron-signin--block for a full-width button.

In five languages

Language	Sign in	Continue
English `en`	Sign in with Atheron	Continue with Atheron
Français (Canada) `fr-CA`	Se connecter avec Atheron	Continuer avec Atheron
Español (España) `es-ES`	Iniciar sesión con Atheron	Continuar con Atheron
Deutsch `de`	Mit Atheron anmelden	Weiter mit Atheron
اردو `ur-IN`	Atheron کے ساتھ سائن ان کریں	Atheron کے ساتھ جاری رکھیں

Urdu reads right to left. Put dir="rtl" on the button, or on the page, and the mark moves to the right on its own.

HTML

<link rel="stylesheet" href="https://developers.aton-network.org/brand/atheron-button.css">

<a class="atheron-signin atheron-signin--dark" href="/auth/atheron">
  <span class="atheron-signin__mark"><img src="https://developers.aton-network.org/brand/atheron-glyph.svg" alt=""></span>
  <span>Sign in with Atheron</span>
</a>

React

// Load https://developers.aton-network.org/brand/atheron-button.css once, in your layout.
const LABELS = { en: "Sign in with Atheron", "fr-CA": "Se connecter avec Atheron", "es-ES": "Iniciar sesión con Atheron", de: "Mit Atheron anmelden", "ur-IN": "Atheron کے ساتھ سائن ان کریں" } as const;

export function AtheronButton({ lang = "en", theme = "dark", href = "/auth/atheron" }: { lang?: keyof typeof LABELS; theme?: "dark" | "light" | "auto"; href?: string }) {
  return (
    <a className={`atheron-signin atheron-signin--${theme}`} href={href} dir={lang === "ur-IN" ? "rtl" : undefined} lang={lang}>
      <span className="atheron-signin__mark"><img src="https://developers.aton-network.org/brand/atheron-glyph.svg" alt="" /></span>
      <span>{LABELS[lang]}</span>
    </a>
  );
}

Point href at your own route that starts the sign-in (see the Next.js quickstart). The button never talks to us itself.

Pregunte a Atlas

Asistente de IA

Pregunte lo que quiera sobre Iniciar sesión con Atheron, la API o el portal. La respuesta sale de nuestra documentación, con enlaces a las páginas usadas.