Ui
klinisch plan op mat papier
shadcn/ui is een workshop voor het creëren van een monochroom design systeem: een strak wit canvas, zachte warme grijze oppervlakken en kaarten met een grote radius die op de subtielste randen zijn geplaatst. De interface is bijna volledig achromatisch – zwarte tekst, witte oppervlakken, grijze secundaire tinten – met één opvallende rode kleur die alleen voor foutmeldingen wordt gebruikt. De typografie is gebaseerd op de geometrische neutraliteit van Geist met een kleine letterhoogte op schermen, wat een rustige, code-achtige uitstraling creëert die meer aanvoelt als ontwikkelaarsomgeving dan als een consumentenproduct.
Minimale afbeeldingen – het systeem bestaat bijna volledig uit de gebruikersinterface. Geen belangrijke foto's, illustraties of decoratieve afbeeldingen. Productdemo's worden gepresenteerd als componentmockups (kaarten, invoervelden, knoppen) in een raster, die zowel als documentatie als visuele content dienen. Pictogrammen zijn dunne geometrische lijnen (waarschijnlijk overgenomen van Lucide) van 1,5–2 pixels dik in de kleuren #0a0a0a of #737373, die spaarzaam worden gebruikt als functionele aanwijzingen. De visuele taal wordt gevormd door de UI-componenten zelf – de pagina fungeert als een levende stijlgids, waarbij elk zichtbaar element een zichtbaar ontwerpelement is.
Palet
Neutrale
- Canvas
#f5f5f5— Pagina-achtergrond, gedempte oppervlaktevulling, extra knoppen. - Paper
#ffffff— Kaartoppervlakken, pop-up achtergronden, primaire knopvullingen - Surface Alt
#fafafa— Achtergrond van de zijbalk, optie voor een onopvallende kaart, inactieve status van het invoerveld. - Ink
#0a0a0a— Hoofdtekst, kopjes, knoplabels, pictogramcontouren. - Ink Soft
#171717— Achtergrondafbeeldingen voor knoppen met opvulling, extra tekst op lichte oppervlakken. - Mid Gray
#737373— De hoofdtekst, plaatsaanduidingstekst, hulplabels en pictogramvulling zijn in ruststand allemaal gedempt.
Typografie
van 12 tot 48px · 8 stappen
- Geist — vervanging: Inter · overzichten 400, 500, 600 · Alle interface-tekst—hoofdtekst met een lijndikte van 14px/400, koppen met een lijndikte van 24–48px/600 en knoppen met een lijndikte van 13–14px/500. De geometrische lettervormen en uniforme lijndikte van Geist zorgen voor een neutrale uitstraling van de ontwikkelaarstools; een lijndikte van 600 met een letterafstand van 48px en een letterafstand van -0,05em zorgt voor duidelijke, zelfverzekerde koppen die doordacht overkomen in plaats van bewerkt.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gespannen |
| Basisstap | 8px |
| Knopradius | 18px |
| Kaartradius | 24px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 48-80px |
| Paginabreedte | 1280px |
AI bouwt je website in de stijl Ui en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- Ventriloc — Een redactioneel observatorium van gegevens op warm papier - een enkele oranje gloed die de monochrome precisie benadrukt.
- Geniestudio — Een notitieboekje voor zacht daglicht – zo'n notitieboekje met brede marges en één dikke penstreep.
- xAI — Warme crème met zwarte pil
- Cal — Monochroom praktisch, een menselijke benadering. Een systeem dat prioriteit geeft aan duidelijkheid en functionaliteit door middel van een strikt zwart-wit kleurenpalet, maar dit verzacht met vriendelijke typografie en afgeronde vormen.
- Scale — Een hoogwaardig fotolab van museumkwaliteit in combinatie met een technisch project.
- Contractbook — contracten van crèmekleurig papier onder een ultramarijnblauwe hemel
- AutoSend — Een knusse stenen studio met een enkele paarse lamp, waar koppen in schreeflettertype en fel indigo oproepen tot actie naast elkaar bestaan in een rustige, bijna witte ruimte.
- Air — sculptuur "Middernachtelijke hemel door glas"
- SpatialChat — paarse puls op wit perkament
- Squarespace — Cinematische zwart-witgalerij
- Giga — Middernachtelijke horizon boven bevroren obsidiaan
- Supabase — Een code-editor midden in de nacht met een fosforescerend groen stipje – een enkele chromatische puls op een zee van kolenstof.