Wise
Шохойн чулуун таталттай гүн хөвд. Бараг хар ойн ёроолд шохойн чулуу оч гялалзаж, хөдөлгөөн бүрийг дохио болгон аварга том өнцөгт дүрсүүд харагдана.
Wise фонт нь өөртөө итгэлтэй, бага зэрэг чанга дуугаар ярьдаг: гүн ойн ногоон (#163300) нь гадаргуугийн ихэнх хэсгийг эзэлдэг - текст, навигаци, бараан хэсгүүд, дүрсүүд - харин нэг тод шохойн ногоон (#9fe870) нь үйлдэл хийх дуудлага, идэвхтэй табууд болон гол элементүүд дээр цэг таслал болгон үйлчилдэг. Фонт нь бараг түрэмгий: 900 мөрийн жинтэй, нягт савлагдсан Wise Sans нь үндсэн дэлгэц дээр том үсгээр (100px+) ялгардаг. Системийн үлдсэн хэсэг нь зөөлөн саарал гадаргуутай (#e8ebe6) цагаан өнгийн зураг дээр үл мэдэгдэх хэвээр байна. Бүрэлдэхүүн хэсгүүд нь анхдагчаар эм хэлбэртэй байдаг - товчлуурууд, навигацийн сегментүүд, тэмдэглэгээний жижиг хэсгүүд, зургийн маскууд - картууд болон оролтын талбаруудад зориулж жижиг радиустай (10px). Өнгөний градиент ховор байдаг; үүний оронд саламандр болон ойн ногооны хослол нь хэсгүүд харанхуйлах үед жигд өөрчлөгдөж, хэт их чимэглэлгүйгээр хэмнэл үүсгэдэг.
Хуудасны бүх өргөнийг хамарсан дээд ба бараан хэсэгтэй, хамгийн ихдээ 1200 пиксел өргөнтэй контейнер. Толгойн зохион байгуулалт нь цагаан дэвсгэр дээр асар том, төвлөрсөн гарчигтай бөгөөд харах цонхны доод ирмэгээс цааш том зураглал (бөмбөрцөг) байрладаг. Хэсгийн хэмнэл нь цагаан, цайвар ногоон, "ойн бэх"-ний бараан хэсгийн хооронд ээлжлэн солигдож, байгалийн өнгөний хэмнэлийг бий болгодог. Агуулгын зохион байгуулалт нь голчлон төвлөрсөн байдаг: дээд хэсэгт хоёр багана дахь текст болон зургийн блокууд эсвэл хоёрдогч хэсгүүдийн гурван багана дахь үндсэн элементүүдтэй мөрүүд. Улс орнуудын жагсаалтыг харуулахын тулд тугтай таван багана бүхий тор ашигладаг. Навигаци нь сегментчилсэн унтраалгатай ганц, тогтмол дээд мөр юм. QR код нь бүх гүйлгэх байрлалд баруун доод буланд тогтмол хэвээр байна.
Алтан зоос бүхий бөмбөрцгийг дүрсэлсэн 3 хэмжээст чимэглэл нь брэндийн харааны ертөнцийг бий болгодог - хүрэлцэхүйц, бага зэрэг бодит бус, зөөлөн градиент болон дулаан гэрэлтүүлэгтэй. Гэрэл зураг нь минималист; ашиглахад өндөр түвшний, энгийн байдаг. Төрийн далбааг таван багана бүхий торонд дугуй хэлбэртэй жижиг зураг хэлбэрээр дүрсэлсэн - цорын ганц "дүрслэл" систем бол үндэсний өвөрмөц байдал юм. Хийсвэр график элементүүд байхгүй, стандарт загвар байхгүй. Бөмбөрцөг болон зооснууд нь сахиусын давтагдах сэдэв бөгөөд монтаж биш харин ганц, дулаан, өөдрөг объектоор дамжуулан дэлхий нийтийн хүртээмжийг илтгэдэг.
Палетт
Брэнд
- Forest Ink
#163300— Тус брэндийн давамгайлсан бараан хэв маяг болох навигацийн текст, бараан хэсгийн дэвсгэр зураг, цайвар гадаргуу дээрх үндсэн текст, дүрсний тойм, навигацийн элементүүд зэрэг нь түүний давуу талыг тодорхойлдог: жин эсвэл эрх мэдэл шаардлагатай газар бүрт та Forest Ink-ийг сонгодог. - Lime Voltage
#9fe870— Ногоон өнгийг гоёл чимэглэлийн нарийн ширийн зүйлсийн хоёрдогч өргөлт болон бага ашиглагддаг хайлтын асуулгыг тодруулахад ашигладаг. Үүнийг үйлдэлд уриалахад үндсэн өнгө болгон ашиглаж болохгүй. - Spruce
#054d28— Хоёрдогч хар ногоон өнгийг хөзрийн гадаргуу, жижиг дүрс зүйн зураг, мөн Forest Ink хэт ханасан харанхуй хэсэгт гүн нэмэхэд ашигладаг.
Төвийг сахисан
- Linen Mist
#e2f6d5— Гадаргуу дээрх зөөлөн тодруулга, өнгөт картын дэвсгэр болон навигацийн самбар дээрх хулганы байрлалыг тодотгоход зориулсан цайвар ногоон өнгө. Контейнерын дизайны элементүүдэд зориулсан өвөрмөц ногоон өнгө. - Signal Blue
#0b4c72— Цэнхэр өнгө нь гоёл чимэглэлийн нарийн ширийн зүйлийг онцлон тэмдэглэж, нам давтамжийг онцолдог. - Alarm Red
#cb272f— Улаан өнгө нь гоёл чимэглэлийн нарийн ширийн зүйлсийг дэмжих, ховор өнгийг тодруулахад ашиглагддаг. Үүнийг статусын өнгө болгон биш харин туслах өнгө болгон ашиглаарай. - Charcoal
#454745— Биеийн хуулбар, биений текст, баялаг хэрэглэгчийн интерфэйс - цагаан дэвсгэр дээрх цэвэр #000-аас илүү зөөлөн мэдрэгдэх бага зэрэг дулаан хар өнгө. - Obsidian
#0e0f0c— Навигаци болон үндсэн цэсэн дэх гарчиг, өндөр тодосгогчтой гарчиг, цэвэр хар элементүүд. Хар өнгө нь бага зэрэг ногоон өнгөтэй, төвийг сахисан саарал биш. - Pebble
#868685— Дарагдсан хоёрдогч текст, орлуулагч текст, дүрс тэмдгийн тойм болон оролтын талбарын хүрээ. Дунд зэргийн саарал өнгөтэй, алсад ухарч байна.
Типографи
12-оос 105 пиксел хүртэл · 10 алхам
- Inter — солих: Inter (native Google Fonts) · тоймууд 400,500,600,700 · Бүтээгдэхүүний туршид үндсэн текст, хэрэглэгчийн интерфэйс, тайлбар болон дэд гарчигуудыг оруулсан болно. Дунд түвшний гарчиг (36–45 пиксел)-д 700 жинтэй фонт, дэд гарчиг болон тайлбарт 500–600, үндсэн текст болон тайлбарт 400 жинтэй фонтыг ашигладаг. Inter нь илүү нарийн харагдуулдаг бол Wise Sans нь илүү зоримог харагдуулдаг.
- Wise Sans — солих: Inter Black (900) with -0.04em tracking · тоймууд 900 · Гарчиг бол брэндийн нэрийн хуудас юм. 89–105 пикселийн өргөнтэй, үсэг хоорондын зай багатай, маш нягт 900 фонт нь гарчиг бүрийг тод, тод зар болгон хувиргадаг. Тэдгээрийг бага хэмжээгээр ашигладаг: үндсэн текст, хэсгийн гарчиг, кампанит ажлын онцлох үйл явдал болгон.
- monospace — солих: Inter · тоймууд 400 · нэг зайтай - гаргаж авсан өгөгдөлд байдаг боловч хиймэл оюун ухаанаар тайлбарлагдаагүй.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | нягт |
| Үндсэн алхам | 8-12px |
| Товчлуурын радиус | 9999px |
| Картын радиус | 10px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 64-80px |
| Хуудасны өргөн | 1200px |
Хиймэл оюун ухаан таны вэбсайтыг Wise хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Integrated Biosciences — шөнө дундын биолюминесценцийн лаборатори
- Huly — Шөнө дундын ажиглалтын төвийн хойд гэрэл - гол дүр нь шүрэн болж хувирдаг нил ягаан өнгийн босоо туяа бөгөөд түүний доорх нам гүм хэсэг бүр илүү нам гүм өнгөөр өгүүлсэн хоёр өнгийн түүхийг зээлдэг.
- Dia Browser — Харанхуй өрөөний галерейн орон зай нь редакцийн сонинтой хосолж харагдана. Тас харанхуй дүр зураг нь нарны гэрэлд гэрэлтсэн сонин хэвлэгдсэн хэсгийг харуулж байгаа бөгөөд хэсэг бүрийг нэг сериф гарчигтайгаар тэмдэглэсэн байна.
- Mintlify — Шилэн ширээний дээгүүрх үүлэн цэцэрлэг. Гараар зурсан тэнгэр болон баримтат киног хамтад нь жаазалсан байдаг бөгөөд энэ нь хуудас нь цагаан өнгөөр бүдгэрэхээс өмнө өнгө, ойлголт мөргөлддөг цорын ганц газар юм.
- Gleap — Графит чимэглэлтэй дулаан цөцгий өнгөөр чимэглэсэн ажлын талбар - маалинган архитектурын дээгүүр царцсан хар бэхний цэгүүд хөвж байгаа мэт санагддаг студи
- ClickUp — Цагаан гантиг дээр хүчирхэг хяналтын самбар. Хуудас нь бүтээмжийн хэрэгслийн бүтээгдэхүүний товхимол тул харааны хэлийг бүтээгдэхүүнээс өөрөөс нь зээлсэн: нягт жагсаалт, төлөвийн үзүүлэлт, аватаруудын бүлэг, дэлгэцэн дээрх бүтээгдэхүүний тодорхойлолт шиг харагдах тод үсгийн мэдэгдэл.
- monday — Пастел наалттай цагаан семинар
- Portal — Twilight Serif Редакцийн нийтлэл - iOS хэв маягаар бүтээгдсэн, бие даасан сэтгүүлийн дээд зэрэглэлийн хэвлэл
- Slack — Тайз нь хаш ногоон өнгөтэй, цагаан гэрэлтэй. Бараан хэсгүүдэд гүн чавганы өнгө давамгайлж байгаа бол цагаан өнгийн зураг нь том, авангард бүтээлүүдийг чөлөөтэй амьсгалах боломжийг олгодог.
- Base44 — Шохойн маркертай нарны гэрэлтэй дэвтэр
- Letters — Задгай агаарт байрлах эмнэлэгт өглөөний цаг авах нь - зөөлөн цэнхэр таазны доор байрлах ариутгасан цагаан ширээ, мэс заслын цэнхэр багаж хэрэгслээр дүүрэн байв
- Duolingo — Зузаан тэмдэглэгээний шугамтай ногоон тоглоомын талбай