Notion
మధ్యాహ్నపు ఎండలో వెచ్చని కాగితపు నోట్బుక్
నోషన్ ఇంటర్ఫేస్, పగటిపూట ఒక ప్రియమైన కాగితపు నోట్బుక్లా కనిపిస్తుంది: నిర్జీవంగా కాకుండా స్పర్శకు ఆహ్లాదకరంగా అనిపించే వెచ్చని, క్రీమీ రంగు కాన్వాస్ (#f6f5f4), ఉత్పత్తి సమాచారానికి సంపాదకీయ ప్రాధాన్యతను ఇచ్చే ఉదారమైన శాన్-సెరిఫ్ టైపోగ్రఫీ, మరియు అక్కడక్కడా విరామ చిహ్నాలుగా ఉపయోగించిన రంగు—క్రియలను హైలైట్ చేసే పీచ్ రంగు "గుళికలు", ప్రధాన చర్యను సూచించే ఒకే ఒక నీలం రంగు, మరియు కార్డుల నేపథ్యాలకు స్టిక్కర్లలా రంగులు అద్దే రకరకాల యాక్సెంట్ రంగులు (కోరల్, అంబర్, స్కై, మిడ్నైట్). మోల్స్కిన్ నోట్బుక్లోని గీతలు గీసిన విభాగాల వలె, సన్నని అంచులు మరియు మూలలతో—నీడలు లేకుండా, క్రోమ్ మెరుపు లేకుండా—కార్డులు ఒక కాన్వాస్పై అమర్చబడి ఉంటాయి. యానిమేషన్ ఉల్లాసభరితంగా మరియు చురుకుగా ఉంటుంది, 200ms వద్ద సున్నితమైన మార్పులు మరియు అలంకారంగా ఉండకుండా ఇంటర్ఫేస్కు జీవం పోసే చురుకైన క్యారెక్టర్ యానిమేషన్లతో ఇది ఉంటుంది.
మధ్యలో ఉంచినప్పుడు, గరిష్ట వెడల్పు సుమారుగా 1440pxకు పరిమితం చేయబడింది. ప్రధాన ఎలిమెంట్ అనేది మధ్యలో అమర్చబడిన ఒక స్టాక్: చిహ్నాల వరుస → లోపల రంగుల పిల్ ఉన్న ఒక పెద్ద రెండు-లైన్ల హెడ్లైన్ → ఒక ఉపశీర్షిక → రెండు కాల్-టు-యాక్షన్ బటన్లతో కూడిన ఒక వరుస → ఒక పెద్ద ప్రొడక్ట్ UI మాకప్. ప్రధాన ఎలిమెంట్ కింద, విభాగాలు తెల్లటి కార్డ్ల గ్రిడ్లు మరియు పూర్తి-రంగు యాక్సెంట్ ప్యానెల్ల మధ్య ఒకదాని తర్వాత ఒకటిగా ఉంటాయి. లోగో వాల్ అనేది గ్రేస్కేల్లో ఉన్న భాగస్వాముల లోగోలతో కూడిన, మధ్యలో అమర్చబడిన ఒకే-వరుస గ్రిడ్. ఫీచర్ బ్లాక్లు రెండు-కాలమ్ లేఅవుట్ను (ఎడమవైపు టెక్స్ట్, కుడివైపు రంగుల ప్యానెల్) ఉపయోగిస్తాయి, ఇవి విభాగాల మధ్య ఎడమ నుండి కుడికి మారుతూ ఉంటాయి. "మీ అసిస్టెంట్లను అవసరమైనప్పుడు అడగండి" అనే విభాగం 2x2 కార్డ్ గ్రిడ్ను ఉపయోగిస్తుంది, ఇక్కడ పై కార్డ్ పూర్తి వెడల్పును ఆక్రమిస్తుంది మరియు కింది వరుస రెండు సమాన కాలమ్లుగా విభజించబడింది. విభాగాల మధ్య గట్టర్లు విశాలంగా (~80px) ఉండి, ఒక ప్రశాంతమైన నిలువు లయను సృష్టిస్తాయి. నావిగేషన్ అనేది మధ్యలో నావిగేషన్ ఎలిమెంట్లు మరియు కుడివైపు అమర్చబడిన యాక్షన్ బటన్లతో కూడిన, స్థిరమైన 64px పొడవైన టాప్ బార్.
ఫోటోలు లేకుండా, దృష్టాంతాలకే అత్యంత ప్రాధాన్యత ఇవ్వబడింది. దృశ్య భాష చదునైన, దృష్టాంతాలుగా ఉన్న చిహ్నాలు (2px రంగు వృత్తాలలో గుండ్రని అంచులు), నైరూప్య అలంకరణ అంశాలు (చేతితో గీసిన మెలికలు, మెరుపు, బాణాలు, పువ్వుల ఆకారాలు), మరియు ఉత్పత్తి యొక్క యూజర్ ఇంటర్ఫేస్ నమూనాలపై నిర్మించబడింది. ఈ చిహ్నాలు ప్రధాన విండోలో ఏడు అవతార్ల అడ్డ వరుసగా కనిపిస్తాయి మరియు సరదా విరామ చిహ్నాలుగా పేజీ అంతటా చెల్లాచెదురుగా ఉంటాయి. ఉత్పత్తి స్క్రీన్షాట్లు మాత్రమే "నిజమైన" దృశ్య అంశాలు: అవి అసలైన నోషన్ ఇంటర్ఫేస్ను (కాన్బాన్ బోర్డులు, డాక్యుమెంట్ వీక్షణలు, AI ఏజెంట్ ప్యానెల్లు) పూర్తి స్థాయి అంశాలు మరియు నిజమైన డేటాతో చూపిస్తాయి. ప్రధాన విండోలోని ఉత్పత్తి నమూనా పెద్దదిగా, మధ్యలో ఉండి, కాన్వాస్ నుండి దానిని వేరుచేసే ఒకే నీడను ఏర్పరుస్తుంది. ఇందులో లైఫ్స్టైల్ ఫోటోలు, స్టాక్ చిత్రాలు, లేదా నైరూప్య 3D రెండర్లు ఏవీ లేవు.
పాలెట్
బ్రాండ్
- Notion Blue
#0075de— యాక్టివ్ నావిగేషన్లో ఒక ప్రత్యేక ఆకర్షణగా నిలిచే కాల్-టు-యాక్షన్ (CTA) బటన్ను నింపే ప్రధాన అంశం, నింపబడిన యాక్షన్ బటన్లు అనేవి దాదాపు ఏకవర్ణ వ్యవస్థలో ఒక స్విచ్గా గ్రహించబడేంత సంతృప్తమైన ఏకైక రంగుల పథకం.
తటస్థ
- Paper Warmth
#f6f5f4— పేజీ కాన్వాస్, ప్రధాన విండో నేపథ్యం మరియు విభాగం నేపథ్యం అన్నీ వెచ్చని, కొద్దిగా బేజ్ రంగులలో ఉండి, సిస్టమ్కు స్పర్శకు అనలాగ్ అనుభూతిని ఇస్తాయి. - Pure White
#ffffff— కార్డు ఉపరితలాలు, ఉబ్బెత్తు ప్యానెల్లు, లోగో నేపథ్యం, ముదురు రంగు కార్డులపై విరుద్ధమైన అక్షరాలు. - Ink Black
#000000— ప్రధాన టెక్స్ట్, నావిగేషన్ లింకులు, శీర్షికలు - కొత్త రంగులను జోడించకుండా క్రమానుగత శ్రేణిని నిర్మించడానికి విభిన్న పారదర్శకతతో (100%, 95%, 90%, 60%, 40%, 20%) ఉపయోగించబడతాయి. - Charcoal
#111111— పూర్తిగా నలుపు రంగు చాలా కఠినంగా కనిపించే UI ప్రాంతాల కోసం ముదురు రంగు టెక్స్ట్ ఎంపిక. - Stone
#757575— ద్వితీయ నావిగేషన్ టెక్స్ట్, మ్యూట్ చేయబడిన సహాయక టెక్స్ట్, డిసేబుల్ చేయబడిన బటన్ లేబుల్స్ - 60% ఇంక్ ఆల్ఫా - Graphite
#615d59— ప్రధాన టెక్స్ట్ వెచ్చని రంగులో - గోధుమ బూడిద రంగులో ఉంది, ఇది వెచ్చని నేపథ్యంతో సామరస్యం కలిగి ఉంటుంది.
టైపోగ్రఫీ
12 నుండి 96 పిక్సెల్స్ వరకు · 10 దశలు
- NotionInter — భర్తీ: Inter · రూపురేఖలు 400, 500, 600, 700 · ప్రధాన శాన్-సెరిఫ్ ఫాంట్ సూక్ష్మమైన ఛాయలతో కూడిన ఒక జ్యామితీయ హ్యూమనిస్ట్ ఫాంట్. దీనిని బాడీ టెక్స్ట్ కోసం 400 సైజులో, నావిగేషన్/యూజర్ ఇంటర్ఫేస్ కోసం 500 సైజులో, మరియు హెడ్డింగ్ల కోసం 600-700 సైజులో ఉపయోగిస్తారు. ఈ ఫాంట్ స్కేల్ పెద్ద సైజులలో అక్షరాల మధ్య ఎక్కువ నెగటివ్ స్పేసింగ్ను (96px వద్ద -4.6px, 72px వద్ద -2px) ఉపయోగిస్తుంది. దీనివల్ల హెడ్డింగ్ గాలిగా కాకుండా, మరింత కాంపాక్ట్గా మరియు ఆత్మవిశ్వాసంతో ఉన్నట్లు అనిపిస్తుంది.
- Lyon Text — భర్తీ: Source Serif Pro · రూపురేఖలు 400 · ప్రధాన పాఠ్యంలోని ప్రత్యేక విభాగాలు మరియు విభాగాల పరిచయాల కోసం కేటాయించబడిన ఎడిటోరియల్ సెరిఫ్ ఫాంట్ను, ఒక మ్యాగజైన్ లేఅవుట్లోని ఉల్లేఖనం వలె టైప్ఫేస్కు సాహిత్యపరమైన బరువును ఇవ్వడానికి, చాలా తక్కువగా (నాలుగు సార్లు) ఉపయోగించారు. ఇది సమాంతర శ్రేణిలా కాకుండా, ఒక వ్యవస్థాగత ఉద్ఘాటనలా పనిచేస్తుంది.
విరామాలు మరియు రూపం
| ఉద్దేశ్యం | అర్థం |
|---|---|
| సాంద్రత | సగటు |
| ప్రాథమిక దశ | 8px |
| బటన్ వ్యాసార్థం | 8px |
| కార్డ్ వ్యాసార్థం | 12px |
| నీడలు | నీడలకు బదులుగా అంచులు లేవు |
| విభాగాల మధ్య | 80px |
| పేజీ వెడల్పు | 1440px |
AI మీ వెబ్సైట్ను Notion శైలిలో నిర్మించి, దానిని నింపుతుంది
- ఈ లింక్ ద్వారా ఉత్పత్తులు మరియు పోస్ట్లతో నింపండి - Instagram, TikTok, Facebook.
- మీ పాత సైట్ నుండి కంటెంట్ను బదిలీ చేయండి—కేవలం చిరునామాను పేర్కొనండి.
- అత్యుత్తమ ఇంజిన్ అయిన React ( Next.js) పై ఆధునిక డిజైన్, సర్వర్ రెండరింగ్ మరియు ఎస్ఈఓ ఆప్టిమైజేషన్తో వస్తుంది.
- శోధన ఫలితాలు మరియు న్యూరల్ నెట్వర్క్ సిఫార్సుల కోసం పూర్తిగా స్వయంచాలక SEO ఆప్టిమైజేషన్.
సారూప్య శైలులు
- ElevenLabs — వెచ్చని క్రీమ్ రంగు ఛాయలలో, సూక్ష్మమైన శీర్షికలతో కూడిన ఒక ఫోటో వ్యాసం. బాహౌస్-శైలి నోట్బుక్—గుడ్డు పెంకు రంగు కాగితం, నల్ల సిరా, మరియు ఉత్పత్తి ప్రదర్శన కోసం ఒకే ఒక్క ఊదా మరియు నారింజ రంగు అలంకరణ.
- Awesomic — కాన్ఫెట్టిని తలపించే నారింజ రంగు విరామ చిహ్నాలతో కూడిన ఎడిటోరియల్ జింక్ మెష్
- Monad — వెచ్చని పార్చ్మెంట్పై సంపాదకీయ సాంకేతిక పత్రిక
- Dub — లింక్ యొక్క మాట్టే రైస్ పేపర్ కంట్రోల్ ప్యానెల్
- Seline Analytics — వెచ్చని కాగితంపై నిశ్శబ్ద విశ్లేషణాత్మక పట్టిక
- Anthropic — వెచ్చని వెల్లం కాగితంపై ముద్రించిన ఒక శాస్త్రీయ రంగ పత్రిక—ప్రశాంతమైన ఐవరీ రంగు ఉపరితలాలు, సెరిఫ్డ్ సంపాదకీయ శీర్షికలు, మరియు చర్య అవసరమైనప్పుడు మాత్రమే కనిపించే ఒకే ఒక్క మట్టి రంగు అలంకరణ.
- Calendly — చల్లని పాలరాయిపై ముదురు నీలం సిరా
- Augen Pro — యాపిల్ యొక్క తెల్లటి ప్రెజెంటేషన్లో, ఏకవర్ణ ప్రదేశంలో స్పష్టమైన, తేలికైన, ఎలక్ట్రిక్ బ్లూ రంగు ఏకైక యాక్సెంట్గా ఉంటుంది.
- Antimetal — క్రీమ్ రంగు కాగితంపై ఒక సంపాదకీయ కథనం—ఒక శాస్త్రీయ పత్రికలో ప్రశాంతమైన ఉదయం, ఇక్కడ సంయమనం విశ్వాసాన్ని తెలియజేస్తుంది మరియు సెరిఫ్లు ప్రధాన పాత్రను పోషిస్తాయి.
- Perk — వెచ్చని పార్చ్మెంట్ కాగితంపై ఎలక్ట్రిక్ లైమ్
- Ditto — సూర్యకాంతి ప్రసరిస్తున్న ఒక కార్యశాలలో అడవి పువ్వుల నమూనాలు తయారవుతున్నాయి. వెచ్చని క్రీమ్ రంగు ఉపరితలాలు, ప్రకాశవంతమైన పసుపు ఆధార రంగు, ముదురు నేవీ బ్లూ సిరా, ఆ కళాఖండం వెనుక వికసిస్తున్న సహజ రంగుల రూపాలు.
- Officevibe — వెచ్చని క్రీమ్ రంగు కాగితంపై ఒక సంపాదకీయ పత్రిక. హెచ్ఆర్ నిర్వహణపై ఒక ఆలోచనాత్మక వ్యాసాన్ని ఊహించుకోండి, అది ఒక ఉత్పత్తి రూపంలో ప్రదర్శించబడింది—ఆధునిక నీలిరంగు ఇంటర్ఫేస్ ద్వారా మెల్లగా వినిపించే కర్సివ్ సెరిఫ్ ఫాంట్.