Ui
ਮੈਟ ਪੇਪਰ 'ਤੇ ਕਲੀਨਿਕਲ ਯੋਜਨਾ
shadcn/ui ਇੱਕ ਮੋਨੋਕ੍ਰੋਮ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਬਣਾਉਣ ਲਈ ਇੱਕ ਵਰਕਸ਼ਾਪ ਹੈ: ਇੱਕ ਸਾਫ਼ ਚਿੱਟਾ ਕੈਨਵਸ, ਨਰਮ ਗਰਮ ਸਲੇਟੀ ਸਤਹਾਂ, ਅਤੇ ਸਭ ਤੋਂ ਸੂਖਮ ਬਾਰਡਰਾਂ 'ਤੇ ਸਥਿਤ ਵੱਡੇ-ਰੇਡੀਅਸ ਕਾਰਡ। ਇੰਟਰਫੇਸ ਲਗਭਗ ਪੂਰੀ ਤਰ੍ਹਾਂ ਐਕ੍ਰੋਮੈਟਿਕ ਹੈ—ਕਾਲਾ ਟੈਕਸਟ, ਚਿੱਟਾ ਸਤਹਾਂ, ਸਲੇਟੀ ਸੈਕੰਡਰੀ ਟੋਨ—ਇੱਕ ਸਿੰਗਲ, ਵਿਘਨਕਾਰੀ ਲਾਲ ਰੰਗ ਦੇ ਨਾਲ ਜੋ ਗਲਤੀ ਸਥਿਤੀਆਂ ਲਈ ਰਾਖਵਾਂ ਹੈ ਅਤੇ ਹੋਰ ਕੁਝ ਨਹੀਂ। ਟਾਈਪੋਗ੍ਰਾਫੀ ਸਕ੍ਰੀਨਾਂ 'ਤੇ ਤੰਗ ਅੱਖਰ-ਉਚਾਈ ਦੇ ਨਾਲ Geist ਦੀ ਜਿਓਮੈਟ੍ਰਿਕ ਨਿਰਪੱਖਤਾ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ, ਇੱਕ ਸ਼ਾਂਤ, ਕੋਡ-ਵਰਗੀ ਭਾਵਨਾ ਪੈਦਾ ਕਰਦੀ ਹੈ ਜੋ ਇੱਕ ਖਪਤਕਾਰ ਉਤਪਾਦ ਨਾਲੋਂ ਡਿਵੈਲਪਰ ਬੁਨਿਆਦੀ ਢਾਂਚੇ ਵਾਂਗ ਮਹਿਸੂਸ ਹੁੰਦੀ ਹੈ।
ਘੱਟੋ-ਘੱਟ ਚਿੱਤਰ—ਸਿਸਟਮ ਵਿੱਚ ਲਗਭਗ ਪੂਰੀ ਤਰ੍ਹਾਂ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਹੁੰਦਾ ਹੈ। ਕੋਈ ਮੁੱਖ ਫੋਟੋਆਂ, ਚਿੱਤਰ, ਜਾਂ ਸਜਾਵਟੀ ਗ੍ਰਾਫਿਕਸ ਨਹੀਂ ਹੁੰਦੇ। ਉਤਪਾਦ ਡੈਮੋ ਨੂੰ ਇੱਕ ਗਰਿੱਡ ਵਿੱਚ ਕੰਪੋਨੈਂਟ ਮੌਕਅੱਪ (ਕਾਰਡ, ਇਨਪੁਟ ਖੇਤਰ, ਬਟਨ) ਦੇ ਰੂਪ ਵਿੱਚ ਪੇਸ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਵਿਜ਼ੂਅਲ ਸਮੱਗਰੀ ਦੋਵਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਕੰਮ ਕਰਦੇ ਹਨ। ਆਈਕਨ ਪਤਲੀਆਂ ਜਿਓਮੈਟ੍ਰਿਕ ਲਾਈਨਾਂ ਹਨ (ਸੰਭਾਵਤ ਤੌਰ 'ਤੇ ਲੂਸਾਈਡ ਤੋਂ ਉਧਾਰ ਲਈਆਂ ਗਈਆਂ) #0a0a0a ਜਾਂ #737373 ਵਿੱਚ 1.5–2px ਮੋਟੀਆਂ, ਕਾਰਜਸ਼ੀਲ ਸੰਕੇਤਾਂ ਵਜੋਂ ਥੋੜ੍ਹੇ ਜਿਹੇ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਵਿਜ਼ੂਅਲ ਭਾਸ਼ਾ ਖੁਦ UI ਭਾਗ ਹਨ—ਪੰਨਾ ਇੱਕ ਜੀਵਤ ਸ਼ੈਲੀ ਗਾਈਡ ਵਜੋਂ ਕੰਮ ਕਰਦਾ ਹੈ, ਜਿੱਥੇ ਹਰ ਦਿਖਾਈ ਦੇਣ ਵਾਲਾ ਤੱਤ ਇੱਕ ਦਿਖਾਈ ਦੇਣ ਵਾਲਾ ਡਿਜ਼ਾਈਨ ਤੱਤ ਹੁੰਦਾ ਹੈ।
ਪੈਲੇਟ
ਨਿਰਪੱਖ
- Canvas
#f5f5f5— ਪੰਨੇ ਦੀ ਪਿੱਠਭੂਮੀ, ਮਿਊਟ ਕੀਤੀ ਸਤ੍ਹਾ ਭਰਾਈ, ਵਾਧੂ ਬਟਨ। - Paper
#ffffff— ਕਾਰਡ ਸਤਹਾਂ, ਪੌਪ-ਅੱਪ ਬੈਕਗ੍ਰਾਊਂਡ, ਪ੍ਰਾਇਮਰੀ ਬਟਨ ਫਿਲ - Surface Alt
#fafafa— ਸਾਈਡਬਾਰ ਬੈਕਗ੍ਰਾਊਂਡ, ਬਿਨਾਂ ਰੁਕਾਵਟ ਵਾਲਾ ਕਾਰਡ ਵਿਕਲਪ, ਇਨਪੁੱਟ ਖੇਤਰ ਦੀ ਨਿਸ਼ਕਿਰਿਆ ਸਥਿਤੀ। - Ink
#0a0a0a— ਮੁੱਖ ਟੈਕਸਟ, ਸਿਰਲੇਖ, ਬਟਨ ਲੇਬਲ, ਆਈਕਨ ਰੂਪਰੇਖਾ। - Ink Soft
#171717— ਭਰਾਈ ਦੇ ਨਾਲ ਬਟਨ ਬੈਕਗ੍ਰਾਊਂਡ ਚਿੱਤਰ, ਹਲਕੀਆਂ ਸਤਹਾਂ 'ਤੇ ਵਾਧੂ ਟੈਕਸਟ। - Mid Gray
#737373— ਮੁੱਖ ਟੈਕਸਟ, ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ, ਸਹਾਇਕ ਲੇਬਲ, ਅਤੇ ਬਾਕੀ ਦੇ ਆਈਕਨ ਫਿਲ ਸਾਰੇ ਮਿਊਟ ਕੀਤੇ ਗਏ ਹਨ।
ਟਾਈਪੋਗ੍ਰਾਫੀ
12 ਤੋਂ 48px ਤੱਕ · 8 ਕਦਮ
- Geist — ਬਦਲ: Inter · ਰੂਪਰੇਖਾ 400, 500, 600 · ਸਾਰੇ ਇੰਟਰਫੇਸ ਟੈਕਸਟ—ਬਾਡੀ ਟੈਕਸਟ ਜਿਸ ਦਾ ਲਾਈਨ ਵਜ਼ਨ 14px/400 ਹੈ, ਹੈਡਿੰਗ 24–48px/600 ਹੈ, ਅਤੇ ਬਟਨ 13–14px/500 ਹੈ। ਗੀਸਟ ਦੇ ਜਿਓਮੈਟ੍ਰਿਕ ਲੈਟਰਫਾਰਮ ਅਤੇ ਇਕਸਾਰ ਲਾਈਨ ਵਜ਼ਨ ਡਿਵੈਲਪਰ ਟੂਲਸ ਲਈ ਇੱਕ ਨਿਰਪੱਖ ਅਹਿਸਾਸ ਪੈਦਾ ਕਰਦੇ ਹਨ; 48px ਲੈਟਰ ਸਪੇਸਿੰਗ ਅਤੇ -0.05em ਲੈਟਰ ਸਪੇਸਿੰਗ ਵਾਲਾ 600 ਲਾਈਨ ਵਜ਼ਨ ਸਪਸ਼ਟ, ਭਰੋਸੇਮੰਦ ਹੈਡਿੰਗਾਂ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਸੰਪਾਦਿਤ ਹੋਣ ਦੀ ਬਜਾਏ ਸੋਚ-ਸਮਝ ਕੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ।
ਅੰਤਰਾਲ ਅਤੇ ਰੂਪ
| ਉਦੇਸ਼ | ਭਾਵ |
|---|---|
| ਘਣਤਾ | ਸੰਘਣਾ |
| ਮੁੱਢਲਾ ਕਦਮ | 8px |
| ਬਟਨ ਦਾ ਘੇਰਾ | 18px |
| ਕਾਰਡ ਦਾ ਘੇਰਾ | 24px |
| ਪਰਛਾਵੇਂ | ਪਰਛਾਵਿਆਂ ਦੀ ਬਜਾਏ ਕੋਈ - ਬਾਰਡਰ ਨਹੀਂ |
| ਭਾਗਾਂ ਵਿਚਕਾਰ | 48-80px |
| ਪੰਨੇ ਦੀ ਚੌੜਾਈ | 1280px |
AI ਤੁਹਾਡੀ ਵੈੱਬਸਾਈਟ ਨੂੰ Ui ਸ਼ੈਲੀ ਵਿੱਚ ਬਣਾਏਗਾ ਅਤੇ ਇਸਨੂੰ ਭਰ ਦੇਵੇਗਾ।
- ਲਿੰਕ ਰਾਹੀਂ ਉਤਪਾਦਾਂ ਅਤੇ ਪੋਸਟਾਂ ਨਾਲ ਭਰੋ - Instagram, TikTok, Facebook ।
- ਆਪਣੀ ਪੁਰਾਣੀ ਸਾਈਟ ਤੋਂ ਸਮੱਗਰੀ ਟ੍ਰਾਂਸਫਰ ਕਰੋ—ਬੱਸ ਪਤਾ ਦੱਸੋ।
- ਸਭ ਤੋਂ ਵਧੀਆ ਇੰਜਣ 'ਤੇ ਆਧੁਨਿਕ ਡਿਜ਼ਾਈਨ: ਸਰਵਰ ਰੈਂਡਰਿੰਗ ਅਤੇ SEO ਔਪਟੀਮਾਈਜੇਸ਼ਨ ਦੇ ਨਾਲ React ( Next.js)।
- ਖੋਜ ਨਤੀਜਿਆਂ ਅਤੇ ਨਿਊਰਲ ਨੈੱਟਵਰਕ ਸਿਫ਼ਾਰਸ਼ਾਂ ਲਈ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਵੈਚਾਲਿਤ SEO ਅਨੁਕੂਲਤਾ।
ਮਿਲਦੇ-ਜੁਲਦੇ ਸਟਾਈਲ
- Ventriloc — ਗਰਮ ਕਾਗਜ਼ 'ਤੇ ਡੇਟਾ ਦੀ ਇੱਕ ਸੰਪਾਦਕੀ ਆਬਜ਼ਰਵੇਟਰੀ - ਇੱਕ ਸਿੰਗਲ ਸੰਤਰੀ ਅੰਗਾਰਾ ਜੋ ਮੋਨੋਕ੍ਰੋਮ ਸ਼ੁੱਧਤਾ ਨੂੰ ਉਜਾਗਰ ਕਰਦਾ ਹੈ
- Geniestudio — ਇੱਕ ਨਰਮ ਦਿਨ ਦੀ ਰੌਸ਼ਨੀ ਵਾਲੀ ਨੋਟਬੁੱਕ—ਚੌੜੇ ਹਾਸ਼ੀਏ ਅਤੇ ਇੱਕ ਮੋਟੇ ਪੈੱਨ ਸਟ੍ਰੋਕ ਵਾਲੀ ਕਿਸਮ
- xAI — ਕਾਲੀ ਗੋਲੀ ਦੇ ਨਾਲ ਗਰਮ ਕਰੀਮ ਲੈਬ
- Cal — ਮੋਨੋਕ੍ਰੋਮ ਵਿਹਾਰਕਤਾ, ਇੱਕ ਮਨੁੱਖੀ ਦ੍ਰਿਸ਼ਟੀਕੋਣ। ਇੱਕ ਸਿਸਟਮ ਜੋ ਇੱਕ ਸਖ਼ਤ ਕਾਲੇ-ਚਿੱਟੇ ਪੈਲੇਟ ਰਾਹੀਂ ਸਪਸ਼ਟਤਾ ਅਤੇ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦਾ ਹੈ, ਪਰ ਇਸਨੂੰ ਦੋਸਤਾਨਾ ਟਾਈਪੋਗ੍ਰਾਫੀ ਅਤੇ ਗੋਲ ਆਕਾਰਾਂ ਨਾਲ ਨਰਮ ਕਰਦਾ ਹੈ।
- Scale — ਇੱਕ ਉੱਚ-ਗੁਣਵੱਤਾ ਵਾਲੀ ਅਜਾਇਬ-ਗੁਣਵੱਤਾ ਵਾਲੀ ਫੋਟੋ ਲੈਬ, ਇੱਕ ਤਕਨੀਕੀ ਪ੍ਰੋਜੈਕਟ ਦੇ ਨਾਲ
- Contractbook — ਅਲਟਰਾਮਰੀਨ ਅਸਮਾਨ ਹੇਠ ਕਰੀਮ ਪੇਪਰ ਦੇ ਠੇਕੇ
- AutoSend — ਇੱਕ ਆਰਾਮਦਾਇਕ ਪੱਥਰ ਦਾ ਸਟੂਡੀਓ ਜਿਸ ਵਿੱਚ ਇੱਕ ਸਿੰਗਲ ਜਾਮਨੀ ਰੋਸ਼ਨੀ ਹੈ—ਜਿੱਥੇ ਸੇਰੀਫ ਸੁਰਖੀਆਂ ਅਤੇ ਚਮਕਦਾਰ ਨੀਲ ਇੱਕ ਸ਼ਾਂਤ, ਲਗਭਗ ਚਿੱਟੀ ਜਗ੍ਹਾ ਵਿੱਚ ਕਾਰਵਾਈ ਲਈ ਸੱਦਾ ਇਕੱਠੇ ਰਹਿੰਦੇ ਹਨ।
- Air — ਮੂਰਤੀ "ਸ਼ੀਸ਼ੇ ਰਾਹੀਂ ਅੱਧੀ ਰਾਤ ਦਾ ਅਸਮਾਨ"
- SpatialChat — ਚਿੱਟੇ ਚਮਚੇ 'ਤੇ ਜਾਮਨੀ ਨਬਜ਼
- Squarespace — ਸਿਨੇਮੈਟਿਕ ਮੋਨੋਕ੍ਰੋਮ ਗੈਲਰੀ
- Giga — ਠੰਡੇ ਓਬਸੀਡੀਅਨ ਉੱਤੇ ਅੱਧੀ ਰਾਤ ਦਾ ਰੁਖ
- Supabase — ਅੱਧੀ ਰਾਤ ਨੂੰ ਇੱਕ ਕੋਡ ਸੰਪਾਦਕ ਜਿਸ ਵਿੱਚ ਇੱਕ ਫਾਸਫੋਰਸੈਂਟ ਹਰੇ ਬਿੰਦੀ ਹੈ—ਕੋਇਲੇ ਦੀ ਧੂੜ ਦੇ ਸਮੁੰਦਰ ਉੱਤੇ ਇੱਕ ਸਿੰਗਲ ਰੰਗੀਨ ਨਬਜ਼