SOCI4L Brand Guidelines

Our brand is more than just a logo. It's the visual language that connects us with our community. Follow these guidelines to ensure consistency across all platforms.

01.Logomark

Logomark (Icon)
SOCI4L Logo
On Light Background
SOCI4L Icon Black

02.Combination Mark

On Black Background
SOCI4L Combination White
On Light Background
SOCI4L Combination Black

Clearspace & Safe Zones

x
x
x
x
SOCI4L

The Clearspace (x) is defined by the height of the logomark. Maintain this minimum spacing on all sides to ensure the logo stands out.

03.Color Architecture — Core Identity

Brand Blue
#2845D6
Dark Surface
#0A0A0A
Light Surface
#f0f0f0

Primary Scale

50
#EEF2FF
100
#E0E7FF
200
#C7D2FE
300
#A5B4FC
400
#818CF8
500
Main
#2845D6
600
#4F46E5
700
#4338CA
800
#3730A3
900
#312E81
950
#1E1B4B

03.Color Architecture — Neutral

Neutral Scale

Base Colors
Background
#f0f0f0
#0a0a0a
Muted
#f0f0f0
#27272a
Secondary
#f4f4f5
#27272a
Components
Border
#e4e4e7
#27272a
Accent
#e4e4e7
#171717
Popover
#f0f0f0
#0a0a0a
Card
#f0f0f0
#0a0a0a

04.Typography — Primary

Primary Font

Geist Sans

AaBold (700)
AaMedium (500)

The quick brown fox jumps over the lazy dog.

Used for all headlines, UI text, and clear communication.

04.Typography — Monospace

Monospace Font

Geist Mono

AaBold (700)
AaMedium (500)

0123456789

Used for code blocks, data display, and technical details.

04.Typography — Scale

Geist Sans
H1 Display
text-3xl (30px) / 4xl (36px)

Turn your wallet into identity.

Geist Sans
H2 Section
text-2xl (24px) / 3xl (30px)

Grow on-chain.

Geist Sans
H3 Title
text-xl (20px)

Smart Contract Verification

Geist Sans
Body & Subtext
text-sm (14px) / base (16px)

Showcase on-chain assets, add links, and share everything as one public page.

05.Naming Convention

The Brand Name

Our name is always written in uppercase with a numeric "4" replacing the "A". This reflects our roots in Web3 and on-chain intelligence.

SOCI4L

Don'ts

Soci4l
Do not capitalize only first letter
SOCIAL
Do not use normal 'A'
soci4l
Do not use lowercase
SOCI4L
Do not mix fonts

06.Buttons & Components

Label

Contrast Rule

Buttons must contrast perfectly with their background. White button on dark, black button on light.

Brand Color

Use Brand Blue (#2845D6) ONLY for special 'Magic' actions or highlights.

Shadow Usage

Never use blurred/soft shadows in dark mode. Use crisp borders or simple flat colors.

Radius & Weight

Standard Radius: 0.375rem (6px). Font Weight: Medium (500).

Component Library

variant="default"
variant="secondary"
variant="outline"
variant="ghost"
variant="destructive"

07.Social Media Kits

SOCI4L X Header

X Banner

1500 x 500 px

Profile Photo

Profile Photo

400 x 400 px

Powered By DarkPowered By Light

Community Badges

PNG & SVG Variants

Community Kit

Build your identity everywhere.

Download the complete Social Media Graphics kit to unify your on-chain and off-chain presence. Includes high-res renders and vector badges.

Download Complete Kit