Ui
clinical plan on matte paper
shadcn/ui is a workshop for creating a monochrome design system: a clean white canvas, soft warm gray surfaces, and large-radius cards positioned on the subtlest borders. The interface is almost entirely achromatic—black text, white surfaces, gray secondary tones—with a single, disruptive red color reserved for error states and nothing else. The typography relies on Geist's geometric neutrality with tight letter-height on screens, creating a calm, code-like feel that feels more like developer infrastructure than a consumer product.
Minimal images—the system consists almost entirely of the user interface. No key photos, illustrations, or decorative graphics. Product demos are presented as component mockups (cards, input fields, buttons) in a grid, serving both as documentation and visual content. Icons are thin geometric lines (likely borrowed from Lucide) 1.5–2px thick in #0a0a0a or #737373, used sparingly as functional cues. The visual language is the UI components themselves—the page functions as a living style guide, where every visible element is a visible design element.
Palette
Neutral
- Canvas
#f5f5f5— Page background, muted surface fill, additional buttons. - Paper
#ffffff— Card surfaces, pop-up backgrounds, primary button fills - Surface Alt
#fafafa— Sidebar background, unobtrusive card option, idle state of the input field. - Ink
#0a0a0a— Main text, headings, button labels, icon outlines. - Ink Soft
#171717— Button background images with fill, additional text on light surfaces. - Mid Gray
#737373— The main text, placeholder text, auxiliary labels, and icon fill at rest are all muted.
Typography
from 12 to 48px · 8 steps
- Geist — replacement: Inter · outlines 400, 500, 600 · All interface text—body text with a line weight of 14px/400, headings with a line weight of 24–48px/600, and buttons with a line weight of 13–14px/500. Geist's geometric letterforms and uniform line weight create a neutral feel for developer tools; a 600 line weight with 48px letter spacing and -0.05em letter spacing ensures clear, confident headings that look thoughtful rather than edited.
Intervals and form
| Purpose | Meaning |
|---|---|
| Density | dense |
| Basic step | 8px |
| Button radius | 18px |
| Card radius | 24px |
| Shadows | no - borders instead of shadows |
| Between sections | 48-80px |
| Page width | 1280px |
AI will build your website in Ui style and fill it
- Fill with products and posts via the link - Instagram, TikTok, Facebook.
- Transfer content from your old site—just specify the address.
- Modern design on the best engine: React ( Next.js) with server rendering and SEO optimization out of the box.
- Fully automated SEO optimization for search results and neural network recommendations.
Similar styles
- Ventriloc — An editorial observatory of data on warm paper - a single orange ember highlighting the monochrome precision
- Geniestudio — A soft daylight notebook—the kind with wide margins and one thick pen stroke
- xAI — Warm Cream Lab with Black Pill
- Cal — Monochrome practicality, a human approach. A system that prioritizes clarity and functionality through a strict black-and-white palette, but softens it with friendly typography and rounded shapes.
- Scale — A high-quality museum-quality photo lab combined with a technical project
- Contractbook — contracts of cream paper under an ultramarine sky
- AutoSend — A cozy stone studio with a single purple light—where serif headlines and bright indigo calls to action coexist in one quiet, almost white space.
- Air — sculpture "Midnight Sky Through Glass"
- SpatialChat — purple pulse on white parchment
- Squarespace — Cinematic Monochrome Gallery
- Giga — Midnight horizon over frosted obsidian
- Supabase — A code editor at midnight with a phosphorescent green dot—a single chromatic pulse on a sea of coal dust