Ui
klinikal na plano sa matte na papel
Ang shadcn/ui ay isang workshop para sa paglikha ng monochrome design system: isang malinis na puting canvas, malambot at mainit na kulay abong mga ibabaw, at mga card na may malalaking radius na nakaposisyon sa pinakamaliit na mga border. Ang interface ay halos ganap na achromatic—itim na teksto, puting mga ibabaw, kulay abong pangalawang tono—na may iisang, nakakagambalang pulang kulay na nakalaan para sa mga estado ng error at wala nang iba. Ang tipograpiya ay nakasalalay sa geometric neutrality ng Geist na may masikip na taas ng letra sa mga screen, na lumilikha ng isang kalmado, parang code na pakiramdam na mas parang imprastraktura ng developer kaysa sa isang produktong pangkonsumo.
Kaunting mga imahe—ang sistema ay halos binubuo lamang ng user interface. Walang mahahalagang larawan, ilustrasyon, o pandekorasyon na grapiko. Ang mga demo ng produkto ay ipinapakita bilang mga mockup ng mga bahagi (mga kard, input field, mga buton) sa isang grid, na nagsisilbing dokumentasyon at biswal na nilalaman. Ang mga icon ay manipis na mga geometric na linya (malamang na hiniram mula sa Lucide) na may kapal na 1.5–2px sa #0a0a0a o #737373, na ginagamit nang matipid bilang mga functional cues. Ang visual na wika ay ang mga bahagi ng UI mismo—ang pahina ay gumaganap bilang isang gabay sa istilo ng pamumuhay, kung saan ang bawat nakikitang elemento ay isang nakikitang elemento ng disenyo.
Paleta
Neutral
- Canvas
#f5f5f5— Background ng pahina, naka-mute na pagpuno sa ibabaw, mga karagdagang buton. - Paper
#ffffff— Mga ibabaw ng card, mga pop-up na background, mga pangunahing pagpuno ng button - Surface Alt
#fafafa— Background ng sidebar, opsyon sa card na hindi nakakaabala, idle na estado ng input field. - Ink
#0a0a0a— Pangunahing teksto, mga heading, mga label ng button, mga balangkas ng icon. - Ink Soft
#171717— Mga larawan sa background ng button na may fill, karagdagang teksto sa mga mapuputing ibabaw. - Mid Gray
#737373— Ang pangunahing teksto, teksto ng placeholder, mga auxiliary label, at icon fill habang nakatigil ay pawang naka-mute.
Tipograpiya
mula 12 hanggang 48px · 8 hakbang
- Geist — kapalit: Inter · mga balangkas 400, 500, 600 · Teksto na puro interface—katawan ng teksto na may bigat ng linya na 14px/400, mga heading na may bigat ng linya na 24–48px/600, at mga buton na may bigat ng linya na 13–14px/500. Ang mga heometrikong anyo ng letra at pare-parehong bigat ng linya ng Geist ay lumilikha ng neutral na pakiramdam para sa mga tool ng developer; ang bigat ng linya na 600 na may 48px na pagitan ng letra at -0.05em na pagitan ng letra ay nagsisiguro ng malinaw at may kumpiyansang mga heading na magmumukhang maalalahanin sa halip na inedit.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 8px |
| Radius ng buton | 18px |
| Radius ng card | 24px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 48-80px |
| Lapad ng pahina | 1280px |
Gagawa ang AI ng website mo sa estilong Ui at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Ventriloc — Isang obserbatoryo ng editoryal ng datos sa mainit na papel - isang nag-iisang kulay kahel na baga na nagbibigay-diin sa katumpakan ng monochrome
- Geniestudio — Isang malambot na kuwaderno na may liwanag ng araw—ang uri na may malalapad na gilid at isang makapal na hagod ng panulat
- xAI — Warm Cream Lab na may Itim na Pildoras
- Cal — Praktikalidad ng monochrome, isang makataong pamamaraan. Isang sistemang inuuna ang kalinawan at gamit sa pamamagitan ng mahigpit na itim-at-puting paleta, ngunit pinapalambot ito gamit ang palakaibigang tipograpiya at mga bilog na hugis.
- Scale — Isang de-kalidad na photo lab na pang-museum na sinamahan ng isang teknikal na proyekto
- Contractbook — mga kontrata ng kremang papel sa ilalim ng mala-ube na kalangitan
- AutoSend — Isang maaliwalas na studio na gawa sa bato na may iisang lilang ilaw—kung saan ang mga serif na headline at matingkad na indigo na mga panawagan para sa aksyon ay magkakasamang nabubuhay sa isang tahimik, halos puting espasyo.
- Air — eskultura na "Hatinggabing Langit sa Pamamagitan ng Salamin"
- SpatialChat — lilang pulso sa puting pergamino
- Squarespace — Galeriya ng Monochrome ng Sinematiko
- Giga — Hatinggabi na abot-tanaw sa ibabaw ng nagyelong obsidian
- Supabase — Isang code editor sa hatinggabi na may berdeng tuldok na parang posporesente—isang chromatic pulse sa dagat ng alikabok ng karbon