💎 4C style guide

Introduction

This document is a guide to the 4C style guide. It contains all the information you need to know about the 4C brand, colors, typography, and more.

About 4C

4C is a community of creators, where you can connect with other like-minded creators, collaborate on ideas, and motivate each other to create and publish!

Our community is focused on supporting content creators in general across all social media platforms. We are a community of creators, by creators, for creators.

Our goal is to create a decentralized community, where everyone contributes to its growth, and that growth echoes back positively to every individual creator in the community.

Assets

4C Logo

Square Variation

Banner

Typography

Font Family: Poppins

Name	Weight
Headings(h1,h2)	Bold
Subheadings(h3,h4)	Medium
Body Text	Regular

Type scale: Following Tailwind CSS type scale system

Colors

4C Brand Colors

#030e2c

#718fe9

#5fbec4

#49127b

#708fe6

4C Gradient CSS code

linear-gradient( 34deg, rgba(68, 18, 115, 1) 0%, rgba(5, 30, 75, 1) 21%, rgba(52, 79, 141, 1) 58%, rgba(106, 137, 223, 1) 80%, rgba(145, 227, 226, 1) 99% );

Buttons

Call to Action Buttons

Call to Action Guidelines

Style	Values
padding-left	2rem
padding-right	2rem
padding-top	0.75rem
display	inline-flex
align-items	center
justify-content	center
gap	0.5rem
background-color	rgb(17 24 39 / var(--tw-bg-opacity))
font-weight	500
border-radius	9999px
border-bottom-left-radius	0px

NavBar Buttons

NavBar Button Guidelines

Style	Values
padding-left	1rem
padding-right	1rem
padding-top	0.5rem
padding-bottom	0.5rem
background-color	white
font-weight	bold
color	black

Effects

Shadows

box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(
    --tw-ring-shadow,
    0 0 #0000
  ), var(--tw-shadow);

Transitions

transition: PROPERTY_ANIMATING 150ms ease-out;