spain44-bot/design.md

16 KiB
Raw Permalink Blame History

Design system — Vibe42 песочница

Базовые цвета и типографика для лендингов. Можно отклоняться, но начинай с этого.

Палитра

Token Hex Использование
--ink #0F1218 Тёмный фон / основной текст
--cyan #00E5FF Основной акцент (кнопки, лого)
--cyan-50 #E8FCFF Светлая подложка для акцентов
--white #FFFFFF Основной фон
--gray-500 #5B6573 Вторичный текст
--gray-100 #F2F4F7 Сепараторы / тонкие фоны

Типографика

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
Уровень Размер Вес line-height
h1 (hero) 56px 800 1.05
h2 (section) 36px 700 1.15
h3 22px 700 1.3
body 17px 400 1.6
small 14px 400 1.5

На мобиле — h1 уменьши до 36px, h2 до 28px.

Лейаут

  • max-width контента: 1140px (контейнер с padding по бокам)
  • секция: padding: 80px 24px (мобила: 48px 20px)
  • gap между блоками внутри секции: 24-32px
  • border-radius: 8px (кнопки, карточки), 16px (большие карточки)

Кнопки

.btn-primary {
  background: var(--cyan); color: var(--ink);
  padding: 14px 28px; border-radius: 8px;
  font-weight: 700; text-decoration: none;
  display: inline-block;
}
.btn-secondary {
  background: transparent; color: var(--ink);
  border: 2px solid var(--ink);
  padding: 12px 26px; border-radius: 8px;
}

Стартер index.html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Мой проект</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAieklEQVR42u17eXQVVfbut09Nd0xyM5IQCKNAUBSDotgaHFBRtNU2OODYYFQUBREVRJOL2q1tO8+IigpqJwh249gOEKcf8hMZhIDMGUhIQsice29VnbPfH7koo6Jtv7XeWu+sVWtlVU7VPWefPXz727sI/91Bv/B/3mduUdGB88NhPmDegc/+1xb46wYzFYwdK1BQgAIA69YV8KxZQimlSJBgEKCUIgAgIt7/WWgaQ6muZRF1rY4IcF0tvmHG/s/9PzB0AAK5MON/EwAx6opRfmYmACJ+H6lAZnbf7H4ZPTN65wLJQSAFQHDvlwUyj0jNzMv0gQgA0++xuN+kOUVFRRQOh9Ve97Qxl13Wv0e3tGE6jB5ey9/HMPUUBroBkPGNQpCISaUSdzftXjrojOP/AqAx7bjjhvCVtxSrAUN6dyhpKMuLSp/f8ezeGTGldEUssl5s3lyjtqxeE3nxmfJoLdoBxACSXasRAKv/OyZQUFCglZaWSgDIzc01h/9h5PGBoG90wOM/VRd6f0nwsFQeIYQuBIGI4hreZbaW5UFLW/OO+taGK15d8sXXObIjq/nBN150jjvxDMQklKUDBLAAhOQ9JgDYMbBExGptbDTKV1fK7/6nzNha/mno3X8u/wFQOH+AyNhuqbo1ayIA1H9FAEVFRSJ+6kbhpEmnG7p1c9DnP8PQDUspBWYoADYR6USkAwwhBAACgaHpOpqam7ev21Q+7t///OfXOUBSywul82PnX3yOijoOm4ahGQAb2EtogIoCQiqGJgiq6x96NAazektErlv9mbn4zc/UR+9+sBvYmDlmjFX77rudv7sA9mx+XGHhsanB5Ck+j+9y0zSE4zguwJKEphmapns8HjS3tXUyVDUARUA9CYpqShkxV9p1jXVPvPbiix+cDVjfPv3aw7Ezx05yiKUKeTR9S3W9tXXj/8ayciIwdFfEoiEoaSEj43g7MeQlVzL7DQECOAZJAFEAwlq7yTVWLl9IL/197q5Vqz5DYaHKnT2bygH79xAAxT2wGHfthEuyMjLvC/j9fW075igFFoJMwzDQGenc5dj2xx6P96um9qaqqBvZ5tW9bltjY2Ob1ma7Pj+tXrk1Wr1sWQRAIO2Rl++yR10wIxYIOOwxdL1ye9S34PUbfX+/t6QSiA4HvNUA3MvG3dg57ZEHYmmpJixNGCtXVWlKdXDfIwbGggHAdiWbOukKQl/1v9Xm3GdepNJXZzeMGtKGj9d0/lK4PAwnyAAIV1038dbuGd1mCWJ/LBaLEJFpGJoWjUU3t3a0z21sr//X52s2bI5v8KAjc8wYXx8gse3m26+PnXDqHbHkkGJWmlVXL7z/euvp+r/fW4ppDxmJdo1n2UnXdXZ/5Iqctlv/coNMzfAwoDzbKx3Pwpce0Hc2vG8fd/Io/chjbnAGDDnOFgE4Gtky77hsChXda/Tq7cXDxX+FEIyusMu/SQP2qP3Nt0y9ORRKfkopyUpxTNc1j1SyqaW5+cWV679/4utPPqnZ6xl9cPlgLkUp4o6SAaB88GBaOnaslyZOGRe9/MZH7cw+XmWSa7a2CP97JU/W3XHDdDDbKQMHBjo9ngRvVRXRU2/Mj5505iku3KhmGob33++9rK4ZM60JaMkEfJzkSePCGcM7Lim8V2akDpak2QAMb0Mdmy89Ntt+6qEZvry8WO2KFZHfApwIAK6dOPEPd9w1c8fMe+/ju+4uihaHH+Q7pt+z9fopU87ZF8cw/YxACYCWcdb55ya8v6LVqmM2q6Xtr3Q57ZWFz6cAQeTlGShhLWPqa/5Qn1Bi2lPz3whsjLBZJWOeXcyhd79Zk5d3RCqYCSUlWhcO6NLgjD4Dj0yb994//Fs72ax0lbmDVeLySpVy68wHMgB/Tn6+51cCOiZmprPGXZh5+50zlt1b/ABPv7s4WjzrQb7z7qLlY68Zd+weDfnFl+Xn6wCQlN3rlOBHq9daDczW1pjjq2FOK/mkLKlbUo6/z5D0xKNzkgAgE/ClzHzoicCGJrYqpGtVs0r6aGVN1o2Tz+uKjyz2iskaGAQgwQd0S3t6/hzvD+0Rs0a6Zh3LxC82daadetaVEKILaR7uycdPE4UTb545/e5inn53OHZP8QNyxj2z1l06fvwQACgpKdEOAzRouDrHEzTN/qlz3l7irWY2K+2YtZs58d1vv04ddNTJEAIAfMHk4PDUex+ekrr460/8K3Z2WlXSMatcGVzT6GaMvWJ+EpADQKSlpQUA7PltLXVwvzEpQ4eeHsgMpPYDrNQ5i173VTpsVnPUqpOcsKBsST8gDczUr18/67CADgBcP2XK0XdMv2fbjJmz1IyZs5y7ZhR3XD9p8lgAeOGFF4zDMqE41E0P/+3B4Jpd7NlqR62dzMGy9VvSzxw9CkDAC2SnTZ55ceify9YHvqtTvi02mzuYzQqXzSqpPFujtm95dUvqU/OWJV9YcHECkBzXAtGtcOKNCR+tbEv6ckt96pXXPe3zITMzJWVgyqLP/8dbw2zUcSywdpedctNdt8fXo/1iFCgpKWEiglD62R7T08uVblTXdasjFvvkhaceL2FmQUTuYQAHApHqfv7Yke2nnHeFnZyioJRmba9q973z+iM7//3B1x4PUoIPzL4pesroG5zUrARmlmRpmtnSwsrUHQKZbpLPkN7uRnvG5cPNoSPmWYOOnRcIBu9qz8zsdI/9Qy4GHh2IEgXMG6Zf462tWFf7yb9fzv7Hq+FI34HzKJQScrNTBE489YzUec99uqt46ff7L3N/iVA4HOYR558f7Nsta7Ll8QyQSpFUsq2+bdfEVcu/rQJAZWVl/Iun//nnnJycnOAUTn3QPeGU4yVYWm3t5Pt0wUN1s6Y/6wcCgTv+8rB90dU32IGQASHIaGsWoqriS9/3y99IaKx/w6ja/p3qsA2h6T1k0EtuMCToyGF5VmpKgvFOyVIr90iyew04100O6iqYaFmW38OLSz7avXblyqQRpx7r5PQ9SrJQph3rrTfv/qTzmSmbwKwQDh9cA+IJDvfNyekHQUMdx2Yi0hzb2TD3qee+ZmYiInUYXhQggnHGmLzYgKPPtHUhCdCNjWtXRIsmL/YmJ4dSzr84vfniP59pe4IKphDazromz4dvPandM+WVnUA9gAgAvSfwWvT+J86PjPzjZHtATk5UeByMHHODeemKH7r/LfzMtqNPetVNSZyoAn5E+g461pd3/PG5kO9VfP/tQpx85iXkgpHdV5e9+g4EsBDavme+jxcvLi5mAEi1AoP8Xl93pdgBM6LKLmNmKi4uPjxPKgQDMO28k/KdIwb4RMRmIQH6fvn9LZ1Z6yK7d9fFbCfL1YQuEjSh1dVWBF/52xUN90wJ72Tekcfs5jEb/caN81XmF9TXz7z1ed/s++8wK6q3QSjd7p7NOP380Rv6DAl55z7+OkXsKtYBhJISzbMu6rlixQpH27RyqVWzrRJgzfGaUMHkUdlAchff8FO4PigSJA2JmqYRkcPMzC7kt0TEzIzwXurzMxpgdQsEEtz+g0dICFZ+Q/d/t3yrb9Fry49EhVtG5NoLX1kdOHnUROT0GaX+VVqqP//YUjDrIHJWAKIbkCIATxDo9D38GrdPu6rMP3LMqyohqdhJCnBk0JCj9K1rhnQ2bde5rd1ERggQQiAlyQsAaN/SIRoaNlDvfj2lBqBnTtCfkuKgsXEfNmkfAexhaYhokJQKAAQzI9oWixQVFenFxcUoKChgACgtLVWHQFcEwLbz8vpyStrJcBwWXoNo+9ZPoytXtpYBLpjRFEUVbrz8TQD/yM6GVQ3EMok82jU3nNbRLfsPnYGkI8kwehvffb2w49GJz3YQ1SWuW7meBh3bhpRAEIaZYN045So3L78XQkndWEFx1HbE92uaAaD+4zUdoT+3bIaOM+ECIiExtaP/0Qlo/Kxtr/zmEBog9vbyJDVXrAqHw+6BWQITYX+Kihhg4iHDejqhVIOFpjyNnYJ27ljdALRDCMTVECgqEpm1KzzVs981M8674PT2SydeoSWF/qT6D9ZjqV6QAjxHDz/CLF/+NWrXfypst5V0rZM6VYCTQmbslvCVjicApSlXCOhmbeVaa+6ziyA0QEnIpqZdEAAUmHXdjKQLPqxkyBCGBBgEYhALX6Jn5q233d4JEpFopHNTe7St6sstq1ZQGTUfKnfUehzRP+r1a6yBuX23Y2ruRgCAlAJdjpQQDqtawEy5cco0+9zLb3WOG+aPMiTZSlKH1GBoIKCGYzLaxQ52KEXCJCGINVOPaQAgQZauezZs2uZd+NLdW3Nzm7FhQ9fx+nzN8fUoeBNSzcQ++t4J3iEF4DiOaZkWYo7NmqYh6E+4HmCwYngtXzSEFOe8hLTqXb2GPLa9dtPby/69bHc8Qvwk4WBSX4ABjyDu7KzRdtTt3J/NTQGC2oz7b7LPufSuaE5fQsR1NIKht7VJq7FuNeqrl9DiRYs8GzeuaCoqEh1vvLTOf/rFb7pu5DS4MgWsdLBqFeVrvsSH77xY+86bX8XPm0AEcuyMLm6INTa1WqO5Sds/B9QPagEa1Uup4LqSdV0HKxUjQAFEQpAA4E9MSBwUDCbMTklMm5KRNfB2InofAEEpgIghNAFmQAOE6+zS6srb9oq3AuGwoiuuPtcefcnMWFYvYpYQ0Sj71q740Pzw7eflnKeWeYGWCiCKEtbw3jWG9IQ6cfv504P+HqJdRrrZRGw51Np9w4bIaqAZvIdLAhUx46n572dDARAE0dokVUOj/bMmsOcUO6PODk1YsEwDuqYpQcLSdK0rvANwpQslVRTMempK6iC/z//8hAkTzp8zZ86qOJHdxdgyAQwoj8VWj7SfxF5eqvuBJBpVcLfdo49HGsLVo+0R78LXnvLOuOmRaqAVgJtftESvWDrXg7EUBSBbgCgA7MZuAOgEYLcB2q49HCCR82M5AdBSPvomBNUF97ip2RY1NernBEBExGdPOtsyNLpISheu6woSmiFV9BtyaGN8vqsUD/JYvmEaKziO43i93h6WP/G53BNyzy0XYjcDoICvmQ0BMEAxO9BexyYAYPZsHaXltrdg3JhI/6P6KwVptrfr3mWfz8GMm/5aPeURieqXBBasR1n4VKQEvaNo/M3H6P1zAcVKRdr97DgmaWKPqvOemoKWmbnbbW5NVa5MED6/iGT0Ohm2VBTQhGpp3GRXbnD3N8MDTMDXFBpDWfp5rus6gDBbW5s/aovtKqz8obImPT1d1NfXq+yhA9ISY4mXew1rCsBZzBxLSkg8YeTw0RPLl5XfnwcY1S2NW0hKZgkipbIoJT0EAHmFhVhx/fXQTxk1gAN+ixMEY33dD95nwk9VCr09+MGLKW3r1zeBKJQ55c4p7edcPp6DoSz2e36yXRIQdnwvrH4kT0kTYAjAY4J1Adf0ASxdYk2oxt0VO/PymvHdyn0o9H0EkJuba2an95gEZihm19A1UnCLX5/9emU85HX9allZLYBHbp5ye50ujFeiymYhNCVA1571p/MWffT24vL0HVURKCZISE7PTIhmZPcDsGxFl7qSm5zRH74E6B2SPA07yiuXL9+WNnFiILb0OwaRkTH57us7LrzmHqdvPygBCQsa9iAPGwyOMwEGBKirNLD32TIBsAGKOgQJ6IFAt/wVK7gsO9uL6urIPlA4ngLz8Pz8S4XQRiilbF3TvLYbnb0+ec23RUVFgrpMmwBQQUGBxszUltCwQLF6R9N0j5Ru1LSsPgP6DDwDAItN634wWxo7hOOSnZEC1zBG5+fneACINMBvZ/SwlNcAOjogoDaBCA0Tn7Fby5ftTi2cekbnJRPuiPXux+xKW4+5tl7TtMGo3LXR2Nm0TcRiLimXRKwT5s5dO4zqxh9Ebct3Wm3LCr226TutrvVbraZxo7azrpUNSyhbsTxuxDmrzzrn3Pjm94HClJuby6dfeUFK0Bu8WpAwSJDLSja0Os2vlYXL3PSCdC1e3UEcBcri4mLxavjV6MQpE6eTS310oR8rpWQhtBgA9Phy8bqtl9+4mrp1H8E2WMvpe94ukdodurElDaBKy+slHYqVIrQ0BcBs4IUnKaXPgGHyrPMecXJ6hURHxNWZTWvpB68klDz/mMrIsO3hoy5tOfWPM5xuSWSs3diUNO/RO6i9/Rt93fL2hLbdsWh7i9S8CQb3zwvuPnbkeR3jb3rK9ieq6IABVuDcccXJWzau2L1lS3WcU1CiqKhIC4fDqn9qz7MEiT8oqRwhhK6ABd98/OXKeCVIHVi0DStmpmcfe3ZzRyR6lSudtaZlknKVDgBU0+bQ5q1v60KAWUn7+FMDNTkjJqRo7sBywPF//79fCBtC72gn+f6iBiDky3jq1iyeOO1hZ+iIAdQWsZHg1c1vv3gfhRf/dSvR1u3z51c5KRnD4bFMGADHnC0tL730UVViYuW2QcN2ra5oaf6hEW3l46e0rl9aVuFf9Orr9MP6DylJFxSV0j5p5GAkhi5KYQ6iXz8DAMSs8Cx3woQJ2SZZtwqhmUII3XHs6sam+mcKCgrcgoKCQ5aiiYgLCgq0Oc8+vq4j1v4nx419RWAvAIwG2mnH+n9p1dUbSBe64/cyXTD2Otkv9wgALB+843l65m9/1N6aM9rduOZxoImdqUVT7VEXjnQV2+zzmNaGH1aIR2c+sGvUqBp88klH+jXXj4pm9/2DtLwwdra5vtbGhW1FRU3BLfUJSatXD0475ZSrUnr1GpATDusJw49P3nrllW3WsrKn9S072pShCTc1Qxfjp40TQDo2bbJ/rFeOn3jzLTPuuY8nT53eMWXaDDlp6rS/7k2NHy6NNn7ixH6TbrttKACR8ucRwXxAD76zbIqnwbHNHTLq2+ao5OdKlof8/sFg1vIAIxvwAtAy/lQw1v/1thbPNim926Sd8NXmjvTrJ42LAxQ9tWfPzJQX314c2BRlz3bpBL7atjNt5MizAGiJiVaftL8+837yF5s4+dl/rErNyRman5+v4/33rbMBK7B0wyueXZLNGrYDq+s4fdKdfwXgQwlruOiyiwbedOtt22+bNtOdPHW6M3nq9OiEibfcXzBu3LljLrjgzN9eaCWAmUYB/tCSDfM9O5mNHWz7fmjl0L2PlHqBLFx5ZUpCdnZy4lHH5iUvLNvo3+Yqz1YnGtjUyemPzvkLAM8edJf+wONXJH5TxdY27vRtk5zxwluvA7AAIK2g4JiEb6tbrR3MiV9u4fSiv58PALklJSaIkHPnnUODK2t3WDsUe2uZQ6++ty6UlX4ihIBITe55it+XmKOUdOJY3kgKJt6dlpL+TnZ2r4UTbrj5/riqHE63x161ga7M+mPmiH/R3Mc92ys3aDFHd5OCrvvHyy7yXn3zFN/rr5usVKp2W9GdsWNO7C+ldEjXLX3zure9t014st+kSQygK/Q21HtgemxKg1ev2rLa/Pd7T+QVFioARAOPSXN8iQY5ikEMzXEIAMrjjrvioYdW+rZufpJcyS4rFTvpxFx17bRzoZQQzDICKBCRBZBBRMJ1Xcdj+ZTPG/AGAsG7/3jZ2LP3SaF+Xgi8l5NQKC2l6icfXGG9M/cZYTtEMaU5mZkkCydf7znt7OvM08ZMdI858SKXySFNN72VW75OX/bmDRVFXG9++mkcfEN4l7y3wFj67s3m4vcfS/j0lSv6vP36qsBlLzAA1jN7DyGWhvIKUq0tTWLDytaucAVAKUo4ITfZvezkd6yGneXCBbnJIcawEZf2OPuC3npHc+O7hm5MNyzrdGI1AEwJRORRSom49PXUUHJOPP8H/dqWgrFjJZipjuiF5GEna5FhpzwqXamivfsGvdMeuJNMj3KSQoCmGVZ9bXXos9JbNoYf3QV+hMrv22BDCECAK9asacaUa188G7A+BGLVzDoIshuQY2f3vhqWVxMaQLazQXvvnxUoKNBQAICIdcCn5x3fT61c1olzLya0Sxe9+/SR+Wf21t94440mAA/2O7vfY0emHRlITcxO8Jre6Zbhuc51XRsAdKHb+6XRv7LIRgwiJ3jxaS9gwWfDoieOvMJ1pRMZcqwPrBhKsSajkso+fNy6d/r3iUf1DCUSoRkgBQiNu8xAAPw54A0ALhGx1a3bYPeGx+7tzOk/WBqmbTZGNM+OrR9VxmIVISDQNHZsS/JpZ46isy++wR520mnRnn2TYNsODJ2dbt10NyvrJyi8+cPNsc3YHAPQeE3hDZXeFN+PW2b+z3txoBRVjB7Naf+Y84iVltUfvQcMd13HJSFIkLKtzz9/w5o6fkE5YIcC3U/tCE++RktKDWiO42dNi+zhGiwiZik1YmXFuvfM4WNG9FWmZQuCKaq3rvV9smAuhJBNCxa0hPLP+AOunjw3esboLJvBxFIhoBlGFPCuXL7A89XSdfpBPDnpht47HufBzD9xx/+JGIg4+4QCUf3hG6uyM7Jvccbf/rZISesOBhlVVQ2++U/O3wGqyM0/JVB3zdQJ9uljLmamHyn2AzyNBrg6gLaoS4ZmmjVV9dailx7avnBhNUiAmSn1wiuujZ4+OsuR0ha6ZpptkQhtrfhM29nwr26PTvrX2m/WNhyMEFGmbn7iuvZFAAV/alT5z0f1stIImPVqouVpo857OeL1zXADfp2jHbouZRRgGtzQYO/sltXgWARqiUiQOHgN0gaEdJk9Xt2s2val538+u7fu6cc+R1ERIxxGMUCqX262q0NBkunZsLYmUP7ddYkzrl5W3ordTSgSKPrTAYQIiAjbqjdv6tW9T73XCiQys1K/hwnsGUuXAkJA1NbUc88BhAR/vC9QMgAuLS93k+b8/fngrUW7XF9SKkm3iz/cK4VlAhMLTbh2i1az9QtP6ewVFaWlO0ECe6o+SwEBZh2KBVkCtG7l1xMmXf1huIsy0yCERJgPTotnZWRflRAIHWHb0egesPG7jY0bCUqBo44JdHWDAYCxF13WHA6vwdtvrckGvDuACB0kzu7X9mHhhGwvlv2U5m7PydEFS8lEEDYgTJ+an5wcQGNjG4jkQStDe5xdMJCwwnUdyUwaAOimIX+35tRQYVfBwesFhIjjPGIikwEgH0uRW1Rg5vMSXRYVEheUaIqZFDOpLp9EiPcv7CE/AcT23jwAnFVRIYWUnSCAtXij2u7dsf07TffXAABARU31B1mpGd94TN8IKV2pOUiKl87oV4rhwPlpSwkAFMfvc5eDjMQXVjbrczfEnNjw5Ecnhppav63F7E4gTn3tCamHMb4ELCZ0kaIesJK26AQCAMX2XtJBE51F8+Y1KZe3aPFCYnNbS/aeFPjXdg8fcGfkyK6WSSei77OZuA1kB4PJxt9mP6Ze/fjVxgeefTNl6NDTc4mMzDGFvkOt92A5yc4xF4yQicmDoCBJgSBVxXVA0/6R7OBdYrkg0uLFQECZlufMK8cX3uM1PFL9bE1UKE0TLjSIzvb2yJJvPpxX+X1l08Gj4r5VGpZSAEDk9LP78hljru1MTAcNPf4MMzX1yMZ5z0yvf3f23ENq1YGVaV2cc9n0zl5H+FiDtGp2SWvjuvIw4pz1XoHtoHUBFMDV2oQjhEYkyA4lpAzWdX3W4QZEIkLAG8QZJ54dfPn72X/Zp4S2tMsEyOePQSnxI88ZT1wCPTM3tUo5X5jaOBWN2va5Bd1ERtbfUnvMzaA1n86tL6+ow8kn6wVlZVy6F0u19+mn9unTOzY8f6A0degCmtixfV76O/MX1uXkm9i+dB8/sL9KcVFRESEMJUktkdJxHNf1K6Vsx3Firvtzlx1znK7LtmNRZkZiQvLpAFBcdGBZXSqpAcRxJp9Z8/shBCqeeKJZTL/pDs+2Hz4XpsfkzqgbGXJCqnNZ4YPIGzUzTakAL10q1xUUaPnxBqz9ulLYHDjQ7+i6zgZgNDTBWLXii+8rK5uwfamzvw8Rh6K6GgKV/4hG2m8k8NqYYxsADNuxDVdKA4DBzPtd0ABoRCSEEB7XcZZ1RiL3xd/JB2tFQ5zYVcRQssMECaCoSDRuWr3bO2vqBM/2zc8KACRdih59XNT+89TxmHTHc6lEA8pLS9X2Xr30rk5xJnQRNwLMpGxbF0oRCGA7wqqtrYtTj2vfL/qAOB6wAbx07Y03LmEZ8Uuv2aJ1BLhZtQW9RiAihC6VcjXTQ5FYR8doQ/M867E8ZFqW1dbZfntVbdW8xW+9VXcoZygSghEITTKgk6GRoZkK4K4vRJjtHUSbsj957x5RsqQtcuSwyUrTPdHuvaX687QrjOy+Q1JLXp7e+uqrX6UBegORUwC4pYBCOOxz8vLy4LpWF2hQpKcmNB3Kb+i/FMJeee65rb9k85dcffW2BL/BtuuQ7uro6Gi3F7/1Vt1e3eUHKkBbhwdS6mAArtKovbMdUgIFJQJEEkVFojocbhoy9tT76haVbWgbfNzD7PGk2sHEmHNp4RAzu9eb4pP3FqBh+4Z0y2r+tkf3pmyyzNjm7Ylu/lmXwOf3M0EqKW1j62Y7HoHUrxEA/1IKVFBQIEpLS5VlWUQkWDHDVQpSuvqelpsDOkqWxl/uOhoEMTFAkhWZJu9niyonB57N6ccFOy/Mn5s2u6Q9dtLIp91AaoaKRd3YyDMD5pHD/qxqK1wSkLYrNRaaRuea5GTlQCYEXEHQ9Vj0q+TFsz+qInFgUnWYcZUPde3pAwZcCQCqq6Ic/0bgEKO4CweQ6xh7gxtXEwecTkUFYsa6Vd1DfbqfGyscuyq4aMEF5q66d4Rp6RR1hB1IQCx3qB4dONSKHjlMjw0aimi/wcr1WIAF3VtRW+9Z8Nr81RUtzVCSDvYhhf4fwdquw2XHFT0sHZoQzPRLaVPcEbHlie3Tvqr2TriKBBBWSUcccZS4ccaT1L3HQPpg0Qc7Zk68vtunpZNp/O1f8uBhp0mPZ6jjGknErH7UVGaC5YGxo2axvvGbe+qe+EtVYmJiUgtRGw4Mm/+RAEQxF/PHf/w46PP4ZuiaZipm27GjHYbAyi42bKw42I8eDAjtq3PFBArDCj9+XPuRJxwns0KG1j1nWM5Xi3tULFmyOX/Jkmc2As/VFk0UmYMvTDZ8iToMxbovIDtrdwa4omZX3bSr6tsA5OcX6WVl4ehvcYK/9AUJiAiXXnPNDF2IAa6UtseyLEHqjca6Hd/EEytFh1IJsb8A9um+7Wo9z0h32TCiiEInzSLqNcDCxk5PWeGFMcyeHUX4WdTi2fafQYVU9gtdreI37p/C4TAKrrrmpsRA8kQiTRHBsJ3odx0Uua+0tDRSXFxMdLDEJZ4LkGMbADEIYCnJje7umltQuhdakl0qTSCGkqKxUQE9Y2hqUgf0JHfRR7SPWR1G4iR+w8kLAJxfcGYfv8c7SwgKSOkSALsz0n7PnEee3vZz4e/Hw3FdrcuVMsAS6Ix/51R6iAccV5etrS6wwjnASXeRrtwl0F/3YeWvNoFwOKyGn3daRq9Q70c8lidJShnVNOFt72h9et7LL31wuO20zFKypjmsE1jTbVLqwGcEKSbhQsABlIymJwls+l3pmV+vAXlj8nwDM/q9EvQnns/MZBi615HOslhb6wwATL90AvEooMdsv8HKZwoYWnNTltPc3C3epcFYulQAgF5dm2RIJ8nUYHjqarLYsH6a8zuNX6MBBIADWsC0LOu9WLTjIxLCdRxpubYsKy0tjRzWW+JoTEsKfuzZst5QtUGNaqtiTiBQEW9Y5i6+BEA0ssxbuTUsG/0motEG2dKx/sc5h9Oy+//Hr67oHt4zhYWFP2pOU1MTAZB7Pqc97FFSouUiVyvPBVBeDowd6x6A1H6cMxiIrmAMG+b+Tszkj+P/AGhj667T0LhAAAAAAElFTkSuQmCC">
<style>
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
*{box-sizing:border-box;margin:0;padding:0}
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
.hero{background:var(--ink);color:var(--white)}
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
.btn:hover{background:#1be5ff}
.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
</style>
</head>
<body>
<section class="hero">
  <div class="container">
    <h1>Заголовок проекта</h1>
    <p>Подзаголовок — пара предложений о чём это.</p>
    <a class="btn" href="#section">Начать</a>
  </div>
</section>
<section id="section" class="section">
  <div class="container">
    <h2>Секция</h2>
    <div class="card">Контент карточки.</div>
    <div class="card">Контент карточки.</div>
  </div>
</section>
</body>
</html>

Чем НЕ пользоваться

  • Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга
  • Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG
  • jQuery — vanilla JS более чем достаточно

Чем МОЖНО (если очень надо)

  • Tailwind через CDN: <script src="https://cdn.tailwindcss.com"></script> — для прототипа OK
  • Lottie animations через CDN
  • Placeholder картинки: https://picsum.photos/800/600, https://placehold.co/600x400
  • Шрифты Google Fonts через <link> в head