Ui
rencana klinis pada kertas matte
shadcn/ui adalah lokakarya untuk menciptakan sistem desain monokrom: kanvas putih bersih, permukaan abu-abu hangat yang lembut, dan kartu dengan radius besar yang ditempatkan pada batas yang paling halus. Antarmuka hampir seluruhnya akromatik—teks hitam, permukaan putih, nada sekunder abu-abu—dengan satu warna merah yang mencolok yang dikhususkan untuk status kesalahan dan tidak untuk yang lain. Tipografi mengandalkan netralitas geometris Geist dengan tinggi huruf yang rapat pada layar, menciptakan nuansa tenang seperti kode yang terasa lebih seperti infrastruktur pengembang daripada produk konsumen.
Gambar minimalis—sistem ini hampir seluruhnya terdiri dari antarmuka pengguna. Tidak ada foto utama, ilustrasi, atau grafik dekoratif. Demo produk disajikan sebagai maket komponen (kartu, kolom input, tombol) dalam bentuk grid, yang berfungsi sebagai dokumentasi dan konten visual. Ikon berupa garis geometris tipis (kemungkinan dipinjam dari Lucide) dengan ketebalan 1,5–2px dalam warna #0a0a0a atau #737373, digunakan secara hemat sebagai isyarat fungsional. Bahasa visualnya adalah komponen UI itu sendiri—halaman berfungsi sebagai panduan gaya yang dinamis, di mana setiap elemen yang terlihat adalah elemen desain yang terlihat.
Palet
Netral
- Canvas
#f5f5f5— Latar belakang halaman, isian permukaan yang lembut, tombol tambahan. - Paper
#ffffff— Permukaan kartu, latar belakang pop-up, isian tombol utama - Surface Alt
#fafafa— Latar belakang sidebar, opsi kartu yang tidak mengganggu, status idle kolom input. - Ink
#0a0a0a— Teks utama, judul, label tombol, garis luar ikon. - Ink Soft
#171717— Gambar latar belakang tombol dengan isian, teks tambahan pada permukaan terang. - Mid Gray
#737373— Teks utama, teks placeholder, label tambahan, dan isian ikon saat diam semuanya diredam.
Tipografi
dari 12 hingga 48px · 8 langkah
- Geist — penggantian: Inter · garis besar 400, 500, 600 · Semua teks antarmuka—teks isi dengan ketebalan baris 14px/400, judul dengan ketebalan baris 24–48px/600, dan tombol dengan ketebalan baris 13–14px/500. Bentuk huruf geometris Geist dan ketebalan baris yang seragam menciptakan nuansa netral untuk alat pengembang; ketebalan baris 600 dengan spasi antar huruf 48px dan spasi antar huruf -0,05em memastikan judul yang jelas dan percaya diri yang terlihat dipikirkan dengan matang, bukan hasil editan.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | padat |
| Langkah dasar | 8px |
| Radius tombol | 18px |
| Radius kartu | 24px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 48-80px |
| Lebar halaman | 1280px |
AI akan membangun situs web Anda dengan gaya Ui dan mengisinya.
- Isi dengan produk dan postingan melalui tautan - Instagram, TikTok, Facebook.
- Pindahkan konten dari situs lama Anda—cukup tentukan alamatnya.
- Desain modern pada mesin terbaik: React ( Next.js) dengan rendering sisi server dan optimasi SEO langsung dari awal.
- Optimasi SEO otomatis sepenuhnya untuk hasil pencarian dan rekomendasi jaringan saraf.
Gaya serupa
- Ventriloc — Observatorium editorial data di atas kertas hangat - bara oranye tunggal menyoroti ketelitian monokrom.
- Geniestudio — Sebuah buku catatan dengan pencahayaan lembut di siang hari—jenis buku dengan margin lebar dan satu goresan pena tebal.
- xAI — Laboratorium Krim Hangat dengan Pil Hitam
- Cal — Kepraktisan monokrom, pendekatan manusiawi. Sebuah sistem yang memprioritaskan kejelasan dan fungsionalitas melalui palet hitam-putih yang ketat, namun melembutkannya dengan tipografi yang ramah dan bentuk-bentuk membulat.
- Scale — Laboratorium foto berkualitas tinggi setara museum yang dipadukan dengan proyek teknis.
- Contractbook — kontrak-kontrak di atas kertas krem di bawah langit biru tua
- AutoSend — Sebuah studio batu yang nyaman dengan satu lampu ungu—di mana judul dengan huruf serif dan ajakan bertindak berwarna indigo terang berdampingan dalam satu ruang yang tenang dan hampir putih.
- Air — patung "Langit Tengah Malam Melalui Kaca"
- SpatialChat — denyut ungu di atas perkamen putih
- Squarespace — Galeri Monokrom Sinematik
- Giga — Cakrawala tengah malam di atas obsidian yang membeku
- Supabase — Penyunting kode di tengah malam dengan titik hijau berpendar—sebuah denyut kromatik tunggal di lautan debu batu bara.