Stripe
Күзәнәкле пыялага индиго карасы белән язылган хисап китабы
Stripe финанс кораллары өчен диярлек монохром тел куллана: йомшак, салкын ак төстәге куе зәңгәр төстәге башлыклар белән бизәлгән, декоратив хром элементлары юк диярлек, һәм бер якты индиго (#533afd), аны төймә, сылтама яки иконка контуры буларак кулланырга мөмкин. Типография гадәттән тыш нечкә, 300 балллы авырлыкта - хәтта 56 пиксельдә дә - ул ачыктан-ачык корпоратив түгел, ә ышанычлы рәвештә түбән итеп күрсәтелгән кебек тоела; хәрефләр арасы зурлык арткан саен кискен кими. Төймәләр кечкенә, квадрат (4 пиксель) һәм шәмәхә төстәге тутырмалар яки иң нечкә шәмәхә төстәге контурлар куллана. Система күләгәләрдән тулысынча кача; тирәнлеккә күтәрелү аша түгел, ә фон төсмерләрен үзгәртү аша ирешелә (ак → #f8fafd → #e5edf5 → шәмәхә төсмерләр). Интерфейс тулысынча бухгалтерлык реестры яки терминал кебек эшли: тыгыз мәгълүмат, ачык сызыклар, бүлекләр арасында киң ара, һәм төс бары тик гамәл кирәк булганда гына күренә.
Ак полотнодагы үзәкләштерелгән эчтәлек багана өчен максималь киңлек ~1320px. Герой - тулы зурлыкта (56px) сул якка тигезләнгән текст блогы, аста ике чакыру бар, герой рәсеме юк - типография - герой. Бүлекләр вертикаль рәвештә тигез 96px науалары һәм 1px #e5edf5 бүлгечләре белән урнаштырылган; чиратлашып торган караңгы/ачык полосалар юк. Һәр бүлек кабатланучы үрнәк буенча бара: барлык баш хәрефләр белән кечкенә бүлек исеме (төтенле төс, 12px), аннары 32-48px башлык, аннары 22px абзац, аннары продукт карточкалары челтәре (эш өстәлендә 3 багана) яки визуаль сәнгать белән 2 баганалы текст блогы. Клиент логотиплары сул якка тигезләнгән тар вертикаль полосада күрсәтелә. Аскы колонтитул - күп баганалы сылтамалар исемлеге булган бер киң #f8fafd полоса. Гомуми ритм әкрен, үлчәнгән һәм күбесенчә текстлы - мәгълүмат тыгызлыгы, озын скроллинг озынлыгына карамастан, түбән.
Рәсемнәр тыйнак һәм документаль стильдә. Тулы бит фотолары бары тик очракларны өйрәнү бүлекләрендә генә күрсәтелә (мәсәлән, Hertz өчен һава хәрәкәтен фотога төшерү), өстән яки драматик почмакларда, табигый төсләр кулланып төшерелгән - дуэтон яки төс эшкәртү юк. Продукциянең кулланучы интерфейсының скриншотлары функция карталарында кулланыла, кискен почмаклар һәм ачык чикләр белән, җайланма рамкаларысыз күрсәтелә. Партнер логотиплары үз төсләрендә, бернинди контейнерларсыз күрсәтелә. Иллюстрацияләр, 3D рендерлар яки декоратив абстракт график элементлар юк. Иконалар бердәм: ак фонда 1 нче юл калынлыгы, 2 нче юл калынлыгы, геометрик сызык рәсеме (шевроннар, уклар, галочкалар, документ символлары). Бит, нигездә, текст һәм ак урыннан тора; рәсемнәр гомуми визуаль мәйданның 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 — Җылы пергаментта җитештерү корылмасы рәсеме - тыныч, монохром күренеш, анда сәнәгать масштабы һәм нечкә типография бөтен брендны гәүдәләндерә.