Stripe
Царцсан шилэн дээр индиго бэхээр бичсэн дансны дэвтэр
Stripe санхүүгийн хэрэгслүүдэд бараг монохром хэлийг ашигладаг: хар хөх өнгийн гарчигтай зөөлөн, хүйтэн цагаан зураг, бараг гоёл чимэглэлийн хром элементгүй, товчлуур, холбоос эсвэл дүрсний тойм болгон ашиглаж болох ганц тод индиго (#533afd). Типографи нь маш нимгэн бөгөөд 300 цэгийн жинтэй - тэр ч байтугай 56 пикселийн нягтралтай - энэ нь илэрхий корпорацийнхаас илүү өөртөө итгэлтэйгээр даруухан мэт санагддаг; үсэг хоорондын зай хэмжээ нэмэгдэхийн хэрээр огцом буурдаг. Товчнууд нь жижиг, дөрвөлжин (4 пиксел) бөгөөд нил ягаан өнгийн дүүргэлт эсвэл хамгийн нимгэн нил ягаан өнгийн тоймыг ашигладаг. Систем нь сүүдрээс бүрэн зайлсхийдэг; гүнийг өндөрлөгөөр биш харин дэвсгэр өнгийг өөрчлөх замаар (цагаан → #f8fafd → #e5edf5 → нил ягаан өнгө) олж авдаг. Бүхэл бүтэн интерфэйс нь нягтлан бодох бүртгэлийн дэвтэр эсвэл терминал шиг ажилладаг: нягт мэдээлэл, тодорхой шугамууд, хэсгүүдийн хоорондох хангалттай зай, өнгө нь зөвхөн үйлдэл шаардлагатай үед л гарч ирдэг.
Цагаан зураг дээрх төвлөрсөн контент баганын хамгийн дээд өргөн нь ~1320px байна. Баатар нь зүүн тийш зэрэгцүүлсэн, бүрэн хэмжээтэй (56px) текст блок бөгөөд доор нь хоёр үйлдэл хийх дуудлагатай, баатрын зураг байхгүй - хэвлэмэл нь баатар юм. Хэсгүүдийг тэнцүү 96px ус зайлуулах хоолой болон 1px #e5edf5 хуваагчтай босоо байдлаар байрлуулсан; ээлжлэн бараан/цайвар судал байхгүй. Хэсэг бүр давтагдах хэв маягийг дагадаг: бүх том үсгээр бичсэн жижиг хэсгийн гарчиг (утаатай өнгө, 12px), дараа нь 32-48px гарчиг, дараа нь 22px догол мөр, дараа нь бүтээгдэхүүний картуудын тор (ширээний компьютер дээр 3 багана) эсвэл дүрслэх урлагтай 2 баганатай текст блок. Үйлчлүүлэгчийн лого нь зүүн тийш зэрэгцүүлсэн нарийн босоо туузаар гарч ирнэ. Доод хэсэг нь холбоосуудын олон баганатай жагсаалттай нэг өргөн #f8fafd тууз юм. Нийт хэмнэл нь удаан, хэмжсэн, голчлон текстэн хэлбэртэй - урт гүйлгэх урттай хэдий ч мэдээллийн нягтрал бага байна.
Зураглал нь хязгаарлагдмал, баримтат хэв маягтай. Бүтэн хуудасны зургууд нь зөвхөн тохиолдлын судалгаа (жишээлбэл, Hertz-д зориулсан агаарын хөдөлгөөний гэрэл зураг) бүхий хэсгүүдэд гарч ирдэг, дээрээс эсвэл гайхалтай өнцгөөр авсан, байгалийн өнгө ашиглан авсан - хоёр өнгөт эсвэл өнгөний боловсруулалтгүй. Бүтээгдэхүүний хэрэглэгчийн интерфэйсийн дэлгэцийн зургийг төхөөрөмжийн хүрээгүйгээр хурц өнцөг, тодорхой хил хязгаараар дүрсэлсэн онцлог картуудын дотор ашигладаг. Түншийн логог ямар ч савгүйгээр өөрийн өнгөөр харуулдаг. Зураг чимэглэл, 3D дүрслэл, гоёл чимэглэлийн хийсвэр график элементүүд байхгүй. Дүрсүүд нь жигд байна: цагаан дэвсгэр дээр шугамын зузаан 1, шугамын зузаан 2, геометрийн шугамын зурагтай (chevron, сум, тэмдэглэгээ, баримт бичгийн тэмдэг). Хуудас нь голчлон текст болон цагаан зайнаас бүрдэнэ; зургууд нь нийт харааны талбайн 3%-иас бага хувийг эзэлдэг.
Палетт
Брэнд
- Indigo Ink
#533afd— Нил ягаан өнгийг дүүргэсэн товчлуурууд, сонгосон навигацийн төлөвүүд болон фокусад суурилсан хөрвүүлэлтийн мөчүүдэд ашигладаг. - Indigo Hover
#7389ff— Нил ягаан өнгийг холбоос, шошго болон богино хэллэгийг тодруулахад ашигладаг. Үүнийг үйлдэлд уриалахад үндсэн өнгө болгон ашиглаж болохгүй.
Төвийг сахисан
- Midnight Ink
#061b31— Үндсэн гарчиг болон үндсэн текст нь гүн, бараг хар өнгөтэй, хүйтэн цэнхэр өнгөтэй бөгөөд энэ нь бүхэл бүтэн фонтын системийн үндэс суурь болдог. - Slate
#64748d— Саарал текст нь холбоосууд, шошго болон богино хэллэгүүдийг тодруулдаг. - Steel
#50617a— Нэмэлт текст болон туслах материалыг дэд лиценз дээр ашиглагддаг бүдэг ягаан өнгийн болон бүдэг өнгийн аялгууны хооронд байрлуулсан. - Smoke
#839bc8— Том гоёл чимэглэлийн гарчиг болон дагалдах текстийн хувьд бүдэг ягаан өнгийг ашигладаг - үндсэн догол мөрүүдэд хэзээ ч ашиглахгүй. - Pure White
#ffffff— Хуудасны зураг болон хөзрийн өргөгдсөн гадаргуу; бусад бүх зүйлийг хэмждэг анхдагч дэвсгэр. - Mist
#f8fafd— Хөл хэсгийн дэвсгэр болон хуваагч нь харагдахуйц хил хязгааргүй хэсгүүдийг тусгаарладаг нарийн хүйтэн сүүдэр юм.
Типографи
12-оос 56 пиксел хүртэл · 9 алхам
- sohne-var — солих: Inter Tight (variable · тоймууд 300, 400 · Интерфэйс дээр бүхэлд нь ашигладаг цорын ганц фонт нь гарчиг, үндсэн текст, навигаци, товчлуур болон шошгонд зориулагдсан. 300 жин нь 56 пикселийн дэлгэцийн хэмжээтэй ч давамгайлдаг бөгөөд энэ нь өвөрмөц онцлог юм: гарчиг нь хашгирахаас илүү шивнэж, дууны түвшингээс илүү хязгаарлалтаар эрх мэдлийг бий болгодог. 400 жин нь навигаци болон товчлуурын текстэд зөвхөн 14-16 пикселийн хэмжээтэй харагддаг бөгөөд жижиг хэмжээтэй үед уншигдахуйц болгохын тулд нэмэлт зураас шаардлагатай байдаг.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | зайтай |
| Үндсэн алхам | 8px |
| Товчлуурын радиус | 4px |
| Картын радиус | 4px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 96px |
| Хуудасны өргөн | 1320px |
Хиймэл оюун ухаан таны вэбсайтыг Stripe хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Ui — царцсан цаасан дээрх клиник төлөвлөгөө
- monopo saigon — Редакцийн нам гүм байдлын цаана шингэн, солонгорсон гэрэл тодорч байна - хайлсан гэрэлд хөвж буй монохром редакцийн галерей
- Ventriloc — Дулаан цаасан дээрх өгөгдлийн редакцийн ажиглалтын төв - дан улбар шар өнгийн хул нь монохром нарийвчлалыг онцолсон
- Hyer Aviation — Илгэн цаасан дээр бүхээгт үдшийн бүрий. Цэлмэг үүрийн тэнгэр их биеийн хэмжээтэй сериф логотой нийлж, ганцхан дулаан шавар өнгө нь монохром хязгаарыг эвдэнэ.
- Family — Цөцгийтэй илгэн цаасан дээрх үлгэрийн хэсэг
- OFF+BRAND. — Дулаан илгэн дээрх солонгорсон бөмбөлөг
- Geniestudio — Зөөлөн өдрийн гэрэлтэй дэвтэр - өргөн хүрээтэй, нэг зузаан үзэгний зураастай төрөл
- xAI — Хар эмтэй дулаан тосны лаборатори
- Seed — лабораторийн шилэн доор амьд организм
- Cosmos — Маалинган даавуугаар доторлож, Полароид хээтэй өлгөөтэй галерейн хана
- Cal — Монохром практик байдал, хүний хандлага. Хатуу хар цагаан палитраар дамжуулан тодорхой байдал болон функциональ байдлыг чухалчилдаг боловч ээлтэй хэвлэмэл болон бөөрөнхий хэлбэртэйгээр зөөлрүүлдэг систем.
- T1 Energy — Дулаан илгэн цаасан дээр үйлдвэрлэлийн байгууламжийн зураг нь нам гүм, монохром дүр зураг бөгөөд үйлдвэрлэлийн цар хүрээ, нарийн хэв маяг нь брэндийг бүхэлд нь илэрхийлдэг.