Kembali ke beranda
GKM

Garuda Kreasi Mahardhika

Design System

Referensi visual dan komponen UI yang digunakan di seluruh produk GKM.

v1.0Tailwind CSSInter

Brand Identity

Logo, nama, tagline, dan kepribadian merek GKM.

GKM Logo

Garuda Kreasi Mahardhika

Berlandaskan Iman & Integritas

PT Garuda Kreasi Mahardhika — Bandung, Indonesia

Inovasi

Pilar 1

Inkubasi

Pilar 2

Investasi

Pilar 3

Grounded

Berakar pada nilai iman dan integritas yang tidak tergoyahkan.

Visionary

Melihat jauh ke depan dengan perspektif yang jelas dan purposeful.

Trustworthy

Membangun kepercayaan melalui konsistensi, proporsi, dan craft.

Penggunaan Logo

Pada Latar Putih

GKM icon

GARUDA KREASİ

MAHARDHIKA

GKM icon

GARUDA KREASİ

MAHARDHIKA

GKM icon

Pada Latar Merah Brand

GKM icon

GARUDA KREASİ

MAHARDHIKA

GKM icon

GARUDA KREASİ

MAHARDHIKA

GKM icon

App Icon

GKM
GKM

GARUDA KREASİ

MAHARDHIKA

GKM

Monokrom

GKM

GARUDA KREASİ

MAHARDHIKA

GKM
GKM

GARUDA KREASİ

MAHARDHIKA

Clear Space & Jangan Dilakukan

Gunakan

  • Berikan ruang kosong minimal = tinggi huruf "G" di sekitar logo
  • Gunakan di atas latar putih, merah brand, atau hitam
  • Ukuran minimum: 80px lebar untuk horizontal
  • Pertahankan rasio aspek — jangan diregangkan

Hindari

  • Jangan ubah warna logo di luar palet brand
  • Jangan tambahkan shadow, outline, atau efek lain
  • Jangan gunakan di latar warna menengah (abu-abu, kuning, dsb)
  • Jangan rotasi atau cerminkan logo

Aset Logo

Unduh atau salin source SVG logo GKM untuk digunakan di berbagai media dan platform.

Logo Primer (Horizontal)

Logo Primer (Horizontal)

primary-logo.svg

SVG
Unduh SVG
Ikon / Mark Garuda

Ikon / Mark Garuda

icon.svg

SVG
Unduh SVG

Tampilan pada Berbagai Latar

GKM Logo

Latar Putih

default (tanpa filter)

GKM Logo

Latar Merah Brand

filter: brightness(0) invert(1)

GKM Logo

Latar Gelap

filter: brightness(0) invert(1)

Versi putih: Tambahkan CSS filter: brightness(0) invert(1) pada tag <img> untuk mendapatkan logo putih di atas latar gelap atau merah brand.

Warna

Palet warna brand GKM — primary merah dan charcoal netral.

Primary — Merah

50

#fff1f1

100

#ffe0e0

200

#ffc5c5

300

#ff9d9d

400

#ff6464

500

#f83333

600

#cc1212

700

#aa0d0d

800

#8c0f0f

900

#741414

Charcoal — Netral

50

#f7f7f7

100

#ebebeb

200

#d4d4d4

300

#b0b0b0

400

#888888

500

#636363

600

#4a4a4a

700

#333333

800

#1f1f1f

900

#111111

Brand Red

Aksen utama brand, tombol CTA, highlight teks.

primary-600 / #cc1212

Charcoal Dark

Background gelap, navbar, footer, dan heading.

charcoal-900 / #111111

Charcoal Mid

Body text, label sekunder, dan border ringan.

charcoal-500 / #636363

Tipografi

Inter untuk semua tipografi — heading, body, dan caption.

Display

Inter 800, 60px

Inovasi Teknologi

H1

Inter 700, 48px

Visi & Misi Kami

H2

Inter 700, 36px

Nilai-Nilai Inti

H3

Inter 700, 24px

Pilar Utama Bisnis

H4

Inter 600, 20px

Fokus Strategis

H5

Inter 600, 16px

Sub-bagian penting

Body

Inter 400, 16px

Teks isi artikel atau deskripsi produk yang cukup panjang untuk menunjukkan leading.

Small

Inter 400, 14px

Teks pendukung, keterangan gambar, dan label form.

Caption

Inter 400, 12px

Metadata, timestamp, dan teks sangat kecil.

Mono

monospace, 13px

primary-600 / #cc1212 / var(--color-brand)

Tombol

Varian dan ukuran tombol untuk berbagai konteks interaksi.

Ukuran

Varian

Dengan Ikon

Badge & Tag

Label kecil untuk kategori, status, dan metadata.

Varian

PrimaryNetralDarkSuksesPeringatanError

Outlined

InovasiInkubasiv1.0.0

Dengan Status Dot

AktifPendingTidak Aktif

Alert

Pesan kontekstual untuk info, sukses, peringatan, dan error.

Informasi

Pembaruan sistem dijadwalkan pada 25 Juni 2026 pukul 23.00 WIB.

Berhasil

Data berhasil disimpan. Perubahan akan diterapkan secara otomatis.

Peringatan

Sesi Anda akan berakhir dalam 5 menit. Simpan pekerjaan Anda sekarang.

Error

Terjadi kesalahan saat memproses permintaan Anda. Coba lagi beberapa saat.

Avatar

Representasi visual pengguna dengan foto atau inisial.

Ukuran

GK

xs

GK

sm

GK

md

GK

lg

GK

xl

GK

2xl

Varian

GK
MH
AB
GK
MH
AB
+4

Tabs

Navigasi antar panel konten yang berkaitan.

Line

Konten untuk tab Inovasi: pengembangan solusi teknologi terdepan yang menjawab kebutuhan nyata pasar.

Pill

Form Controls

Checkbox, radio, switch, dan slider untuk input pilihan.

Checkbox

Radio

Switch / Toggle

Notifikasi Email

Terima update via email

Mode Gelap

Newsletter Bulanan

Slider

Volume65%
Disabled60%

Progress

Indikator kemajuan untuk proses yang memerlukan waktu.

Pengembangan Produk78%
Program Inkubasi55%
Target Investasi32%

Indeterminate

Skeleton

Placeholder loading state sebelum konten dimuat.

Teks

Kartu Profil

Daftar Item

Table

Tabel data dengan header, baris, dan state tersorting.

Ahmad FauzanLead EngineerAktif2024-01-15
Sari DewiProduct ManagerAktif2024-03-22
Budi SantosoUI DesignerCuti2024-02-10
Rina KusumaData AnalystAktif2024-05-08
Menampilkan 1-4 dari 24 data
...

Tooltip

Keterangan tambahan saat elemen di-hover.

Posisi

Tooltip atas
Tooltip bawah
Tooltip kiri
Tooltip kanan

Varian

Default dark
Brand red
Light variant
Dengan ikon

Separator

Pemisah visual antar konten atau section.

Horizontal

atau

Vertikal

Inovasi
Inkubasi
Investasi

Toast / Notification

Notifikasi sementara yang muncul di sudut layar.

Berhasil disimpan

Data profil Anda telah diperbarui.

Pembaruan tersedia

Versi 1.1.0 siap untuk diinstall.

Gagal mengirim

Periksa koneksi internet Anda.

Kartu

Komponen kartu untuk menyajikan konten terstruktur.

Kartu Dasar

Komponen kartu standar dengan ikon, judul, dan deskripsi untuk menyajikan fitur atau informasi.

Kartu Gradient

Digunakan untuk menyorot konten penting, CTA, atau nilai utama brand.

Statistik

Pilar Utama3
Core Values5
Dampak

Kami membangun teknologi yang bermakna, bukan sekadar produk yang ada.

— Garuda Kreasi Mahardhika

Core Values

  • Iman & Integritas
  • Inovasi Berkelanjutan
  • Kolaborasi
  • Dampak Nyata
  • Inklusivitas
Interaktif

Kartu Hover

Arahkan kursor untuk melihat efek hover lift dengan transisi halus.

Spacing

Skala jarak berbasis 4px untuk konsistensi layout.

space-1

4px

space-2

8px

space-3

12px

space-4

16px

space-6

24px

space-8

32px

space-10

40px

space-12

48px

space-16

64px

space-20

80px

space-24

96px

space-32

128px

Ikon

Lucide — stroke-width 2, 24×24.

Zap

Lightbulb

Globe

Users

BarChart3

Heart

Star

Lock

Mail

MapPin

Download

Info

CheckCircle2

AlertTriangle

XCircle

Home

User

ChevronLeft

ChevronRight

ArrowUpDown

Quote

X

Check

w-3 h-3

w-4 h-4

w-5 h-5

w-6 h-6

w-8 h-8

w-10 h-10

w-12 h-12

Form

Input, textarea, dan select dengan state fokus yang jelas.

Kami tidak akan membagikan email Anda.

Format email tidak valid.