Design System

Skylera Design System

Token warna, komponen dasar, dan aturan tema light/dark untuk website company profile Skylera Corporation. Semua pasangan warna diaudit terhadap WCAG 2.2 AA.

Mulai pakai Lihat audit kontras

Prinsip

Disusun dari WCAG 2.2, IBM Carbon, Radix Colors, dan Material Design.

  • Token semantic, bukan hexKomponen hanya memakai token peran seperti --sk-text-primary. Nilainya berganti per tema, namanya tetap.
  • Kontras terverifikasiTeks minimal 4.5:1, border input dan focus ring minimal 3:1. Dicek otomatis di bagian Aksesibilitas.
  • Link di paragraf selalu underlineWarna link hampir sama terang dengan teks biasa, jadi warna saja tidak cukup (WCAG 1.4.1).
  • Amber hanya untuk CTASatu CTA utama per layar, selalu dengan teks gelap. Amber tidak pernah dipakai sebagai warna teks di latar terang.
  • Dark bukan hitam pekatLatar abu-abu gelap bernuansa teal. Elevasi ditunjukkan dengan surface yang lebih terang, bukan bayangan.
  • Teal brand tetap di kedua temaPakai .sk-brand-band untuk hero dan section brand supaya focus ring dan link ikut menyesuaikan.

Palet primitive

Bahan mentah, tidak berubah per tema. Jangan dipakai langsung di komponen; rujuk lewat token semantic.

Token semantic

Nilai di tabel ini dibaca langsung dari tokens.css, jadi selalu sesuai dengan kode.

TokenLightDarkDipakai untuk

Komponen

Kelas siap pakai dari components.css. Arahkan kursor dan tekan Tab untuk mencoba state aslinya.

Tombol dan state

VarianRestHoverActiveFocusDisabled
CTA
Primary
Secondary

Form

Sesuai akta pendirian.
Format email belum lengkap. Contoh: nama@perusahaan.co.id

Alert, badge, dan link

Pesan Anda sudah terkirim. Tim kami akan menghubungi dalam 1×24 jam.
Jadwal konsultasi minggu ini hampir penuh.
Pesan gagal terkirim. Periksa koneksi lalu coba lagi.
Kantor tutup pada hari libur nasional.

Aktif Tertunda Ditolak Baru

Paragraf biasa dengan link ber-underline di dalam teks, sesuai aturan WCAG 1.4.1.

Pratinjau berdampingan

Kedua panel memaksa temanya sendiri dengan data-theme, jadi tidak ikut pilihan tema halaman.

Light

Solusi untuk bisnis Anda

Hero memakai teal brand di kedua tema.

Konsultasi bisnis

Card raised: bayangan di light.

Selengkapnya
Info memakai tint teal.
Dark

Solusi untuk bisnis Anda

Hero memakai teal brand di kedua tema.

Konsultasi bisnis

Card raised: surface lebih terang di dark.

Selengkapnya
Info memakai tint teal.

Audit kontras

Dihitung langsung dari token dengan rumus WCAG 2.2, untuk setiap permukaan tempat warna itu bisa muncul. Teks minimal 4.5:1; border input dan focus ring minimal 3:1 (SC 1.4.11). State disabled dikecualikan oleh WCAG.

PasanganLightDarkMinimalStatus

Pemakaian

Muat ketiga file di <head>. Script tema harus sinkron (tanpa defer) supaya tidak ada kedipan saat halaman dibuka.

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components.css">
<script src="theme-toggle.js"></script>

Toggle tema

<!-- Pilihan tiga: ikut sistem, paksa light, paksa dark -->
<button data-sk-theme-set="system">Sistem</button>
<button data-sk-theme-set="light">Light</button>
<button data-sk-theme-set="dark">Dark</button>

<!-- Atau satu tombol tukar light/dark -->
<button data-sk-theme-toggle>Ganti tema</button>

Memakai token di CSS sendiri

.testimonial {
  background: var(--sk-bg-surface);
  border: 1px solid var(--sk-border);
  color: var(--sk-text-secondary);
}

Aturan

  • Jangan pakai hex atau token primitive (--sk-teal-500) langsung di komponen. Kalau belum ada token yang pas, tambah token semantic baru lalu cek kontrasnya di halaman ini.
  • Link di dalam paragraf pakai .sk-link (underline). Link navigasi dan tombol tidak perlu underline.
  • Satu .sk-btn--cta per layar. Aksi lain pakai primary atau secondary.
  • Logo: pakai assets/logo - no bg.svg di light dan assets/logo - no bg white.svg di dark, atau inline SVG dengan color: var(--sk-logo).
  • Tipografi, spacing, dan radius di tokens.css masih sementara dan belum diriset seperti warna.