Twinkle AI Labs

TWINKLE AI LABS · DESIGN SYSTEM

Aurora
Ledger.

Standar kecil yang konsisten
untuk alat yang nyaman dipakai.

Warna, teks, ruang, dan gerakan.
Menghubungkan semua produk dalam satu pengalaman.

Jelajahi warna Prinsip desain
Aurora Ledger0102 / 02
AaPretendard
Desain untuk cahaya dan angka8 pt
Jarak yang seimbang
MIST · Warna pagi yang jernihDUSK · Warna malam yang tenang

Ganti tema situs untuk beralih antara Mist dan Dusk.

Mode warna
2
Kelompok token
7
Kisi dasar
8pt
Prinsip
6

Identitas

Desain untuk cahaya dan angka

Aurora Ledger lahir bersama produk pertama kami pada Agustus 2026. Namanya mewakili dua kualitas yang kami inginkan di setiap layar.

  • Aurora

    Cahaya yang menuntun dalam gelap

    Ungu gelap dan terang membentuk identitas merek serta mengarahkan perhatian ke informasi penting dan tindakan berikutnya.

  • Ledger

    Catatan nilai rumit yang jelas

    Kami memulai dengan kalkulator investasi. Angka tetap ditampilkan lengkap, hasil didahulukan, dan perubahan dijelaskan lewat kata, simbol, serta warna.

Nama sistem ini adalah Aurora Ledger. Dalam kode produk, awalan Twinkle* menghubungkan merek dengan implementasinya.

Dasar

Pilih warna berdasarkan peran

colors

Gunakan peran, bukan nilai warna tetap. Peran menyesuaikan mode terang dan gelap agar kontras dan identitas terjaga. Ungu cerah menunjukkan tindakan berikutnya.

Mode warna · Mist

Latar dan permukaan

  • bg#F8F6FC
  • surface#FFFFFF
  • sunken#F5F4F8
  • lifted#FFFFFF
  • key#FFFFFF
  • divider#EAE4F0

Tipografi

  • text#21182D
  • textSub#71687D
  • textFaint#A79EAF

Merek

  • primary#7040D9
  • accent#7040D9 · teks
  • primarySoft#EEE7FC
  • gradient→ #8550E4

Status dan penekanan

  • danger#B42318Tindakan yang tak bisa dibatalkan
  • warm#D92D20Penekanan hangat
  • cool#2763C4Penekanan dingin

Efek

  • glow · primary 20%
  • shadow · ungu gelap
  • scrim · 52%
  • outlineLifted

Mode warna · Dusk

Latar dan permukaan

  • bg#110D19
  • surface#1B1526
  • sunken#251D32
  • lifted#2C233A
  • key#20182C
  • divider#352A42

Tipografi

  • text#FAF7FF
  • textSub#AEA3BA
  • textFaint#746A80

Merek

  • primary#986CF4
  • accent#B79AFF · teks
  • primarySoftaccent · 12%
  • gradient→ #8550E4

Status dan penekanan

  • danger#FF9B91Tindakan yang tak bisa dibatalkan
  • warm#FF9B91Penekanan hangat
  • cool#8DB9FFPenekanan dingin

Efek

  • glow · accent 14%
  • shadow · hitam
  • scrim · 62%
  • outlineLifted · tidak ada
  • Latar dan permukaan — Mist memberi kehangatan ungu pada permukaan terang. Dusk memakai kecerahan dan kontras tersendiri untuk malam, bukan sekadar membalik Mist.
  • Merek — primary untuk tombol berisi; accent untuk teks, ikon, dan bingkai. Keduanya membutuhkan kontras berbeda dalam mode gelap.
  • Status dan penekanan — danger untuk tindakan berisiko; warm dan cool untuk membedakan informasi. Teks dan ikon menjelaskan maknanya. Latar lembut memakai 8% dalam mode terang dan 12% dalam mode gelap.

Dasar

Enam tingkat penekanan

alpha

Enam tingkat opasitas mengatur hierarki dan kedalaman, menjaga penekanan tetap konsisten di berbagai produk.

  • strong.88Teks isi yang lebih redup
  • soft.70Informasi tambahan
  • half.50Pemisah bagian dalam
  • ring.35Bingkai penekanan
  • tint.20Latar lembut dan pegangan
  • wash.08Latar paling lembut · gelap .12

Dasar

Irama kisi 8pt

spacing

Jarak mengikuti kelipatan 8. Nilai 2, 4, dan 6px digunakan untuk penyelarasan dan penyesuaian kecil.

  1. tight2
  2. s04
  3. s0h6
  4. s18
  5. s1h12
  6. s216
  7. s2h20
  8. s324
  9. s432
  10. s540
  11. s648

Dasar

Standar ukuran dan bentuk

iconSize · elevation · shapes · controlSize · stroke

Ikon

  • xs12
  • sm16
  • md20
  • lg26

Elevasi

  • raised4Kartu standar
  • floating10Elemen melayang dan saat disorot
  • drawer20Panel samping dan bawah

Bentuk

  • small11Kolom masukan
  • medium14Panel dalam dan tombol
  • large18Kartu standar
  • extraLarge24Panel dan dialog
  • drawer20Panel papan angka
  • pill999Lencana dan tombol membulat

Kontrol

  • rowHeight48Tinggi baris standar
  • primaryButtonHeight48Tinggi tombol utama
  • keypadKeyHeight52Tinggi tombol angka
  • keypadGap8Jarak antartombol

Garis

  • hair1Garis pemisah standar
  • ring1.5Fokus dan pilihan

Interaksi

Gerakan cepat dan alami

motion

Gerakan berawal dari tujuan. Perlambat dengan lembut saat masuk dan bergerak, lalu percepat singkat saat keluar.

Arahkan penunjuk atau fokus ke kartu untuk membandingkan tiga durasi.

  • fast150ms
  • base250ms
  • slow350ms

Arahkan penunjuk atau fokus ke kartu untuk membandingkan kurva masuk dan keluar.

  • easecubic-bezier(.25, 1, .5, 1) · Elemen masuk atau bergerak
  • exitcubic-bezier(.4, 0, 1, 1) · Elemen yang cepat keluar

Dasar

Angka jelas, teks mudah dibaca

typography · Pretendard

Lima belas peran Pretendard mencakup angka, judul, isi, dan label. Teks besar menampilkan hasil, teks kecil memberi konteks. Gunakan ukuran dan ketebalan yang ditetapkan; jangan memotong kata bahasa Korea.

  • Sedikit cahaya di harimudisplayLarge40 · 700 · 1.25 · -0.03em · Pesan utama
  • 12 catatan barudisplayMedium36 · 700 · 1.25 · -0.03em · Hasil utama
  • Perubahan minggu inidisplaySmall32 · 700 · 1.25 · -0.03em · Judul ringkasan
  • Siap memulai proyek?headlineLarge28 · 700 · 1.25 · -0.03em · Judul halaman
  • Aktivitas terbaruheadlineMedium24 · 700 · 1.25 · -0.02em · Judul bagian
  • 24 Agustus 2026headlineSmall24 · 500 · 1.25 · -0.02em · Judul tambahan
  • Ide barutitleLarge20 · 700 · 1.25 · -0.02em · Judul kartu
  • Tinjauan desain selesaititleMedium16 · 600 · 1.35 · -0.01em · Judul item
  • Hari ini pukul 15.00titleSmall14 · 600 · 1.35 · -0.01em · Judul kecil
  • Temukan yang dibutuhkan dan fokus pada hal penting.bodyLarge16 · 400 · 1.65 · Teks isi yang ditekankan
  • Perubahan disinkronkan otomatis di semua perangkat.bodyMedium14 · 400 · 1.65 · Teks isi standar
  • Disimpan 2 menit lalubodySmall12 · 400 · 1.35 · Bantuan dan keterangan
  • LanjutkanlabelLarge14 · 600 · 1.35 · -0.01em · Tombol dan tab
  • Berlangsung · 8labelMedium12 · 500 · 1.35 · Status dan metadata
  • NEWlabelSmall11 · 500 · 1.35 · Lencana dan keterangan

Prinsip

Enam prinsip layar yang jelas

  • Pusatkan efek kuat pada satu tindakan utama. Gunakan satu gradasi per layar.
  • Jelaskan status dan perubahan dengan teks serta ikon, selain warna.
  • Gunakan warna bahaya hanya untuk tindakan yang tak dapat dibatalkan. Pilihan yang bisa dibatalkan tidak perlu terasa mengkhawatirkan.
  • Tunjukkan hubungan lewat jarak dan perataan. Struktur sederhana lebih mudah dibaca.
  • Teks terbesar menampilkan jawaban yang dicari. Buat hasil lebih mudah terlihat daripada masukan.
  • Tampilkan nilai uang dan angka penting secara utuh. Jika ruang terbatas, gunakan ukuran teks lebih kecil yang sudah ditetapkan.

Riwayat

Catat keputusan dan pelajaran

  1. 2026-08-09Layar pertama

    Prototipe kalkulator investasi berwarna ungu menjadi Aurora Ledger. Angka yang jelas dan utuh adalah titik awalnya.

  2. Eksperimen awalMemberi identitas pada warna netral

    Abu-abu murni terasa rapi tetapi tanpa ciri. Sedikit ungu gelap mengembalikan karakter pada warna netral.

  3. Eksperimen awalMengembalikan warna bermakna

    Ungu saja menyulitkan pembacaan naik turun. Merah untuk kenaikan dan biru untuk penurunan kembali digunakan sesuai kebiasaan pasar Korea.

  4. Eksperimen awalFokus pada tindakan

    Gradasi dipindahkan dari angka besar ke tombol utama agar tindakan berikutnya mudah ditemukan.

  5. 2026-08-18Bahasa desain bersama

    Standar warna dan kontras diterapkan pada produk pertama. Satu tema berkembang menjadi sistem bersama.

  6. 2026-08-22Melengkapi token

    Opasitas, jarak, ukuran, elevasi, bentuk, dan gerakan melengkapi warna sebagai bahasa bersama.

  7. 2026-08-23Menerbitkan prinsip

    Alasan dan penggunaan setiap keputusan dicatat agar pertimbangan tetap konsisten saat produk bertambah.

  8. 2026-09-25Memperluas warna penekanan

    Merah dan biru kini disebut warm dan cool. Warnanya tetap, tetapi nama netral memungkinkan makna lain di berbagai produk.