משפחת עיצוב

Neo-Brutal

קווי מתאר עבים, צללים קשיחים וצבע מועט מאוד. מתאים ליוצרים עצמאיים עם עמדה ברורה.

Neo-Brutal

raw and bold

דף שלם בNeo-Brutal

אתר לדוגמה מלא בעיצוב הזה. פתחו אותו כדי לראות כל מקטע, או התחילו את האתר שלכם איתו.

הכי מתאים עבור

  • מוצרים עצמאיים
  • מפתחים ויוצרים
  • תיקי עבודות של יוצרים ומעצבים
  • מניפסטים ופוסטים של השקה
  • דפי מחירים ישירים לעניין

איך זה נראה

Neo-Brutal נראה כמו כרזה שנעשתה ביד. לכל קופסה קו מתאר שחור עבה וצל קשיח, הכפתורים נלחצים כשלוחצים עליהם, והדף כמעט כולו שחור ולבן. צבע בהיר אחד נשמר לרגע או שניים.

הוא מתאים ליוצר או ליוצרת עם דעה חזקה וללא רצון להיראות תאגידיים. המראה הוא חלק מהמסר, ולכן כדאי להשתמש בו רק כשרוצים שישימו לב.

01 · טיפוגרפיה

הקול של Neo-Brutal.

כותרת ראשית · system-ui

נעשה מתוך כוונה.

כותרת משנה ראשית · system-ui

משפט פתיחה תומך נושא את הקול השני בלי להתחרות.

כותרת מקטע · system-ui

כותרת מקטע ברמה השנייה

כותרת משנה של מקטע · system-ui

טקסט תומך מחזיק הקשר ליד הכותרת בלי להתחרות על תשומת הלב.

כותרת כרטיס · system-ui

כותרת כרטיס ברמה השלישית

גוף הטקסט · system-ui

גוף הטקסט נושא פסקאות, כיתובים ותוויות בתוך השורה, בכל מקום שבו קוראים הרבה. הוא מכוון לקריאות בגדלים קטנים ויושב טבעי ליד גופן הכותרות שמעליו.

כיתוב

טקסט תומך קטן יותר, למידע נלווה ולהערות קצרות.

מידע נלווה · ui-monospace

01 - 02 - 03 - v1.0 - 99.9% - $29 - 240ms

02 · פלטה

הצבעים בפועל.

הצבעים שהעיצוב הזה משתמש בהם עם הפלטה והמצב שבחרתם, דוגמית אחת לכל תפקיד.

Backgroundcolor-mix(in srgb, rgb(250 204 21) 16%, #020617)
Surfacecolor-mix(in srgb, rgb(250 204 21) 8%, rgb(18 13 28))
Bordercolor-mix(in srgb, rgb(202 138 4) 18%, #0f172a)
Ink#fafafa
Brandrgb(234 179 8)
Brand · strongrgb(250 204 21)
Accentrgb(202 138 4)
On brandrgb(15 23 42)

03 · רכיבי ממשק

אבני הבניין.

כל רכיב כאן הוא הרכיב האמיתי שמופיע בכל אתר שנבנה בעיצוב הזה.

כפתורים

תגיות

רגילמודגשמתארכהה

תוויות

רגילמודגשמתארכהה

סטטוס

ניטרליהצלחהאזהרהסכנהמידע

רכיבי סינון

מיכלי סמלים

קטן
בינוני
גדול

שדות

04 · סוגי כרטיסים

איך התוכן יושב.

חמישה סוגי כרטיסים בגופן ובצבעים של העיצוב הזה: יכולת, מחיר, פרופיל, נתון והמלצה. הטקסט הוא טקסט לדוגמה.

יכולת

עיצוב עם אופי משלו

הטיפוגרפיה, הצבע והפרטים משתנים יחד, כך שכל מקטע נראה כחלק מאותו אתר.

טיפוגרפיהצבע

מחיר

מומלץ

מסלול לדוגמה

$20/ חודש

  • כל מה שיש בתקופת הניסיון
  • דומיין משלכם
  • יותר גרסאות שמורות

פרופיל

שם לדוגמהתפקיד לדוגמה

שורה קצרה על האדם: במה הוא עוסק ומתי הוא זמין.

זמיןבמשרה חלקית

נתון

128

מספר עם תווית קצרהנתון לדוגמה

המלצה

״כאן יושב ציטוט קצר של לקוח.״
לקוח לדוגמהחברה לדוגמה

05 · תנועה

איך זה זז.

רחפו או התמקדו באחד המשטחים. המעבר עוקב אחרי העקומה של העיצוב הזה ונעצר למבקרים שמעדיפים פחות תנועה.

כרטיס · ריחוף

עולה בריחוף והקו מתהדק

העבירו את העכבר מעל הכרטיס. המשטח עולה כמה פיקסלים והמסגרת מקבלת את צבע המותג.

כפתור · מיקוד

עברו לכפתור שלמטה במקש Tab. טבעת המיקוד משתמשת בצבע המותג.

הפרטים

למי שרוצה להסתכל מקרוב: הפלטה, הטיפוגרפיה ובמה העיצוב הזה שונה מהאחרים.

אופי

  • גולמי
  • נועז
  • שחור ולבן
  • מוחשי
  • לא מלוטש

טיפוגרפיה

System Sans · System Mono

פלטת ברירת מחדל: צהוב. עוד 5 פלטות מומלצות למטה.

פחות מתאים עבור

  • אתרים תאגידיים או רשמיים
  • בריאות וטיפול
  • קריאה ארוכה

במה הוא שונה מהאחרים

Kinetic הוא הבן דוד הידידותי: קווי מתאר דקים יותר, יותר צבע וגופן כותרת כבד יותר.

פריסות מקטעים

כמה מפריסות המקטעים.

כל משפחת עיצוב יכולה להשתמש בכל פריסה. הפריסה קובעת איך המקטע מסודר; המשפחה קובעת איך הוא נראה. התרשימים האלה מראים כמה מהן.

באנר

התוכן מתערם מעל פס תמונות רחב.

פריצה

מודול מרכזי שבולט מעבר לקצה הרשת.

פסים

פסים אופקיים מתחלפים של טקסט ומדיה.

רשת

רשת כרטיסים אחידה לאוספים.

בשביל מי האתר?

חינם ל־14 יום. בלי כרטיס. שום דבר לא מתפרסם עד שתאשרו.