design(penpot): add KRONA tokens and component sheet
This commit is contained in:
parent
c4f33898ab
commit
5f0bebb8c5
2 changed files with 95 additions and 0 deletions
45
design/penpot/krona-components.svg
Normal file
45
design/penpot/krona-components.svg
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1080" viewBox="0 0 1440 1080">
|
||||
<rect width="1440" height="1080" fill="#F3EAD7"/>
|
||||
<g id="title"><text x="56" y="72" font-family="Georgia, serif" font-size="36" fill="#302A23">KRONA UI — базовые компоненты</text><text x="56" y="104" font-family="Arial, sans-serif" font-size="15" fill="#756A5B">Parchment Light · 4 px grid · semantic tokens</text></g>
|
||||
<g id="buttons" transform="translate(56 150)">
|
||||
<text y="0" font-family="Arial" font-size="18" font-weight="700" fill="#302A23">Buttons</text>
|
||||
<g transform="translate(0 28)"><rect width="142" height="44" rx="10" fill="#9A743D"/><text x="71" y="28" text-anchor="middle" font-family="Arial" font-size="14" font-weight="700" fill="#FCF8EF">Основная</text></g>
|
||||
<g transform="translate(158 28)"><rect width="142" height="44" rx="10" fill="#F8F2E6" stroke="#D9C9AC"/><text x="71" y="28" text-anchor="middle" font-family="Arial" font-size="14" font-weight="700" fill="#302A23">Вторичная</text></g>
|
||||
<g transform="translate(316 28)"><rect width="142" height="44" rx="10" fill="#B78335"/><text x="71" y="28" text-anchor="middle" font-family="Arial" font-size="14" font-weight="700" fill="#FCF8EF">✦ KRONA AI</text></g>
|
||||
<g transform="translate(474 28)"><rect width="142" height="44" rx="10" fill="#F1DDD5"/><text x="71" y="28" text-anchor="middle" font-family="Arial" font-size="14" font-weight="700" fill="#A44E3F">Удалить</text></g>
|
||||
</g>
|
||||
<g id="inputs" transform="translate(56 268)">
|
||||
<text font-family="Arial" font-size="18" font-weight="700" fill="#302A23">Inputs</text>
|
||||
<g transform="translate(0 28)"><text y="0" font-family="Arial" font-size="12" fill="#756A5B">Название</text><rect y="10" width="340" height="46" rx="10" fill="#FCF8EF" stroke="#D9C9AC"/><text x="16" y="39" font-family="Arial" font-size="14" fill="#9A8E7D">Введите значение…</text></g>
|
||||
<g transform="translate(364 28)"><text y="0" font-family="Arial" font-size="12" fill="#756A5B">Фокус</text><rect y="10" width="340" height="46" rx="10" fill="#FCF8EF" stroke="#9A743D" stroke-width="2"/><text x="16" y="39" font-family="Arial" font-size="14" fill="#302A23">Иван Петров</text></g>
|
||||
</g>
|
||||
<g id="module-tabs" transform="translate(56 402)">
|
||||
<text font-family="Arial" font-size="18" font-weight="700" fill="#302A23">Module tabs</text>
|
||||
<g transform="translate(0 26)"><rect width="720" height="58" rx="12" fill="#F8F2E6" stroke="#E5D8C0"/><text x="24" y="35" font-family="Arial" font-size="15" font-weight="700" fill="#684923">Мессенджеры</text><rect x="20" y="53" width="120" height="3" rx="2" fill="#9A743D"/><text x="174" y="35" font-family="Arial" font-size="15" fill="#756A5B">Email</text><text x="266" y="35" font-family="Arial" font-size="15" fill="#756A5B">Каналы</text><text x="366" y="35" font-family="Arial" font-size="15" fill="#756A5B">Контакты</text><text x="478" y="35" font-family="Arial" font-size="15" fill="#756A5B">Настройки</text></g>
|
||||
</g>
|
||||
<g id="channel-switcher" transform="translate(56 526)">
|
||||
<text font-family="Arial" font-size="18" font-weight="700" fill="#302A23">Channel switcher</text>
|
||||
<g transform="translate(0 26)" font-family="Arial" font-size="14"><rect width="92" height="40" rx="20" fill="#E2D0AD"/><text x="18" y="25" fill="#302A23">Все</text><circle cx="68" cy="20" r="14" fill="#9A743D"/><text x="68" y="25" text-anchor="middle" fill="#FFF">22</text><rect x="104" width="132" height="40" rx="20" fill="#F8F2E6" stroke="#D9C9AC"/><circle cx="126" cy="20" r="11" fill="#229ED9"/><text x="145" y="25" fill="#302A23">Telegram</text><rect x="248" width="116" height="40" rx="20" fill="#F8F2E6" stroke="#D9C9AC"/><circle cx="270" cy="20" r="11" fill="#25D366"/><text x="289" y="25" fill="#302A23">WhatsApp</text><rect x="376" width="122" height="40" rx="20" fill="#F8F2E6" stroke="#D9C9AC"/><text x="398" y="25" fill="#302A23">＋ Подключить</text></g>
|
||||
</g>
|
||||
<g id="chat-item" transform="translate(56 650)">
|
||||
<text font-family="Arial" font-size="18" font-weight="700" fill="#302A23">Chat item</text>
|
||||
<g transform="translate(0 26)"><rect width="390" height="78" rx="12" fill="#DCE5D7"/><rect width="4" height="78" rx="2" fill="#315F46"/><circle cx="44" cy="39" r="24" fill="#E9DDC5"/><text x="44" y="45" text-anchor="middle" font-family="Arial" font-weight="700" fill="#315F46">ИП</text><text x="82" y="30" font-family="Arial" font-size="15" font-weight="700" fill="#302A23">Иван Петров</text><text x="82" y="53" font-family="Arial" font-size="13" fill="#756A5B">Да, можем. Сейчас отправлю…</text><text x="344" y="26" font-family="Arial" font-size="12" fill="#756A5B">12:41</text><circle cx="355" cy="53" r="13" fill="#315F46"/><text x="355" y="58" text-anchor="middle" font-family="Arial" font-size="12" fill="#FFF">2</text></g>
|
||||
</g>
|
||||
<g id="message-bubbles" transform="translate(500 650)">
|
||||
<text font-family="Arial" font-size="18" font-weight="700" fill="#302A23">Message bubbles</text>
|
||||
<g transform="translate(0 26)"><rect width="360" height="72" rx="14" fill="#FCF8EF" stroke="#E5D8C0"/><text x="18" y="29" font-family="Arial" font-size="14" fill="#302A23">Здравствуйте! Интересует новый прайс.</text><text x="320" y="57" font-family="Arial" font-size="11" fill="#756A5B">12:17</text><rect x="130" y="88" width="360" height="72" rx="14" fill="#DCE5D7"/><text x="148" y="117" font-family="Arial" font-size="14" fill="#302A23">Добрый день! Сейчас всё отправлю.</text><text x="448" y="145" font-family="Arial" font-size="11" fill="#756A5B">12:19 ✓✓</text></g>
|
||||
</g>
|
||||
<g id="composer" transform="translate(56 850)">
|
||||
<text font-family="Arial" font-size="18" font-weight="700" fill="#302A23">Message composer</text>
|
||||
<g transform="translate(0 26)"><rect width="804" height="58" rx="14" fill="#FCF8EF" stroke="#D9C9AC"/><text x="20" y="36" font-family="Arial" font-size="23" fill="#756A5B">⌕</text><text x="58" y="35" font-family="Arial" font-size="14" fill="#9A8E7D">Написать сообщение…</text><text x="632" y="36" font-family="Arial" font-size="18" fill="#B78335">✦</text><text x="678" y="36" font-family="Arial" font-size="19" fill="#756A5B">☺</text><text x="724" y="36" font-family="Arial" font-size="19" fill="#756A5B">♩</text><rect x="750" y="7" width="46" height="44" rx="11" fill="#315F46"/><text x="773" y="36" text-anchor="middle" font-family="Arial" font-size="20" fill="#FFF">➤</text></g>
|
||||
</g>
|
||||
<g id="contact-card" transform="translate(930 150)">
|
||||
<text font-family="Arial" font-size="18" font-weight="700" fill="#302A23">Contact card</text>
|
||||
<rect y="28" width="430" height="690" rx="16" fill="#F8F2E6" stroke="#E5D8C0"/>
|
||||
<circle cx="68" cy="94" r="38" fill="#E9DDC5"/><text x="68" y="103" text-anchor="middle" font-family="Arial" font-size="23" font-weight="700" fill="#315F46">ИП</text><text x="126" y="82" font-family="Georgia" font-size="24" fill="#302A23">Иван Петров</text><text x="126" y="108" font-family="Arial" font-size="14" fill="#756A5B">ООО «Альфа» · Директор</text>
|
||||
<rect x="126" y="126" width="82" height="28" rx="14" fill="#E1E6D8"/><text x="167" y="145" text-anchor="middle" font-family="Arial" font-size="12" fill="#657255">● Клиент</text><rect x="218" y="126" width="58" height="28" rx="14" fill="#EFE0C2"/><text x="247" y="145" text-anchor="middle" font-family="Arial" font-size="12" fill="#805923">◆ VIP</text>
|
||||
<line x1="22" y1="178" x2="408" y2="178" stroke="#E5D8C0"/><text x="24" y="211" font-family="Arial" font-size="14" font-weight="700" fill="#302A23">Каналы контакта</text><text x="24" y="246" font-family="Arial" font-size="14" fill="#302A23">Telegram @ivan_petrov</text><text x="24" y="278" font-family="Arial" font-size="14" fill="#302A23">WhatsApp +7 900 123-45-67</text><text x="24" y="310" font-family="Arial" font-size="14" fill="#302A23">Email ivan@alfa.ru</text>
|
||||
<rect x="20" y="344" width="390" height="116" rx="12" fill="#FCF8EF" stroke="#E5D8C0"/><text x="38" y="375" font-family="Arial" font-size="14" font-weight="700" fill="#B78335">✦ AI-сводка</text><text x="38" y="402" font-family="Arial" font-size="13" fill="#756A5B">Общение длится 47 дней.</text><text x="38" y="424" font-family="Arial" font-size="13" fill="#756A5B">Клиент настроен позитивно.</text><text x="38" y="446" font-family="Arial" font-size="13" fill="#756A5B">Рекомендуется оперативный ответ.</text>
|
||||
<text x="24" y="500" font-family="Arial" font-size="14" font-weight="700" fill="#302A23">Действия</text><rect x="20" y="520" width="390" height="44" rx="10" fill="#315F46"/><text x="215" y="548" text-anchor="middle" font-family="Arial" font-size="14" font-weight="700" fill="#FFF">Ответить</text><rect x="20" y="576" width="185" height="42" rx="10" fill="#FCF8EF" stroke="#D9C9AC"/><text x="112" y="602" text-anchor="middle" font-family="Arial" font-size="13" fill="#302A23">Создать задачу</text><rect x="225" y="576" width="185" height="42" rx="10" fill="#FCF8EF" stroke="#D9C9AC"/><text x="317" y="602" text-anchor="middle" font-family="Arial" font-size="13" fill="#302A23">Создать сделку</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.3 KiB |
50
design/penpot/krona-tokens.json
Normal file
50
design/penpot/krona-tokens.json
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
{
|
||||
"KRONA/Parchment Light": {
|
||||
"bg": {"app":{"$value":"#EFE3CC","$type":"color"},"workspace":{"$value":"#F3EAD7","$type":"color"},"section":{"$value":"#F1E6D2","$type":"color"}},
|
||||
"surface": {"default":{"$value":"#F8F2E6","$type":"color"},"raised":{"$value":"#FCF8EF","$type":"color"},"muted":{"$value":"#E9DDC5","$type":"color"},"hover":{"$value":"#EDE0C7","$type":"color"},"selected":{"$value":"#E2D0AD","$type":"color"}},
|
||||
"text": {"primary":{"$value":"#302A23","$type":"color"},"secondary":{"$value":"#756A5B","$type":"color"},"muted":{"$value":"#9A8E7D","$type":"color"}},
|
||||
"border": {"default":{"$value":"#D9C9AC","$type":"color"},"subtle":{"$value":"#E5D8C0","$type":"color"},"focus":{"$value":"#9A743D","$type":"color"}},
|
||||
"primary": {"default":{"$value":"#9A743D","$type":"color"},"hover":{"$value":"#7D5B2D","$type":"color"},"active":{"$value":"#684923","$type":"color"},"soft":{"$value":"#EADBC1","$type":"color"}},
|
||||
"gold": {"default":{"$value":"#B78335","$type":"color"},"hover":{"$value":"#9E702D","$type":"color"},"active":{"$value":"#805923","$type":"color"},"soft":{"$value":"#EFE0C2","$type":"color"}},
|
||||
"success": {"default":{"$value":"#657255","$type":"color"},"soft":{"$value":"#E1E6D8","$type":"color"}},
|
||||
"warning": {"default":{"$value":"#A8752F","$type":"color"},"soft":{"$value":"#F2E3C8","$type":"color"}},
|
||||
"danger": {"default":{"$value":"#A44E3F","$type":"color"},"soft":{"$value":"#F1DDD5","$type":"color"}},
|
||||
"info": {"default":{"$value":"#5F7480","$type":"color"},"soft":{"$value":"#DFE6E5","$type":"color"}},
|
||||
"space": {"1":{"$value":"4","$type":"spacing"},"2":{"$value":"8","$type":"spacing"},"3":{"$value":"12","$type":"spacing"},"4":{"$value":"16","$type":"spacing"},"5":{"$value":"20","$type":"spacing"},"6":{"$value":"24","$type":"spacing"},"8":{"$value":"32","$type":"spacing"},"10":{"$value":"40","$type":"spacing"},"12":{"$value":"48","$type":"spacing"},"16":{"$value":"64","$type":"spacing"}},
|
||||
"radius": {"xs":{"$value":"6","$type":"borderRadius"},"sm":{"$value":"8","$type":"borderRadius"},"md":{"$value":"10","$type":"borderRadius"},"lg":{"$value":"12","$type":"borderRadius"},"xl":{"$value":"16","$type":"borderRadius"},"pill":{"$value":"999","$type":"borderRadius"}}
|
||||
},
|
||||
"KRONA/Noble Green": {
|
||||
"bg": {"app":{"$value":"#EDE5D3","$type":"color"},"workspace":{"$value":"#F2EAD9","$type":"color"},"section":{"$value":"#ECE2CE","$type":"color"}},
|
||||
"surface": {"default":{"$value":"#F8F2E6","$type":"color"},"raised":{"$value":"#FCF8EF","$type":"color"},"muted":{"$value":"#E6DBC5","$type":"color"},"hover":{"$value":"#E3E9DE","$type":"color"},"selected":{"$value":"#DCE5D7","$type":"color"}},
|
||||
"text": {"primary":{"$value":"#2E302A","$type":"color"},"secondary":{"$value":"#6B6C60","$type":"color"},"muted":{"$value":"#8B8C80","$type":"color"}},
|
||||
"border": {"default":{"$value":"#D2CCB9","$type":"color"},"subtle":{"$value":"#E2DAC8","$type":"color"},"focus":{"$value":"#315F46","$type":"color"}},
|
||||
"primary": {"default":{"$value":"#315F46","$type":"color"},"hover":{"$value":"#294F3B","$type":"color"},"active":{"$value":"#213F30","$type":"color"},"soft":{"$value":"#DDE7DB","$type":"color"}},
|
||||
"gold": {"default":{"$value":"#B78335","$type":"color"},"hover":{"$value":"#9E702D","$type":"color"},"active":{"$value":"#805923","$type":"color"},"soft":{"$value":"#EFE0C2","$type":"color"}},
|
||||
"success": {"default":{"$value":"#3F7557","$type":"color"},"soft":{"$value":"#DDE9E0","$type":"color"}},
|
||||
"warning": {"default":{"$value":"#A8752F","$type":"color"},"soft":{"$value":"#F2E3C8","$type":"color"}},
|
||||
"danger": {"default":{"$value":"#A44E3F","$type":"color"},"soft":{"$value":"#F1DDD5","$type":"color"}},
|
||||
"info": {"default":{"$value":"#527286","$type":"color"},"soft":{"$value":"#DFE7EA","$type":"color"}},
|
||||
"space": {"1":{"$value":"4","$type":"spacing"},"2":{"$value":"8","$type":"spacing"},"3":{"$value":"12","$type":"spacing"},"4":{"$value":"16","$type":"spacing"},"5":{"$value":"20","$type":"spacing"},"6":{"$value":"24","$type":"spacing"},"8":{"$value":"32","$type":"spacing"},"10":{"$value":"40","$type":"spacing"},"12":{"$value":"48","$type":"spacing"},"16":{"$value":"64","$type":"spacing"}},
|
||||
"radius": {"xs":{"$value":"6","$type":"borderRadius"},"sm":{"$value":"8","$type":"borderRadius"},"md":{"$value":"10","$type":"borderRadius"},"lg":{"$value":"12","$type":"borderRadius"},"xl":{"$value":"16","$type":"borderRadius"},"pill":{"$value":"999","$type":"borderRadius"}}
|
||||
},
|
||||
"KRONA/Graphite Forest Dark": {
|
||||
"bg": {"app":{"$value":"#171A18","$type":"color"},"workspace":{"$value":"#1D211E","$type":"color"},"section":{"$value":"#202620","$type":"color"}},
|
||||
"surface": {"default":{"$value":"#252A26","$type":"color"},"raised":{"$value":"#2B312C","$type":"color"},"muted":{"$value":"#212621","$type":"color"},"hover":{"$value":"#2B342D","$type":"color"},"selected":{"$value":"#29382E","$type":"color"}},
|
||||
"text": {"primary":{"$value":"#EEE7DA","$type":"color"},"secondary":{"$value":"#B7B3A8","$type":"color"},"muted":{"$value":"#888E87","$type":"color"}},
|
||||
"border": {"default":{"$value":"#39423A","$type":"color"},"subtle":{"$value":"#303831","$type":"color"},"focus":{"$value":"#6F9A79","$type":"color"}},
|
||||
"primary": {"default":{"$value":"#527D60","$type":"color"},"hover":{"$value":"#648E70","$type":"color"},"active":{"$value":"#426A50","$type":"color"},"soft":{"$value":"#29382E","$type":"color"}},
|
||||
"gold": {"default":{"$value":"#C99A4D","$type":"color"},"hover":{"$value":"#D5AA63","$type":"color"},"active":{"$value":"#B78335","$type":"color"},"soft":{"$value":"#403522","$type":"color"}},
|
||||
"success": {"default":{"$value":"#78916F","$type":"color"},"soft":{"$value":"#29372D","$type":"color"}},
|
||||
"warning": {"default":{"$value":"#C08A45","$type":"color"},"soft":{"$value":"#403422","$type":"color"}},
|
||||
"danger": {"default":{"$value":"#C06B5F","$type":"color"},"soft":{"$value":"#432B28","$type":"color"}},
|
||||
"info": {"default":{"$value":"#7693A0","$type":"color"},"soft":{"$value":"#29363B","$type":"color"}},
|
||||
"space": {"1":{"$value":"4","$type":"spacing"},"2":{"$value":"8","$type":"spacing"},"3":{"$value":"12","$type":"spacing"},"4":{"$value":"16","$type":"spacing"},"5":{"$value":"20","$type":"spacing"},"6":{"$value":"24","$type":"spacing"},"8":{"$value":"32","$type":"spacing"},"10":{"$value":"40","$type":"spacing"},"12":{"$value":"48","$type":"spacing"},"16":{"$value":"64","$type":"spacing"}},
|
||||
"radius": {"xs":{"$value":"6","$type":"borderRadius"},"sm":{"$value":"8","$type":"borderRadius"},"md":{"$value":"10","$type":"borderRadius"},"lg":{"$value":"12","$type":"borderRadius"},"xl":{"$value":"16","$type":"borderRadius"},"pill":{"$value":"999","$type":"borderRadius"}}
|
||||
},
|
||||
"$themes": [
|
||||
{"id":"a8830070-ee3b-8012-8008-a8ade23a2d7b","name":"Parchment Light","group":"KRONA","description":"Тёплая пергаментная тема","isSource":false,"selectedTokenSets":{"KRONA/Parchment Light":"enabled"}},
|
||||
{"id":"a8830070-ee3b-8012-8008-a8adfbd2ab7a","name":"Noble Green","group":"KRONA","description":"Светлая рабочая область и благородная зелёная оболочка","isSource":false,"selectedTokenSets":{"KRONA/Noble Green":"enabled"}},
|
||||
{"id":"a8830070-ee3b-8012-8008-a8ae0e2ed90b","name":"Graphite Forest Dark","group":"KRONA","description":"Графитовая рабочая среда с forest-акцентами","isSource":false,"selectedTokenSets":{"KRONA/Graphite Forest Dark":"enabled"}}
|
||||
],
|
||||
"$metadata": {"tokenSetOrder":["KRONA/Parchment Light","KRONA/Noble Green","KRONA/Graphite Forest Dark"],"activeThemes":[],"activeSets":[]}
|
||||
}
|
||||
Loading…
Reference in a new issue