/* ============================================================ AdBit design tokens — SATU sumber untuk landing dan app. Acuan visual: brandbook.html (buka itu kalau butuh lihat, bukan baca). Palet kanonik berasal dari Branding/Brand Kit.png. CARA PAKAI 1. Impor file ini paling atas, sebelum CSS lain. 2. Set density di elemen root: landing adbit.id app.adbit.id Tanpa atribut, default = marketing. 3. Pakai token SEMANTIK (--action, --text-2, --border) di komponen. Primitive (--accent-500, --ink-400) hanya untuk mendefinisikan semantik di file ini. JANGAN tulis hex langsung di komponen. Tiap nilai di sini ada padanan visualnya di brandbook.html. Kalau nilai di file ini dan brandbook berbeda, brandbook yang benar dan file ini yang salah. ============================================================ */ :root { /* ---------- PRIMITIVE: accent ---------- */ --accent-50: #F7F4FF; --accent-100: #ECE6FF; --accent-200: #D9CEFF; --accent-400: #A78BFA; --accent-500: #6C3CFF; /* CORE — brand kit */ --accent-700: #4A21C9; --accent-900: #2A1B5E; --accent-muted: #5C4F94; /* ungu ter-desaturasi. SATU tugas: teks di atas accent-200 (state disabled aksi utama). 4,9:1. Jangan dipakai di tempat lain. */ /* ---------- PRIMITIVE: ink (netral dingin) ---------- */ --ink-0: #FFFFFF; --ink-50: #F4F5F7; --ink-100: #E9EBF0; --ink-150: #DDE0E8; --ink-200: #C3C8D4; --ink-300: #9AA0B0; --ink-400: #6E7488; --ink-500: #4A5066; --ink-600: #2E3447; --ink-700: #1A1F2E; --ink-800: #11141F; --ink-900: #0B0D14; /* ---------- PRIMITIVE: status ---------- */ --success: #18B871; --success-tint: #D8F1E2; --success-ink: #0C6B3E; --warning: #F5A524; --warning-tint: #FCEBCE; --warning-ink: #7A4E05; --danger: #F2415A; --danger-tint: #FDE2E6; --danger-ink: #9B1B31; --info: #2BC6D9; --info-tint: #D6F1F5; --info-ink: #0B5C66; /* ---------- SEMANTIK: permukaan terang ---------- */ --bg: var(--ink-50); --surface: var(--ink-0); --border: var(--ink-100); /* garis kartu, baris tabel, pemisah */ --border-strong: var(--ink-150); /* garis input, chip, tombol secondary */ --text: var(--ink-900); /* 17,7:1 di --bg */ --text-2: var(--ink-500); /* 7,3:1 — LANTAI untuk teks kecil */ --text-3: var(--ink-400); /* 4,3:1 di --bg, 4,7:1 di putih. Lihat catatan di bawah */ /* ---------- SEMANTIK: permukaan gelap ---------- */ --bg-d: var(--ink-900); --surface-d: var(--ink-800); --surface-d-2: var(--ink-700); --border-d: rgba(255,255,255,.10); --text-d: var(--ink-50); /* 16,8:1 */ --text-d-2: var(--ink-300); /* 7,5:1 — LANTAI di permukaan gelap */ --accent-d: var(--accent-400);/* 7,9:1. accent-500 terlalu gelap untuk dibaca di ink-900 */ /* ---------- SEMANTIK: aksi ---------- */ --action: var(--accent-500); --action-hover: var(--accent-700); --on-action: var(--ink-0); /* 5,6:1 */ --action-off: var(--accent-200); /* isi aksi utama saat disabled. BUKAN untuk loading */ --on-action-off: var(--accent-muted); /* 4,9:1 di atas --action-off */ /* ---------- FONT ---------- */ --f-display: 'Poppins', 'Plus Jakarta Sans', system-ui, sans-serif; --f-text: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --f-data: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- SUDUT ---------- */ --r-xs: 6px; /* dot, tanda kecil, swatch */ --r-sm: 8px; /* item menu, tombol ikon */ --r-md: 12px; /* input, select, callout, kartu kecil dalam panel */ --r-lg: 16px; /* DEFAULT kartu */ --r-xl: 20px; /* kartu besar: tier harga, panel analisa, modal */ --r-2xl: 28px; /* blok penutup halaman, kartu hero */ --r-pill: 999px; /* SEMUA tombol, chip, badge — tanpa kecuali */ /* ---------- RUANG (skala 4) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* ---------- ELEVATION ---------- Permukaan gelap TIDAK memakai bayangan. Kedalaman datang dari layering tonal ink-900 -> ink-800 -> ink-700. */ --e0: 0 1px 2px rgba(11,13,20,.05); /* kartu di UI padat */ --e1: 0 2px 6px rgba(11,13,20,.07); /* kartu diam */ --e2: 0 8px 24px rgba(11,13,20,.09); /* kartu form, panel terangkat */ --e3: 0 20px 48px rgba(11,13,20,.14); /* hover kartu, menu melayang */ --e4: 0 24px 60px rgba(11,13,20,.30); /* modal, dialog */ --glow: 0 10px 30px color-mix(in oklab, #6C3CFF 38%, transparent); /* HANYA aksi & sinyal */ --glow-press: 0 4px 14px color-mix(in oklab, #6C3CFF 30%, transparent); /* ---------- GRADIENT ---------- Hanya untuk permukaan brand: app icon, glow atmosfer hero, blok isi kartu iklan. TIDAK PERNAH untuk tombol, chip, badge, atau teks. */ --grad-brand: linear-gradient(135deg, var(--accent-500), var(--accent-900)); --grad-hero: radial-gradient(120% 120% at 80% 0%, color-mix(in oklab, #6C3CFF 38%, transparent) 0%, transparent 55%); /* ---------- TIPOGRAFI: ukuran ---------- */ --fs-display: clamp(2.25rem, 5vw, 3.5rem); /* hero, marketing saja */ --fs-h1: clamp(1.75rem, 4vw, 2.4rem); /* judul section, marketing saja */ --fs-h2: 24px; --fs-h3: 20px; --fs-h4: 16px; --fs-body-lg: 16px; --fs-body: 15px; --fs-body-sm: 13px; --fs-label: 12px; --fs-data: 13px; /* ---------- TIPOGRAFI: line-height & tracking ---------- */ --lh-display: 1.04; --ls-display: -.025em; --lh-h1: 1.10; --ls-h1: -.02em; --lh-h2: 1.20; --ls-h2: -.02em; --lh-h3: 1.20; --ls-h3: -.015em; --lh-h4: 1.25; --ls-h4: -.015em; --lh-body-lg: 1.65; --lh-body: 1.60; --lh-body-sm: 1.55; --ls-label: .12em; /* ---------- DENSITY: default = marketing ---------- Satu-satunya hal yang boleh berbeda antar permukaan. Warna, font, bentuk, dan elevation identik di dua density. */ --d-prose: var(--fs-body-lg); --d-prose-lh: var(--lh-body-lg); --d-prose-max: 68ch; --d-card-title: var(--fs-h3); --d-card-pad-y: var(--s-8); --d-card-pad-x: var(--s-6); --d-card-shadow: var(--e1); --d-btn-h: 48px; --d-btn-pad: var(--s-6); --d-btn-fs: 16px; --d-input-h: 48px; --d-input-fs: 16px; --d-section-gap: var(--s-20); --d-table-fs: var(--fs-body-lg); } :root[data-density="product"], [data-density="product"] { --d-prose: var(--fs-body); --d-prose-lh: var(--lh-body); --d-prose-max: none; --d-card-title: var(--fs-h4); --d-card-pad-y: var(--s-5); --d-card-pad-x: var(--s-4); --d-card-shadow: var(--e0); --d-btn-h: 40px; --d-btn-pad: var(--s-5); --d-btn-fs: 15px; --d-input-h: 40px; --d-input-fs: 15px; --d-section-gap: var(--s-12); --d-table-fs: var(--fs-body-sm); } /* ============================================================ CATATAN YANG SERING KENA — baca sebelum memilih token ============================================================ KONTRAS --text-3 (ink-400) lolos AA di atas putih (4,7:1) tapi TIDAK di atas --bg (4,3:1). Di background halaman, pakai dia hanya untuk teks >=18px bold atau caption yang bukan pembawa arti. Untuk prosa kecil, turun ke --text-2. UNGU ADALAH SINYAL Batas yang bisa diukur, bukan persentase: - satu aksi utama per layar (tombol kedua turun ke secondary/dark) - maksimal satu frasa ditekankan per headline, warna solid - ungu tidak pernah jadi background section - border ungu hanya kartu tier unggulan - angka berwarna ungu hanya kalau angka itu sinyal performa LOADING BUKAN DISABLED Tombol loading tetap --action penuh supaya spinner putihnya terbaca. Yang memakai --accent-200 hanya disabled. ANGKA Setiap angka yang jadi bukti (lama tayang, harga, persen, hitungan) memakai --f-data + font-variant-numeric: tabular-nums. Prosa tidak pernah mono. NILAI YANG TIDAK ADA DI SINI TIDAK BOLEH DIPAKAI Butuh sesuatu di antara dua tingkat biasanya berarti tingkatnya yang salah dipilih, bukan skalanya yang kurang. ============================================================ */