Kommand — Design System

Atoms · 3 components
button _button.html.erb
Stone
White
Dark
Code
logo _logo.html.erb
Stone
White
Dark
Code
Light, sm
Light, lg
Dark, sm
<%# Logo (Kommand logotype) – Manuplan/Kommand design %>
<%# Figma: https://www.figma.com/design/y72qegAl9lnEZKgxcAsddY/Manuplan--test-?node-id=5067-42104 %>
<%# Locals: variant: (:light | :dark), size: (:sm | :lg). Defaults: variant :light, size :lg %>
<%# SVG — точный экспорт из Figma. НЕ модифицировать и НЕ перегенерировать иконку. %>
<%# Demo: render 'components/logo', demo: true %>

<% if local_assigns[:demo] %>
  <div class="flex flex-col gap-8 p-6 font-['Inter',ui-sans-serif,system-ui,sans-serif]">
    <div class="flex flex-col gap-2">
      <span class="text-xs text-[#78716C]">Light, sm</span>
      <%= render 'components/logo', variant: :light, size: :sm %>
    </div>
    <div class="flex flex-col gap-2">
      <span class="text-xs text-[#78716C]">Light, lg</span>
      <%= render 'components/logo', variant: :light, size: :lg %>
    </div>
    <div class="flex flex-col gap-2">
      <div class="bg-[#1C1917] p-4 rounded-xl inline-block">
        <span class="text-xs text-[#78716C] block mb-2">Dark, sm</span>
        <%= render 'components/logo', variant: :dark, size: :sm %>
      </div>
    </div>
  </div>
<% else %>
  <%
    variant_key = (local_assigns[:variant].presence || :light).to_sym
    size_key    = (local_assigns[:size].presence || :lg).to_sym
    is_dark     = variant_key == :dark
  %>
  <% if size_key == :lg %>
    <%# lg: 161×32, light only (dark not in Figma for lg) %>
    <svg width="161" height="32" viewBox="0 0 161 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Kommand">
      <path d="M20.0771 24.873C22.6277 24.873 24.7826 26.5647 25.4834 28.8867C22.8294 30.8432 19.5501 32.001 16 32.001C12.5371 32.001 9.33147 30.9 6.71289 29.0303C7.36669 26.6346 9.55822 24.873 12.1611 24.873H20.0771Z" fill="#2DD4C0"/>
      <path d="M3.1123 6.51758C5.43585 7.2174 7.12885 9.37316 7.12891 11.9248V19.8418C7.12887 22.4449 5.36658 24.6345 2.9707 25.2881C1.10079 22.6695 0.00010342 19.4639 0 16.001C0 12.4513 1.15632 9.1714 3.1123 6.51758Z" fill="#FA7186"/>
      <path d="M28.9316 6.5791C30.8605 9.22211 32 12.4784 32 16.001C31.9999 19.4395 30.9143 22.6241 29.0684 25.2324C26.7725 24.5157 25.1055 22.3737 25.1055 19.8418V11.9248C25.1055 9.44345 26.7067 7.33691 28.9316 6.5791Z" fill="#FBBF23"/>
      <path d="M16 10.001C19.3137 10.001 22 12.6873 22 16.001C21.9997 19.3145 19.3135 22.001 16 22.001C12.6865 22.001 10.0003 19.3145 10 16.001C10 12.6873 12.6863 10.001 16 10.001Z" fill="#E879F9"/>
      <path d="M16 0C19.5226 0 22.7788 1.13945 25.4219 3.06836C24.6637 5.29264 22.5581 6.89355 20.0771 6.89355H12.1611C9.62901 6.89355 7.48513 5.22676 6.76855 2.93066C9.3768 1.08505 12.5617 0 16 0Z" fill="#1D96F5"/>
      <path d="M153.19 24.6663C151.403 24.6663 150.083 24.1992 149.231 23.2649C148.379 22.3306 147.952 20.6342 147.952 18.1755C147.952 15.7169 148.379 14.0122 149.231 13.0615C150.083 12.1109 151.403 11.6355 153.19 11.6355C155.354 11.6355 156.747 12.5206 157.37 14.2909H157.714V7.3329H160.812V24.2975H157.714V22.011H157.37C156.747 23.7812 155.354 24.6663 153.19 24.6663ZM154.542 22.2077C156.657 22.2077 157.714 21.3062 157.714 19.5032V16.6512C157.649 14.9465 156.591 14.0942 154.542 14.0942C153.198 14.0942 152.272 14.3564 151.764 14.8809C151.272 15.4054 151.026 16.5036 151.026 18.1755C151.026 19.8474 151.272 20.9374 151.764 21.4455C152.255 21.9536 153.182 22.2077 154.542 22.2077Z" fill="#010101"/>
      <path d="M142.811 24.2996V16.1369C142.811 15.3501 142.581 14.8174 142.122 14.5388C141.663 14.2438 140.942 14.0962 139.958 14.0962C138.057 14.0962 137.082 14.8502 137.032 16.3582V24.2996H133.934V12.0064H137.032V14.2929H137.352C137.893 12.5227 139.213 11.6376 141.311 11.6376C142.819 11.6376 143.958 11.949 144.729 12.5719C145.516 13.1947 145.909 14.2847 145.909 15.8419V24.2996H142.811Z" fill="#010101"/>
      <path d="M123.776 24.6684C122.415 24.6684 121.341 24.3406 120.555 23.6849C119.768 23.0293 119.374 22.0622 119.374 20.7837C119.374 19.6855 119.751 18.784 120.505 18.0792C121.259 17.3744 122.522 17.022 124.292 17.022C125.292 17.022 126.694 17.0712 128.497 17.1695V16.1861C128.497 15.4485 128.276 14.9158 127.833 14.588C127.407 14.2601 126.694 14.0962 125.694 14.0962C124.776 14.0962 124.095 14.2356 123.653 14.5142C123.21 14.7928 122.931 15.3174 122.817 16.0877H119.768C119.915 14.4486 120.464 13.3013 121.415 12.6456C122.382 11.9736 123.825 11.6376 125.743 11.6376C129.644 11.6376 131.595 13.1456 131.595 16.1615V24.2996H128.497V22.1114H128.177C127.882 22.9473 127.341 23.5866 126.554 24.0292C125.784 24.4553 124.858 24.6684 123.776 24.6684ZM125.128 22.3081C127.374 22.3081 128.497 21.4558 128.497 19.7511V18.9643C127.464 18.8988 126.472 18.866 125.522 18.866C124.325 18.866 123.53 19.0217 123.136 19.3331C122.743 19.6282 122.546 20.0461 122.546 20.5871C122.546 21.2099 122.751 21.6525 123.161 21.9147C123.587 22.177 124.243 22.3081 125.128 22.3081Z" fill="#010101"/>
      <path d="M106.178 24.2996V16.1369C106.178 15.3501 105.981 14.8174 105.588 14.5388C105.211 14.2438 104.604 14.0962 103.768 14.0962C102.014 14.0962 101.113 14.8502 101.064 16.3582V24.2996H97.9654V12.0064H101.064V14.2929H101.383C101.924 12.5227 103.186 11.6376 105.17 11.6376C106.383 11.6376 107.301 11.8507 107.924 12.2768C108.563 12.6866 108.998 13.3586 109.227 14.2929H109.547C109.776 13.4242 110.219 12.7686 110.875 12.326C111.53 11.8671 112.35 11.6376 113.334 11.6376C114.694 11.6376 115.727 11.949 116.432 12.5719C117.153 13.1947 117.514 14.2847 117.514 15.8419V24.2996H114.416V16.1369C114.416 15.3501 114.219 14.8174 113.825 14.5388C113.432 14.2438 112.809 14.0962 111.957 14.0962C110.235 14.0962 109.35 14.8502 109.301 16.3582V24.2996H106.178Z" fill="#010101"/>
      <path d="M84.324 24.2996V16.1369C84.324 15.3501 84.1273 14.8174 83.7339 14.5388C83.3568 14.2438 82.7503 14.0962 81.9143 14.0962C80.1603 14.0962 79.2587 14.8502 79.2095 16.3582V24.2996H76.1112V12.0064H79.2095V14.2929H79.5291C80.0701 12.5227 81.3323 11.6376 83.3159 11.6376C84.5289 11.6376 85.4469 11.8507 86.0698 12.2768C86.7092 12.6866 87.1436 13.3586 87.3731 14.2929H87.6927C87.9222 13.4242 88.3648 12.7686 89.0205 12.326C89.6762 11.8671 90.4959 11.6376 91.4794 11.6376C92.84 11.6376 93.8728 11.949 94.5777 12.5719C95.299 13.1947 95.6596 14.2847 95.6596 15.8419V24.2996H92.5614V16.1369C92.5614 15.3501 92.3647 14.8174 91.9712 14.5388C91.5778 14.2438 90.9549 14.0962 90.1025 14.0962C88.3812 14.0962 87.496 14.8502 87.4468 16.3582V24.2996H84.324Z" fill="#010101"/>
      <path d="M64.8398 21.3492C65.3971 21.9229 66.2659 22.2098 67.4462 22.2098C68.6265 22.2098 69.4953 21.9229 70.0527 21.3492C70.6264 20.7755 70.9133 19.7347 70.9133 18.2268C70.9133 16.6696 70.6264 15.596 70.0527 15.0059C69.4953 14.3995 68.6265 14.0962 67.4462 14.0962C66.2659 14.0962 65.3971 14.3913 64.8398 14.9813C64.2824 15.5714 64.0037 16.6532 64.0037 18.2268C64.0037 19.7347 64.2824 20.7755 64.8398 21.3492ZM67.4462 11.6376C69.6756 11.6376 71.3231 12.1293 72.3886 13.1128C73.4706 14.0962 74.0115 15.8009 74.0115 18.2268C74.0115 20.5871 73.4706 22.2507 72.3886 23.2178C71.3231 24.1849 69.6756 24.6684 67.4462 24.6684C65.2332 24.6684 63.5857 24.1849 62.5038 23.2178C61.4383 22.2507 60.9055 20.5871 60.9055 18.2268C60.9055 15.8009 61.4383 14.0962 62.5038 13.1128C63.5857 12.1293 65.2332 11.6376 67.4462 11.6376Z" fill="#010101"/>
      <path d="M60.75 24.2975H56.4715L50.5947 16.8233H48.6767V24.2975H45.3326V7.3329H48.6767V15.9873L56.2502 7.3329H60.2336L53.1273 15.1514L60.75 24.2975Z" fill="#010101"/>
    </svg>
  <% elsif is_dark %>
    <%# sm dark: 121×24, текст белый %>
    <svg width="121" height="24" viewBox="0 0 121 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Kommand">
      <path d="M15.0579 18.6548C16.9708 18.6548 18.5869 19.9236 19.1125 21.665C17.122 23.1324 14.6626 24.0007 12 24.0007C9.40285 24.0007 6.9986 23.175 5.03467 21.7727C5.52501 19.976 7.16866 18.6548 9.12085 18.6548H15.0579Z" fill="#2DD4C0"/>
      <path d="M2.33423 4.88818C4.07689 5.41305 5.34664 7.02987 5.34668 8.9436V14.8813C5.34665 16.8337 4.02493 18.4759 2.22803 18.9661C0.825591 17.0021 7.7565e-05 14.5979 0 12.0007C0 9.33847 0.867242 6.87855 2.33423 4.88818Z" fill="#FA7186"/>
      <path d="M21.6987 4.93433C23.1454 6.91658 24 9.35882 24 12.0007C23.9999 14.5796 23.1857 16.9681 21.8013 18.9243C20.0794 18.3868 18.8291 16.7803 18.8291 14.8813V8.9436C18.8291 7.08259 20.03 5.50269 21.6987 4.93433Z" fill="#FBBF23"/>
      <path d="M12 7.50073C14.4853 7.50073 16.5 9.51545 16.5 12.0007C16.4998 14.4858 14.4852 16.5007 12 16.5007C9.51484 16.5007 7.5002 14.4858 7.5 12.0007C7.5 9.51545 9.51472 7.50073 12 7.50073Z" fill="#E879F9"/>
      <path d="M12 0C14.6419 0 17.0841 0.854586 19.0664 2.30127C18.4978 3.96948 16.9185 5.17017 15.0579 5.17017H9.12085C7.22175 5.17017 5.61385 3.92007 5.07642 2.198C7.0326 0.813791 9.4213 0 12 0Z" fill="#1D96F5"/>
      <path d="M114.892 18.4998C113.552 18.4998 112.563 18.1494 111.923 17.4487C111.284 16.748 110.964 15.4756 110.964 13.6316C110.964 11.7877 111.284 10.5092 111.923 9.79616C112.563 9.08315 113.552 8.72665 114.892 8.72665C116.515 8.72665 117.56 9.39048 118.028 10.7181H118.286V5.49968H120.609V18.2232H118.286V16.5083H118.028C117.56 17.8359 116.515 18.4998 114.892 18.4998ZM115.907 16.6558C117.493 16.6558 118.286 15.9796 118.286 14.6274V12.4884C118.237 11.2099 117.444 10.5706 115.907 10.5706C114.899 10.5706 114.204 10.7673 113.823 11.1607C113.454 11.5541 113.27 12.3777 113.27 13.6316C113.27 14.8855 113.454 15.703 113.823 16.0841C114.192 16.4652 114.886 16.6558 115.907 16.6558Z" fill="white"/>
      <path d="M107.108 18.2247V12.1027C107.108 11.5126 106.936 11.1131 106.592 10.9041C106.248 10.6828 105.707 10.5722 104.969 10.5722C103.543 10.5722 102.811 11.1377 102.774 12.2686V18.2247H100.451V9.00479H102.774V10.7197H103.014C103.42 9.39203 104.409 8.72819 105.983 8.72819C107.114 8.72819 107.969 8.96176 108.547 9.42891C109.137 9.89605 109.432 10.7135 109.432 11.8814V18.2247H107.108Z" fill="white"/>
      <path d="M92.8318 18.5013C91.8113 18.5013 91.006 18.2554 90.4159 17.7637C89.8258 17.272 89.5307 16.5467 89.5307 15.5878C89.5307 14.7642 89.8135 14.088 90.379 13.5594C90.9446 13.0308 91.8912 12.7665 93.2191 12.7665C93.969 12.7665 95.0202 12.8034 96.3726 12.8772V12.1396C96.3726 11.5864 96.2066 11.1868 95.8747 10.941C95.555 10.6951 95.0202 10.5722 94.2702 10.5722C93.5818 10.5722 93.0715 10.6767 92.7396 10.8857C92.4076 11.0946 92.1986 11.488 92.1126 12.0658H89.8258C89.9364 10.8365 90.3483 9.97595 91.0614 9.48423C91.7867 8.9802 92.8687 8.72819 94.3071 8.72819C97.2332 8.72819 98.6963 9.85917 98.6963 12.1211V18.2247H96.3726V16.5836H96.1329C95.9116 17.2105 95.5059 17.6899 94.9157 18.0219C94.3379 18.3415 93.6432 18.5013 92.8318 18.5013ZM93.8461 16.7311C95.5304 16.7311 96.3726 16.0918 96.3726 14.8133V14.2233C95.5981 14.1741 94.8542 14.1495 94.1412 14.1495C93.2436 14.1495 92.6474 14.2663 92.3523 14.4999C92.0572 14.7211 91.9097 15.0346 91.9097 15.4403C91.9097 15.9074 92.0634 16.2393 92.3707 16.436C92.6904 16.6327 93.1822 16.7311 93.8461 16.7311Z" fill="white"/>
      <path d="M79.6336 18.2247V12.1027C79.6336 11.5126 79.4861 11.1131 79.191 10.9041C78.9083 10.6828 78.4533 10.5722 77.8263 10.5722C76.5108 10.5722 75.8346 11.1377 75.7977 12.2686V18.2247H73.4741V9.00479H75.7977V10.7197H76.0375C76.4432 9.39203 77.3899 8.72819 78.8775 8.72819C79.7873 8.72819 80.4758 8.888 80.943 9.20763C81.4225 9.51496 81.7483 10.019 81.9204 10.7197H82.1602C82.3323 10.0682 82.6642 9.57642 83.156 9.24451C83.6478 8.9003 84.2625 8.72819 85.0002 8.72819C86.0207 8.72819 86.7952 8.96176 87.3239 9.42891C87.8648 9.89605 88.1353 10.7135 88.1353 11.8814V18.2247H85.8117V12.1027C85.8117 11.5126 85.6641 11.1131 85.3691 10.9041C85.074 10.6828 84.6068 10.5722 83.9675 10.5722C82.6765 10.5722 82.0126 11.1377 81.9757 12.2686V18.2247H79.6336Z" fill="white"/>
      <path d="M63.243 18.2247V12.1027C63.243 11.5126 63.0955 11.1131 62.8004 10.9041C62.5176 10.6828 62.0627 10.5722 61.4357 10.5722C60.1202 10.5722 59.444 11.1377 59.4071 12.2686V18.2247H57.0834V9.00479H59.4071V10.7197H59.6468C60.0526 9.39203 60.9992 8.72819 62.4869 8.72819C63.3967 8.72819 64.0852 8.888 64.5524 9.20763C65.0319 9.51496 65.3577 10.019 65.5298 10.7197H65.7695C65.9417 10.0682 66.2736 9.57642 66.7654 9.24451C67.2572 8.9003 67.8719 8.72819 68.6096 8.72819C69.63 8.72819 70.4046 8.96176 70.9333 9.42891C71.4742 9.89605 71.7447 10.7135 71.7447 11.8814V18.2247H69.421V12.1027C69.421 11.5126 69.2735 11.1131 68.9784 10.9041C68.6834 10.6828 68.2162 10.5722 67.5768 10.5722C66.2859 10.5722 65.622 11.1377 65.5851 12.2686V18.2247H63.243Z" fill="white"/>
      <path d="M48.6298 16.0119C49.0478 16.4422 49.6995 16.6573 50.5847 16.6573C51.4699 16.6573 52.1215 16.4422 52.5395 16.0119C52.9698 15.5817 53.185 14.801 53.185 13.6701C53.185 12.5022 52.9698 11.697 52.5395 11.2544C52.1215 10.7996 51.4699 10.5722 50.5847 10.5722C49.6995 10.5722 49.0478 10.7935 48.6298 11.236C48.2118 11.6786 48.0028 12.4899 48.0028 13.6701C48.0028 14.801 48.2118 15.5817 48.6298 16.0119ZM50.5847 8.72819C52.2567 8.72819 53.4923 9.09699 54.2915 9.83458C55.1029 10.5722 55.5086 11.8507 55.5086 13.6701C55.5086 15.4403 55.1029 16.6881 54.2915 17.4134C53.4923 18.1387 52.2567 18.5013 50.5847 18.5013C48.9249 18.5013 47.6893 18.1387 46.8778 17.4134C46.0787 16.6881 45.6791 15.4403 45.6791 13.6701C45.6791 11.8507 46.0787 10.5722 46.8778 9.83458C47.6893 9.09699 48.9249 8.72819 50.5847 8.72819Z" fill="white"/>
      <path d="M45.5625 18.2232H42.3536L37.946 12.6174H36.5075V18.2232H33.9994V5.49968H36.5075V11.9905L42.1876 5.49968H45.1752L39.8455 11.3635L45.5625 18.2232Z" fill="white"/>
    </svg>
  <% else %>
    <%# sm light: 121×24, текст тёмный %>
    <svg width="121" height="24" viewBox="0 0 121 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Kommand">
      <path d="M15.0579 18.6548C16.9708 18.6548 18.5869 19.9236 19.1125 21.665C17.122 23.1324 14.6626 24.0007 12 24.0007C9.40285 24.0007 6.9986 23.175 5.03467 21.7727C5.52501 19.976 7.16866 18.6548 9.12085 18.6548H15.0579Z" fill="#2DD4C0"/>
      <path d="M2.33423 4.88818C4.07689 5.41305 5.34664 7.02987 5.34668 8.9436V14.8813C5.34665 16.8337 4.02493 18.4759 2.22803 18.9661C0.825591 17.0021 7.7565e-05 14.5979 0 12.0007C0 9.33847 0.867242 6.87855 2.33423 4.88818Z" fill="#FA7186"/>
      <path d="M21.6987 4.93433C23.1454 6.91658 24 9.35882 24 12.0007C23.9999 14.5796 23.1857 16.9681 21.8013 18.9243C20.0794 18.3868 18.8291 16.7803 18.8291 14.8813V8.9436C18.8291 7.08259 20.03 5.50269 21.6987 4.93433Z" fill="#FBBF23"/>
      <path d="M12 7.50073C14.4853 7.50073 16.5 9.51545 16.5 12.0007C16.4998 14.4858 14.4852 16.5007 12 16.5007C9.51484 16.5007 7.5002 14.4858 7.5 12.0007C7.5 9.51545 9.51472 7.50073 12 7.50073Z" fill="#E879F9"/>
      <path d="M12 0C14.6419 0 17.0841 0.854586 19.0664 2.30127C18.4978 3.96948 16.9185 5.17017 15.0579 5.17017H9.12085C7.22175 5.17017 5.61385 3.92007 5.07642 2.198C7.0326 0.813791 9.4213 0 12 0Z" fill="#1D96F5"/>
      <path d="M114.892 18.4998C113.552 18.4998 112.563 18.1494 111.923 17.4487C111.284 16.748 110.964 15.4756 110.964 13.6316C110.964 11.7877 111.284 10.5092 111.923 9.79616C112.563 9.08315 113.552 8.72665 114.892 8.72665C116.515 8.72665 117.56 9.39048 118.028 10.7181H118.286V5.49968H120.609V18.2232H118.286V16.5083H118.028C117.56 17.8359 116.515 18.4998 114.892 18.4998ZM115.907 16.6558C117.493 16.6558 118.286 15.9796 118.286 14.6274V12.4884C118.237 11.2099 117.444 10.5706 115.907 10.5706C114.899 10.5706 114.204 10.7673 113.823 11.1607C113.454 11.5541 113.27 12.3777 113.27 13.6316C113.27 14.8855 113.454 15.703 113.823 16.0841C114.192 16.4652 114.886 16.6558 115.907 16.6558Z" fill="#010101"/>
      <path d="M107.108 18.2247V12.1027C107.108 11.5126 106.936 11.1131 106.592 10.9041C106.248 10.6828 105.707 10.5722 104.969 10.5722C103.543 10.5722 102.811 11.1377 102.774 12.2686V18.2247H100.451V9.00479H102.774V10.7197H103.014C103.42 9.39203 104.409 8.72819 105.983 8.72819C107.114 8.72819 107.969 8.96176 108.547 9.42891C109.137 9.89605 109.432 10.7135 109.432 11.8814V18.2247H107.108Z" fill="#010101"/>
      <path d="M92.8318 18.5013C91.8113 18.5013 91.006 18.2554 90.4159 17.7637C89.8258 17.272 89.5307 16.5467 89.5307 15.5878C89.5307 14.7642 89.8135 14.088 90.379 13.5594C90.9446 13.0308 91.8912 12.7665 93.2191 12.7665C93.969 12.7665 95.0202 12.8034 96.3726 12.8772V12.1396C96.3726 11.5864 96.2066 11.1868 95.8747 10.941C95.555 10.6951 95.0202 10.5722 94.2702 10.5722C93.5818 10.5722 93.0715 10.6767 92.7396 10.8857C92.4076 11.0946 92.1986 11.488 92.1126 12.0658H89.8258C89.9364 10.8365 90.3483 9.97595 91.0614 9.48423C91.7867 8.9802 92.8687 8.72819 94.3071 8.72819C97.2332 8.72819 98.6963 9.85917 98.6963 12.1211V18.2247H96.3726V16.5836H96.1329C95.9116 17.2105 95.5059 17.6899 94.9157 18.0219C94.3379 18.3415 93.6432 18.5013 92.8318 18.5013ZM93.8461 16.7311C95.5304 16.7311 96.3726 16.0918 96.3726 14.8133V14.2233C95.5981 14.1741 94.8542 14.1495 94.1412 14.1495C93.2436 14.1495 92.6474 14.2663 92.3523 14.4999C92.0572 14.7211 91.9097 15.0346 91.9097 15.4403C91.9097 15.9074 92.0634 16.2393 92.3707 16.436C92.6904 16.6327 93.1822 16.7311 93.8461 16.7311Z" fill="#010101"/>
      <path d="M79.6336 18.2247V12.1027C79.6336 11.5126 79.4861 11.1131 79.191 10.9041C78.9083 10.6828 78.4533 10.5722 77.8263 10.5722C76.5108 10.5722 75.8346 11.1377 75.7977 12.2686V18.2247H73.4741V9.00479H75.7977V10.7197H76.0375C76.4432 9.39203 77.3899 8.72819 78.8775 8.72819C79.7873 8.72819 80.4758 8.888 80.943 9.20763C81.4225 9.51496 81.7483 10.019 81.9204 10.7197H82.1602C82.3323 10.0682 82.6642 9.57642 83.156 9.24451C83.6478 8.9003 84.2625 8.72819 85.0002 8.72819C86.0207 8.72819 86.7952 8.96176 87.3239 9.42891C87.8648 9.89605 88.1353 10.7135 88.1353 11.8814V18.2247H85.8117V12.1027C85.8117 11.5126 85.6641 11.1131 85.3691 10.9041C85.074 10.6828 84.6068 10.5722 83.9675 10.5722C82.6765 10.5722 82.0126 11.1377 81.9757 12.2686V18.2247H79.6336Z" fill="#010101"/>
      <path d="M63.243 18.2247V12.1027C63.243 11.5126 63.0955 11.1131 62.8004 10.9041C62.5176 10.6828 62.0627 10.5722 61.4357 10.5722C60.1202 10.5722 59.444 11.1377 59.4071 12.2686V18.2247H57.0834V9.00479H59.4071V10.7197H59.6468C60.0526 9.39203 60.9992 8.72819 62.4869 8.72819C63.3967 8.72819 64.0852 8.888 64.5524 9.20763C65.0319 9.51496 65.3577 10.019 65.5298 10.7197H65.7695C65.9417 10.0682 66.2736 9.57642 66.7654 9.24451C67.2572 8.9003 67.8719 8.72819 68.6096 8.72819C69.63 8.72819 70.4046 8.96176 70.9333 9.42891C71.4742 9.89605 71.7447 10.7135 71.7447 11.8814V18.2247H69.421V12.1027C69.421 11.5126 69.2735 11.1131 68.9784 10.9041C68.6834 10.6828 68.2162 10.5722 67.5768 10.5722C66.2859 10.5722 65.622 11.1377 65.5851 12.2686V18.2247H63.243Z" fill="#010101"/>
      <path d="M48.6298 16.0119C49.0478 16.4422 49.6995 16.6573 50.5847 16.6573C51.4699 16.6573 52.1215 16.4422 52.5395 16.0119C52.9698 15.5817 53.185 14.801 53.185 13.6701C53.185 12.5022 52.9698 11.697 52.5395 11.2544C52.1215 10.7996 51.4699 10.5722 50.5847 10.5722C49.6995 10.5722 49.0478 10.7935 48.6298 11.236C48.2118 11.6786 48.0028 12.4899 48.0028 13.6701C48.0028 14.801 48.2118 15.5817 48.6298 16.0119ZM50.5847 8.72819C52.2567 8.72819 53.4923 9.09699 54.2915 9.83458C55.1029 10.5722 55.5086 11.8507 55.5086 13.6701C55.5086 15.4403 55.1029 16.6881 54.2915 17.4134C53.4923 18.1387 52.2567 18.5013 50.5847 18.5013C48.9249 18.5013 47.6893 18.1387 46.8778 17.4134C46.0787 16.6881 45.6791 15.4403 45.6791 13.6701C45.6791 11.8507 46.0787 10.5722 46.8778 9.83458C47.6893 9.09699 48.9249 8.72819 50.5847 8.72819Z" fill="#010101"/>
      <path d="M45.5625 18.2232H42.3536L37.946 12.6174H36.5075V18.2232H33.9994V5.49968H36.5075V11.9905L42.1876 5.49968H45.1752L39.8455 11.3635L45.5625 18.2232Z" fill="#010101"/>
    </svg>
  <% end %>
<% end %>
profile_pic _profile_pic.html.erb
Stone
White
Dark
Code
Design Tokens · from CLAUDE.md
Colors
primary
#1c64f2 · primary/600
Click to copy
primary-dark
#1a56db · primary/700
Click to copy
primary-darker
#1e3a8a · primary/800
Click to copy
background
#FAFAF9 · stone/50
Click to copy
text-primary
#1C1917 · stone/900
Click to copy
text-secondary
#78716C · stone/500
Click to copy
border
#E7E5E4 · stone/200
Click to copy
Typography
The quick brown fox
text-xs / font-normal
Copy
The quick brown fox — основной UI текст
text-sm / font-medium
Copy
The quick brown fox
text-base / font-normal
Copy
The quick brown fox
text-lg / font-semibold
Copy
The quick brown fox
text-xl / font-bold
Copy
The quick brown fox
text-2xl / font-medium
Copy
The quick brown fox
text-3xl / font-semibold
Copy
Border Radius
rounded-md
6px
Copy
rounded-lg
8px
Copy
rounded-xl
12px
Copy
rounded-2xl
16px
Copy
Spacing Scale
0px
2px
4px
6px
8px
12px
16px
20px
24px
40px
Shadows
button
0px 6px 16px 0px rgba(28, 100, 242, 0.20)
Copy