dumet - Design System & Visual Hierarchy - sesi 04

by oktaviardi pratama

HTML

<script src="https://cdn.tailwindcss.com"></script>

  <div class="flex justify-center py-[50px]">
    <div class="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
    
    <div class="bg-secondary p-6 text-white">
      <span class="text-xs font-bold uppercase tracking-widest bg-darkMain/20 px-2 py-1 rounded">
        Design System
      </span>
      <h1 class="text-2xl font-bold mt-2 leading-tight">
        Menguasai Fondasi UI/UX Modern
      </h1>
    </div>

    <div class="p-6 space-y-6">
      
      <div class="space-y-2">
        <h2 class="text-lg font-semibold text-darkMain">
          Aturan Warna 60-30-10
        </h2>
        <p class="text-base text-gray-600 leading-relaxed">
          Gunakan 60% warna utama untuk dominasi layout, 30% untuk elemen pendukung seperti kartu atau sidebar, dan 10% khusus sebagai aksen penarik perhatian.
        </p>
      </div>

      <div class="grid grid-cols-4 gap-2 pt-2">
        <div class="h-10 bg-[#f5f5f5] rounded border border-gray-300 flex items-center justify-center text-[10px] font-bold">60%</div>
        <div class="h-10 bg-secondary rounded text-white flex items-center justify-center text-[10px] font-bold">30%</div>
        <div class="h-10 bg-darkMain rounded text-white flex items-center justify-center text-[10px] font-bold">30%</div>
        <div class="h-10 bg-accent rounded text-white flex items-center justify-center text-[10px] font-bold">10%</div>
      </div>

      <hr class="border-gray-100">

      <div class="flex items-center justify-between pt-2">
        <span class="text-sm font-medium text-gray-500">Sudah paham materi?</span>
        <button class="bg-accent hover:bg-[#e04c1d] text-white font-bold py-2.5 px-5 rounded-xl shadow-md shadow-accent/20 transition-all duration-200 transform hover:-translate-y-0.5 active:translate-y-0 text-base">
          Mulai Praktik
        </button>
      </div>

    </div>
 ...

JavaScript

// Mengonfigurasi Design System Tailwind sesuai palet warna gambar
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            // 60% Dominan (Background utama / Light)
            bgMain: '#f5f5f5', 
            // 30% Sekunder (Card, Sidebar, Text Pendukung)
            secondary: '#76abae',
            darkMain: '#303841',
            // 10% Aksen (Tombol, CTA, Highlight)
            accent: '#ff5722',
          }
        }
      }
    }// Mengonfigurasi Design System Tailwind sesuai palet warna gambar
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            // 60% Dominan (Background utama / Light)
            bgMain: '#f5f5f5', 
            // 30% Sekunder (Card, Sidebar, Text Pendukung)
            secondary: '#76abae',
            darkMain: '#303841',
            // 10% Aksen (Tombol, CTA, Highlight)
            accent: '#ff5722',
          }
        }
      }
    }