Lewati ke konten
perhalus
Coba sekarang

Panduan gaya · v0.1

Hitam, putih, abu

Token dan komponen untuk produk publik Perhalus. Semua token tinggal di app/perhalus.css dan hanya berlaku di dalam kelas .ph, jadi Knowledge Lab tidak terpengaruh. Komponen ada di components/perhalus.

Warna

Tema gelap adalah wajah utama. Warna semantik (kiri) berubah per tema; ramp netral tetap.

Gelap (utama)

  • --backgroundLatar halaman
  • --cardKartu, composer
  • --ph-surfaceArea tenggelam
  • --secondaryChip, tombol sekunder
  • --borderGaris
  • --foregroundTeks utama
  • --muted-foregroundTeks pendukung
  • --primaryAksi utama
  • --ph-accent-textTeks aksen
  • --destructiveGalat

Bersih

Samar

Campur

Kental

Slop

AI-likeHuman-like

Terang

  • --backgroundLatar halaman
  • --cardKartu, composer
  • --ph-surfaceArea tenggelam
  • --secondaryChip, tombol sekunder
  • --borderGaris
  • --foregroundTeks utama
  • --muted-foregroundTeks pendukung
  • --primaryAksi utama
  • --ph-accent-textTeks aksen
  • --destructiveGalat

Bersih

Samar

Campur

Kental

Slop

AI-likeHuman-like

--ph-neutral-*

50

100

200

300

400

500

600

700

800

850

900

Tipografi

Manrope untuk UI dan teks, Instrument Serif miring hanya untuk satu kata aksen per judul, JetBrains Mono untuk angka.

  • Hero

    clamp(40–76px) · 600 · -3.5%

    Haluskan tulisan

  • H1

    clamp(32–52px) · 600 · -3%

    Tiga langkah sederhana

  • H2

    clamp(24–34px) · 600 · -2%

    Versi yang lebih natural

  • Display

    Instrument Serif · aksen satu kata

    natural

  • Lead

    18px · 1.65

    FIRA menilai seberapa kental aksen AI-nya.

  • Body

    15px · 1.87 · teks hasil

    Konten berkualitas adalah kunci kesuksesan bisnis Anda.

  • Small

    14px · keterangan

    Teks Anda masih tersimpan.

  • Mono

    JetBrains Mono · angka skor

    72 · 1.234 / 5.000

Spasi & radius

Skala spasi Tailwind (kelipatan 4px). Gutter halaman 16px di ponsel, 24px dari 640px. Jarak antarbagian --ph-section = clamp(64px, 10vw, 120px).

spacing

  • 1 · 4px
  • 2 · 8px
  • 3 · 12px
  • 4 · 16px
  • 6 · 24px
  • 8 · 32px
  • 12 · 48px
  • 16 · 64px
  • 24 · 96px

--radius: 14px (turunan sm…4xl)

sm

md

lg

xl

2xl

3xl

full

Composer dan kartu hasil memakai 2xl; chip dan tombol aksi utama memakai full.

Gerak

Gerak singkat dan tenang. Semua animasi mati saat pengguna memilih reduce motion.

--ph-dur-* · --ph-ease-*

  • fast · 120ms
    Hover, tombol ditekan
  • base · 200ms
    Border fokus, tab
  • slow · 420ms
    Kartu hasil muncul
  • meter · 900ms
    Isi meter slop
  • spring · 420ms
    Aksen kecil yang memantul

Ornamen

Tema kertas dan menyunting: garis buku, tanda koreksi editor, kursor ketik, tumpukan draf. Dipakai hemat, satu atau dua per bagian. Semuanya aria-hidden dan berhenti bergerak saat reduce motion aktif. Kode: components/perhalus/ornaments.tsx.

ProofMark: caret · dele · pilcrow · transpose · quote

PaperStack

Draf teratas

Swoosh · ph-shine-text

Haluskan

FlowLine

TempelNilaiPoles

RuledPaper · TypingCaret

Masih ditulis

Float

Nada Formal

Maskot FIRA

Placeholder sampai karakter FIRA didesain. API-nya satu prop mood; ganti gambarnya tanpa mengubah pemakaian.

idle
thinking
happy
?unsure
concerned
error

Meter slop

Lima level berjangkar. Label harus sejalan dengan skor: 61 ke atas AI-like, 41–60 Ragu, 40 ke bawah Human-like.

SlopMeter size=lg (geser untuk mencoba)

Meter slopKental0
Bersih0–20
Samar21–40
Campur41–60
Kental61–80
Slop81–100

SlopMeter size=md · sm

Meter slopBersih0
Meter slopSamar0
Meter slopCampur0
Meter slopSlop0

MeterCompare

SebelumKental0
SesudahBersih0

Turun 66 poin, dari Kental ke Bersih.

VerdictBadge · DemoBadge · Badge (shadcn)

Human-likeRaguAI-likeMode demoBaruFormal

Input

Kotak teks ala penyedia AI: menu pilihan model dan nada (ala pemilih model Claude: centang, nomor 1–9); hitungan karakter; validasi minimal 40 karakter.

Ctrl + Enter untuk menilai.

0 / 5.000

CharCount

312 / 5.0004.620 / 5.0005.210 / 5.000

Button (shadcn, token Perhalus)

Kosong, memuat, galat

Hasil penilaian muncul di sini

Tempelkan teks di atas, lalu tekan tombol panah. FIRA akan menilai seberapa kental aksen AI-nya.

FIRA sedang menilai…

Memeriksa kesesuaian bahasa…

  1. ✓ Membaca teks
  2. • Menilai aksen AI
  3. Memoles
  4. Memeriksa hasil

Apa yang berubah

Hasil bisa dibaca bersih atau sebagai diff kata per kata, ditambah daftar alasan tiap perubahan.

Konten berkualitas adalah kunci kesuksesan bisnis Anda. Kami menawarkan layanan untuk memenuhi berbagai kebutuhan Anda. Tim kami yang berpengalaman siap memastikan setiap langkah lancar. Jadi, Anda dapat fokus pada hal yang benar-benar penting: mengembangkan bisnis Anda lebih jauh.

DiffText

Kami hadir dengan solusimenawarkan inovatiflayanan untuk bisnis Anda.

  1. Di era digital yang serba cepat ini,dihapus

    Pembuka klise yang tidak menambah informasi.

  2. Tidak hanya itu,dihapus

    Kata sambung yang sering dipakai untuk menumpuk klaim.

  3. Selain itu,dihapus

    Kata sambung pembuka yang berulang membuat paragraf terasa seperti daftar.

  4. Dengan demikian,Jadi,

    Penutup yang kaku; "jadi" lebih wajar.

  5. merupakanadalah

    Terlalu kaku untuk kalimat sederhana.

Kartu hasil

Tiga kemungkinan hasil dari mock engine: AI-like (dipoles), Ragu (pengguna memilih), Human-like (dibiarkan).

AI-likeMode demo

Aksen AI terasa. Ini versi yang lebih natural

FIRA menemukan 14 pola yang membuat tulisan ini terasa seperti keluaran mesin.

Meter slopSlop0
Bersih0–20
Samar21–40
Campur41–60
Kental61–80
Slop81–100

Yang FIRA perhatikan

  • Pembuka klise
  • Kata sambung penumpuk
  • Kata sambung berulang
  • Penutup kaku
  • Kata terlalu baku
  • Penekanan berlebihan
  • Frasa promosi template
  • Klaim generik
  • Frasa bertele-tele
  • Pengulangan makna
  • Frasa klise
  • Terjemahan harfiah
  • Tanda pisah panjang

Versi yang lebih natural · Nada Formal

Konten berkualitas adalah kunci kesuksesan bisnis Anda. Kami menawarkan layanan untuk memenuhi berbagai kebutuhan Anda. Tim kami yang berpengalaman siap memastikan setiap langkah lancar. Jadi, Anda dapat fokus pada hal yang benar-benar penting: mengembangkan bisnis Anda lebih jauh.

Meter sebelum dan sesudah

SebelumSlop0
SesudahBersih0

Turun 92 poin, dari Slop ke Bersih.

Apa yang berubah

  1. Di era digital yang serba cepat ini,dihapus

    Pembuka klise yang tidak menambah informasi.

  2. Tidak hanya itu,dihapus

    Kata sambung yang sering dipakai untuk menumpuk klaim.

  3. Selain itu,dihapus

    Kata sambung pembuka yang berulang membuat paragraf terasa seperti daftar.

  4. Dengan demikian,Jadi,

    Penutup yang kaku; "jadi" lebih wajar.

  5. merupakanadalah

    Terlalu kaku untuk kalimat sederhana.

  6. kunci utamakunci

    Penekanan ganda; "kunci" sudah cukup.

  7. kami hadir dengankami menawarkan

    Frasa promosi yang terasa seperti template.

  8. solusi inovatiflayanan

    Klaim generik; sebut saja apa yang ditawarkan.

  9. yang dirancang secara khusus untukuntuk

    Frasa panjang yang bisa dipadatkan.

  10. berbagai macamberbagai

    "Berbagai" dan "macam" bermakna sama.

  11. memastikan bahwamemastikan

    "Bahwa" tidak diperlukan di sini.

  12. berjalan dengan lancarlancar

    Frasa klise yang bisa dipadatkan.

  13. ke level selanjutnyalebih jauh

    Terjemahan harfiah dari bahasa Inggris ("to the next level").

  14. —:

    Tanda pisah panjang yang sering muncul di teks mesin.

?
RaguMode demo

FIRA ragu

Sebagian terasa natural, sebagian terasa kaku. FIRA belum yakin, jadi keputusan memoles ada di tangan Anda.

Meter slopCampur0
Bersih0–20
Samar21–40
Campur41–60
Kental61–80
Slop81–100

Yang FIRA perhatikan

  • Kata sambung berulang
  • Kata terlalu baku

Skor berada di tengah (41–60). Anda bisa membiarkannya, atau melihat versi yang sudah dipoles.

Human-likeMode demo

Sudah natural, tidak perlu dipoles

Tulisan ini sudah terbaca natural.

Meter slopBersih0
Bersih0–20
Samar21–40
Campur41–60
Kental61–80
Slop81–100

Tulisan Anda sudah terbaca seperti tulisan manusia. Tidak ada yang perlu diubah.