Vercel
Терминал ак кәгазьгә басылган
Vercel дизайн системасы - тәртипле монохром күнегү: ак төскә якын киндер (#fafafa), кара шрифт, нечкә чикләр һәм декоратив төсләрнең бөтенләй булмавы. Визуаль тел басма рәвешендә күрсәтелгән эшкәртүче терминалын искә төшерә - Geist Sans "героик" масштабта 400-450 авырлыкта һәм хәрефләр арасындагы ара -0.06em белән диярлек укыла, ә Geist Mono ярлыкларны, мета мәгълүматларны һәм код үрнәкләрен 11-13 пиксель зурлыктагы зурлыкларда куллана. Төймәләр - 6 пиксель радиусы яки ак төстә саф кара яки кара төстә ак турыпочмаклыклар. Система төскә түгел, ә контрастка һәм типографик иерархиягә таяна, өчпочмак билгесен (▲) һәм ике юллы сүз билгесен бердәнбер брендинг элементлары буларак куллана. Өслекләр бер-берсе өстенә #fafafa → #ebebeb → #171717 тәртибендә тезелә, күләгә яки төс урынына тональ кыйммәтләрне үзгәртү аша тирәнлек тудыра. Һәр элемент компакт тыгызлыктагы 4 пиксельле челтәргә корылган, нәтиҗәдә инженерның дәфтәрен хәтерләткән интерфейс барлыкка килә - төгәл, функциональ һәм ак бушлыктан курыкмый.
Контейнер 1280 пиксель киңлектә, үзәктә урнашкан, киң горизонталь тулыландыру белән (24-48 пиксель). Төп блокта асимметрик өч зоналы композиция кулланыла: сулда зур башлык, үзәктә бренд глифы һәм уңда "каш" блогы. Төп блок астында эчтәлек чиратлашып полосалар рәвешендә урнаштырылган: клиент логотибы белән тулы киңлектәге полоса, аннары сулда башлык һәм уңда продукт макеты белән ике баганалы "Агент Иҗат Итүчеләре" бүлеге, аннары функцияләре булган өч картадан торган челтәр. Бүлекләр бүлгечләрсез яки фон тайпылышлары булмаган 96-128 пиксельле вертикаль науа белән аерылган. Навигация - тонык фонлы бер 64 пиксельле бер катлы панель. Карта челтәрләрендә даими рәвештә 16-24 пиксель науалары белән ике яки өч баганалы макет кулланыла. Гомуми тыгызлык компакт - текстны уку җиңел, ак бушлык җитәрлек, ләкин шрифт зурлыгы һәм компонент зурлыгы битнең һавалы тоелуына комачаулый.
Рәсемнәр сирәк һәм һәрвакыт функциональ. Төп визуаль элемент - кара өчпочмак (▲) - "баш хәреф" масштабында калкып торган силуэт рәвешендә күренүче геометрик бренд билгесе. Концепцияне раслау полосасындагы клиент логотиплары һәр брендның чын сүз билгеләрен соры төстә куллана. Продукт макетлары (Notion чат интерфейсы, CLI терминалы чыгышы, паспорт картасы) рамкаланган карточкалар эчендә яктылык режимындагы скриншотлар рәвешендә урнаштырылган. Фотосурәтләр, иллюстрацияләр яки 3D элементлар юк - система ак кәгазьдә саф типография һәм геометрик формалардан тора.
Палитра
Нейтраль
- Obsidian
#171717— Төп исемнәр, навигация чикләре, караңгы төймәләрне тутыру һәм исемлек маркерлары - болар барысы да кара төстә диярлек, шуңа күрә алар тупаслык һәм ачык туендыруны булдырмыйлар. - Paper White
#fafafa— Бит холсты, открытка өслекләре, төймәләрнең яктылыгы - болар барысы да урнашкан стандарт фон. - Pure White
#ffffff— Күтәрелгән карта өслекләре, өстәмәләр, кертү кырлары. - Hairline
#ebebeb— Төймәләрдәге, сылтамалардагы һәм карталардагы 1 пиксельле чикләр югары масштаблау дәрәҗәләрендә күренә, ләкин түбән масштаблау дәрәҗәләрендә күренми. - Ash
#c9c9c9— Сүндерелгән текст, тавышсыз ярлыклар, клиент логотипларында бренд исеменең су билгеләре. - Smoke
#a8a8a8— Икенчел текст, тутыргыч текст, нечкә иконалар тутыру.
Типография
11 дән 64 пиксельгә кадәр · 6 адым
- Geist Sans — алыштыру: Inter · контурлар 400, 450, 500 · Интерфейс һәм башлыклар өчен төп шрифт - Vercel тарафыннан эшләнгән махсус эшләнгән геометрик sans-serif шрифты, зур үлчәмнәрдә хәрефләр арасы тыгыз (56-64 пиксельдә -0.06em, 30 пиксельдә -0.05em). Битнең өске өлешендәге башлыклар өчен 450 калынлык сайланган: Lightтан калынрак, ләкин Semi-Boldтан җиңелрәк, ул ышанычлы, ләкин артык тәкәббер булмаган тон тудыра.
- Geist Mono — алыштыру: JetBrains Mono · контурлар 400, 500, 600 · Язма язмалар, код блоклары, CLI чыгару панельләре, метамәгълүматлар һәм баш регистрлы текст өчен бер аралыклы икенчел шрифт. 8px/600px/баш регистр комбинациясе кечкенә сүз билгеләрен төгәл урнаштырырга мөмкинлек бирә. Бер аралыклы версиядә киң хәреф арасы (0.071em) баш регистрлы текст өчен җитәрлек урын бирә.
Интерваллар һәм форма
| Максат | Мәгънәсе |
|---|---|
| Тыгызлык | тыгыз |
| Төп адым | 12px |
| Төймә радиусы | 6px |
| Карта радиусы | 6px |
| Күләгәләр | күләгәләр урынына чикләр юк |
| Бүлекләр арасында | 96-128px |
| Бит киңлеге | 1280px |
Ясалма интеллект сезнең сайтны Vercel стилендә төзер һәм аны тутырыр
- Продуктлар һәм постлар белән Instagram, TikTok, Facebook сылтамасы аша тутырыгыз.
- Иске сайтыгыздан контентны күчерегез — адресны күрсәтегез генә.
- Иң яхшы двигательдә заманча дизайн: сервер рендерингы һәм SEO оптимизациясе белән React ( Next.js).
- Эзләү нәтиҗәләре һәм нейрон челтәр тәкъдимнәре өчен тулысынча автоматик SEO оптимизациясе.
Охшаш стильләр
- Headspace — Җылы кәгазьдә кояшлы сәламәтлек почмагы
- WHOOP — Төн уртасында лаборатория - кара театр бушлыгы астында ак клиник лаборатория өстәлләре, электр энергиясенең бердәнбер шәмәхә импульсы
- Together AI — Бозлык кәгазендә тикшеренү консоле
- v0 by Vercel — Токарь станогындагы рәсем. Төгәллек һәм функциональлек иң мөһиме, һәр элемент чиста, техник яктан камил өслектә ачык максатка хезмәт итә.
- Dovetail — Кара ай астындагы план — күренми торган график сызыклары, ак шрифт, бер шәмәхә ялтыравык.
- Glideapps — бер электр зәңгәрсу ялтыравыклы монохром рәсем ясау өстәле
- Timescale — Җылы график кәгазьдә инженерлык рәсеме
- UGLYCASH — Крем төсендәге стикер белән тышланган дәфтәр үзенең хаосын горурланып күрсәтүче кыю, максималист финтех атмосферасын чагылдыра.
- Sprout Social — Кара тактада яшел үсенте. Катгый монохром тукымадагы якты акцент, аның төсе хәрәкәт өчен генә кулланыла, ә ышанычлы геометрик шрифт юл күрсәткечләре булып хезмәт итә.
- Krea — төн уртасында кара галерея
- Evergreen — Зыгыр кәгазьдән ясалган кояш теплицасы
- Factory — Төн уртасында "сугыш бүлмәсе" терминалы. "Фабрика" - кара төстәге идарә итү панеле, анда фонарь белән яктыртылган хәбәр кебек бер ак карточка төшә - бүлмәдәге бердәнбер әйбер - эш үзе.