Brand Guidelines

Panduan Identitas Visual myUnila

Dokumentasi lengkap tentang penggunaan logo, warna, typography, dan komponen UI untuk memastikan konsistensi brand di seluruh platform.

Selamat Datang di Brand Guidelines myUnila

Panduan ini dibuat untuk membantu Anda memahami dan menerapkan identitas visual myUnila dengan konsisten. Setiap elemen dari logo hingga komponen UI telah dirancang untuk menciptakan pengalaman yang kohesif dan profesional di seluruh platform digital Universitas Lampung.

Download Assets

Logo, icon, dan aset visual lainnya

Code Snippets

Copy-paste ready component code

UI Components

Pre-styled components dengan brand

Filosofi Logo & Makna

Memahami makna di balik setiap elemen identitas visual myUnila.

myUnila

Arti Nama “myUnila”

Pemecahan Kata

my (milik saya)

Menunjukkan personalisasi dan kepemilikan. Setiap pengguna memiliki akses personal ke sistem yang disesuaikan dengan kebutuhan masing-masing.

Unila (Universitas Lampung)

Identitas institusi yang jelas. Menandakan bahwa ini adalah sistem resmi dari Universitas Lampung yang mencakup seluruh ekosistem kampus.

Makna Filosofis

🎯

Fokus pada Pengguna

“my” menempatkan pengguna sebagai pusat, mencerminkan komitmen untuk memberikan pengalaman yang personal dan user-centric.

🔗

Integrasi Menyeluruh

Satu portal untuk semua layanan, menyatukan 70+ sistem dalam satu identitas yang kohesif dan mudah diakses.

🏛️

Identitas Institusi

Memperkuat brand Universitas Lampung sebagai institusi yang modern, digital, dan mudah diakses oleh seluruh sivitas akademika.

📝

Font Poppins Bold

Pemilihan font Poppins Bold bukan tanpa alasan

Modern & Kontemporer

Font sans-serif yang bersih dan modern, mencerminkan transformasi digital

Keterbacaan Tinggi

Mudah dibaca di berbagai ukuran layar, dari desktop hingga mobile

Profesional & Friendly

Kombinasi sempurna antara formal dan approachable

Bold Weight

Mencerminkan kekuatan, kepercayaan diri, dan kredibilitas institusi

🎨

Warna Biru #0B5EA8

Warna primer yang sarat makna dan filosofi

Kepercayaan & Kredibilitas

Biru melambangkan kepercayaan, stabilitas, dan profesionalisme institusi pendidikan

Teknologi & Inovasi

Warna yang sering diasosiasikan dengan teknologi, digital, dan kemajuan

Ketenangan & Fokus

Memberikan efek menenangkan dan membantu pengguna fokus pada tugas

Universalitas

Warna yang diterima secara universal dan cocok untuk berbagai konteks

Prinsip Brand myUnila

Nilai-nilai inti yang mendasari identitas visual myUnila.

Sederhana

Desain yang bersih dan mudah dipahami, memudahkan pengguna dalam berinteraksi dengan sistem.

Terpercaya

Mencerminkan kredibilitas dan profesionalisme institusi pendidikan tinggi.

Terintegrasi

Menyatukan berbagai sistem dalam satu identitas visual yang kohesif dan harmonis.

Logo

Logo myUnila adalah identitas visual utama yang merepresentasikan portal terpadu Universitas Lampung.

Logo myUnila

Background Putih - Tulisan Biru

myUnila

SVG • Transparan • #0B5EA8

Logo myUnila

Background Biru - Tulisan Putih

myUnila

SVG • Background #0B5EA8 • Tulisan #FFFFFF

Logo myUnila

Background Transparan - Tulisan Biru

myUnila

SVG • Transparan • #0B5EA8

Logo Unila

Logo Universitas Lampung

PNG • 1024x1024px • Resolusi Tinggi

Spesifikasi Logo myUnila

Format:SVG (Vector)

Background:✓ Transparan

Warna Primer:#0B5EA8

Font Logo:Poppins Bold

Panduan Penggunaan Logo

✓ DO - Boleh

• Gunakan logo pada background putih atau biru
• Pertahankan proporsi logo (jangan distorsi)
• Berikan ruang kosong minimal 20px di sekeliling logo
• Gunakan file format asli (SVG/PNG)

✗ DON'T - Jangan

• Jangan mengubah warna logo
• Jangan merotasi atau membalik logo
• Jangan menambahkan efek (shadow, outline, dll)
• Jangan menggunakan logo dengan resolusi rendah

Warna

Palet warna myUnila dirancang untuk menciptakan hierarki visual yang jelas dan konsisten.

Primary Colors

Primary

HEX#0B5EA8

RGB11, 94, 168

CSSmyunila

Warna utama brand

Primary 50

HEX#E6F2FA

RGB230, 242, 250

CSSmyunila-50

Background ringan

Primary 100

HEX#CCE5F5

RGB204, 229, 245

CSSmyunila-100

Background medium

Primary 500

HEX#0B5EA8

RGB11, 94, 168

CSSmyunila-500

Warna default

Primary 700

HEX#073864

RGB7, 56, 100

CSSmyunila-700

Hover state

Primary 900

HEX#021220

RGB2, 18, 32

CSSmyunila-900

Text dark

Gradients

Gradient Blue Modern

Tailwind CSS:bg-gradient-blue-modern

Usage: Button primary, Hero sections

Gradient Ocean

Tailwind CSS:bg-gradient-ocean

Usage: Cards, Special sections

Gradient Sky

Tailwind CSS:bg-gradient-sky

Usage: Backgrounds, Overlays

Semantic Colors

Success

HEX#10B981

RGB16, 185, 129

Status berhasil

Warning

HEX#F59E0B

RGB245, 158, 11

Peringatan

Error

HEX#EF4444

RGB239, 68, 68

Error, Danger

Info

HEX#3B82F6

RGB59, 130, 246

Informasi

Neutral Colors

White

HEX#FFFFFF

RGB255, 255, 255

Gray 50

HEX#F9FAFB

RGB249, 250, 251

Gray 100

HEX#F3F4F6

RGB243, 244, 246

Gray 200

HEX#E5E7EB

RGB229, 231, 235

Gray 500

HEX#6B7280

RGB107, 114, 128

Gray 700

HEX#374151

RGB55, 65, 81

Gray 900

HEX#111827

RGB17, 24, 39

Black

HEX#000000

RGB0, 0, 0

Contoh Penggunaan

Button

bg-myunila text-white

Card Header

Card Title

bg-myunila-50 text-myunila

Text Link

Link Text

text-myunila hover:text-myunila-700

Typography

Poppins adalah font utama yang digunakan untuk semua elemen text di myUnila.

Font Logo myUnila

Logo myUnila menggunakan Poppins Bold (700) dengan warna #0B5EA8. Pastikan menggunakan font weight yang sama saat mereproduksi logo.

Font Family

Primary Font

Poppins

font-family: 'Poppins', sans-serif

Font Weights:

Regular (400)

font-normal

Medium (500)

font-medium

Semibold (600)

font-semibold

Bold (700)

font-bold

Heading Styles

Heading 1

text-5xl md:text-6xl font-bold

Heading 2

text-4xl md:text-5xl font-bold

Heading 3

text-3xl md:text-4xl font-bold

Heading 4

text-2xl md:text-3xl font-bold

Heading 5

text-xl md:text-2xl font-bold

Heading 6

text-lg md:text-xl font-bold

Body Text

Body XL - Digunakan untuk lead paragraf atau text penting

text-xl

Body Large - Digunakan untuk konten utama yang menonjol

text-lg

Body Regular - Ukuran default untuk konten utama dan paragraf

text-base

Body Small - Untuk keterangan, caption, atau informasi sekunder

text-sm

Body XS - Untuk metadata, timestamp, atau text sangat kecil

text-xs

Text Colors

Primary Text (Gray 900)

text-gray-900

Secondary Text (Gray 700)

text-gray-700

Tertiary Text (Gray 600)

text-gray-600

Disabled Text (Gray 500)

text-gray-500

Brand Text (myUnila)

text-myunila

Components

Komponen UI yang sudah pre-styled dengan brand guidelines myUnila.

Buttons

Primary Buttons

className="bg-myunila text-white" 
className="btn-gradient-primary" 
className="bg-gradient-blue-modern text-white"

Secondary Buttons

Button Sizes

Cards

Default Card

Card dengan border dan shadow default

Colored Card

Card dengan background warna brand

Gradient Card

Card dengan gradient background

<Card className="border border-gray-200">...</Card>
<Card className="bg-myunila-50 border border-myunila-100">...</Card>
<Card className="bg-gradient-to-br from-myunila to-blue-700">...</Card>

Input Fields

Input fields dengan style sesuai halaman login myUnila.

Username

CSS Classes:

classNames={{
  input: "text-gray-800",
  inputWrapper: "bg-gray-50 border border-gray-200
    hover:border-myunila focus-within:border-myunila
    transition-all duration-300 shadow-sm hover:shadow-md
    !outline-none",
  base: "!outline-none"
}}

Chips & Badges

Colored Chips

Primary

Light

Success

Warning

Error

Info

Chip Sizes

Small

Medium

Large

Shadows & Borders

Border

border border-gray-200

Shadow MD

shadow-md

Shadow LG

shadow-lg

border: border border-gray-200
shadow: shadow-md | shadow-lg | shadow-xl
rounded: rounded-lg | rounded-xl | rounded-2xl

Contoh Penggunaan

Lihat bagaimana brand myUnila diterapkan dalam berbagai konteks.

🌐Website Header

myUnila

Logo dengan background gradient primary, kombinasi yang kuat dan profesional untuk header website.

📱Mobile Application (PWA)

9:41

myUnila

Portal Terpadu

Beranda

Favorit

Notif

Profil

Layout PWA dengan bottom navigation yang responsif dan user-friendly.

📧Email Signature

Mizar Zulmi Ramadhan

Developer - UPA TIK

myUnila

Universitas Lampung

Logo text-only untuk email signature yang profesional dan mudah dibaca.

📱Social Media Post

myUnila

Portal Satu Data Unila

Update Terbaru

70+ Sistem Terintegrasi

Design untuk social media dengan gradient background yang eye-catching.

💡

Best Practices

Selalu gunakan file logo original (SVG) untuk kualitas terbaik

Pertahankan clear space minimal 20px di sekeliling logo

Gunakan warna dari palette yang telah ditentukan

Test tampilan di berbagai ukuran layar (responsive)

Konsultasikan dengan tim UPA TIK jika ragu

Code Setup

Cara mengimplementasikan brand guidelines di project baru.

Tailwind Configuration

Tambahkan konfigurasi berikut ke tailwind.config.ts:

theme: {
  extend: {
    colors: {
      myunila: {
        DEFAULT: '#0B5EA8',
        50: '#E6F2FA',
        100: '#CCE5F5',
        200: '#99CBEB',
        300: '#66B1E1',
        400: '#3397D7',
        500: '#0B5EA8',
        600: '#094B86',
        700: '#073864',
        800: '#052542',
        900: '#021220',
      },
    },
    backgroundImage: {
      'gradient-blue-modern': 'linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1e40af 100%)',
      'gradient-ocean': 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)',
      'gradient-sky': 'linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%)',
    },
    fontFamily: {
      poppins: ['Poppins', 'sans-serif'],
    },
  },
}

Global CSS Classes

Tambahkan ke globals.css:

@layer components {
  .btn-gradient-primary {
    @apply bg-gradient-blue-modern text-white font-semibold;
    @apply shadow-lg hover:shadow-xl transition-all duration-300;
    @apply hover:scale-105;
  }

  .text-gradient-primary {
    @apply bg-gradient-to-r from-myunila to-blue-700;
    @apply bg-clip-text text-transparent;
  }

  .card-elevated {
    @apply bg-white shadow-md hover:shadow-lg;
    @apply transition-shadow duration-300;
    @apply rounded-xl border border-gray-100;
  }
}

Font Import

Tambahkan ke layout.tsx atau _app.tsx:

import { Poppins } from 'next/font/google'

const poppins = Poppins({
  weight: ['400', '500', '600', '700'],
  subsets: ['latin'],
  variable: '--font-poppins',
})

export default function RootLayout({ children }) {
  return (
    <html lang="id" className={poppins.variable}>
      <body className="font-poppins">{children}</body>
    </html>
  )
}

Butuh Bantuan?

Jika Anda memiliki pertanyaan atau membutuhkan aset tambahan, silakan hubungi tim UPA TIK Universitas Lampung.

Email DEV UPA TIK