Brand assets · /assets/img
נכסי המותג
ארבעת הלוגואים המעודכנים עם כוונת האליפסות, והפאביקון. כל הקבצים הם SVG עצמאי — בלי CSS חיצוני, בלי בקשת פונט, בלי JavaScript. הטקסט הומר ל־outlines, אז אין תלות בפונט מותקן.
הלוגואים
ראשי. הדר, אזור פתיחה, כל מקום שיש בו מרווח לאלומה להסתובב.
פתיחת הקובץ ←
דפוס, תמונות OG, מייל, PDF. האלומה קפואה ב־43°.
פתיחת הקובץ ←
כשהשם כבר מופיע במסך ליד הסימון.
פתיחת הקובץ ←
פוטר, סימן מים, מקור לפאביקון.
פתיחת הקובץ ←בכל הקבצים יש כלל prefers-reduced-motion — מי שכיבה אנימציות במערכת ההפעלה יראה את האלומה קפואה ב־43° במקום מסתובבת.
פאביקון
Cannabis Radarהפאביקון הוא לא הסימון המוקטן. מתחת ל־32px הטבעות הדקות והכוונת הבהירה מפסיקות להיקרא ונשאר כתם, לכן בניתי אותו מחדש: ריבוע מעוגל בנייבי, עלה טורקיז, וטבעת אחת עבה. גרסת ה־16px מוותרת גם על הטבעת ומגדילה את העלה — בבדיקה שעשיתי היא נקראת הרבה יותר טוב מהגרסה עם הטבעת.
הורדה
| קובץ | סוג | כוונת | אלומה | גודל |
|---|---|---|---|---|
| CR-lockup-animated-ellipse.svg | לוקאפ | אליפסות | מסתובבת | 12.4 KB |
| CR-lockup-static-ellipse.svg | לוקאפ | אליפסות | קפואה | 12.1 KB |
| CR-radar-animated-ellipse.svg | סימון | אליפסות | מסתובבת | 3.5 KB |
| CR-mark-static-ellipse.svg | סימון | אליפסות | קפואה | 3.3 KB |
| favicon.svg | פאביקון | — | — | 1.0 KB |
| favicon-small.svg | פאביקון 16px | — | — | 0.9 KB |
| favicon-32.png | פאביקון PNG | — | — | 1.7 KB |
| favicon-16.png | פאביקון PNG | — | — | 0.6 KB |
| apple-touch-icon.png | אייקון iOS | — | — | 11.9 KB |
מפרט
| viewBox סימון | 0 0 794 778 |
|---|---|
| viewBox לוקאפ | 0 0 1256 1180 |
| מרכז אופטי | 397, 389 |
| רדיוסי טבעות | 352 · 268 · 188 · 112 |
| כוונת | אליפסה 4 × 796 (rx=2 ry=398) בצבע #DFF1F2, בזוויות 0° / 45° / 90° / 135° |
| שובל האלומה | 112°, 30 טריזים מקוננים בשקיפות 0.01182 כל אחד, מצטברים ל־0.30 ליד האלומה |
| סיבוב | 4 שניות, לינארי, אינסופי |
| וורדמארק | Montserrat 700 / 500, מומר ל־outlines |
| דיסקריפטור | Assistant 500, outlines, פריסה מימין לשמאל |
| פלטה |
#14A3AC
#0F1C2E
#A9D9DD
#DFF1F2
|
הטמעה
<!-- ה-CSS יושב בתוך הקובץ, אז האנימציה שורדת גם בתוך img --> <img src="/assets/img/CR-lockup-animated-ellipse.svg" alt="Cannabis Radar" width="260"> <!-- גרסה קפואה לדפוס, OG ומייל --> <img src="/assets/img/CR-lockup-static-ellipse.svg" alt="Cannabis Radar" width="260"> <!-- פאביקון: בתוך ה-head --> <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/assets/img/favicon-32.png" sizes="32x32"> <link rel="icon" href="/assets/img/favicon-16.png" sizes="16x16"> <link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png">
אפשר גם להטמיע את ה־markup ישירות בעמוד, וכך ה־CSS של האתר יגיע לצורות — אבל רק בגרסאות הסטטיות. סלקטורים של class לא חוצים לתוך shadow content של <use>, ולכן עותק שמופנה דרך symbol לא ניתן להנפשה מגיליון הסגנון של האתר.