Referensi visual satu halaman untuk semua token, tipografi, spacing, dan komponen FLYRA — kabin pesawat malam hari: gelap, tenang, satu gradient violet → magenta → amber yang membawa seluruh identitas. Diturunkan langsung dari design.md dan file produksi.
Satu-satunya warna jenuh di sistem adalah gradient aksen. Semua yang lain netral supaya gradient selalu menang.
| Token | Nilai | Dipakai untuk |
|---|---|---|
--glass-border | rgba(255,255,255,0.08) | Satu-satunya border default di seluruh sistem |
| flight-card hover | rgba(168,85,247,0.40) | Border kartu hasil saat hover |
| method-card aktif | var(--accent-1) | Border tile pembayaran terpilih |
| tombol ghost hover | rgba(236,72,153,0.65) | Border V5 Ghost Balik saat hover |
Poppins (400 · 500 · 600 · 700), fallback sans-serif. -webkit-font-smoothing:antialiased di <html>. font-variant-numeric:tabular-nums di semua kolom angka berulang. Uppercase hanya untuk label spesifikasi — tidak pernah untuk copy produk Bahasa Indonesia.
Skala kelipatan 4/8. Elevasi datang dari jarak dan kecerahan permukaan, bukan dari shadow.
| Pattern | Nilai |
|---|---|
| Card padding desktop | 26px 28px |
| Card padding mobile | 16px |
| Page padding desktop | 24px 32px 60px |
| Page padding mobile | 16px 16px 90px |
| Gap antar kartu | 24px desktop · 12–14px mobile |
| Grid utama | 1fr 360px · gap 24px |
Kedalaman dicapai lewat lapisan kecerahan latar, bukan drop-shadow. Satu-satunya bayangan yang diizinkan adalah glow berwarna aksen pada elemen aktif.
--bg-base--bg-surface--glass-fill--bg-elevated--glow-activeFLYRA membulat — kebalikan dari sistem bersudut tajam. Hanya satu border default di seluruh sistem.
| Elemen | Radius |
|---|---|
| Kartu, panel, artboard | var(--radius) = 16px |
| Tombol, chip, pill, badge, nav-pill | var(--radius-pill) = 999px |
| Input, method-card, tile kecil | 12–14px |
| Tombol back, logo mark | 10–12px |
| Avatar, icon-btn, ikon sukses | 50% |
| Kondisi | Nilai |
|---|---|
| Default | 1px solid rgba(255,255,255,0.08) |
| Pembatas dalam kartu | border-top:1px solid var(--glass-border) |
| Nav-pill aktif | rgba(255,255,255,0.25) |
| Chip / sort-tab aktif | transparent — gradient jadi batas |
| Flight card hover | rgba(168,85,247,0.4) |
| Tombol ghost hover | rgba(236,72,153,0.65) |
Satu easing untuk semua: --ease: cubic-bezier(.42,0,.58,1) (ease-in-out). Tidak ada transisi lebih dari 600ms.
| Elemen | Properti | Durasi | Trigger |
|---|---|---|---|
| .btn-pilih::before | scaleY(0→1) origin top | 450ms | :hover |
| .btn-pilih | box-shadow → glow-active | 450ms | :hover |
| .flight-card | border-color → accent-1 | 200ms | :hover |
| .nav-pill / .chip | semua | 200ms | :hover |
| Skeleton (usulan) | opacity 0.4→0.8→0.4 | 1400ms | infinite |
| Press mobile (usulan) | wipe yang sama, dipercepat | 180ms | :active |
Setiap komponen dalam empat state: default, hover, active, disabled — plus komponen struktural (topbar, search bar, filter panel, notification panel, ticket).
.btn-gradient — satu per layar, aksi utama..btn-outline — aksi kedua yang setara..btn-pilih — hover: gradient kebalikan wipe turun dari atas, 450ms ease-in-out..icon-btn — aksi topbar, notifikasi, profil..nav-pill — navigasi utama, satu aktif pada satu waktu..chip — filter jam, transit, sort tab..checkbox — filter maskapai, form konfirmasi..field input — background elevated, fokus pakai border + glow accent-1..method-card — pemilihan metode pembayaran..badge — fasilitas penerbangan, status non-interaktif.Komponen inti FLYRA. Empat kolom tetap: maskapai → waktu → fasilitas → harga+CTA. Hover menaikkan border ke accent violet.
Tidak ada icon library — semua ikon adalah glyph teks/emoji langsung.
| Pola | Contoh |
|---|---|
| Notasi rute ringkas | CGK → DPS |
| Notasi rute lengkap | CGK · Jakarta → DPS · Denpasar |
| Nomor penerbangan | GA 402 · Boeing 737 |
| Durasi | 2j 55m |
| Tanggal panjang / ringkas | Sen, 3 Agu 2026 / Sen, 3 Agu |
| Harga | Rp 1.325.000, tambahan +Rp 75.000 |
| Kode booking | FLY-GA402-8X2K9 |
| Pola CTA | Kata kerja + objek, tanpa tanda baca — Pilih, Bayar Sekarang |
Perangkat sentuh tidak punya :hover — semua interaksi hover di desktop diganti :active yang lebih cepat (~180ms) di file *-mobile.html.
var(--accent-1), bukan hex literal..btn-gradient per layar.body tiap halaman desktop baru..btn-pilih dalam <span>.--accent-2 solid untuk total harga.prefers-reduced-motion di transisi baru.border-radius:0.<table> — data berulang jadi baris kartu.:hover ke file mobile — pakai :active.