CRM, AI-ассистенттер, автоматтандырулар, сайт және болашақ модульдер үшін бірыңғай визуалдық жүйе. Негізгі түстері — навигацияға арналған қанық көк-графит, жұмыс аймағына арналған жылы ашық реңк және маңызды әрекеттерді көрсететін фирмалық жасыл.
Бұл блок — стильдің негізгі келісімі. Жаңа экран, лендинг, модуль не AI макет оған сай болса, мазмұны мен сценарийі жаңа болғанда да бір өнімнің бөлігі болып көрінеді.
Өнім жүйесі үш рөлге сүйенеді. Қараңғы түс технологиялық навигация мен контраст береді, ашық түс тыныш жұмыс бетін жасайды, ал ашық жасыл брендті танытып, әрекетті көрсетеді.
#151F24 Бүйір панель, қараңғы панельдер мен батырмалар, үлкен контраст секциялар. #FBFBF9 Өнім мен сайттың негізгі фоны. Жылы, бірақ көзге бейтарап. #7ED957 Негізгі әрекеттер, белсенділік белгілері, ауыстырғыштар және нүктелік бренд екпіндері. Қараңғы түс бүкіл интерфейсті толтырмайды. Ол навигациялық қаңқа құрады. Жұмыс аймағы ашық, ал фирмалық жасыл тек әрекет не ағымдағы күй белгісі ретінде қалады.
Карточка жылы фонда ақ болып қалады. Түс деректерді оқуға кедергі жасамайды.
Мағыналық түс интерфейсті безендірмей, мәнін көрсетеді.
Ереже: Deep Blue — навигация және бөлек контраст беттер. Canvas — жұмыс аймағы. Brand Lime — әрекет. Рөлдер араласпайды.
Жаңа экрандар көзбен шамалап жасалмауы үшін түстер мен жүйелік мәндер рөлдер бойынша қолданылуы керек. Бұл CSS айнымалыларына, Tailwind тақырыбына не дизайн токендеріне көшіруге болатын ең аз жиынтық.
Inter маркетинг беттеріне де, тығыз интерфейске де жарайды. Өлшем саны емес, тұрақты шкала мен модульдердегі біркелкі тығыздық маңызды.
Түзетілді: мысал өлшемдері мен белгілер енді сәйкес. Интерфейсте жасанды қалыңдық қолданбаймыз — Inter 400/500/600/700/800 қосамыз.
Компоненттер түстердің бір рөлдерін қолданады. Ашық жасыл бүкіл интерфейстің сәндік фонына айналмауы тиіс.
Primary: #7ED957 + қараңғы #151F24 мәтін. Ашық жасылда ақ мәтін қолданбаймыз — контраст әлсіз.
Brand Lime мағынаны алмастырмайды. Қате қызыл, ескерту кәріптас, info көк болып қалады.
Бірыңғай SVG тілі: 24×24, 1.8–2px сызық, жұмыр ұштар. Әртүрлі кітапхана мен стильдерді араластырмаймыз.
Геометрия тұрақты болуы тиіс. Радиус көлеңкеге тәуелді емес: фон не жиек бөліп тұрса, карточка жазық болуы мүмкін.
999px — тек pill/status үшін. Арнайы себепсіз кездейсоқ 10/14/18px қолданбаймыз.
Көлеңкелер Deep Blue реңкімен бейтарап. Жасыл жарқыл тек сирек бренд әсері ретінде, әр карточкада емес.
Негізгі тор — 4px. Интерфейс аралықтарының көбін 8 / 12 / 16 / 24 / 32px мәндерінен құрамыз.
Фокус анық көрінуі және тек мәтін түсіне тәуелді болмауы тиіс.
Мысалдар өнімнің нақты модульдеріне негізделген. Олар клиенттердің нақты деректерін емес, бар бөлімдерде дизайн жүйесін дұрыс қолдануды көрсетеді.
Dark Core бүйір панельде қалады. Канбан, сүзгілер мен карточкалар Warm Canvas үстінде. Мәртебелер мағыналық түстер алады.
#151F24 sidebar · #FBFBF9 canvasТүс күнтізбе мен кестеге кедергі жасамайды. Негізгі визуалдық иерархия өлшемге, аралықтарға және күйлерге сүйенеді.
surface #FFFFFF · border #E5E8E2AI модулі де жаңа визуалдық тіл құрмайды. Айырмашылық өзге палитрадан емес, мазмұн мен белгішелерден қалыптасады.
one brand system across modulesЖүйенің мақсаты — әр экранды «брендтеу» емес, өнімді бірізді, түсінікті және көзге жайлы ету.
#151F24 навигацияға, қараңғы беттерге және контраст секцияларға арналған. Негізгі жұмыс ашық фонда қалады.
#7ED957 негізгі әрекетті, белсенді күйді, қосылған ауыстырғышты не бренд екпінін көрсетеді. Онымен бәрін боямаймыз.
#7ED957 үстінде қараңғы #151F24 қолданамыз. Ақ түс Dark Core және тереңірек түсті беттерге қалады.
Success, warning, danger және info өз түстеріне ие. Пайдаланушы мағынаны брендтен жылдам тануы тиіс.
24×24, 1.8–2px сызық, жұмсақ геометрия. Белгішелер ерекше болуы мүмкін, бірақ оптикалық салмағы бірдей болуы тиіс.
Алдымен иерархия, типографика және аралықтар. Түс, көлеңке мен градиент тек функциясы болса қосылады.