Տեսողական aidenta Gamble Hub

1) Բրենդի և սկզբունքների էությունը

Պատկերը 'տեխնոլոգիական, ազնիվ, հուսալի, կենտրոնացած տվյալների և պատասխանատվության վրա։

Թոն 'զսպված և իրավասու; առանց «խաղային» հիպերբոլայի։

Սկզբունքներ ՝ ընթերցում> զարդեր, լռելյայն հասանելիություն, սննդի միջև կոնսիստենտություն։

2) Լոգոն 'կառուցվածք և կիրառություն

2. 1 Տարբերակներ

Հիմնական (հորիզոնական) 'նշանը + Gamble Hub բառը։

Կոմպակտ (նշան) 'ֆավիկոնի/ավատարների համար։

Ուղղահայաց 'նեղ վայրերի համար։

2. 2 Կառուցվածք և անվտանգության գոտի

Ցանցը 8px է։ Պաշտպանության գոտին = G- ի բարձրությունը պարագծի վրա։

Նվազագույն չափը 'կնիքը 18 մմ լայնությամբ; էկրանը 120 px է։

Դուք չեք կարող փոխել համամասնությունները, թեքել, ավելացնել էֆեկտները/գրադիենտները պալիտրայից։

2. 3 Ֆոնի վրա

Լուսավոր ֆոնի վրա գունավոր լոգոն է։

Բարդ/լուսանկարում 'մոնոխրոմը (սպիտակ/սև) 8-12 px կլորացման վրա։

Մթության վրա 'հակադարձված։

3) Գունավոր համակարգ (հոսանքներ)

3. 1 Պալիտրա

Primary / Indigo 600: `#2F6BFF`

Primary Dark / Indigo 700: `#1E54F0`

Success / Green 600: `#2EAE60`

Warning / Orange 600: `#FF9F1A`

Critical / Red 600: `#E53935`

FG Primary: `#11131A`

FG Muted: `#656D76`

BG Base: `#FFFFFF`

BG Subtle: `#F7F8FA`

BG Inverse: `#0E1116`

3. 2 Գրադենտներ (ցանկությամբ)

Brand Gradient: "linear-gradient (135deg, # 2F6BFF 0%, # 1E54F0 50%, # 2EAE60 100%) - օգտագործել դոզան։

3. 3 Հակադրություն և վիճակ

Primary: fon '# 2F6BFF «, տեքստը սպիտակ, hover' # 1E54F0», ալֆայի 40 տոկոսը։

Տեքստի հակադրություն թիվ 4։ 5: 1 (AA). Հակադարձման համար 3,3: 1 մեծ համար։

4) Տպագրություն

Վերնագրերը ՝ Inter/SF System/2019, 600-700։

Տեքստը ՝ Inter 14-16 px, 112-height 1։ 5.

Կոդը/մոնոն 'JetBrains Mono կամ համակարգային մոնոն։

Հիերարխիա ՝ H1 32/40, H2 24/32, H3 20/28, Body 16/24, Caption 12/16։

Չօգտագործել դեկորատիվ տառատեսակներ ինտերֆեյսի համար։

5) Ցանցը, նահանջը և ճառագայթները

Ցանցը ՝ 8px; բեռնարկղերը max-width 1120-1280 px-ից։

Քարտեր ՝ 16-24 px ներքին նահանջներ, միջքաղաքային 16 px։

Ռադուսներ ՝ 8/12/16 px; լռելյայն 12 px, կոճակների համար 8 px։

Тени: `0 1px 2px rgba(0,0,0,.08)` (sm), `0 4px 12px rgba(0,0,0,.10)` (md).

6) Պատկերագրություն և նկարագրություն

Սրբապատկերների ցանցը 24-24, 1-ը։ 75-2px, կլորացումը համաձայնեցված է։

Սեմանտիկան առաջնային է, գույնը գլանաձև է (գույնը փոխվում է պայմաններով)։

Նկարազարդումներ ՝ հարթ, առանց «kazual» սիմվոլիկայի (չիպեր/քարտեր, միայն չեզոք նյութերում և չափավոր, ոչ խրախուսական կոնտեքստերում)։

7) Պատկերներ և լուսանկարներ

Թեմաները ՝ տեխնոլոգիաները, տվյալները, անվտանգությունը, թիմը։

Խուսափել «ջեքպոտներ/կոնֆետտի» կլիշեից։

Լուսանկարների վերևում 'գրադիենտ/մութ շերտ տեքստի հակադրության համար (առնվազն 60% անթափանցելիություն մութ մասում)։

8) Մութ և լուսավոր թեմաներ

Մութ 'ֆոն' # 0E1116 ", տեքստը '# E6E8EB", սահմանները' # 2A2F37 "։

Ակցենտները պահպանում են հակադրությունը (primary լուսավորությունը 8-12 տոկոսով)։

Գծապատկերներ 'ֆոն 2-ով ավելի թեթև, քան ֆոնը, ցանցը կուլ, ստորագրությունները։

9) Հասանելիություն (A11y)

Հակադրություն AA/AAA; ֆոկուս ստիլները չեն մաքրում։

Տեքստային այլընտրանքները լոգոյի և նշանակալի պատկերների մեջ։

Կլիկի նվազագույն չափը 40-48 px է։

Հարգել 'wwww.fers-reduced-motion "- անիմացիաները կրճատել/անջատել։

10) Թոն և միկրոկոպիրեյթինգը

Կարճ ասած, առանց ժարգոնի։

Սխալները բացատրում են, թե ինչ անել օգտագործողը։

Միավորները և կոմպոզիցիաները 'օգտագործողի լոկալներում, ինտերֆեյսում' CSA-ում, կոդով (SDR, USD)։

Չօգտագործել «ազարտային» մետաֆորներ ապրանքային հաղորդագրություններում։

11) Տոկենի (JSON և CSS) օրինակները

json
{
"color": {
"primary": { "600": "#2F6BFF", "700": "#1E54F0" },
"success": { "600": "#2EAE60" },
"warning": { "600": "#FF9F1A" },
"critical": { "600": "#E53935" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA", "inverse": "#0E1116" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "body": 16, "h1": 32, "h2": 24, "h3": 20 } }
}

CSS-2019

css
:root {
--gh-color-primary-600:#2F6BFF; --gh-color-primary-700:#1E54F0;
--gh-color-success-600:#2EAE60; --gh-color-warning-600:#FF9F1A; --gh-color-critical-600:#E53935;
--gh-fg-primary:#11131A; --gh-fg-muted:#656D76;
--gh-bg-base:#FFFFFF; --gh-bg-subtle:#F7F8FA; --gh-bg-inverse:#0E1116;
--gh-radius-sm:8px; --gh-radius-md:12px; --gh-radius-lg:16px;
--gh-shadow-sm:0 1px 2px rgba(0,0,0,.08); --gh-shadow-md:0 4px 12px rgba(0,0,0,.10);
--gh-font-body:16px/1. 5 "Inter", system-ui;
}

12) Բաղադրիչները և վիճակը (UI-օրինակներ)

Primary: fon primary-600, տեքստը # FFF, hover primary-700, www.abled 40 տոկոսը ալֆա։

Բեյջին 'success/warning/critical կարդացվող տեքստով և իոնով։

Քարտը 'ֆոն BG Box, ստվեր sm, md շառավղը, հեդերը 16 px, մարմինը 16-24 px։

13) Անիմացիա և շարժում

Անցումները 120-200 մզ, կորը 'east-in-out "։

Անիմացիաները միայն «տրանսֆորմ »/« opacity» են։

Կրիտիկական պայմանների համար 'առանց անիմացիաների (մի շեղեք)։

14) Սոցիալական մեդիա, ներկայացում, e-mail

Ավատարներ/իկոնիկներ 'նշանը primary-600, նահանջները 12-16 px։

Սլայդներ ՝ ֆոն թեթև/մութ, ցանցը 8px, H1 40-48, բովանդակությունը 18-24։

E-mail: HTML-ձևանմուշները 600-720 px լայնությամբ, տառատեսակները/Inter, կոճակները 44 px բարձրությամբ, մութ թեման հաշվի է առնվում։

15) Կնիքը, չափսը և արտաքին տեսքը

Գունավոր պրոֆիլը CMYK, Pantone համարժեքները համաձայն են տպագրության հետ։

Լոգոյի նվազագույն չափերը և ճառագայթները պահպանելու համար։

Թուղթը մատրիցային է, խուսափել «գոռացող» լաքներից։ հյուսելը թույլատրելի է նշանի համար։

16) Իրավաբանական նշումներ և պատասխանատու խաղ

Low-ի նշանով, անհրաժեշտության դեպքում (Jurd. երկիր)։

Դիսկլեյմերը և տարիքային սահմանափակումները 'մակետների ներքևի գոտում։ ընթերցում AA.

Չօգտագործել aidentica պարունակություն, որոնք խրախուսում են ավելորդ վարքը։

17) Տեղայնացում և RTL

Լոգոյի նշանը/բառապաշարը չի թարգմանվում։

Տեքստային բլոկները ռեսուրսների մեջ են։ RTL աջակցություն (սլաքների/սրբապատկերների հացահատիկ)։

Գերմանական/թուրքական/արաբերենով հաշվի առեք տողերի երկարությունները մակետների հետ։

18) Do / Don’t

• Աջակցեք հակադրությանը, անվտանգության գոտիներին, տառատեսակի հիերարխիային, 8px ցանցին։
• Ստուգեք տեսանելիությունը լուսանկարում/տեսանյութում։ օգտագործեք կափարիչը։
• Հետևեք տոքսեններին, ոչ մի «պատահական» ծաղիկներ։

• Ձգեք/ուղղեք լոգոն, օգտագործեք ստվեր/շապիկներ «գեղեցկության համար»։
• Օգտագործել «մոլեխաղեր» նկարները որպես ֆոն ապրանքներում։
• Խառնեք ոչ ստանդարտ տառատեսակները, կոտրեք հակադրությունը կամ մաքրեք ֆոկուսը։

19) Ասետներ, նյարդեր և տարբերակներ

Նեյմինգը '"gh-logo-hz-color։ svg`, `gh-logo-vt-mono-white. svg`, `gh-icon-24-alert. svg`.
Пакеты: `/brand/logos/`, `/brand/icons/24/`, `/brand/templates/`, `/brand/fonts/`.

Մոսկվա: SVG լոգոյի/սրբապատկերների համար; PNG/SysteP բույսերի համար; PDP տպագրության համար։

Տարբերակումը 'SemVer-ը հոսանքների/սրբապատկերների համար։ changed/changed/deprecated/removed "-ի հետ։

Ճշմարտության աղբյուրը 'հոսանքների կրկնօրինակումը web/iOS/Android-ի համար։

20) Որակի վերահսկումը և գործընթացը

Brand Review-ում PR-ում 'հոսանքների և հակադրության ստուգում։

A/B-ը վիճելի ֆոնային պատկերների համար (ընթերցանություն/փոխակերպում)։

Լինթեր 'գույների արգելք հոսանքներից դուրս, ալտ տեքստի ստուգում պատկերների համար։

Եժեքվարտալ աուդիտ 'պալիտրա/տպագրություն/իկոնպակ։

21) Օրինաչափություններ

Keynote/Slides: վերնագիր, բաժին, բովանդակություն, «տվյալները/գրաֆիկը», եզրափակիչ։

Սոցիալական մեդիա ՝ 1: 1 ավատար, 16:9 բանան, պատմություններ 9:16։

E-mail: Ողջույն, CTA, ծանուցում, dronet։

Լենդինգը 'հերո բլոկը, 3 առավելություն, վիտրին, CTA, նկար։

22) Օգտագործման թուղթ

• Պատկերանշան 'ճիշտ տարբերակ, պաշտպանության գոտի, հակադրություն, չափը։
• Գույներ ՝ միայն հոսանքներ; հակադրություն AA.
• Տառատեսակներ ՝ հիերարխիա, միջտարածաշրջանային, չափսեր։
• Iconki: Ցանցը 24 2424, մեկ գիծ։
• Պատկերներ ՝ թույլատրելի թեմաներ, տեքստի ընթերցում վերևում։
• Մութ/լուսավոր թեման 'ստուգված, առանց արտեֆակտների։
• Տեղայնացումը/RTL: տողերը չեն «կոտրում» մոդելը։
• Իրավաբանական/Responsible Gaming նշանները ներկա են։

23) Իրականացման պլանը (3 իտացիա)

Իտերացիա 1 - Հիմքը (1-2 շաբաթ)

Լոգոն, պալիտրա, տպագրություն, հիմնական հոսանքներ, սրբապատկերների հավաքածու 24-24 (հիմնական 40-60 հատ), ներկայացումների ձևանմուշներ և e-mail։

Iteration 2 - Ապրանք (3-4 շաբաթ)։

Մութ թեման, UI բաղադրիչները հոսանքների վրա (կոճակներ, քարտեր, սեղաններ), գրաֆիկների, սոցիալական մեդիայի, լենդինգի ձևի համար։

Iteration 3-Մասսա (շարունակական)։

Իկոնպակը ընդլայնված է, նկարազարդումները, տպագրական մոդելները, ոսպնյակները/CI-ը հոսանքների համար, որոնք պարունակում են բրենդի աուդիտ։

24) Mini-FAQ

Հնարավո՞ ր է պատկերանշանը ներկել կապտավուն ակցիայի տակ։

Միայն սեզոնային թեմաներում և առանց հակադրության/անվտանգության գոտիների խախտման։

Ի՞ նչն է առաջին հերթին ցնցված կամ մոդելը։

Տոկենները։ Մակեթը պետք է օգտագործի գույների/հավատքի/տպագրություններ։

Ինչպե՞ ս վարվել հակասական դեպքերում։

Բացել RFC-ը aidentic-ում, տեղադրել օրինակներ, անցկացնել Brand Review-ը։

Արդյունքը

Aidentic Gamble Hub-ը ոչ թե «նկարների հավաքածու» է, այլ համակարգ ՝ պատկերանշան, պալիտրա, տպագրություն, իկոնպակ, հոսանքներ և որակի վերահսկման գործընթացներ։ Հետևեք հակադրության կանոններին, հասանելիությանը և պահպանողականությանը, օգտագործեք հոսանքներ ու ձևանմուշներ, և բրենդը ճանաչելի, ժամանակակից և միասնական կլինի բոլոր ապրանքներում և ալիքներում։