Civic Brand Guidelines

Please be kind to our brand. You may include these official assets on your webpage, application or in printed material if you have obtained prior consent from someone on our team.

Civic Logo

Download All Logos

Clear space

When you’re using the Civic logo with other graphic elements, make sure you give it some room to breathe. It is recommended that you leave clear space around the logo that is at least equal to a third of the height of the icon.

Minimum size

The minimum size at which the Civic icon should be displayed is 16px.

Civic Button

Add a Civic Button to your website to initiate sign up, login or verification through Civic. The event handler will call a method in the CivicJS library to launch a Civic modal with QR code for your user to scan in order to sign up or login.

If your website or app requires data input from users prior to enabling the Connect with Civic button, please ensure that this is clearly messaged to avoid confusion (i.e. visible error messages for missing or invalid required information).

For more information, see our API docs here.

Download All Buttons

Do you prefer HTML/CSS?

Civic Button Styles 0

Example: Civic button displayed in context


Always include the Civic icon in the Civic button. Be sure to leave some clear space around the icon.


Color is one of the best ways for people to recognize the Civic Brand and understand the meaning of the button. Please use the green button on light backgrounds and the white button on dark backgrounds. Use the inverse icon color. Never use any other colors to represent Civic.

C:77 M:0 Y:100 K:0

C:65 M:043 Y:26 K:78

C:0 M:0 Y:0 K:0

Civic brand colors:

Civic brand colors


Use the Civic icon along with plain text to label your button. Never use the full logo with wordmark. We recommended that you use one of the following button labels:

  • + “Connect with Civic”
  • + “Continue with Civic”
  • + “Login with Civic”

You may use the word “Civic” by itself in your button if the action is described already.


You may choose the font, font weight, and kerning that matches your own brand’s style, but optimize for easy legibility. To keep Civic’s brand recognizable, you should use Source Sans Pro.

Button corner radius

We recommend that you use a rounded corner radius on the Civic button, but you may choose to alter the corner radius to match your own brand’s style.

Equal prominence

The Civic button should be approximately the same size and have similar visual weight as other third party login options.

Example of how the Civic button should be displayed at equal prominence with other options and how the button’s corner radius may be altered to match your brand’s style.

Additional messaging

Telling people how the Civic button works will likely increase conversion. We recommended using a description like:

“Use Civic to securely continue without a username or password”

“Verify your identity securely with Civic”

Misuses of the Civic logo

Don’t use the logo on a busy background

Don’t use the full color logo on dark or green backgrounds

Don’t change the color of the logo

Don’t modify, distort, stretch or angle the logo or add effects

Don’t discard the clear space around the logo or icon

Don’t use the full logo on a button

If you have questions about using the Civic brand, please contact us.

Sign up for our newsletter