klipdong.id

Foundations

Yang membuat sistem ini bukan dashboard SaaS gelap biasa: hairline sebagai satu-satunya pemisah, radius berjenjang menurut ukuran wadah, dan tekstur grain yang tidak bisa dilepas.

Ramp foreground
Aa
--kd-fg-1
Aa
--kd-fg-4
Aa
--kd-fg-6
Aa
--kd-fg-8
Aa
--kd-fg-9
Stroke — hairline putih
8%tidak ada pemisah yang lebih gelap dari kanvas
14%tidak ada pemisah yang lebih gelap dari kanvas
18%tidak ada pemisah yang lebih gelap dari kanvas
22%tidak ada pemisah yang lebih gelap dari kanvas
Radius — wadah lebih besar, radius lebih besar
xs 7
sm 11
md 12
lg 16
xl 18
3xl 22
5xl 28
Enam glyph — seluruh sistem ikon produk ini
caption
score
reframe
game
layout
batch
Chip & rail
50:409157 detikselesaigagal

Colors

Kanvas near-black, ramp foreground hangat, dan satu warna aksi. Permukaan di atas kanvas bukan abu-abu baru — semuanya persentase putih.

Accent — Amber #FFB454

--primary

Amber — Viral Accent

--amber

Secondary

--secondary

Muted

--muted

Accent

--accent

Success

--success

Destructive

--destructive

Card

--card

Border

--border

Typography

Dua famili. Archivo mengerjakan display sekaligus UI dan body. IBM Plex Mono khusus metadata — eyebrow, label, timecode, ID, field link, dan semua angka.

Display — Archivo 600

Italic menandai tepat satu klausa

Judul kartu & topbar — 19 semibold

Judul fitur — 19 semibold

Body — Archivo 400/500, 14–17px.

Small / muted untuk keterangan sekunder.

EYEBROW MONO 11PX, TRACKING 0.12EM,
LABEL MONO 11PX, TRACKING 0.06EM
meta mono 10px — 00:13:41 · job dfb7fae2 · 2 jam lalu

Buttons

Hirarki: default (primary), secondary, outline, ghost, destructive, link.

Form Controls

Format email tidak valid.

Badges & Tooltip

DefaultSecondaryOutlineDestructive94selesaimenganalisisgagal

Feedback

Alert, toast, progress, skeleton, empty state.

420 / 1.000 kredit

sisa 580

Belum ada project

Mulai dengan mengupload video pertamamu.

Data Display

Table dan card.

ProjectStatusKlip
Podcast Bisnis Episode 14selesai12
Webinar Growth Marketingmembuat klip6

Video & Product Components

Video thumb, viral score panel, upload states.

16:9 source
01:03:42
9:16 clip
00:48
1:1 clip
00:48

Upload state

94dari 100
Hook 3 detik97
Retensi92
Nilai isi89
Emosi86
Berdiri sendiri96

Kenapa klip ini menarik

Pembukaan langsung memberikan pernyataan kontradiktif dan payoff-nya dapat dipahami tanpa menonton video asli.