Гарчиг нь юу болсныг хэлнэ.
Товч тайлбар, эх сурвалж, огноо. Гарчгаар хэтрүүлж амлахгүй.
Брэнд / Design system
Нэг эх. Нэг дүрэм. Лого дахин зурахгүй.
01 / Лого
Бүтэн лого 240px-ээс, цацраггүй бичиг 200px-ээс бага өргөнтэй болох үед дан icon хэрэглэнэ. Эргэн тойронд icon-ы өндрийн талтай тэнцэх сул зай үлдээнэ. Сунгах, эргүүлэх, AI хүрээг солих, өөр font-оор дахин бичихгүй.
02 / Өнгө
ink
#101010paper
#F4F4EFaccent
#DF6A3Bmuted
#777772line
#D8D8D2surface
#E5E5DFЖижиг бичвэр: хар дээр цагаан, цайвар дээр хар. Улбар шар нь accent; жижиг өнгөт бичвэрээр мэдээлэл дангаар ялгахгүй.
03 / Үсэг
Юу болов? Учир нь юу вэ?
Tektur Regular / Medium — гарчиг, пост. Урт текст — системийн sans-serif, 16px-аас эхэлнэ, мөрийн өндөр 1.65. JetBrains Mono — жижиг шошго. Логоны үсэг нь SVG path.
04 / Компонент
ТөлөвАжиллаж байна / Хүлээж байна / Дууссан / Алдаа. Зөвхөн өнгөөр ялгахгүй.
05 / Зай ба хөдөлгөөн
4, 8, 12, 16, 24, 32, 48, 64, 96px. Контент 1260px хүртэл. Гар утсанд нэг багана. Товших хэсэг 44px-аас эхэлнэ. Хөдөлгөөн 160–240ms; reduced-motion үед унтраана.
06 / Сошиал ба видео
Пост 1080×1350; story / босоо видео 1080×1920; avatar 1024×1024; cover 1640×924. Платформын crop өөр тул нийтлэхдээ safe area-г шалгана. Гарчиг, эх сурвалж, AI шошгыг таслуулахгүй. Subtitles-ийг интерфэйстэй давхцуулахгүй.
07 / Дуу хоолой
Сониуч, товч, шууд, оновчтой ёжлол. Англи үг тохирсон үед. Хүчээр сургамж айлдахгүй. Баримт, санал, зохиомжоо ялгана. Мэдээг мийм шиг харагдуулахгүй.
08 / Эх файлууд
assets/brand/master/gegee-ai.svg — үндсэн эх. assets/brand/exports/ — 15 SVG ба 15 transparent PNG хувилбар. public/fonts/ — font ба лиценз. design-system/tokens.json — өнгө, зай, дүрэм. Логоны өөрчлөлт хэрэглэгчийн зөвшөөрлөөр хийгдэнэ.
09 / UI компонентын сан
Эдгээр нь нийтлэлийн жишээ мэдээлэлтэй, ажилладаг UI үзүүлэн. Hover, keyboard focus, pressed, disabled төлөвийг туршиж болно. Гар утсанд нэг багана болно.
Товч / Buttons
44px товших талбар. Tab товчоор focus-ийг шалгана. Товчийн жишээнүүд бодит үйлдэл илгээхгүй.
Шошго / Content labels
МэдээТайлбарСаналМийм · зохиомжAI бүтээлЗалруулсан
Агуулгын төрлийг зөвхөн өнгөөр ялгахгүй.
Хайлт / Search
Түлхүүр үг оруулаарай. Энэ нь компонентын үзүүлэн.
Шүүлтүүр / Filters
Сонгосон: Бүгд
Навигаци
Нийтлэлийн карт
Гарчиг нь гол санаагаа шууд хэлнэ.
Уншигчид яагаад хамаатайг хоёр өгүүлбэрт багтаана.
Эх сурвалж ба залруулга
Эх сурвалжийг дэлгэх
Байгууллага, бүтээлийн нэр, анх нийтэлсэн огноо, шалгасан холбоос. Баталгаатай эх орсон үед жинхэнэ холбоос харуулна.
Залруулгын түүх
Юу өөрчлөгдсөн, яагаад, хэзээ гэдгийг тэмдэглэнэ. Жишээ үзүүлэн.
Ачаалж буй / Loading
Агуулга ачаалж байна…
Хоосон / Empty
Тохирох нийтлэл алга.Түлхүүр үгээ богиносгох эсвэл шүүлтүүрээ өөрчлөөрэй.
Алдаа / Error
Мэдээлэл татаж чадсангүй.Холболтоо шалгаад дахин оролдоорой. Энэ бол алдааны төлөвийн жишээ.
Агентын төлөв
● Ажиллаж байна◷ Хүлээж байна✓ Туршилт дууссан! Алдаа
Төлөв, шинэчилсэн цаг, бодит үйлдлийн бүртгэл хамт байна.
10 / Icon сан
24×24 grid, 1.75px жигд зураас. 16 / 20 / 24 / 32px хэмжээгээр хэрэглэнэ. Брэндийн icon тусдаа master SVG хэвээр. Icon дангаараа товч бол тайлбар нэр заавал өгнө.
searcharrowexternalsourcecheckcorrectionplaypausechartfiltermessageclockwarningclosemenudownload11 / Typography scale
Юу болов?
Учир нь юу вэ?
Өөр өнцгөөс харъя.
Урт нийтлэлд уншихад эвтэй системийн sans-serif хэрэглэнэ. Кирилл, латин, тоо, хувийн тэмдэг: Аа Бб Өө Үү · Aa Bb · 0123456789 · 25%.
ЭХ СУРВАЛЖ / AI БҮТЭЭЛ / 01
Display 64–88px / Tektur Medium; H1 40–64px; H2 28–40px; H3 22–28px. Body 16–18px / system sans-serif / 1.65 мөр. Caption 12–14px. Шошго JetBrains Mono 11–12px. Утас дээр display 40–48px. Логог фонтоор бичихгүй.
12 / Чарт, инфографик, widget
Доорх бүх тоо нь зохиомол жишээ. Бодит контентод эх сурвалж, огноо, нэгж, хэмжээсийг заавал оруулна.
Харьцуулалт / Bar chart
А40 40
Б65 65
В80 80
Өөрчлөлт / Line chart
Зохиомол цуваа: 20, 35, 30, 60. Бодит графикт тэнхлэг бүрийн утга, хугацааг тэмдэглэнэ.
Хувь өсөлтийн widget
Томьёо: (дараах − эхний) / эхний × 100. Эхний утга эерэг үед тооцно.
Нэг санаа → нэг зураг
- Юу болсон?
- Яагаад хамаатай?
- Ямар нотолгоотой?
- Юу нь тодорхойгүй?
Постод нэг санаа; reel-д үе шаттай илрүүлэлт; web дээр дэлгэгдэх дэлгэрэнгүй. Нэг өгөгдлийн эхээс экспортолно.
Бодит чартын журам: эх сурвалж, хугацаа, нэгж, суурь ба тэнхлэг; өнгөөс гадна нэр, утгаар ялгах. Bar chart-ийг 0-ээс эхлүүлнэ. Line chart-ийн scale-ийг ил тод тэмдэглэнэ. Хувь ба процентын пункт ялгаатай. 3D эффектээр тоон харьцааг гажуудуулахгүй.