Button & branding

Use these buttons so people recognize Motaware sign-in on your site. Change href to your own sign-in route, the one that starts the redirect to Motaware.

Rules

  • Use the Motaware mark as provided. Don't recolor, stretch, crop or redraw it.
  • Label it "Sign in with Motaware" or "Continue with Motaware".
  • Keep the button at least 40px tall, with the mark at 20px or larger.
  • Use the light button on light backgrounds and the dark one on dark backgrounds.
  • Don't make Motaware's button stand out less than other sign-in buttons next to it.
  • Don't suggest that Motaware made, endorses or verified your app unless it is verified. Your app's name can't contain "Motaware".

Light

Sign in with Motaware 
<a href='/login/motaware' style='display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;background:#ffffff;color:#0f172a;border:1px solid #cbd5e1;border-radius:9999px;font:600 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;'>
  <img src='https://developer.motaware.com/img/motaware-mark.svg' alt='' width='20' height='20' style='border-radius:5px;'>
  Sign in with Motaware
</a>

Dark

Continue with Motaware 
<a href='/login/motaware' style='display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;background:#0f172a;color:#ffffff;border:1px solid #0f172a;border-radius:9999px;font:600 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;'>
  <img src='https://developer.motaware.com/img/motaware-mark.svg' alt='' width='20' height='20' style='border-radius:5px;'>
  Continue with Motaware
</a>

Mark

Motaware mark https://developer.motaware.com/img/motaware-mark.svg

You can also download the SVG and serve it from your own site.