The Civic Wallet is almost here!📱 Get a first peek at the next-generation identity and payment network. Join the waitlist

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 and Icon

.

Download All Assets

Clear space

When you’re using the Civic logo with other graphic elements, leave clear space around the logo that is equal to at least 1/3rd of the height of the icon. Display the Civic icon no smaller than 16px.

Civic Button

Add a Civic Button to your website to initiate sign up, login or verification through Civic.

If your website or app requires data input from users prior to enabling the Connect with Civic button, clearly message this to avoid confusion.

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

Download All Buttons

Example: Civic button displayed in context

Color

Color is one of the best ways for people to recognize the Civic brand. 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.

Green:
#3AB03E
C:77 M:0 Y:100 K:0

Dark:
#202121
C:65 M:043 Y:26 K:78

White:
#FFFFFF
C:0 M:0 Y:0 K:0

Text

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.

Font

Civic’s font is Source Sans Pro. You may choose the font, font weight, and kerning that matches your own brand’s style.

Button corner radius

We recommend 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 match the size and visual weight of other login options.

Additional messaging

Telling people how the Civic button works will help increase conversions:

“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 or non-approved pattern

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

Don’t change the color of the logo

Don’t distort or add effects to the logo

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

Don’t use gray for the inverted logo or use a gradient behind the logo

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