Brand Guidelines
The INZIF brand.
Everything you need to represent INZIF correctly. For partners, press, universities, employers, and our internal team.
Logo
Logo system
The INZIF logo consists of a hexagonal network icon paired with the INZIF wordmark. The hexagon represents connected nodes — students, universities, and employers linked through verified credentials. Always use the provided SVG files. Never recreate, redraw, or modify the logo.
Primary variants
White + Coral
Dark backgrounds, hero sections
logo-white-coral.svg
Black + Coral
Light backgrounds, print
logo-black-coral.svg
White + Teal
University contexts
logo-white-teal.svg
White + Purple
Premium features
logo-white-purple.svgApp icons & favicon
White Icon
logo-icon-white-coral.svg
Black Icon
logo-icon-black-coral.svg
Favicon
favicon.svgWordmark only
White wordmark
logo-wordmark-white.svg
Black wordmark
logo-wordmark-black.svgUsage rules
Do
Use white logo on dark backgrounds
Use black logo on light backgrounds
Match accent color to background context
Maintain original aspect ratio
Ensure sufficient contrast
Use SVG format for web, PNG for print
Don't
Don't use multiple accent colors at once
Don't place white logo on light backgrounds
Don't distort, stretch, or rotate the logo
Don't change the colors or add effects
Don't place the logo on busy backgrounds
Don't recreate the logo in a different font
Colors
Color palette
INZIF uses a minimal neutral base with vibrant coral accents. The philosophy is “Professional Minimalism + Energetic Differentiation” — clean black/white foundations with purposeful color to create hierarchy and energy.
Brand coral
Coral 500
#FF5722
Icons, links, base brand
Coral 600
#F4511E
Primary CTAs, buttons
Coral 700
#E64A19
Hero sections, hover states
Neutrals
White
#FFFFFF
Page backgrounds
Gray 100
#F8FAFC
Alternating sections
Gray 200
#E2E8F0
Borders, dividers
Gray 950
#020617
Headings, dark sections
Audience-specific accents
Each audience has its own accent color for CTAs, section markers, and UI elements on their dedicated pages.
Universities
#0C4A6E
Sky Blue 700
Employers
#D97706
Amber 600
Students
#F4511E
Coral 600
Typography
Type system
INZIF uses a single typeface system built on Inter — clean, modern, and optimized for screen readability. Headings use Inter Display at heavier weights for maximum impact.
Headings — Inter Display
Weights: 600–900
The quick brown fox
jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Body — Inter
Weight: 400
One government-verified profile for your entire career. Built by founders who went through the same broken system. INZIF connects students, universities, and employers through DigiLocker-verified credentials.
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%&*
Heading scale
Page title
Section heading
Subsection
Card heading
OVERLINE LABEL
Voice & Tone
How we sound
INZIF speaks like a sharp founder who's been through the system — direct, specific, and builder-minded. Never corporate. Never vague. Always grounded in the real problem.
We are
Direct. Say what it does. Skip the fluff.
Specific. “5 minutes” not “quick.” “DigiLocker” not “verification.”
Builder-minded. We built this because we lived the problem.
Confident. We know the system is broken. We're fixing it.
We are not
Corporate. No “leveraging synergies” or “holistic solutions.”
Salesy. No pressure tactics or artificial urgency.
Vague. No “cutting-edge platform” — say what it actually does.
Overpromising. We're early stage. We say that openly.
UI Patterns
Design system
Core patterns used across the INZIF website and product.
Buttons
All buttons use rounded-xl corners, font-bold, and generous padding. Primary CTA is always brand coral. Audience-specific pages use their own accent color.
Layout
Max width: 1200px centered with px-6 horizontal padding.
Section spacing: Viewport-aware using clamp() + dvh units. Sections adapt to viewport height, not just width.
Fluid typography: Headings use clamp(min, preferred-vw, max) for smooth scaling instead of breakpoint jumps.
Background alternation: white → gray (primary-100) → white → dark (primary-950) for visual rhythm.
Section headers: Left-aligned with uppercase overline label, bold heading, and body text. Constrained to max-w-3xl.
Cards & containers
Border: border border-primary-200 — subtle, never heavy.
Border radius: rounded-xl for cards and buttons, rounded-full for pills and badges.
Shadows: Minimal. shadow-sm default, hover:shadow-md on interactive cards. Never shadow-2xl.
No framer-motion: We use CSS transitions only. Clean, fast, no animation library overhead.
Need the logo files?
All logo assets are available as SVGs in our public repository. For press inquiries or specific format requests, reach out to us.
Contact us