Dub
లింక్ యొక్క మాట్టే రైస్ పేపర్ కంట్రోల్ ప్యానెల్
డబ్ యొక్క విజువల్ సిస్టమ్ ఒక నిగ్రహమైన, దాదాపు ఎడిటోరియల్ SaaS సౌందర్యాన్ని కలిగి ఉంది: బయటకు పొడుచుకువచ్చే అంశాలకు బదులుగా సన్నని అంచులతో కలిపి ఉంచబడిన దాదాపు తెల్లటి కాన్వాస్, దట్టమైన మోనోక్రోమ్ టైపోగ్రఫీ నిర్మాణ మద్దతును అందిస్తుంది మరియు ఒకే ఒక్క ప్రకాశవంతమైన నీలం రంగు (#2563eb) ఒక ప్రత్యేకతను చాటుతుంది. మొదటి చూపులో ఉపరితలాలు చదునుగా మరియు ఫ్రేమ్ లేకుండా కనిపిస్తాయి, కానీ ప్రతి కంటైనర్కు 1px #e5e5e5 మార్జిన్ ఉంటుంది, ఇది ముద్రించిన డాక్యుమెంట్ యొక్క అనుభూతిని కలిగిస్తుంది. తటస్థ పాలెట్పై తేలియాడే కొన్ని రంగుల "పిల్" యాక్సెంట్ల (నారింజ, ఆకుపచ్చ, ఊదా) ద్వారా మరియు ఆర్భాటంగా లేకుండా ఆత్మవిశ్వాసంతో, ఆధునికంగా అనిపించే హెడర్ల ద్వారా దీనికి వ్యక్తిత్వం జోడించబడింది. కాంపోనెంట్లు కాంపాక్ట్గా మరియు దట్టంగా ఉంటాయి: 8px గట్టర్లు, 12px కార్డ్ రేడియస్, 9999px వద్ద పిల్-ఆకారపు లేబుల్లు మరియు భారీ, నిండిన బటన్లకు బదులుగా కనిపించని కంట్రోల్స్ ఉంటాయి.
ఈ పేజీ సుమారుగా 1200px గరిష్ట వెడల్పుతో, సెంటర్డ్ లేఅవుట్పై నిర్మించబడింది. ప్రధాన ఎలిమెంట్ ఒక సెంటర్డ్ టెక్స్ట్ బ్లాక్, దాని పైన ఒక పెద్ద ప్రొడక్ట్ లేఅవుట్కు అడ్డంగా మూడు ఫ్లోటింగ్ ఎలిమెంట్స్ (అఫిలియేట్ ప్రోగ్రామ్స్, కన్వర్షన్ అనలిటిక్స్, షార్ట్ లింక్స్) అమర్చబడి ఉంటాయి. టోనల్ సెపరేషన్ కోసం, సెక్షన్లు స్థిరమైన 64px గట్టర్లతో నిలువుగా అమర్చబడి, తెలుపు కాన్వాస్ మరియు #f5f5f5 పేపర్ హేజ్ మధ్య మారుతూ ఉంటాయి. కింది సెక్షన్ Z-ఆకారపు లేఅవుట్ను ఉపయోగిస్తుంది: ఎడిటోరియల్ టెక్స్ట్ మధ్య మూడవ భాగంలో సెంటర్డ్గా ఉంటుంది, మరియు ఫ్లోటింగ్ UI కార్డ్లు ఎడమ మరియు కుడి మార్జిన్లకు యాంకర్ చేయబడి, ఒక అసౌష్టవ, మ్యాగజైన్ లాంటి రిథమ్ను సృష్టిస్తాయి. లోగో క్లౌడ్ అనేది పేజీ మధ్యలో సెంటర్డ్గా ఉండే ఒక సాధారణ 5x2 గ్రిడ్. నావిగేషన్ అనేది ఒక మినిమలిస్ట్ టాప్ బార్—ఎడమవైపు లోగో, మధ్యలో నావిగేషన్, కుడివైపు రెండు బటన్ల సమూహం (ఒక ఘోస్ట్ "లాగిన్" బటన్ + ఒక నిండిన "రిజిస్టర్" బటన్)—ఇందులో ఫిక్స్డ్ లేదా మెగా-మెనూ ఉండదు. ప్రధాన విండో యొక్క డాష్బోర్డ్ లేఅవుట్ ఒక క్లాసిక్ రెండు-కాలమ్ యాప్ లేఅవుట్ను ప్రదర్శిస్తుంది: ఒక స్థిరమైన సైడ్బార్ (240px మాదిరిగా) + సందర్శకులు స్క్రోల్ చేయడం ప్రారంభించే ముందు ఉత్పత్తి సమాచారం యొక్క సాంద్రతను నిర్వచించే ఒక కంటెంట్ ఏరియా.
విజువల్స్ జీవనశైలిపై కాకుండా, ఉత్పత్తిపై దృష్టి పెడతాయి. ప్రధాన స్క్రీన్ మధ్యలో ఒక పెద్ద డాష్బోర్డ్ స్క్రీన్షాట్ ఉంటుంది. ఇది ఒక నిజ-ప్రపంచ ఉత్పత్తి నమూనాని సూచిస్తుంది. ఇందులో సైడ్బార్ నావిగేషన్, డేటా టేబుల్, మరియు ఫ్లోటింగ్ UI ఎలిమెంట్స్ ఒక తెల్లటి కాన్వాస్పై ఫ్లాట్ ప్యానెల్గా అమర్చబడి ఉంటాయి. క్లయింట్ల సోషల్ మీడియా పనితీరును గుర్తించడానికి, వారి లోగోలను (బీహైవ్, సూపర్పవర్, చాట్బేస్, మొదలైనవి) రంగు తగ్గించిన గ్రేస్కేల్ గ్రిడ్లో ప్రదర్శిస్తారు. పేజీలోని ఏకైక నీలి రంగు ప్రధానంగా కనిపించేలా చేయడానికి, వాటికి రంగు లేకుండా చేశారు. ఫ్లోటింగ్ పార్టనర్ కార్డ్లు (ఆదాయం/చెల్లింపు డేటాతో కూడిన చిన్న ప్రొఫైల్లు మరియు టైల్స్) దిగువన ఉన్న ఎడిటోరియల్ టెక్స్ట్ బ్లాక్ల చుట్టూ కదులుతాయి. ఇవి టెక్స్ట్పై నీడలు లేకుండానే లోతు భావనను సృష్టిస్తాయి. చుక్కల గ్రిడ్ నేపథ్య నమూనా ఒక ప్రత్యేకమైన లక్షణం: చాలా తక్కువ అపారదర్శకత కలిగిన చిన్న చుక్కల సన్నని వరుస ఒక డిజైన్ను లేదా డ్రాయింగ్ ఉపరితలాన్ని తలపిస్తుంది. ఇది ఈ సైట్ను "ఆధునిక లింక్ అట్రిబ్యూషన్ ప్లాట్ఫారమ్"గా నొక్కి చెబుతుంది. అవుట్లైన్లు మరియు ఫిల్స్తో ఐకానోగ్రఫీ చాలా తక్కువగా ఉంటుంది, మరియు ఫీచర్ ట్యాగ్ల కోసం యాక్సెంట్ పాలెట్ను (టాన్జెరిన్ ఆరెంజ్, లావెండర్ పర్పుల్, మింట్ గ్రీన్) ఉపయోగిస్తుంది. ఫోటోగ్రాఫ్లు, ఇలస్ట్రేషన్లు లేదా 3D మోడల్లు ఏవీ ఉపయోగించబడలేదు—ఉత్పత్తి యొక్క యూజర్ ఇంటర్ఫేస్ స్వయంగా ఒక దృశ్య భాష.
పాలెట్
బ్రాండ్
- Electric Blue
#2563eb— ప్రాథమిక బ్రాండ్ రంగు—అంటే లోగో, లింకులు, కీలక పనితీరు సూచికలు, క్రియాశీల స్థితులు మరియు ఐకాన్ యాక్సెంట్ల కోసం—ఉపయోగించబడుతుంది. తెలుపు నేపథ్యంపై ఉన్న గాఢమైన నీలం రంగు సిస్టమ్కు ఏకైక దృశ్య ఆకర్షణను సృష్టిస్తుంది. - Deep Sapphire
#1e40af— యాక్షన్ బటన్ యొక్క ప్రధాన నేపథ్యం, అంటే చర్యను సూచించే ఏకైక రంగు అయిన 'కాల్ టు యాక్షన్' యొక్క ముదురు రంగు, దృష్టిని ఆకర్షించడానికి చాలా తక్కువగా ఉపయోగించబడింది.
తటస్థ
- Canvas White
#ffffff— పేజీ నేపథ్యం, కార్డ్ ఉపరితలం, పాప్-అప్ ప్యానెల్లు ప్రతి స్క్రీన్కు సంపూర్ణ పునాది. - Paper Mist
#f5f5f5— అంతర్గత కార్డ్లు, అదనపు ప్యానెల్లు మరియు ఫిల్స్ కోసం సూక్ష్మమైన హోవర్ రంగు మార్పులు. - Ash
#e5e5e5— కార్డులు, ఇన్పుట్ కనెక్టర్లు మరియు డివైడర్లపై ఉండే సన్నని అంచులు, వ్యవస్థను కలిపి ఉంచే నిర్మాణ రేఖగా పనిచేస్తాయి. - Smoke
#d4d4d4— ఎంచుకున్న కంటైనర్లకు మరింత స్పష్టమైన అంచులు మరియు అదనపు బటన్ అవుట్లైన్లు. - Pebble
#c8c8c8— మధ్యస్థ కాంట్రాస్ట్తో కూడిన బోర్డర్లు, కంట్రోల్ అవుట్లైన్లు మరియు స్ట్రక్చరల్ డివైడర్ల కోసం ఈ రంగును ఉపయోగించాలి. కాల్స్ టు యాక్షన్ కోసం ఈ రంగును ప్రాథమిక రంగుగా వాడకూడదు. - Midnight Ink
#0a0a0a— గరిష్ట కాంట్రాస్ట్ కోసం బటన్ల ప్రధాన టెక్స్ట్, హైలైట్ చేయబడిన బటన్లు మరియు నావిగేషన్ టెక్స్ట్ దాదాపు నల్లగా ఉంటాయి.
టైపోగ్రఫీ
11 నుండి 48 పిక్సెల్స్ వరకు · 9 దశలు
- Satoshi — భర్తీ: Inter (weight 500 · రూపురేఖలు 500 · డిస్ప్లే హెడ్డింగ్లు – హెడ్డింగ్ మరియు సెక్షన్ టైటిల్స్ కోసం 36–48px లైన్లలో మాత్రమే ఉపయోగించబడతాయి. ఫాంట్ వెయిట్ – 500 (మీడియం, బోల్డ్ కాదు): హెడ్డింగ్లు ఆత్మవిశ్వాసంతో, ఆధునికంగా కనిపిస్తాయి, కానీ ఎప్పుడూ మితిమీరినట్లు ఉండవు. సతోషి యొక్క జ్యామితీయ నిష్పత్తులు ఈ టైప్ఫేస్కు కొద్దిగా ఎడిటోరియల్, ఆధునిక అనుభూతిని ఇస్తాయి, దీనిని ఇంటర్ బాడీ కాపీ అనుకరించలేదు.
- Inter — భర్తీ: Inter (native) · రూపురేఖలు 400, 500, 600 · బాడీ కాపీ, UI లేబుల్స్, నావిగేషన్, ఉపశీర్షికలు మరియు చిన్న శీర్షికలు. 11px మైక్రో-లేబుల్స్ నుండి 30px సెకండరీ హెడ్డింగ్స్ వరకు అన్నింటినీ నిర్వహించే ప్రధాన సాధనం ఇంటర్. బాడీ కాపీకి డిఫాల్ట్గా 400 వెయిట్, హైలైట్ చేసిన ఎలిమెంట్స్ మరియు బటన్ లేబుల్స్కు 500, మరియు ముఖ్యమైన UI లేబుల్స్ కోసం 600 కేటాయించబడింది. 1.5 లైన్ హైట్తో కూడిన 16px అనేది అత్యంత తరచుగా కనిపించే సింగిల్-స్టెప్ సైజ్ (1220 సార్లు), ఇది 16px ప్రామాణిక బాడీ కాపీ సైజ్ అని నిర్ధారిస్తుంది.
- Geist Mono — భర్తీ: JetBrains Mono or IBM Plex Mono · రూపురేఖలు 400, 500 · కోడ్ బ్లాక్లలో 12–14px వద్ద మరియు పెద్ద కోడ్ డిస్ప్లే ఎలిమెంట్లలో 24px వద్ద కోడ్ స్నిప్పెట్లు, సాంకేతిక మెటాడేటా మరియు ఎంబెడెడ్ మోనోస్పేస్డ్ టోకెన్లు ఉపయోగించబడతాయి. ఇది డబ్ యొక్క ఉత్పత్తి స్థానానికి అనుగుణంగా, డెవలపర్ టూల్ యొక్క విశ్వసనీయతను నిర్ధారిస్తుంది.
విరామాలు మరియు రూపం
| ఉద్దేశ్యం | అర్థం |
|---|---|
| సాంద్రత | సగటు |
| ప్రాథమిక దశ | 8px |
| బటన్ వ్యాసార్థం | 8px |
| కార్డ్ వ్యాసార్థం | 12px |
| నీడలు | నీడలకు బదులుగా అంచులు లేవు |
| విభాగాల మధ్య | 64px |
| పేజీ వెడల్పు | 1200px |
AI మీ వెబ్సైట్ను Dub శైలిలో నిర్మించి, దానిని నింపుతుంది
- ఈ లింక్ ద్వారా ఉత్పత్తులు మరియు పోస్ట్లతో నింపండి - Instagram, TikTok, Facebook.
- మీ పాత సైట్ నుండి కంటెంట్ను బదిలీ చేయండి—కేవలం చిరునామాను పేర్కొనండి.
- అత్యుత్తమ ఇంజిన్ అయిన React ( Next.js) పై ఆధునిక డిజైన్, సర్వర్ రెండరింగ్ మరియు ఎస్ఈఓ ఆప్టిమైజేషన్తో వస్తుంది.
- శోధన ఫలితాలు మరియు న్యూరల్ నెట్వర్క్ సిఫార్సుల కోసం పూర్తిగా స్వయంచాలక SEO ఆప్టిమైజేషన్.
సారూప్య శైలులు
- ElevenLabs — వెచ్చని క్రీమ్ రంగు ఛాయలలో, సూక్ష్మమైన శీర్షికలతో కూడిన ఒక ఫోటో వ్యాసం. బాహౌస్-శైలి నోట్బుక్—గుడ్డు పెంకు రంగు కాగితం, నల్ల సిరా, మరియు ఉత్పత్తి ప్రదర్శన కోసం ఒకే ఒక్క ఊదా మరియు నారింజ రంగు అలంకరణ.
- Awesomic — కాన్ఫెట్టిని తలపించే నారింజ రంగు విరామ చిహ్నాలతో కూడిన ఎడిటోరియల్ జింక్ మెష్
- Monad — వెచ్చని పార్చ్మెంట్పై సంపాదకీయ సాంకేతిక పత్రిక
- Seline Analytics — వెచ్చని కాగితంపై నిశ్శబ్ద విశ్లేషణాత్మక పట్టిక
- Notion — మధ్యాహ్నపు ఎండలో వెచ్చని కాగితపు నోట్బుక్
- Anthropic — వెచ్చని వెల్లం కాగితంపై ముద్రించిన ఒక శాస్త్రీయ రంగ పత్రిక—ప్రశాంతమైన ఐవరీ రంగు ఉపరితలాలు, సెరిఫ్డ్ సంపాదకీయ శీర్షికలు, మరియు చర్య అవసరమైనప్పుడు మాత్రమే కనిపించే ఒకే ఒక్క మట్టి రంగు అలంకరణ.
- Calendly — చల్లని పాలరాయిపై ముదురు నీలం సిరా
- Augen Pro — యాపిల్ యొక్క తెల్లటి ప్రెజెంటేషన్లో, ఏకవర్ణ ప్రదేశంలో స్పష్టమైన, తేలికైన, ఎలక్ట్రిక్ బ్లూ రంగు ఏకైక యాక్సెంట్గా ఉంటుంది.
- Antimetal — క్రీమ్ రంగు కాగితంపై ఒక సంపాదకీయ కథనం—ఒక శాస్త్రీయ పత్రికలో ప్రశాంతమైన ఉదయం, ఇక్కడ సంయమనం విశ్వాసాన్ని తెలియజేస్తుంది మరియు సెరిఫ్లు ప్రధాన పాత్రను పోషిస్తాయి.
- Perk — వెచ్చని పార్చ్మెంట్ కాగితంపై ఎలక్ట్రిక్ లైమ్
- Ditto — సూర్యకాంతి ప్రసరిస్తున్న ఒక కార్యశాలలో అడవి పువ్వుల నమూనాలు తయారవుతున్నాయి. వెచ్చని క్రీమ్ రంగు ఉపరితలాలు, ప్రకాశవంతమైన పసుపు ఆధార రంగు, ముదురు నేవీ బ్లూ సిరా, ఆ కళాఖండం వెనుక వికసిస్తున్న సహజ రంగుల రూపాలు.
- Officevibe — వెచ్చని క్రీమ్ రంగు కాగితంపై ఒక సంపాదకీయ పత్రిక. హెచ్ఆర్ నిర్వహణపై ఒక ఆలోచనాత్మక వ్యాసాన్ని ఊహించుకోండి, అది ఒక ఉత్పత్తి రూపంలో ప్రదర్శించబడింది—ఆధునిక నీలిరంగు ఇంటర్ఫేస్ ద్వారా మెల్లగా వినిపించే కర్సివ్ సెరిఫ్ ఫాంట్.