AFC LogoAfrican Free Fire Community
Login

AFC brand

Everything you need to put AFC on your site correctly. If you are adding a Sign in with AFC button, the button section below is the part to copy.

The mark

One mark. Take the SVG and draw it at whatever size you need. The PNGs below it are for the places that still want a raster.

The AFC mark
for a light surface
The AFC mark on a dark surface
for a dark surface

Vector

PNG sizes

How the vector was made

AFC never held an original vector, so this one was traced from the same 500 pixel PNG the sizes above come from. The trace is checked against that file by rendering it and measuring the overlap: 98.9 percent on the shape, 99.7 percent on the green. Use the SVG at any size. The PNGs are still downscales of that one file, so 500 stays the largest of those.

The sign-in button

Use the short name. "African Free Fire Community" set as a button label makes the button roughly twice the width of every other provider on the row, which is what it looked like before this page existed.

What it should look like

Continue with AFC

Copy this

Plain HTML and CSS, no dependency. The mark is served from AFC, so it updates if we ever change it.

<a class="afc-signin" href="/your/afc/start">
  <img src="https://api.africanfreefirecommunity.com/sso/brand/logo.svg?on=dark" alt="" width="20" height="20">
  <span>Continue with AFC</span>
</a>

<style>
.afc-signin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #1c1c1f;
  color: #fafafa;
  font: 500 15px/1 system-ui, sans-serif;
  text-decoration: none;
}
.afc-signin:hover { background: #26262a; }
</style>

Colours

One green does the work. The gold is for prizes, tiers and winners, never as a second brand colour.

Click a value to copy it

  • AFC green
  • Gold
  • Dark surface

Using the mark

Please do

  • Show the mark beside the words, at the same visual weight as the other sign-in buttons on the row.
  • Label the button "Continue with AFC".
  • Keep clear space around the mark of at least a quarter of its width.
  • Put it on a surface with real contrast behind it, light or dark.
  • Prefer the SVG. It is the same drawing at every size, and it is what the button should use.
  • On a dark surface take the on-dark SVG. The wordmark in the default mark is near-black and vanishes against one.

Please do not

  • Do not stretch, rotate, recolour or add effects to the mark.
  • Do not draw a PNG above its own size. 500 pixels is the largest that exists. Use the SVG instead, at any size.
  • Do not use the full name as a button label.
  • Do not imply AFC endorses your product. The button means a player can sign in, nothing more.

Read it as JSON

The same names, colours, logo URLs and rules, in one unauthenticated request. It needs no key, because you draw this button before anyone has signed in.

curl https://api.africanfreefirecommunity.com/sso/brand/

What comes back

{
  "name": "AFC",
  "full_name": "African Free Fire Community",
  "button_label": "Continue with AFC",
  "colors": {
    "primary": { "hex": "#15a249", "rgb": "rgb(21, 162, 73)" }
  },
  "logo": {
    "preferred": "svg",
    "vector": { "default": "https://api.africanfreefirecommunity.com/sso/brand/logo.svg" },
    "format": "png",
    "source_resolution": 500,
    "mark": { "64": "https://api.africanfreefirecommunity.com/sso/brand/logo/64.png" }
  },
  "usage": { "min_size_px": 16, "clear_space_ratio": 0.25 }
}

Something missing

If you need the mark in a format that is not here, or you are not sure whether a use is allowed, ask before you ship it.

Contact AFC