Column
చల్లని తెల్లవారుజామున ముదురు నీలం రంగు లెడ్జర్
ఈ కాలమ్ దాదాపు తెల్లటి నేపథ్యంపై ముదురు, సంస్థాగతమైన నేవీ బ్లూ రంగును ఉపయోగిస్తుంది: ఈ పేజీ మొదట ఒక పటిష్టమైన బ్యాంకింగ్ ఉత్పత్తి ఉపరితలంలా, ఆ తర్వాతే ఒక డెవలపర్ ప్లేగ్రౌండ్లా అనిపిస్తుంది. బ్రాండ్ రంగు ఒక్కటే కాదు, కానీ సమన్వయంతో కూడిన రెండు రంగులు ఉన్నాయి—గట్టి నిర్మాణం కోసం నేవీ బ్లూ #111a4a, డేటా మరియు కోడ్ కోసం మింట్ గ్రీన్ #44b48b—వీటితో పాటు బ్రెక్స్ కార్డ్ వంటి అధిక తీవ్రత గల యాక్సెంట్ ఉపరితలాల కోసం ఒక వెచ్చని ఆరెంజ్ (#ec652b) రంగును కేటాయించారు. టైపోగ్రఫీలో SuisseIntl అనే జ్యామితీయ శాన్ సెరిఫ్ ఫాంట్ ఆధిపత్యం చెలాయిస్తుంది, దీనిని 300 (లింక్స్) నుండి 600 (డిస్ప్లే) వరకు మొత్తం వెయిట్ రేంజ్లో ఉపయోగించారు. ఇది చాలా ఫిన్టెక్ కంపెనీలలో కొరవడిన ఒక శుద్ధమైన, ఎడిటోరియల్ శైలిని ఈ సిస్టమ్కు అందిస్తుంది. కార్డ్లు సూక్ష్మమైన, పొరల నీడలతో పెద్ద తెల్లటి ఉపరితలాలపై తేలుతున్నట్లుగా ఉంటాయి; చాలా ఇంటర్ఫేస్ అంశాలు ఫ్లాట్గా ఉంటాయి, కార్డ్ ఒక భౌతిక వస్తువులా అనిపించాల్సిన చోట (ట్రాన్సాక్షన్ విడ్జెట్లు, ప్రొడక్ట్ మాకప్లు) మాత్రమే లోతు కనిపిస్తుంది. కోడ్ మరియు ఆర్థిక డేటా మోనోక్రోమ్లో, సీఫోమ్ రంగులో ప్రదర్శించబడతాయి—ఇది ఇంజనీర్ల కోసం ఇంజనీర్లచే నిర్మించబడిన బ్యాంక్ అనేదానికి ఒక దృశ్య సంకేతం.
పేజీ నిర్మాణం పూర్తి వెడల్పుతో, మధ్యలో విశాలమైన సైడ్ మార్జిన్లతో (డెస్క్టాప్లో 64–15 సెం.మీ.) ఉంటుంది. ప్రధాన స్క్రీన్ ఒక స్ప్లిట్ లేఅవుట్: హెడ్లైన్ మరియు కాల్స్ టు యాక్షన్ 25 సెం.మీ. వద్ద ఎడమవైపున అమర్చబడి ఉంటాయి, అయితే ఫ్లోటింగ్ ట్రాన్సాక్షన్ విడ్జెట్ హాఫ్టోన్ మ్యాప్ బ్యాక్గ్రౌండ్పై 55 సెం.మీ. వద్ద కుడివైపున ఉంచబడింది. ప్రధాన స్క్రీన్ కింద, విభాగాలు 6 సెం.మీ. నిలువు గట్టర్లతో తెలుపు (4 సెం.మీ.) మరియు లేత కాన్వాస్ (5 సెం.మీ.) మధ్య ఒకదాని తర్వాత ఒకటిగా ఉంటాయి. కంటెంట్ ఒకే 6-కాలమ్ గ్రిడ్ ప్రకారం అమర్చబడింది: టెక్స్ట్ బ్లాక్లు 4 కాలమ్లను (7 సెం.మీ.) ఆక్రమిస్తాయి, ఇమేజ్/ప్రొడక్ట్ కార్డ్లు 5–6 కాలమ్లను ఆక్రమిస్తాయి, ఇవి గ్రిడ్ నుండి ఉద్దేశపూర్వకంగా ఆఫ్సెట్ చేయబడ్డాయి. ఫీచర్లను వివరించే విభాగాలు 2-కాలమ్ లేఅవుట్ను ఉపయోగిస్తాయి: ఎడమవైపు టెక్స్ట్, కుడివైపు ప్రొడక్ట్. ట్రస్ట్ స్టాటిస్టిక్స్ విభాగం పేజీ యొక్క పూర్తి వెడల్పు అంతటా 4-కాలమ్ గ్రిడ్గా విభజించబడింది. కస్టమర్ లోగోలు 48px గట్టర్లతో ఒకే మధ్య వరుసలో ఉన్నాయి. ఫుటర్ కాంపాక్ట్ టూ-కాలమ్ లేఅవుట్ను కలిగి ఉంది. నావిగేషన్ అనేది ప్రధాన స్క్రీన్ పైన ఉండే ఒక స్థిరమైన, 62px-ఎత్తు గల, పారదర్శకమైన టాప్ బార్. దీని బ్యాక్గ్రౌండ్ మసకగా ఉండి, మీరు స్క్రోల్ చేస్తున్న కొద్దీ తెల్లగా మారుతుంది. ఇందులో సైడ్బార్ గానీ, మెగా-మెనూ గానీ ఉండవు—డ్రాప్డౌన్లు సాధారణ బాణం-శైలి మెనూలుగా ఉంటాయి.
దృశ్య శైలి మినిమలిస్ట్ మరియు ఫంక్షనల్ గా ఉంటుంది—కాలమ్ స్టాక్ ఫోటోగ్రఫీని పూర్తిగా నివారిస్తుంది. దృశ్య భాష మూడు మూలాలపై నిర్మించబడింది: (1) SVG డేటా ఇలస్ట్రేషన్లు, ప్రత్యేకంగా చుక్కల హాఫ్టోన్ ప్రపంచ పటం, ఇది ఇండిగో నుండి ఆరెంజ్, ఆపై టర్కోయిస్ వరకు గ్రేడియంట్తో రెండర్ చేయబడి, ప్రధాన ఎలిమెంట్ వెనుక ప్రపంచ స్థాయి వాతావరణాన్ని సృష్టిస్తుంది; (2) ప్రొడక్ట్ కార్డ్ లేఅవుట్లు—అకౌంట్ బ్యాలెన్స్లు, బదిలీ వివరాలు మరియు JSON కోడ్ స్నిప్పెట్లను నాటకీయ నీడలతో కూడిన తెల్లటి కార్డ్లలో ప్రదర్శించే ఫ్లోటింగ్ విడ్జెట్లు; (3) చార్ట్ విజువలైజేషన్లు—ట్రస్ట్/స్టాటిస్టిక్స్ విభాగంలో ఉపయోగించే, సన్నని కనెక్టింగ్ లైన్లతో కూడిన టర్కోయిస్ క్యాండిల్స్టిక్ లేదా బార్ చార్ట్లు. హాఫ్టోన్ మ్యాప్ ఒక సిగ్నేచర్ విజువల్ ఎలిమెంట్—దాని గ్రేడియంట్ #d65620 (ఆరెంజ్) నుండి వైలెట్, బ్లూ, అజూర్, టర్కోయిస్ మరియు పసుపు రంగుల ద్వారా మారుతూ, మొత్తం బ్రాండ్ పాలెట్ను ఒకే అలంకార ఉపరితలంపై ఏకం చేసే స్పెక్ట్రమ్ను సృష్టిస్తుంది. ఐకాన్లు #232730 లేదా #a9acb6 వేరియంట్లలో 1.5–2px ఏకరీతి అవుట్లైన్ మందాన్ని కలిగి ఉంటాయి, యాక్టివ్ స్టేట్ల కోసం ఫిల్తో ఉంటాయి. లైఫ్స్టైల్ ఫోటోలు లేవు, అబ్స్ట్రాక్ట్ 3D రెండర్లు లేవు—ఉత్పత్తి మరియు డేటాపై దృష్టిని కేంద్రీకరించడానికే ఈ సంయమనం ఉద్దేశపూర్వకంగా పాటించబడింది.
పాలెట్
బ్రాండ్
- Indigo Navy
#111a4a— ప్రాథమిక బ్రాండ్ రంగును నింపిన కాల్స్ టు యాక్షన్, యాక్టివ్ నావిగేషన్ స్టేట్స్, హెడర్ మరియు లోగో కోసం ఉపయోగిస్తారు. ముదురు ఊదా-నీలం రంగు సైట్కు దృఢమైన ఇంకా గాఢమైన నలుపు ఛాయను ఇస్తుంది; తెలుపు టెక్స్ట్తో జత చేసినప్పుడు, ఇది సైట్లో అత్యంత ఆకర్షణీయమైన బటన్ను సృష్టిస్తుంది. - Seafoam 600
#44b48b— కోడ్ మరియు డేటా రంగు అనేది కోడ్ స్నిప్పెట్లలోని JSON కీలు, ఐడెంటిఫైయర్లు మరియు ఆర్థిక విలువల కోసం ఉపయోగించే బ్రాండ్ రంగు. దీనిని చార్ట్లు మరియు వృద్ధి విజువలైజేషన్లలోని డేటా పాయింట్ల కోసం కూడా ఉపయోగిస్తారు. - Seafoam 700
#167e6c— డేటా సందర్భంలోని అవుట్లైన్, చార్ట్ లైన్లు మరియు ఐకాన్ యాక్సెంట్ల కోసం ముదురు సీఫోమ్ రంగును ఉపయోగించారు. ఇది ముదురు నేపథ్యానికి వ్యతిరేకంగా సీఫోమ్ స్కేల్ను స్థిరంగా ఉంచుతుంది. - Seafoam 400
#94efb7— హైలైట్ చేయబడిన కోడ్ భాగంలో కోడ్ బ్లాక్ల లోపల స్ట్రింగ్ విలువలు, URLలు మరియు API ఎండ్పాయింట్లు ఉన్నాయి. అత్యంత లేత సీఫోమ్ రంగు, ఆకుపచ్చ ఛాయతో కూడిన మోనోస్పేస్డ్ ఫాంట్లా కనిపిస్తుంది. - Deep Sea
#023247— SVG ఇలస్ట్రేషన్లు మరియు డేటా విజువలైజేషన్లలో ఉపయోగించే గాఢమైన టర్కోయిస్ రంగుతో పాటు, ఈ చార్ట్ యొక్క అలంకారిక అవుట్లైన్ మరియు యాక్సెంట్ రంగు కూడా సీఫోమ్ కలర్ స్కేల్తో కూడి ఉంది.
తటస్థ
- Midnight Ink
#011821— ముదురు ఉపరితలం మరియు హైలైట్ చేయబడిన టెక్స్ట్ – ప్రొడక్ట్ కార్డ్ బ్యాక్గ్రౌండ్, అధిక కాంట్రాస్ట్తో కూడిన ప్రధాన టెక్స్ట్. చల్లని నీలి-ఆకుపచ్చ రంగు ఛాయతో బూడిద రంగుకు దగ్గరగా ఉంటుంది; ఒక విభాగాన్ని ఇన్వర్ట్ చేయవలసి వచ్చినప్పుడు డార్క్ మోడ్ కోసం బేస్గా ఉపయోగించబడుతుంది. - Slate Ink
#3b3e47— లేత రంగు కాన్వాస్పై స్వచ్ఛమైన నలుపు రంగు చాలా కఠినంగా కనిపించే చోట, ద్వితీయ శీర్షిక మరియు ప్రధాన పాఠ్యం మిడ్నైట్ ఇంక్ కంటే కొంచెం వెచ్చగా ఉపయోగించబడ్డాయి. - Steel
#7c7f88— ప్రధాన టెక్స్ట్ మరియు లింక్ టెక్స్ట్లో ఒక మసక రంగు ఆధిపత్యం వహిస్తుంది (ప్రధాన టెక్స్ట్లో 245 సార్లు ఉపయోగించబడింది). ఇది ప్రశాంతంగా కనిపించే ఒక తటస్థ బూడిద-నీలం రంగు, ఎప్పుడూ వెలిసిపోయిన చిత్రంలా ఉండదు. - Fog
#a9acb6— ఐకాన్ అవుట్లైన్లు, తృతీయ అంచులు మరియు ప్లేస్హోల్డర్ టెక్స్ట్. టెక్స్ట్తో పోటీ పడకుండా దానిని వేరుచేసే మధ్యస్థ బూడిద రంగు. - Mist
#cbcccf— ప్రధాన పాఠ్యం—అంటే సంతకాలు, నిరాకరణ ప్రకటనలు మరియు చిన్న అక్షరాలు—తెల్లటి నేపథ్యంపై స్పష్టంగా చదవగలిగేలా ఉన్నప్పటికీ, దృశ్యపరంగా అంతగా గమనించబడదు. - Silver Lining
#e3e4e8— కార్డ్ అంచులు, ఇన్పుట్ ఫీల్డ్ అంచులు, విభజన రేఖలు. రెండు ఉపరితలాలను నీడలు లేకుండా వేరు చేయవలసిన చోట ఈ నిర్మాణాత్మక, సూక్ష్మమైన రంగును ఉపయోగిస్తారు.
టైపోగ్రఫీ
10 నుండి 60 పిక్సెల్స్ · 10 దశలు
- SuisseIntl — భర్తీ: Inter · రూపురేఖలు 300, 400, 500, 600 · ప్రాథమిక ఫాంట్ – అన్ని శీర్షికలు, బాడీ టెక్స్ట్, బటన్లు, నావిగేషన్, లింకులు మరియు కార్డ్ టెక్స్ట్ కోసం ఉపయోగించబడుతుంది. ఈ ప్రత్యేకమైన జ్యామితీయ శాన్ సెరిఫ్ ఫాంట్, కాలమ్కు ఒక విలక్షణమైన ఎడిటోరియల్ శైలిని అందిస్తుంది, కేవలం ఇంటర్నెట్తో మాత్రమే పనిచేసే ఇతర ఫిన్టెక్ కంపెనీల నుండి దీనిని వేరుగా నిలుపుతుంది. శీర్షికల కోసం 52–60px వద్ద వెయిట్ 600, ఉపశీర్షికల కోసం 500, బాడీ టెక్స్ట్ కోసం 400, మరియు తక్కువ ప్రాధాన్యత గల లింకుల కోసం 300గా ఉంటుంది.
- SuisseIntlMono — భర్తీ: JetBrains Mono · రూపురేఖలు 400 · SuisseIntl ను పోలిన ఒక మోనోస్పేస్డ్ ఫాంట్, దీనిని సాంకేతిక లేబుల్స్, API ఐడెంటిఫైయర్లు మరియు UI ఎలిమెంట్స్లో పొందుపరిచిన డేటా కోసం ఉపయోగిస్తారు. ఇది SuisseIntl తో సమానమైన నిష్పత్తులను కలిగి ఉంటుంది, కాబట్టి మోనోస్పేస్డ్ మరియు ప్రపోర్షనల్ టెక్స్ట్ మిశ్రమ సందర్భాలలో సరిగ్గా అమరి ఉంటాయి.
- SFMono — భర్తీ: Fira Code · రూపురేఖలు 400 · కోడ్ స్నిప్పెట్ ప్రదర్శన – JSON ఉదాహరణలు మరియు API డాక్యుమెంటేషన్ బ్లాక్లలో ప్రదర్శించబడుతుంది. కోడ్ను UI టెక్స్ట్ నుండి దృశ్యమానంగా వేరు చేయడానికి సీఫోమ్ రంగు ఉపయోగించబడుతుంది.
విరామాలు మరియు రూపం
| ఉద్దేశ్యం | అర్థం |
|---|---|
| సాంద్రత | సగటు |
| ప్రాథమిక దశ | 8px |
| బటన్ వ్యాసార్థం | 8px |
| కార్డ్ వ్యాసార్థం | 8px |
| నీడలు | నీడలకు బదులుగా అంచులు లేవు |
| విభాగాల మధ్య | 72px |
| పేజీ వెడల్పు | 1200px |
AI మీ వెబ్సైట్ను Column శైలిలో నిర్మించి, దానిని నింపుతుంది
- ఈ లింక్ ద్వారా ఉత్పత్తులు మరియు పోస్ట్లతో నింపండి - Instagram, TikTok, Facebook.
- మీ పాత సైట్ నుండి కంటెంట్ను బదిలీ చేయండి—కేవలం చిరునామాను పేర్కొనండి.
- అత్యుత్తమ ఇంజిన్ అయిన React ( Next.js) పై ఆధునిక డిజైన్, సర్వర్ రెండరింగ్ మరియు ఎస్ఈఓ ఆప్టిమైజేషన్తో వస్తుంది.
- శోధన ఫలితాలు మరియు న్యూరల్ నెట్వర్క్ సిఫార్సుల కోసం పూర్తిగా స్వయంచాలక SEO ఆప్టిమైజేషన్.
సారూప్య శైలులు
- dope.security — ఊదా రంగు బీకాన్లతో అర్ధరాత్రి టెర్మినల్
- Leonardo — ఒక తలక్రిందులైన సంపాదకీయ గ్యాలరీ. నల్లని గోడల మ్యూజియం, ఇక్కడ ఊదా రంగు శీర్షికలు గోడ అలంకరణలుగా పనిచేస్తాయి, మరియు వాటి కింద AI- రూపొందించిన చిత్రపటాలు దట్టమైన గ్రిడ్లో వేలాడుతూ ఉంటాయి.
- VEED — నియాన్ ఆకుపచ్చ లైట్ బటన్లతో కూడిన తెల్లని గ్యాలరీ గోడ
- Craft Docs — స్క్రాప్బుకింగ్ కోసం ఒక డిజిటల్ కొల్లాజ్. ఈ డిజైన్, ఆలోచనాత్మకమైన, స్పర్శానుభూతినిచ్చే స్క్రాప్బుక్ను పోలి ఉంటుంది, ఇందులో క్రమబద్ధమైన డిజిటల్ నోట్స్ మృదువైన, సహజమైన ఆకృతులతో మిళితమవుతాయి.
- Letter — నిల్వ నుండి తీసిన మెరిసే కళాఖండాలను ప్రదర్శించే ఒక ప్రైవేట్ గ్యాలరీ. నల్లని గోడలు గల ఈ ప్రదర్శన స్థలంలో, గ్యాలరీ యొక్క రంగులద్దిన గోడలపై ఉన్న క్రోమ్ శిల్పాల పైన సెరిఫ్డ్ శీర్షికలు తేలియాడుతుంటాయి.
- Railway — కాస్మిక్ మిడ్నైట్ ఎక్స్ప్రెస్. స్పష్టమైన సంకేతాల ద్వారా మార్గనిర్దేశం చేయబడే, చీకటి, నక్షత్రాలతో నిండిన అంతరిక్షం గుండా సాగే ప్రశాంతమైన, ఉత్కంఠభరితమైన ప్రయాణం.
- Garden Eight — క్రీమ్ రంగు కాగితంపై ఒక బృహత్తర సంపాదకీయం. 215 పిక్సెల్స్ సెరిఫ్ హెడ్లైన్ వెచ్చని పార్చ్మెంట్ కాగితంపై ఒంటరిగా ఉంది, దాని చుట్టూ తేలియాడుతున్న శిల్ప రూపాలు మరియు సముద్రపు గాలిని తలపించే ఖాళీ స్థలం ఉన్నాయి—ఈ పేజీ ఒక డాష్బోర్డ్ కంటే ఎక్కువగా ఒక కళా గ్రంథం యొక్క ముఖచిత్రంలా అనిపిస్తుంది.
- Steep — వెచ్చని కాగితంపై సెరిఫ్ ఫాంట్ల విశ్లేషణ
- ElevenLabs — వెచ్చని క్రీమ్ రంగు ఛాయలలో, సూక్ష్మమైన శీర్షికలతో కూడిన ఒక ఫోటో వ్యాసం. బాహౌస్-శైలి నోట్బుక్—గుడ్డు పెంకు రంగు కాగితం, నల్ల సిరా, మరియు ఉత్పత్తి ప్రదర్శన కోసం ఒకే ఒక్క ఊదా మరియు నారింజ రంగు అలంకరణ.
- Awesomic — కాన్ఫెట్టిని తలపించే నారింజ రంగు విరామ చిహ్నాలతో కూడిన ఎడిటోరియల్ జింక్ మెష్
- Monad — వెచ్చని పార్చ్మెంట్పై సంపాదకీయ సాంకేతిక పత్రిక
- AI for Business — వెచ్చని బూడిద రంగు ఛాయలలో బ్రూటలిస్ట్ ఎడిటోరియల్ షోరూమ్