Ui
మాట్ పేపర్పై క్లినికల్ ప్లాన్
shadcn/ui అనేది ఒక మోనోక్రోమ్ డిజైన్ సిస్టమ్ను రూపొందించడానికి ఉద్దేశించిన ఒక వర్క్షాప్: ఇందులో శుభ్రమైన తెల్లటి కాన్వాస్, మృదువైన వెచ్చని బూడిద రంగు ఉపరితలాలు, మరియు అత్యంత సూక్ష్మమైన అంచులపై అమర్చిన పెద్ద-వ్యాసార్థం గల కార్డ్లు ఉంటాయి. ఈ ఇంటర్ఫేస్ దాదాపు పూర్తిగా వర్ణరహితంగా ఉంటుంది—నలుపు రంగు టెక్స్ట్, తెల్లటి ఉపరితలాలు, బూడిద రంగు ద్వితీయ ఛాయలు—కేవలం ఎర్రర్ స్టేట్ల కోసం మాత్రమే ఒకే ఒక్క, అంతరాయం కలిగించే ఎరుపు రంగును కేటాయించారు. దీని టైపోగ్రఫీ, స్క్రీన్లపై తక్కువ అక్షరాల ఎత్తుతో గీస్ట్ యొక్క జ్యామితీయ తటస్థతపై ఆధారపడి ఉంటుంది. ఇది ఒక వినియోగదారు ఉత్పత్తి కంటే డెవలపర్ ఇన్ఫ్రాస్ట్రక్చర్లా అనిపించే ప్రశాంతమైన, కోడ్ లాంటి అనుభూతిని సృష్టిస్తుంది.
అతి తక్కువ చిత్రాలు—ఈ సిస్టమ్ దాదాపు పూర్తిగా యూజర్ ఇంటర్ఫేస్తోనే కూడి ఉంటుంది. ముఖ్యమైన ఫోటోలు, దృష్టాంతాలు లేదా అలంకార గ్రాఫిక్స్ ఏవీ ఉండవు. ఉత్పత్తి డెమోలు ఒక గ్రిడ్లో కాంపోనెంట్ మాకప్లుగా (కార్డులు, ఇన్పుట్ ఫీల్డ్లు, బటన్లు) ప్రదర్శించబడతాయి, ఇవి డాక్యుమెంటేషన్ మరియు దృశ్య కంటెంట్ రెండింటిగా పనిచేస్తాయి. ఐకాన్లు #0a0a0a లేదా #737373 రంగులలో 1.5–2px మందంతో ఉండే సన్నని జ్యామితీయ గీతలుగా (బహుశా లూసైడ్ నుండి తీసుకున్నవి) ఉంటాయి, వీటిని క్రియాత్మక సూచనలుగా అరుదుగా ఉపయోగిస్తారు. దృశ్య భాష అంటే UI కాంపోనెంట్లే—ఈ పేజీ ఒక సజీవ స్టైల్ గైడ్గా పనిచేస్తుంది, ఇక్కడ కనిపించే ప్రతి అంశం ఒక కనిపించే డిజైన్ అంశమే.
పాలెట్
తటస్థ
- Canvas
#f5f5f5— పేజీ నేపథ్యం, మసక ఉపరితల పూరకం, అదనపు బటన్లు. - Paper
#ffffff— కార్డ్ ఉపరితలాలు, పాప్-అప్ నేపథ్యాలు, ప్రాథమిక బటన్ ఫిల్స్ - Surface Alt
#fafafa— సైడ్బార్ నేపథ్యం, అంతరాయం కలిగించని కార్డ్ ఎంపిక, ఇన్పుట్ ఫీల్డ్ యొక్క నిష్క్రియ స్థితి. - Ink
#0a0a0a— ప్రధాన పాఠ్యం, శీర్షికలు, బటన్ లేబుల్లు, ఐకాన్ అవుట్లైన్లు. - Ink Soft
#171717— ఫిల్తో కూడిన బటన్ నేపథ్య చిత్రాలు, లేత రంగు ఉపరితలాలపై అదనపు టెక్స్ట్. - Mid Gray
#737373— ప్రధాన టెక్స్ట్, ప్లేస్హోల్డర్ టెక్స్ట్, సహాయక లేబుల్లు మరియు నిశ్చల స్థితిలో ఉన్న ఐకాన్ ఫిల్ అన్నీ మ్యూట్ చేయబడతాయి.
టైపోగ్రఫీ
12 నుండి 48 పిక్సెల్స్ వరకు · 8 దశలు
- Geist — భర్తీ: Inter · రూపురేఖలు 400, 500, 600 · ఇంటర్ఫేస్లోని టెక్స్ట్ అంతా—14px/400 లైన్ వెయిట్తో బాడీ టెక్స్ట్, 24–48px/600 లైన్ వెయిట్తో హెడ్డింగ్లు, మరియు 13–14px/500 లైన్ వెయిట్తో బటన్లు. గీస్ట్ యొక్క జ్యామితీయ అక్షర రూపాలు మరియు ఏకరీతి లైన్ వెయిట్ డెవలపర్ టూల్స్కు ఒక తటస్థ అనుభూతిని సృష్టిస్తాయి; 600 లైన్ వెయిట్, 48px లెటర్ స్పేసింగ్ మరియు -0.05em లెటర్ స్పేసింగ్ అనేవి, ఎడిట్ చేసినట్లు కాకుండా ఆలోచనాత్మకంగా కనిపించే స్పష్టమైన, నమ్మకమైన హెడ్డింగ్లను నిర్ధారిస్తాయి.
విరామాలు మరియు రూపం
| ఉద్దేశ్యం | అర్థం |
|---|---|
| సాంద్రత | దట్టమైన |
| ప్రాథమిక దశ | 8px |
| బటన్ వ్యాసార్థం | 18px |
| కార్డ్ వ్యాసార్థం | 24px |
| నీడలు | నీడలకు బదులుగా అంచులు లేవు |
| విభాగాల మధ్య | 48-80px |
| పేజీ వెడల్పు | 1280px |
AI మీ వెబ్సైట్ను Ui శైలిలో నిర్మించి, దానిని నింపుతుంది
- ఈ లింక్ ద్వారా ఉత్పత్తులు మరియు పోస్ట్లతో నింపండి - Instagram, TikTok, Facebook.
- మీ పాత సైట్ నుండి కంటెంట్ను బదిలీ చేయండి—కేవలం చిరునామాను పేర్కొనండి.
- అత్యుత్తమ ఇంజిన్ అయిన React ( Next.js) పై ఆధునిక డిజైన్, సర్వర్ రెండరింగ్ మరియు ఎస్ఈఓ ఆప్టిమైజేషన్తో వస్తుంది.
- శోధన ఫలితాలు మరియు న్యూరల్ నెట్వర్క్ సిఫార్సుల కోసం పూర్తిగా స్వయంచాలక SEO ఆప్టిమైజేషన్.
సారూప్య శైలులు
- Ventriloc — వెచ్చని కాగితంపై డేటా యొక్క సంపాదకీయ పరిశీలనా కేంద్రం - ఏకవర్ణ ఖచ్చితత్వాన్ని హైలైట్ చేసే ఒకే ఒక్క నారింజ నిప్పుకణిక
- Geniestudio — మృదువైన పగటి వెలుగులో ఉండే నోట్బుక్—అంటే వెడల్పాటి అంచులు, ఒకే మందపాటి కలం గీతతో ఉండే రకం.
- xAI — బ్లాక్ పిల్తో వార్మ్ క్రీమ్ ల్యాబ్
- Cal — ఏకవర్ణ ఆచరణాత్మకత, మానవతా దృక్పథం. కఠినమైన నలుపు-తెలుపు రంగుల ద్వారా స్పష్టతకు, కార్యాచరణకు ప్రాధాన్యతనిస్తూ, స్నేహపూర్వకమైన టైపోగ్రఫీ మరియు గుండ్రని ఆకృతులతో దానిని మృదువుగా మార్చే ఒక వ్యవస్థ.
- Scale — ఒక సాంకేతిక ప్రాజెక్ట్తో కలిపి ఉన్నత-నాణ్యత గల మ్యూజియం-స్థాయి ఫోటో ల్యాబ్
- Contractbook — నీలి ఆకాశం కింద క్రీమ్ కాగితపు ఒప్పందాలు
- AutoSend — ఒకే ఒక్క ఊదా రంగు లైటు ఉన్న హాయినిచ్చే రాతి స్టూడియో—ఇక్కడ సెరిఫ్ హెడ్లైన్లు, ప్రకాశవంతమైన ఇండిగో రంగు కార్యాచరణ పిలుపులు ఒకే ప్రశాంతమైన, దాదాపు తెల్లని ప్రదేశంలో కలిసి ఉంటాయి.
- Air — "గాజు ద్వారా అర్ధరాత్రి ఆకాశం" అనే శిల్పం
- SpatialChat — తెల్లటి పార్చ్మెంట్పై ఊదా రంగు పప్పుదినుసు
- Squarespace — సినిమాటిక్ మోనోక్రోమ్ గ్యాలరీ
- Giga — మంచుతో కప్పబడిన అబ్సిడియన్పై అర్ధరాత్రి హోరిజోన్
- Supabase — అర్ధరాత్రి వేళ, మెరిసే ఆకుపచ్చ చుక్కతో కూడిన ఒక కోడ్ ఎడిటర్—బొగ్గు ధూళి సముద్రంపై ఒకే ఒక్క వర్ణ స్పందన