Cavalry Template 01

Berikut adalah standardisasi nilai parameter (Design Tokens) resmi yang dapat Anda salin dan gunakan langsung di aplikasi desain Figma, lengkap dengan padanan kode Tailwind CSS agar implementasinya presisi seperti diagram hijau-gelap tersebut.

1. Canvas / Background (Latar Belakang Utama)

Warna dasar yang digunakan bukanlah hitam pekat murni, melainkan warna arang-biru redup yang menyerap cahaya layar dengan lembut agar mata penonton tidak cepat lelah saat menonton video YouTube.

• Figma Fill (Solid): #0B0F17 (atau #0D0E12 untuk kesan sedikit lebih netral).
• Tailwind CSS: bg-[#0B0F17]

2. Card Container (Kotak Laboratorium)

Kartu pembungkus utama yang menggunakan teknik Minimal Glassmorphism. Lapisan ini memanfaatkan transparansi tipis di atas kanvas gelap.

• Figma Properties:
• Fill: #161B26 dengan Opacity: 40% (Linear Gradient dari atas ke bawah untuk efek kedalaman).
  • Stroke (Garis Tepi): 1px, Inside. Warna #FFFFFF dengan Opacity: 6%.
  • Corner Radius: 12px (halus dan tidak terlalu membulat).
  • Effects: Add Effects -> Layer Blur: 16px (atau Backdrop Blur jika diletakkan di atas elemen lain).
• Tailwind CSS:

class="bg-[#161B26]/40 border border-white/5 rounded-xl backdrop-blur-md"

3. Typography Tokens (Aturan Font & Warna Teks)

Gunakan keluarga font sans-serif geometris seperti Geist Sans, Inter, atau SF Pro Display untuk kesan bersih khas ekosistem pengembang.

• Judul Utama (We finish with two labs): Font Weight Bold / SemiBold, Warna #FFFFFF (Putih Murni).
• Sub-Judul Kartu (A complete three-tier…): Font Weight SemiBold, Warna #FFFFFF. Untuk teks penjelas sekunder, gunakan warna #9CA3AF (Abu-abu abu).
• Label Status Mikro (LAB 1 - FROM SCRATCH): Font Size 10px atau 11px, Tracking/Letter Spacing: +10% atau Uppercase. Warna #4B5563.
• Tailwind CSS:
• Judul: text-white font-bold
  • Sub-judul: text-gray-400 font-semibold text-sm
  • Label mikro: text-xs uppercase tracking-wider text-gray-600 font-mono

4. Color Highlight Tokens (Aksen Pendaran Hijau/Mint)

Aksen warna fresh yang digunakan untuk menandai bagian aktif (seperti tombol status “No cloud”).

• Solid Element (Isi Ikon/Text): #10B981 (Emerald Green) atau #34D399 (Mint Green).
• Pill Component Border (Aktif): 1px Solid, warna #10B981 dengan Opacity: 50%.
• Glow/Shadow Effect (Pendaran Halus di Figma):
• Tambahkan Effects -> Drop Shadow pada komponen.
  • X: 0, Y: 4
  • Blur: 20px
  • Color: #10B981 dengan Opacity: 15% (Jangan terlalu tebal agar tidak terlihat seperti neon murah).
• Tailwind CSS:

class="border border-emerald-500/50 text-emerald-400 shadow-[0_0_20px_rgba(16,185,129,0.15)] bg-emerald-950/20"

5. Inner Architecture Blocks (Kotak Kecil: frontend, api, db)

Kotak kecil di dalam laboratorium tempat ikon diletakkan.

• Figma Properties:
• Size: Biasa berukuran simetris seperti 48x48px atau 56x56px.
  • Fill: #1F2937 dengan Opacity: 30%.
  • Stroke: 1px, warna #FFFFFF dengan Opacity: 8%.
  • Corner Radius: 8px.
• Tailwind CSS:

class="w-12 h-12 flex items-center justify-center bg-gray-800/30 border border-white/10 rounded-lg"

Untuk mendukung gaya desain minimalis teknologi yang premium, bersih, dan sangat mudah dibaca di layar video YouTube, berikut adalah beberapa rekomendasi font gratis yang sangat cocok dikombinasikan dengan palet warna di atas:

1. Geist Sans (Kiblat Developer Modern) — Sangat Direkomendasikan

Font ini dirancang khusus oleh Vercel untuk kebutuhan antarmuka pengembang (developer tools). Karakternya sangat geometris, bersih, dan memberikan kesan modern tingkat tinggi.

• Karakter visual: Sangat presisi, memiliki jarak antar huruf (letter-spacing) yang rapi, dan terlihat sangat profesional.
• Di mana mencarinya: Google Fonts - Geist atau repositori resmi Vercel.
• Penggunaan terbaik: Cocok untuk teks di dalam kotak (“App”, “Guest OS”) maupun untuk judul besar di bagian bawah.

2. Inter (Standar Emas UI/UX Global)

Inter adalah font sans-serif paling populer di dunia untuk desain sistem produk digital. Font ini dirancang khusus agar teks berukuran kecil tetap terlihat sangat jelas di layar komputer maupun ponsel.

• Karakter visual: Netral, kokoh, tingkat keterbacaan (readability) yang luar biasa tinggi saat dibaca cepat oleh penonton video.
• Di mana mencarinya: Google Fonts - Inter
• Penggunaan terbaik: Sangat cocok untuk teks teknis yang panjang atau label bertumpuk seperti “Bin / Lib / module” dan “Container runtime”.

3. Plus Jakarta Sans (Sentuhan Modern & Dinamis)

Jika Anda ingin diagram Anda terasa sedikit lebih kasual dan ramah (tidak terlalu kaku seperti dokumentasi teknis biasa), font buatan desainer Indonesia yang mendunia ini adalah pilihan luar biasa.

• Karakter visual: Sudut-sudut hurufnya memiliki kelengkungan yang manis (clean and punchy), memberikan energi yang fresh pada presentasi.
• Di mana mencarinya: Google Fonts - Plus Jakarta Sans
• Penggunaan terbaik: Gunakan varian Bold atau ExtraBold untuk judul utama CONTAINER dan VIRTUAL MACHINE di bagian bawah.

4. JetBrains Mono (Untuk Aksen Teks Data / Angka)

Untuk bagian informasi ukuran data di paling bawah (seperti ≈ 150 MB atau several GB), menggunakan font berjenis monospace (font gaya mesin ketik/kode) akan memperkuat nuansa “edukasi pemrograman”.

• Karakter visual: Hurufnya memiliki lebar yang sama, memberikan kesan visual data mentah yang akurat.
• Di mana mencarinya: Google Fonts - JetBrains Mono
• Penggunaan terbaik: Khusus untuk angka, pintasan tombol, status badge, atau teks data pelengkap di bagian bawah diagram.

💡 Tips Pengaturan Tipografi di Figma / After Effects:

Untuk meniru persis estetika gambar tersebut, terapkan aturan spasi ini:

• Teks Judul Besar (Bawah): Gunakan huruf kapital semua (UPPERCASE) dan berikan jarak antar huruf (Letter Spacing / Tracking) sebesar +15% hingga +25% agar terlihat megah dan luas.
• Teks Kecil (Dalam Kotak): Setel ke Font Weight SemiBold atau Medium dengan warna hitam murni (#000000) agar kontrasnya kuat di atas latar pastel yang terang.

Apakah Anda ingin saya buatkan ide konsep transisi animasi sederhana (motion concept) untuk diagram ini, misalnya bagaimana kotak-kotak arsitektur ini sebaiknya muncul satu per satu di video YouTube Anda agar terlihat estetik?