Brand
Put “Sign in with Authfu” on your site.
Copy the button below and point it at your sign-in route. Everything on this page is free to use in your product, your docs, and your app store listing.
The button
Three versions. Pick the one that suits your page, paste it, and link it to wherever you start sign-in.
Paste this
<a href="/your-sign-in-route"><img src="https://authfu.com/brand/authfu-signin-light.svg" alt="Sign in with Authfu" width="180" height="44"></a>Swap signin-light for signin-dark or signin-jade to match your page. Or download the file and host it yourself — either works.
The mark
Use the mark on its own where a full logo will not fit — a favicon, an app icon, a tight header.
Logo
The mark and the name together, for anywhere with room for both.
Colour
Jade
#00B884
Primary actions and links
Ink
#0B0F19
Logo, text, dark grounds
Paper
#F7F7F5
Light ground
Saffron
#FFB627
Secondary accent
Slate
#5B6475
Secondary text
Vermilion
#E5484D
Errors
Rules
You may
- Use the button to link to your own Authfu sign-in
- Scale anything here proportionally
- Say your product supports or works with Authfu
- Use the logo in docs, a blog post, or a store listing
You may not
- Recolour, redraw, stretch, rotate, or restyle anything
- Build your own version of the button
- Change the words “Sign in with Authfu”
- Use the mark as your own app or company icon
- Imply Authfu built, sponsored, or endorsed your product
Leave clear space around the mark equal to the radius of its circle, and keep the button at least 180 pixels wide so the wording stays readable.
Installing instead
If you would rather bundle the files than link to ours, they are on npm. Same assets, versioned.
npm install @authfu/iconsThen reference @authfu/icons/button/authfu-signin-light.svg from your code. SVG files only, so it works the same in React, WordPress, plain HTML, or an email.
Anything else
Need a format that is not here, or want to check a particular use? Write to hello@authfu.com and a person will answer.