Copied!
Brand Guidelines v2.0

Viki HR

One platform, two experiences. Empowering managers with oversight and employees with autonomy — united under one cohesive brand.

Viki Manager Leadership & Oversight
Viki Employee Self-Service & Growth
Explore
Brand Essence

People Powered

Viki HR is built on the belief that great workplaces start with great tools. Our brand embodies clarity, trust, and human connection — serving both leaders and teams.

Trust

Security and reliability form the foundation. Every interaction reinforces that HR data is safe and processes are fair.

Connection

Bridging the gap between management and employees. Transparent communication creates stronger teams.

Growth

Empowering every individual to develop. When people grow, organizations thrive. Progress is always visible.

App Icon System

Two Apps, One Family

Each icon is instantly recognizable yet clearly part of the Viki ecosystem. Shared geometry, differentiated by color and symbol.

Manager App

Viki Manager

The team hierarchy symbol represents leadership and oversight. The gold star badge signifies authority and recognition.

Gradient Start
#818CF8
Gradient End
#4338CA
Symbol Meaning
Team Hierarchy Leadership ★ Authority Badge
Employee App

Viki Employee

The individual figure represents personal empowerment. The checkmark badge and pulse line signify task completion and vitality.

Gradient Start
#34D399
Gradient End
#0891B2
Symbol Meaning
Individual Focus Empowerment ✓ Task Completion

Icon Scaling System

Icons must be legible at every size. The symbol hierarchy remains clear from 1024px down to 16px.

Viki Manager
1024px
80px
48px
32px
Viki Employee
1024px
80px
48px
32px

Simplification at small sizes: Below 48px, the secondary elements (star badge, checkmark badge) are removed. Only the primary figure remains to ensure clarity.

Manager — Construction
Safe zone: 10% padding from icon edge
Employee — Construction
Safe zone: 10% padding from icon edge
Color System

The Palette

Purple leads the manager experience — authority and depth. Teal guides the employee journey — freshness and growth. Together they create visual harmony.

Primary Brand Colors
Manager Primary #6D5DFC
Manager Deep #4F46E5
Employee Primary #00C9A7
Employee Deep #0891B2
Light Variants
Purple Light #818CF8
Teal Light #34D399
Accent Gold #FFB800
Alert Red #EF4444
Neutral Palette
#FFFFFF
#F1F5F9
#94A3B8
#475569
#1E293B
#0A0A1A
Typography

Type System

Inter provides clarity and professionalism at every size. Playfair Display adds editorial warmth for key moments.

Aa
Inter Primary Typeface
Heading 1 Bold 700 · 48–96px · -0.025em
Heading 2 Semibold 600 · 36–48px · -0.025em
Heading 3 Medium 500 · 24–36px
Body Large — Light 300 Light 300 · 18–20px · 1.625 line-height
Body Regular — the quick brown fox jumps over the lazy dog Light 300 · 16px · 1.625 line-height
Aa
Playfair Display Accent / Editorial Typeface

People Powered

"Every voice matters"

HR, reimagined.

Label System
Micro SECTION LABEL
Button
Badge Manager Employee
Usage Guidelines

Do's & Don'ts

DO
Use icons on clean backgrounds Icons work best on solid or subtly textured backgrounds that provide contrast.
Maintain color consistency Purple for Manager contexts, Teal for Employee contexts. Never swap.
Show both icons together for platform branding When representing the full Viki HR platform, display both icons side by side.
Maintain minimum clear space Always keep 10% of the icon width as clear space around the icon.
DON'T
Don't place on busy backgrounds Avoid placing icons over photos or complex patterns without a solid container.
Don't swap icon colors Manager is always Purple. Employee is always Teal. Never reverse these assignments.
Don't change the corner radius The squircle shape (21% radius) is essential to the brand. Don't use sharp corners or circles.
Don't distort or rotate icons Icons must always appear in their original proportions and orientation.
Applications

Brand in Action

How the Viki HR brand comes to life across digital touchpoints.

Viki Manager
Team Overview
24 members
Pending
7
Approved
18
JD
Leave Request
John D.
Pending
SK
Timesheet
Sarah K.
Done
ML
Expense Claim
Mike L.
Pending
Manager Experience
Viki Employee
Welcome back,
Sarah 👋
Attendance
98%
Leave
12d
Goals
85%
Check-in 09:02 AM
Tasks 3/5
Training 2/4
Employee Experience
App Store Presentation
HR · Business Viki Manager Team Management & HR Oversight
Screen 1
Screen 2
Screen 3
⭐ 4.8 12.4K Ratings #2 Business 17+
HR · Productivity Viki Employee Self-Service & Personal HR
Screen 1
Screen 2
Screen 3
⭐ 4.9 28.1K Ratings #1 Productivity 4+
Assets

Icon Assets

Production-ready SVG code for both app icons. Copy and use directly in your projects.

Manager Icon SVG 
<svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="mgr-grad" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#818CF8"/>
      <stop offset="0.5" stop-color="#6D5DFC"/>
      <stop offset="1" stop-color="#4338CA"/>
    </linearGradient>
  </defs>
  <rect width="512" height="512" rx="108" fill="url(#mgr-grad)"/>
  <circle cx="256" cy="155" r="42" fill="white"/>
  <path d="M185 310 C185 255 215 228 256 228 C297 228 327 255 327 310 L327 330 C327 336 322 341 316 341 L196 341 C190 341 185 336 185 330 Z" fill="white"/>
  <circle cx="152" cy="255" r="32" fill="white" opacity="0.75"/>
  <path d="M98 370 C98 330 120 310 152 310 C184 310 206 330 206 370 L206 385 C206 390 202 394 197 394 L107 394 C102 394 98 390 98 385 Z" fill="white" opacity="0.75"/>
  <circle cx="360" cy="255" r="32" fill="white" opacity="0.75"/>
  <path d="M306 370 C306 330 328 310 360 310 C392 310 414 330 414 370 L414 385 C414 390 410 394 405 394 L315 394 C310 394 306 390 306 385 Z" fill="white" opacity="0.75"/>
  <circle cx="372" cy="148" r="30" fill="#FFB800"/>
  <polygon points="372,126 378,140 394,142 382,152 385,168 372,160 359,168 362,152 350,142 366,140" fill="white"/>
</svg>
Employee Icon SVG 
<svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="emp-grad" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#34D399"/>
      <stop offset="0.5" stop-color="#00C9A7"/>
      <stop offset="1" stop-color="#0891B2"/>
    </linearGradient>
  </defs>
  <rect width="512" height="512" rx="108" fill="url(#emp-grad)"/>
  <circle cx="235" cy="180" r="48" fill="white"/>
  <path d="M155 370 C155 300 190 265 235 265 C280 265 315 300 315 370 L315 388 C315 394 310 399 304 399 L166 399 C160 399 155 394 155 388 Z" fill="white"/>
  <circle cx="360" cy="330" r="50" fill="white"/>
  <circle cx="360" cy="330" r="40" fill="#0891B2"/>
  <polyline points="338,330 352,344 382,314" fill="none" stroke="white" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>