Authkit
קתדרלת זכוכית חלבית בחצות
AuthKit יוצר אסתטיקה של הצגת מוצרים לילית: בד קנבס כמעט שחור עם משטחי זכוכית חלבית, רשת של קווים בקושי נראים, וטקסט זוהר שנראה מואר על ידי שכבת זכוכית. הגופן לבן כמעט לחלוטין על רקע כהה, עם הדגשה סגולה בוהקת אחת כאלמנט הפונקציונלי היחיד - לכל משטח אינטראקטיבי יש קו רך ודק של כחול-לבן קריר במקום מסגרת נוקשה. הרכיבים מסודרים על שכבות שקופות, מפוזרים מעל זוהר סביבתי, והכרטיסים נראים כלוחות זכוכית המוארות מלמטה, ולא לוחות נייר. המרווחים גדולים וקצביים; האלמנט העיקרי הוא לוגו מואר יחיד המשתרע על כל רוחב העמוד, מוקף בכרטיסי זכוכית צפים, במקום פריסה מסורתית של מסך מפוצל.
קנבס כהה ברוחב מלא עם מיכל תוכן ממורכז, ברוחב מקסימלי של 1200 פיקסלים. האלמנט הראשי הוא לוגו יחיד, ממורכז ומואר ("AuthKit" בגופן הדרגתי) מתחת לטקסט קטן בצורת גבה, שמאחוריו/מתחתיהם שלושה כרטיסי זכוכית צפים עם טופס התחברות פרוסים (כרטיס שמאלי מוטה שמאלה, כרטיס מרכזי מוגדל, כרטיס ימני מוטה ימינה). מתג ערכת נושא בהירה/כהה ממורכז מתחת לאלמנט הראשי. שורת התכונות היא ציר זמן אופקי של 6 סמלים עם קווים דקים המחברים בין הסמלים המעגליים. קצב מקטעים: כל מקטע מתחיל בטקסט בצורת גבה ממורכז המוקף בקווים אופקיים דהויים, ואחריו כותרת גדולה וממורכזת (44-48 פיקסלים), ולאחר מכן שורה אחת של תוכן מושתק (16-18 פיקסלים), רוחב מקסימלי של כ-640 פיקסלים. המקטע 'התאמה אישית' מציג מודל של חלון דפדפן עם כרטיס התחברות במרכז, המוקף בפאנלים צפים של בדיקת ממשק משתמש (לוחות צבעים, מחווני רדיוס, בורר סמלי לוגו, שדה טקסט כפתור, שדה רקע עמוד) הממוקמים בפינות הקנבס, כמו סביבת עבודה של כלי עיצוב.
העיצוב החזותי נשלט על ידי מוקאפים של טפסי התחברות, המעוצבים בסגנון "מורפולוגיה של זכוכית" (שדות הזנת דוא"ל/סיסמה, כפתורי התחברות למדיה חברתית, הזנת קוד ללא סיסמה), המוצגים ככרטיסים צפים ושקופים על גבי בד ציור של חצות. אייקוני התכונה הם גליפים ליניאריים מונוכרומים בצבע #d1e4fa בתוך אריחים עגולים ומאטים. רשת עדינה (קווים של פיקסלים אחד בצבע rgba(186,215,247,0.06)) מכסה את כל העמוד, ויוצרת אווירה, בעוד זרקור חרוטי עם גרדיאנט נוצץ בראש האלמנט הראשי. אין תמונות, אין תמונות של סגנון חיים, אין צילומי מסך של המוצר - המוצר עצמו הוא האלמנט החזותי: שדות התחברות המסודרים כמו אבות טיפוס מזכוכית בסטודיו חשוך.
לוּחַ הַצְבָעִים
מותג
- Void Violet
#663af3— הצבע העיקרי של כפתור הקריאה לפעולה (CTA) הוא צבע ההדגשה היחיד המשמש באופן בלעדי עבור כפתור "המשך/שלח" בתוך טפסי התחברות; הסגול העז על רקע כמעט שחור יוצר תחושת דחיפות מבלי לשבש את ערכת הצבעים המונוכרומטית.
נֵטרָלִי
- Midnight Canvas
#05060f— רקע הדף, המשטח העמוק ביותר של הכרטיס, המילוי של התג - בסיס כמעט שחור שעליו כל השאר צף. - Steel Plate
#2f343e— משטח מוגבה, כפתורי פעולה פנטום/משניים, גב פאנל דיסקרטי. - Fog Veil
#9da7ba— הטקסט העיקרי, הטקסט שעל הכרטיס, קריא, אך נדחק לרקע בהשוואה לכותרות. - Moon Mist
#c7d3ea— טקסט ראשי, תוויות נוספות, טקסט עזר מושתק - Frost Glow
#d1e4fa— צבע המילוי העיקרי עבור טקסט גוף וקישור, טקסט סמל ומילוי סמל הוא צבע החזית הזוהר המוגדר כברירת מחדל. - Ice Highlight
#d8ecf8— טקסט בהיר על משטחים כהים, תוויות הפוכות וכותרות בעלות ניגודיות גבוהה. אין להשתמש בו כצבע העיקרי עבור קריאות לפעולה; מעבר חלק מכחול בהיר לכחול רך מלמעלה למטה משמש בלוגו של AuthKit ובכותרות המרכזיות.
טיפוגרפיה
מ-12 עד 48 פיקסלים · 8 צעדים
- Untitled Sans — תַחֲלִיף: Inter · קווי מתאר 400, 500, 600, 700 · טקסט עיקרי, ממשק משתמש, כפתורים, שדות קלט, סמלים, כותרות קטנות - גופן אוניברסלי לכל דבר פונקציונלי.
- aeonikPro — תַחֲלִיף: Space Grotesk · קווי מתאר 400, 500 · הצגת כותרות בלבד - מיתוג AuthKit, כותרות מדור וגוף הטקסט - משקל גופן של 500 נקודות בגודל 44-48 פיקסלים מעניק למיתוג מראה רחב ומאופק במקום הדגשה ראוותנית.
- dotDigital — תַחֲלִיף: JetBrains Mono · קווי מתאר 400 · טקסט באותיות גדולות ("מבוא", "עיצוב ניתן להרחבה", "לזרוח בהיר") - טקסט באותיות גדולות עם מרווח אחיד של 0.10 אלם משמש כמפרידים עדינים בין גוף הטקסט לכותרת.
אינטרוולים וצורה
| מַטָרָה | מַשְׁמָעוּת |
|---|---|
| צְפִיפוּת | מְרוּוָח |
| שלב בסיסי | 16px |
| רדיוס הכפתור | 999px |
| רדיוס הכרטיס | 16px |
| צללים | אין גבולות במקום צללים |
| בין סעיפים | 120px |
| רוחב העמוד | 1200px |
בינה מלאכותית תבנה את אתר האינטרנט שלך בסגנון Authkit ותמלא אותו
- מלאו מוצרים ופוסטים דרך הקישור - Instagram, TikTok, Facebook.
- העברת תוכן מהאתר הישן שלך - רק ציין את הכתובת.
- עיצוב מודרני על מנוע הפיתוח הטוב ביותר: React ( Next.js) עם רינדור שרת ואופטימיזציה של קידום אתרים (SEO) ישירות מהקופסה.
- אופטימיזציה אוטומטית לחלוטין של SEO עבור תוצאות חיפוש והמלצות לרשתות עצביות.
סגנונות דומים
- Resend — קטיפה שחורה עם צבע ניאון סגול
- Gsap — לוח לבן מונפש בסטודיו לעיצוב. קיר כמעט שחור, גיר בצבע קרם חם וחמישה טושים צבעוניים - אחד לכל תחום אנימציה.
- Slash — כספת חצות עם ספרי חשבונות מוזהבים
- Raycast — מרכז פיקוד חצות, קורל ניאון
- Dimension — תחנת עבודה מוארת עם דמדומים ופאנלים מזכוכית חלבית
- Modal — מסוף זרחני בחדר שרתים חשוך - מקור האור היחיד הוא בצבע ירוק בהיר
- Reflect Notes — חלל סגול זרוע כוכבים הוא מצפה כוכבים אפל שבו תווים מרחפים כמו קבוצות כוכבים על רקע של ריקנות כמעט בצבע אינדיגו שחור.
- LaunchDarkly — חדר הבקרה הניאון הוא תא טייס חשוך שבו אותות סגולים פועמים דרך פאנלים שחורים כפחם.
- Ameba — חדר הבקרה בחצות - פעימה כחולה חשמלית בתוך לוחות זכוכית חלבית
- AgentQL — זוהר הצפוני מעל הטרמינל בלילה
- Neon — חדר שרתים לאחר רדת החשיכה. חושך טהור, שבו האור היחיד מגיע מנתונים ומאינטראקציות של משתמשים.
- N8n — מנוע זרימת עבודה בחצות – תחושה של בד ציור אוטומציה בזמן אמת בחדר שרתים חשוך, מואר על ידי מחווני סטטוס וזרמי נתונים