585 lines
116 KiB
HTML
585 lines
116 KiB
HTML
<html><body><style>
|
|
* {
|
|
font-family:sans-serif;
|
|
}
|
|
body {
|
|
text-align:center;
|
|
padding:1em;
|
|
}
|
|
.messages {
|
|
width:100%;
|
|
max-width:700px;
|
|
text-align:left;
|
|
display:inline-block;
|
|
}
|
|
.messages img {
|
|
background-color:rgb(248,244,240);
|
|
width:36px;
|
|
height:36px;
|
|
border-radius:0.2em;
|
|
display:inline-block;
|
|
vertical-align:top;
|
|
margin-right:0.65em;
|
|
}
|
|
.messages .time {
|
|
display:inline-block;
|
|
color:rgb(200,200,200);
|
|
margin-left:0.5em;
|
|
}
|
|
.messages .username {
|
|
display:inline-block;
|
|
font-weight:600;
|
|
line-height:1;
|
|
}
|
|
.messages .message {
|
|
display:inline-block;
|
|
vertical-align:top;
|
|
line-height:1;
|
|
width:calc(100% - 3em);
|
|
}
|
|
.messages .message .msg {
|
|
line-height:1.5;
|
|
}
|
|
</style><div class="messages"><div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-03-27 13:49</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-03-27 13:49</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-03-27 13:49</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-03-27 13:49</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-02-21/319502977622_385c355d598cd6a89bb0_72.png" /><div class="message"><div class="username">ricardo565</div><div class="time">2018-03-27 13:49</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-05-22/186247559282_f2d12d6ad31cd6f0c01c_72.jpg" /><div class="message"><div class="username">nikitalukyanov</div><div class="time">2018-03-27 13:49</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-12/327737946193_ab02044e1a399d76784a_72.jpg" /><div class="message"><div class="username">maria245</div><div class="time">2018-03-27 13:49</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-06/324554464353_18f48763243f656a4978_72.jpg" /><div class="message"><div class="username">patrick771</div><div class="time">2018-03-27 13:49</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-03-27 13:51</div><div class="msg">:sunglasses:</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-03-27 13:51</div><div class="msg">Yeahhh</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-06/324554464353_18f48763243f656a4978_72.jpg" /><div class="message"><div class="username">patrick771</div><div class="time">2018-03-27 13:54</div><div class="msg">:cool:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-05-22/186247559282_f2d12d6ad31cd6f0c01c_72.jpg" /><div class="message"><div class="username">nikitalukyanov</div><div class="time">2018-03-27 14:35</div><div class="msg">:fidgetspinner:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-12/327737946193_ab02044e1a399d76784a_72.jpg" /><div class="message"><div class="username">maria245</div><div class="time">2018-03-27 18:37</div><div class="msg">I?m sure you?ve already seen this, but just wanted to share :slightly_smiling_face: An interesting framework for organizing the system <a href="http://bradfrost.com/blog/post/atomic-web-design/">http://bradfrost.com/blog/post/atomic-web-design/</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-03-29 07:10</div><div class="msg">Thanks, yeah, this is good! we also brought it up during our discussion with the development team :raised_hands:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-17/348134203537_1bc2a6f28471cf6ec828_72.png" /><div class="message"><div class="username">hutch</div><div class="time">2018-04-01 03:20</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-04-02 10:58</div><div class="msg"><a href="https://status-im.github.io/fiddle/">https://status-im.github.io/fiddle/</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-04-02 10:58</div><div class="msg">we have colors, icons and components</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-04-03 06:49</div><div class="msg">@denis-sharypin @andmironov @jeluard ^</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-04-03 06:52</div><div class="msg">Now design team can prototype real screens :slightly_smiling_face:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-04-03 06:52</div><div class="msg">yeah ,and if there is no component they can prototype component :slightly_smiling_face:</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-04-03 06:53</div><div class="msg">Even better!</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-02-21/319502977622_385c355d598cd6a89bb0_72.png" /><div class="message"><div class="username">ricardo565</div><div class="time">2018-04-04 09:16</div><div class="msg">Are we currently thinking to implement a type of grid (padding, margin) system? I know we have multiple of 8px going on, but that needs further development. On top of that, do we have a typography system to build upon? Found myself having to guess a lot of things as I was designing small elements this week.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-04-04 10:48</div><div class="msg"><a href="https://docs.google.com/document/d/1g6IavuSTdXufeZaNYx0Ru1Y9KdZcCPOKYKNrGNNbx2A/edit">https://docs.google.com/document/d/1g6IavuSTdXufeZaNYx0Ru1Y9KdZcCPOKYKNrGNNbx2A/edit</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-04-04 10:48</div><div class="msg">started putting together a doc</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-04-04 10:51</div><div class="msg">this is a good question, i started with a 8px grid but it has led to a lot of limitations. i?ve been experimenting with grids a lot before and now for the app i would use just a multiple of 8 but not strictly. So if you need an uneven value ? go ahead and use it, instead of wasting time on restructuring the whole thing to match the grid.
|
|
|
|
i think grid matters a lot in websites and print, but an app environment it is a bit different</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-04-04 10:54</div><div class="msg">so this is a controversial and potentially a subjective opinion. a grid is better than no grid for sure, but i don't want it to slow us down. when working on a UI i assume that the main UI elements should be aligned (user picture at the top bar aligned with the incoming message in the chat screen for instance) but i am not sure how to specify and formalize that at the moment and also not sure it has to be (for now)</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-02-21/319502977622_385c355d598cd6a89bb0_72.png" /><div class="message"><div class="username">ricardo565</div><div class="time">2018-04-04 11:12</div><div class="msg">@andmironov sounds good, yeah, grid can work and save us a lot of time but needs a lot of experimentation to get it right. I think that might be quite necessary to have things be harmonious as the system grows, but someone might need to take the lead on that. I've been using multiple of 8px, however, 4px and 2px (had to use it) are not multiples. Maybe a spacing scale can be defined. That can also be helpful for typography (counting from baseline or lower descender, etc).
|
|
|
|
Nice doc, I think it's a good start. Let's keep those thoughts in mind as we define the scope of this swarm.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-10-04/251566892466_e37667e6064fe542e7d7_72.jpg" /><div class="message"><div class="username">naghdy</div><div class="time">2018-04-07 18:36</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-04-09 16:34</div><div class="msg">@andrey pls add some examples to Fiddle that I check and follow</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-04-09 16:44</div><div class="msg">@denis-sharypin could you elaborate?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-04-09 16:45</div><div class="msg">I mean, would be cool to have 2 or 3 screens thats already have been made in Fiddle just to follow and use them as examples/templates</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-04-09 17:14</div><div class="msg">oh ok, no problem</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-04-12 11:51</div><div class="msg">Hey @andmironov Hester proposed a good idea for a design system doc:
|
|
``` 3) in the design library/doc do you have anything included about rationale for the design (next to specs). Following the conversation about chat improvements it would be really helpful if we have these documented somehow```
|
|
I personally find myself talking same things for different people (sometimes same people :slightly_smiling_face: ) Would be really helpful to have some documented behavior.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-04-13 12:27</div><div class="msg"><a href="https://status-im.slack.com/archives/C8QP8S5UH/p1523547400000039">https://status-im.slack.com/archives/C8QP8S5UH/p1523547400000039</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-10-03/448433513781_35b198abdf960e874693_72.png" /><div class="message"><div class="username">jarradhope</div><div class="time">2018-04-13 13:14</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-12/327737946193_ab02044e1a399d76784a_72.jpg" /><div class="message"><div class="username">maria245</div><div class="time">2018-04-16 18:53</div><div class="msg"><a href="https://www.designbetter.co/design-systems-handbook">https://www.designbetter.co/design-systems-handbook</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-06-18 06:19</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 10:03</div><div class="msg">@denis-sharypin set the channel topic: <a href="https://www.figma.com/files/project/904425/Design-System">https://www.figma.com/files/project/904425/Design-System</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 10:05</div><div class="msg">Hey @maciej I talked with @andrey and he is up to help us synchronize dev components with our system using <a href="https://status-im.github.io/fiddle/">https://status-im.github.io/fiddle/</a>. Do you think it could work out?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 10:07</div><div class="msg">ok, first let me see how can I setup and run a dev build of fiddle so we're all on the same page</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 10:10</div><div class="msg">by synchronise you mean that both have the same values, look the same or actually synchronise them with the Figma?s API ?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 10:10</div><div class="msg">first option</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 10:18</div><div class="msg">`how can I setup and run a dev build of fiddle` do you want to make changes in status-react codebase ? i thought at first we'll just try to develop components in fiddle and you don't need to run it localy</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 10:21</div><div class="msg">nah, I just wanted to see what we have right now there and how they?re constructed</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 10:21</div><div class="msg">so would mapping all of the component available props help, how should we start this ? :smile:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 10:25</div><div class="msg">let?s drop dividers</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 10:25</div><div class="msg">FINALLY</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 10:25</div><div class="msg">what took you so long :smile:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 10:26</div><div class="msg">also i?ve noticed for example, we have a component in fiddle named contact, maybe we should be less specific and just create a table cell component that can be used for any content</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 10:28</div><div class="msg">I thought we had an agreement on that :stuck_out_tongue:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 10:30</div><div class="msg">Maybe to start with we should go with the font sizes?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 10:30</div><div class="msg">haha and I thought it was still in the air :female_fairy: anyway, I?m removing all dividers from Figma</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 10:30</div><div class="msg">:crown:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 10:31</div><div class="msg">which will be used in those components</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 10:36</div><div class="msg">sure, makes sense
|
|
since I can't find the current values for text styles in fiddle, here?s our type system
|
|
|
|
*Timestamp* 10px/12 400
|
|
*Caption* 12px/16 400
|
|
*Main* 15px/22 400
|
|
*Main Medium* 15px/22 500
|
|
*Title* 17px/22 400
|
|
*Title Bold* 17px/22 700
|
|
*Header* 22px/28 700</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 10:38</div><div class="msg">@andrey :point_up_2: what do you think of aligning codebase with these styles? I like that we can finally can get rid of style of the android action button text</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 10:56</div><div class="msg">:ermygerd:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 11:03</div><div class="msg">Also we might have a closer look at colour styles. I?m pretty sure we don't use all of them</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-09-24 11:04</div><div class="msg">Our current components are pretty crappy. Feel free to ignore them and start from a blank sheet!</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-09-24 11:05</div><div class="msg">I feel like we would need a couple more greys</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:05</div><div class="msg">i believe we have even more colours, but to see them in fiddle we need to rebuild it and deploy</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:06</div><div class="msg">let me deploy latest version</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 11:06</div><div class="msg">sorry, after refactoring we have only 3 left</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:07</div><div class="msg">i think i've been waiting so long this question :slightly_smiling_face:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 11:07</div><div class="msg">also, why are the Grey and Light Grey almost identical, it took me 3 months to start wondering about this :thinking_face:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 11:07</div><div class="msg">@jeluard @andrey ok guys, what would be a good approach to start implementing it? We have refactored our mobile designs and now almost everything is made of components.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:07</div><div class="msg">@maciej can we use Main as "default" one ?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 11:08</div><div class="msg">sure, it's the default</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:08</div><div class="msg">for example if we'll have component for text, something like `[text :timestamp "Text"]` and if we use `[text "Text"]` Main style will be applied</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 11:08</div><div class="msg">As I see it, we can create a GHI to make our action button (for example) as a component and ask contributor to refactor code to use only this component everywhere. Does it make sense?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:09</div><div class="msg">@denis-sharypin no more `:letter-spacing` ? :partyparrot:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 11:09</div><div class="msg">well, we don't use dividers anymore perhaps we can drop `Grey`</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:10</div><div class="msg">how to read `10px/12 400` ?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 11:10</div><div class="msg">that would be cool cause already the action button has two different colours used inside the app :see_no_evil:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:10</div><div class="msg">what are `/12` and `400` ?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 11:10</div><div class="msg">it's a good day for dropping things, sure</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-09-24 11:10</div><div class="msg">What 2 greys only ?? :mindblown:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:11</div><div class="msg">that sounds good, @cryptowanderer can we use bounty for this ?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-05-11/181684552369_66f21f8981bdb0f83bdd_72.jpg" /><div class="message"><div class="username">cryptowanderer</div><div class="time">2018-09-24 11:11</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:12</div><div class="msg">:ermygerd:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 11:12</div><div class="msg">oh, 10px is the `font-size` 12 is the `line-height` and 400 is the `font-weight`</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:12</div><div class="msg">`line-height` doesn't work well on Android, sometimes it cuts the text</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 11:13</div><div class="msg">we need it only for timestamp since it is usually in caps letters</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:13</div><div class="msg">we should be careful with it</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-05-11/181684552369_66f21f8981bdb0f83bdd_72.jpg" /><div class="message"><div class="username">cryptowanderer</div><div class="time">2018-09-24 11:13</div><div class="msg">sure thing</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-05-11/181684552369_66f21f8981bdb0f83bdd_72.jpg" /><div class="message"><div class="username">cryptowanderer</div><div class="time">2018-09-24 11:14</div><div class="msg">make the issue and I'll bounty it</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 11:14</div><div class="msg">yeah that can happen if it's too small, anything above 1.2x times the font-size should be ok</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-09-24 11:15</div><div class="msg">Do you have a doc with all your components ?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 11:17</div><div class="msg">Does open bounty still work? Don?t get me wrong but for me set up a bounty means I won't never be done. :neutral_face:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 11:17</div><div class="msg">yup, no more letter-spacing</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 11:17</div><div class="msg">oh we do ?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 11:17</div><div class="msg">```9.41 AM``` ? needs some space</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-05-11/181684552369_66f21f8981bdb0f83bdd_72.jpg" /><div class="message"><div class="username">cryptowanderer</div><div class="time">2018-09-24 11:18</div><div class="msg">we're using Gitcoin these days - so just link the issue here and I'll make it happen :+1: Will just need you to manage it in GH after that as per usual (i.e. providing feedback to the contributor etc.)</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 11:18</div><div class="msg">yeah, you're right, just didn't notice it. but still that's only a single style</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:20</div><div class="msg">i think would be great to have GHI with `design-systems` label</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:20</div><div class="msg">and you can try to develop components from scratch in fiddle, with my help</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 11:21</div><div class="msg">amazing thanks</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:21</div><div class="msg">unfortunately anonymous gist doesn't work anymore, so you need to copy code to gist manually</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 11:27</div><div class="msg">I'll have one ready later today, right now they?re all over the place here <a href="https://www.figma.com/files/project/904425/Design-System">https://www.figma.com/files/project/904425/Design-System</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 11:27</div><div class="msg">there are no docs with specifications yet. We just created them for internal use. Now we are thinking how to present them to the world</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 11:33</div><div class="msg">@denis-sharypin i think better to start from colours and fonts globally, and then introduce components</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-09-24 11:35</div><div class="msg">A one page figma would be a very good start.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 13:08</div><div class="msg">```
|
|
(def color-blue4-transparent "rgba(67, 96, 223, 0.10)") ;;secondary button background
|
|
(def color-blue6 "#3745AF") ;;advanced button background
|
|
(def color-gray3 "#00000040") ;; actions-list-view
|
|
(def color-gray5 "#d9dae1") ;; chat-separator-item
|
|
(def color-gray7 "#9fa3b4") ;; icons gray
|
|
(def color-gray9 "#E9EBEC") ;; asset-icon
|
|
```</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 13:08</div><div class="msg">please help to "map" colors</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 13:20</div><div class="msg">blue4-transparent is definitely wrong, it's kinda blue-ish but not our blue, the correct colour for button backgrounds is the main blue with 10% opacity so rgba(236, 239, 252, 0.1)
|
|
|
|
advanced button background is weird, can't recall it being used anywhere at all
|
|
|
|
Action list view is just black with 40% opacity, so I _guess_ it's currently used for chevron `>` icons on table cells
|
|
The correct one would be 40% Dark Grey so a rgba(147, 155, 161, 0.4)
|
|
|
|
chat separator, dunno
|
|
icons-gray - should be our Dark Grey #9FA3B4
|
|
asset-icon - should be our Light Grey #EEF2F5</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 13:25</div><div class="msg">```
|
|
(def color-dark "#49545d") ;; icons dark
|
|
(def color-white-transparent-1 "#f1f1f11a") ;; separator
|
|
(def color-white-transparent-3 "#FFFFFF1A") ;; asset-container
|
|
(def color-white-transparent-4 "#FFFFFF33") ;; border-color-high
|
|
(def color-white-transparent-5 "#FFFFFF8C") ;; wallet-value
|
|
(def color-light-blue "#628fe3") ;; online-color
|
|
(def color-light-blue-transparent "#628fe333") ;; action-button-icon-container
|
|
(def color-dark-blue-2 "#1f253f") ; status-bar-transaction
|
|
(def color-light-gray "#EEF2F5") ; action-button-icon-container-disabled
|
|
(def color-light-gray3 "#e8ebec") ; tabs-container
|
|
(def color-light-gray6 "#BAC1C6") ; browser-icon
|
|
(def color-red "red") ;not-sent-text
|
|
(def color-red-2 "#d84b4b") ; icon-red-color
|
|
(def color-green-4 "#0dcd8d") ; network-icon
|
|
(def separator-color "#0000001f") ; actions-separator
|
|
```</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 13:26</div><div class="msg">@denis-sharypin it's your turn :sweat_smile:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 13:27</div><div class="msg">damn it</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-24 13:27</div><div class="msg">```
|
|
(def white-light-transparent "rgba(255, 255, 255, 0.1)") ;; Used as icon background color for a dark foreground
|
|
(def white-transparent "rgba(255, 255, 255, 0.2)") ;; Used as icon color on dark background
|
|
(def white-lighter-transparent "rgba(255, 255, 255, 0.6)") ;; Used for input placeholder color
|
|
(def black "#000000") ;; Used as the default text color
|
|
(def black-transparent "#00000020") ;; Used as background color for rounded button on dark background
|
|
(def black-darker-transparent "#00000033") ;; Used as background color for containers like "Backup seed phrase"
|
|
(def gray "#939ba1") ;; Used as a background for a light foreground and as section header and secondary text color
|
|
(def gray-icon "#6e777e") ;; Used for forward icon in accounts
|
|
(def gray-light "#e8ebec") ;; Used as divider color
|
|
(def gray-lighter "#eef2f5") ;; Used as a background or shadow
|
|
(def gray-transparent "rgba(184, 193, 199, 0.5)") ;; Used for tabs
|
|
(def gray-notifications "#4A5054cc") ;; Used for notifications background
|
|
(def gray-border "#ececf0")
|
|
(def blue "#4360df") ;; Used as main wallet color, and ios home add button
|
|
(def blue-transparent "rgba(67, 96, 223, 0.2)")
|
|
(def blue-transparent-10 "rgba(67, 96, 223, 0.1)")
|
|
(def blue-transparent-40 "rgba(67, 96, 223, 0.4)")
|
|
(def blue-darker "#c4cced")
|
|
(def blue-dark "#3147ac") ;; Used as secondary wallet color (icon background)
|
|
(def hawkes-blue "#dce2fb") ;; Outgoing chat messages background
|
|
(def wild-blue-yonder "#707caf") ;; Text color for outgoing messages timestamp
|
|
(def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions
|
|
(def red-light "#ffe5ea") ;; error tooltip
|
|
(def text-light-gray "#212121") ;; Used for labels (home items)
|
|
(def cyan "#7adcfb") ;; Used by wallet transaction filtering icon
|
|
(def photo-border-color "#ccd3d6")
|
|
(def green "#44d058") ;; icon for successful inboud transaction
|
|
(def tooltip-green-text "#66bf50") ;; fading tooltip text color
|
|
(def tooltip-green "#e9f6e6") ;; fading tooltip background color
|
|
|
|
(def chat-colors ["#fa6565"
|
|
"#7cda00"
|
|
"#887af9"
|
|
"#51d0f0"
|
|
"#fe8f59"
|
|
"#d37ef4"])
|
|
```</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-24 13:28</div><div class="msg">I need some time</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-24 13:29</div><div class="msg">:scream: Ok can't we just start from the beginning with those colours and see what we actually need to build out our set of components ?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-25 06:29</div><div class="msg">morning guys, how is it going? :slightly_smiling_face:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-25 06:30</div><div class="msg">i heard we want to introduce fiddle on our website, maybe would be a good idea to combine it with our design system on the same page</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-25 06:32</div><div class="msg">:wave: morning. Well, for starters we have this doc that collects all of the components we made in Figma so far <a href="https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=0%3A1">https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=0%3A1</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-25 06:32</div><div class="msg">404</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-25 06:33</div><div class="msg">lol, forgot to turn on link sharing</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-25 06:45</div><div class="msg">oh colors</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-25 06:45</div><div class="msg">forgot about it</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-25 06:47</div><div class="msg">:scream:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-25 12:00</div><div class="msg">@andrey
|
|
```(def color-dark "#49545d") ;; icons dark``` ? Black, #000000
|
|
|
|
```(def color-white-transparent-1 "#f1f1f11a") ;; separator``` ? White, #ffffff, 0.1
|
|
|
|
```(def color-white-transparent-3 "#FFFFFF1A") ;; asset-container``` ? White, #ffffff, 0.1
|
|
|
|
```(def color-white-transparent-4 "#FFFFFF33") ;; border-color-high``` ? White, #ffffff, 0.1
|
|
|
|
```(def color-white-transparent-5 "#FFFFFF8C") ;; wallet-value``` ? White, #ffffff, 0.4
|
|
|
|
```(def color-light-blue "#628fe3") ;; online-color``` ? Accent Blue, #4360DF
|
|
|
|
```(def color-light-blue-transparent "#628fe333") ;; action-button-icon-container```? Light Blue, ##ECEFFC
|
|
|
|
```(def color-dark-blue-2 "#1f253f") ; status-bar-transaction``` ? Black, #000000
|
|
|
|
```(def color-light-gray "#EEF2F5") ; action-button-icon-container-disabled```? Light Grey, #EEF2F5
|
|
|
|
```(def color-light-gray3 "#e8ebec") ; tabs-container``` ? Black, #000000, 0.1
|
|
|
|
```(def color-light-gray6 "#BAC1C6") ; browser-icon``` ? Dark Grey, #939BA1
|
|
|
|
```(def color-red "red") ;not-sent-text``` ? Red, #FF2D55
|
|
|
|
```(def color-red-2 "#d84b4b") ; icon-red-color``` ? Red, #FF2D55
|
|
|
|
```(def color-green-4 "#0dcd8d") ; network-icon``` ? Green, #44D058
|
|
|
|
```(def separator-color "#0000001f") ; actions-separator``` ? Black, #000000, 0.1</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-25 12:03</div><div class="msg">damn, that's a nicely formatted list and all</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-25 12:03</div><div class="msg">Denis, you?ve put your heart into making this list</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-25 12:04</div><div class="msg">:heart:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-25 12:10</div><div class="msg">thanks guys!</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-25 15:50</div><div class="msg">Almost ready here. Need to discuss 2 colors that left with Maciej</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-26 08:13</div><div class="msg">```(def white-light-transparent "rgba(255, 255, 255, 0.1)") ;; Used as icon background color for a dark foreground``` ? White, #ffffff, 0.1
|
|
|
|
```(def white-transparent "rgba(255, 255, 255, 0.2)") ;; Used as icon color on dark background``` ? White, #ffffff, 0.4
|
|
|
|
```(def white-lighter-transparent "rgba(255, 255, 255, 0.6)") ;; Used for input placeholder color```? White, #ffffff, 0.4
|
|
|
|
```(def black "#000000") ;; Used as the default text color``` ? Black, #000000
|
|
|
|
```(def black-transparent "#00000020") ;; Used as background color for rounded button on dark background``` ? Black, #000000, 0.1
|
|
|
|
```(def black-darker-transparent "#00000033") ;; Used as background color for containers like "Backup seed phrase"``` ? Black, #000000, 0.1
|
|
|
|
```(def gray "#939ba1") ;; Used as a background for a light foreground and as section header and secondary text color``` ? Dark grey, #939BA1
|
|
|
|
```(def gray-icon "#6e777e") ;; Used for forward icon in accounts``` ? Black, #000000
|
|
|
|
```(def gray-light "#e8ebec") ;; Used as divider color``` ? Black, #000000, 0.1
|
|
|
|
```(def gray-lighter "#eef2f5") ;; Used as a background or shadow``` ? Light Grey, #EEF2F5
|
|
|
|
```(def gray-transparent "rgba(184, 193, 199, 0.5)") ;; Used for tabs``` ? Dark Grey, #939BA1
|
|
|
|
```(def gray-notifications "#4A5054cc") ;; Used for notifications background``` ? Dark Grey, #939BA1
|
|
|
|
```(def gray-border "#ececf0")``` ? Light Grey, #EEF2F5
|
|
|
|
```(def blue "#4360df") ;; Used as main wallet color, and ios home add button``` ? Accent blue, #4360df
|
|
|
|
```(def blue-transparent "rgba(67, 96, 223, 0.2)``` ? Light Blue, #ECEFFC
|
|
|
|
```(def blue-transparent-10 "rgba(67, 96, 223, 0.1)``` ? Light Blue, #ECEFFC
|
|
|
|
```(def blue-transparent-40 "rgba(67, 96, 223, 0.4)")``` ? Light Blue, #ECEFFC
|
|
|
|
```(def blue-darker "#c4cced")``` ? Light Blue, #ECEFFC
|
|
|
|
```(def blue-dark "#3147ac") ;; Used as secondary wallet color (icon background)``` ? Black, #000000, 0.1
|
|
|
|
```(def hawkes-blue "#dce2fb") ;; Outgoing chat messages background``` ? Accent blue, #4360df
|
|
|
|
```(def wild-blue-yonder "#707caf") ;; Text color for outgoing messages timestamp``` ? White, #ffffff, 0.4
|
|
|
|
```(def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions``` ? Red, #FF2D55
|
|
|
|
```(def red-light "#ffe5ea") ;; error tooltip``` ? White, #ffffff,
|
|
|
|
```(def text-light-gray "#212121") ;; Used for labels (home items)``` ? Black, #000000
|
|
|
|
```(def cyan "#7adcfb") ;; Used by wallet transaction filtering icon``` ? Accent blue, #4360df
|
|
|
|
```(def photo-border-color "#ccd3d6")``` ? Dark Grey, #939BA1, 0.4
|
|
|
|
```(def green "#44d058") ;; icon for successful inboud transaction``` ? Green, #44D058
|
|
|
|
```(def tooltip-green-text "#66bf50") ;; fading tooltip text color``` ? Green, #44D058
|
|
|
|
```(def tooltip-green "#e9f6e6") ;; fading tooltip background color``` ? White, #ffffff,
|
|
|
|
(def chat-colors [?#fa6565?
|
|
?#7cda00"
|
|
?#887af9?
|
|
?#51d0f0"
|
|
?#fe8f59?
|
|
?#d37ef4"])</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-26 08:14</div><div class="msg">Hey @andrey with this refactoring we want to get rid of some extra shades of blue for outgoing messages</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-26 08:14</div><div class="msg">WOW</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-26 08:14</div><div class="msg">/kudos @denis-sharypin HUGE</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-26 08:14</div><div class="msg">Can you also fix this a bit?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-26 08:15</div><div class="msg">fix what?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-26 08:18</div><div class="msg">in the colors above take a look at these little boys ```(def hawkes-blue "#dce2fb") ;; Outgoing chat messages background```
|
|
? Accent blue, #4360df
|
|
|
|
```(def wild-blue-yonder "#707caf") ;; Text color for outgoing messages timestamp```
|
|
? White, #ffffff , 0.4</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-26 08:18</div><div class="msg">If we change color of outgoing message from #dce2fb to #4360df we won't see the numbers and some text on chat bubble</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-26 08:29</div><div class="msg">Refactored colors</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-26 08:32</div><div class="msg">and to go along with those refactored colours we removed chat-specific colours for right-side messages, there were like 5 of them. So the washed out blues were changed to saturated Accent Blue</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-26 08:41</div><div class="msg">isn't it too contrast? just wondering</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-26 08:43</div><div class="msg">Nah, it's cool you?ve asked. Contrast between? You mean the left messages from right, or the Blue against grey, or the text inside?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-26 09:00</div><div class="msg">Blue against grey and the text inside</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-26 09:01</div><div class="msg">maybe something wrong with me, but i like more "old" style maybe I'm just used to it</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-26 09:15</div><div class="msg">Sure thanks for the feedback. I'll sit on it some more, but to keep it consistent with our colour palette without maintaining separate styles for chat, that's our best option. @denis-sharypin wdyt?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-26 09:16</div><div class="msg">I think there is no such thing as too much contrast :slightly_smiling_face:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-26 09:17</div><div class="msg">Kik, Telegram X, Fb messenger use this approach.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-27 12:08</div><div class="msg">quick update, I've completed the work on the Table Cell component, the one we?ll use the most. lmk if you feel like it's missing some innards <a href="https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=0%3A1">https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=0%3A1</a></div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-09-27 12:14</div><div class="msg">Nice! Great to see components progress!!
|
|
So is this about screen tabbar? Or list cell too?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-27 12:16</div><div class="msg">it's the list cell and everything I could think of that a list cell can contain</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-09-27 12:17</div><div class="msg">So how about calling it List cell ?!</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-27 12:17</div><div class="msg">you prefer list cell to table cell ? ok sure, give me like a 15 minutes man to rename everything haha :doge:</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-09-27 12:18</div><div class="msg">:smile: Well I think it will be important to come up with great names! It's definitely called list in our lower tech levels</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-27 12:19</div><div class="msg">ok cool, list it is. I?m an iOS guy, it's a table view there and table cells</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-09-27 12:19</div><div class="msg">Ah ok. ReactNative has a different semantic I guess</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-09-27 12:20</div><div class="msg">That's a good one to start, you can get a number of other components from it! :slightly_smiling_face:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-27 13:05</div><div class="msg"><a href="https://status-im.github.io/fiddle/#gist=74f8ae5e1e8d3f8f002676e76ac5850b">https://status-im.github.io/fiddle/#gist=74f8ae5e1e8d3f8f002676e76ac5850b</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-27 13:32</div><div class="msg">btw did you have a time to push new
|
|
colors to production?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-27 13:34</div><div class="msg">yes i want to do it next week</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-27 13:34</div><div class="msg">new colors and fonts, and update fiddle</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-09-27 13:38</div><div class="msg">awesome! What do you need from the design team to refactor text sizes as well?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-27 13:42</div><div class="msg">we'll see, can't say now</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-12-12/285244060371_dbc007c8c7963b36a3ee_72.jpg" /><div class="message"><div class="username">hester</div><div class="time">2018-09-28 11:21</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-13/329132457109_199841cd908ca7faa97f_72.jpg" /><div class="message"><div class="username">rachel</div><div class="time">2018-09-28 11:21</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-12-12/285244060371_dbc007c8c7963b36a3ee_72.jpg" /><div class="message"><div class="username">hester</div><div class="time">2018-09-28 11:22</div><div class="msg">Great progress going on here!</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-08-07/411838218004_c7eba2c8e4f6b1a5ba77_72.png" /><div class="message"><div class="username">graeme</div><div class="time">2018-09-28 11:32</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-08-07/411838218004_c7eba2c8e4f6b1a5ba77_72.png" /><div class="message"><div class="username">graeme</div><div class="time">2018-09-28 11:34</div><div class="msg">@andmironov @maciej @denis-sharypin just following up on this (design channel thread). Pretty shortly (week after next) we will begin building front end designs for the voting dapp. Considering the voting dapp is likely to go through many iterations, keen to build design components first. It has the benefits that any Dapp's from status can use these components. To kick this off I think bounties could be a good way of getting the components build. Has a decision been made where to store Status design components?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-09-28 11:37</div><div class="msg">sounds great! do we have a general idea how close those components should mimic the work we?ve been doing for the Mobile component library? Because, looking at the awesome designs @maria245 made, there?s a lot of common ground and similarity where the components could be shared between the two.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-08-07/411838218004_c7eba2c8e4f6b1a5ba77_72.png" /><div class="message"><div class="username">graeme</div><div class="time">2018-09-28 12:09</div><div class="msg">Ya @maria245 leveraged the existing designs to get consistence</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-08-07/411838218004_c7eba2c8e4f6b1a5ba77_72.png" /><div class="message"><div class="username">graeme</div><div class="time">2018-09-28 12:10</div><div class="msg">The mobile component library is in Figma though right, would that work for developers?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-09-28 12:44</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-09-28 16:54</div><div class="msg"><a href="https://status-im.github.io/fiddle/#gist=77690fd9381660d700d1733651405b73">https://status-im.github.io/fiddle/#gist=77690fd9381660d700d1733651405b73</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-10-04/448613224960_1172d54b59bd12529087_72.jpg" /><div class="message"><div class="username">rramos</div><div class="time">2018-09-28 17:18</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-12-19/289021559940_764a5c704a5a99098d7a_72.jpg" /><div class="message"><div class="username">oskarth</div><div class="time">2018-09-29 05:45</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-02-19/317312541699_2fd60c283b2a9a58bf87_72.jpg" /><div class="message"><div class="username">iuri</div><div class="time">2018-09-29 14:13</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-02-19/317312541699_2fd60c283b2a9a58bf87_72.jpg" /><div class="message"><div class="username">iuri</div><div class="time">2018-09-29 14:14</div><div class="msg">@graeme so we were thinking the exact same thing at #embark , to build a collection of components that can be re-used</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-08-07/411838218004_c7eba2c8e4f6b1a5ba77_72.png" /><div class="message"><div class="username">graeme</div><div class="time">2018-09-30 20:14</div><div class="msg">Seems like there is a need across teams. Awesome @andrey to see <a href="https://status-im.github.io/fiddle/#gist=77690fd9381660d700d1733651405b73">https://status-im.github.io/fiddle/#gist=77690fd9381660d700d1733651405b73</a>. Is this where we should be adding components? How have you found working with it?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-10-01 07:12</div><div class="msg">fuck yeah :heart_eyes:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-10-01 07:26</div><div class="msg">so I tried to do the list component myself with React, to try how that works with Framer X. It?s nice having all of those prop controls available via UI, but React with JSX is just? ughh :face_with_head_bandage:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-01 07:37</div><div class="msg">hey @graeme i created fiddle to make it simple for external contributors to develop UI for status, and i develop UI only in fiddle, it's my :heart: :slightly_smiling_face: and i hope we'll use it for adding components as well, but it works only for status-react components, i'm not sure we can use it across teams</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-08-07/411838218004_c7eba2c8e4f6b1a5ba77_72.png" /><div class="message"><div class="username">graeme</div><div class="time">2018-10-01 07:45</div><div class="msg">I know the voting dapp is in react-JS, off hand do you know if its compatible with react native?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-01 08:04</div><div class="msg">if we agree to use `react-native-web` library we can use same components for dapps and status, if not, i think it will be easier to create components for react separately</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-10-01 08:06</div><div class="msg">I'll just chime in saying the design team would also appreciate React components since that's what our tools can work with.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-01 09:04</div><div class="msg">@maciej could you elaborate please about this gif? so did you write jsx and framer x generated this UI with controls according your jsx ?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-10-01 09:11</div><div class="msg">Sure, I'd love to elaborate :slightly_smiling_face: So, this is a regular plain React component written in JSX with only imports for Framer X to expose the props as controls for the UI, basically each prop can be given a different type of control like you see there. I tried to use all of them, again this was mostly to learn the tool. It?s really cool to have the power of React components inside a fully-fledged design tool. If you're interested here?s the documentation <a href="https://framer.com/docs/components#code">https://framer.com/docs/components#code</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-08-07/411838218004_c7eba2c8e4f6b1a5ba77_72.png" /><div class="message"><div class="username">graeme</div><div class="time">2018-10-01 09:21</div><div class="msg">@barry @iuri how does react-native-web sound to you guys?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-01 09:36</div><div class="msg">how is it different from fiddle? what benefits do you have with open code in Framer?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-01 09:37</div><div class="msg">i want to understand how we can move with components.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-01 09:38</div><div class="msg">so currently you create components in some design tool, then we "translate" it to code , and see result</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-01 09:39</div><div class="msg">do you see clojure in fiddle hard to learn and use for non programmers ?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-10-01 09:54</div><div class="msg">It?s a design tool with features like vector drawing, advanced layout capabilities, a vast library of 3rd party components and other things we designers need for any kind of UI design work. You directly manipulate components on the canvas, there?s no code knowledge required to design stuff. Fiddle as awesome as it is, doesn?t give us a canvas to quickly test and execute our ideas, and I wouldn't expect it to, creating a design tool is hard, there are only a couple of teams in the world who did that. As for closure, the code looks transparent and I definitely follow what is happening there, and I'd probably be able to assemble a complete view from previously created components. So, I don't think it's hard, maybe just not popular, I've never heard of it before joining Status.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-01 10:00</div><div class="msg">tbh it doesn't take too much time to "translate" manually design from modern design tools to fiddle, so we can continue this way, designers create components in design tool, and then programmers or designers can "translate" them to fiddle, and experimenting with different parameters and see how it looks in status</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-02-19/317312541699_2fd60c283b2a9a58bf87_72.jpg" /><div class="message"><div class="username">iuri</div><div class="time">2018-10-01 11:03</div><div class="msg">Hum.. not sure. Need to look into it. It?s possible we are not talking about the same type of components</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-01 12:27</div><div class="msg">@andrey the components are react-native + clojurescript?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-01 12:30</div><div class="msg">The goal is to have the components be importable from NPM, so what will a plain React project need to be able to import the components?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-13/329132457109_199841cd908ca7faa97f_72.jpg" /><div class="message"><div class="username">rachel</div><div class="time">2018-10-01 15:33</div><div class="msg">hey hey @andmironov could you add @barry to the design system sync? I think he?d be able to provide good input about components in general, but also from the DApp perspective</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-02 15:40</div><div class="msg">The design system link in the topic is not public</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-02 15:43</div><div class="msg">@barry I sent you the invite to view it</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-02 15:53</div><div class="msg">thanks. Why not make it open to everyone?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-02 16:03</div><div class="msg">it's not possible on that stage. Figma is invite only design tool. However, the aim of this swarm is to make it public sooner or later. Join our biweekly calls to sync on that</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-08-07/411838218004_c7eba2c8e4f6b1a5ba77_72.png" /><div class="message"><div class="username">graeme</div><div class="time">2018-10-04 07:50</div><div class="msg">Hi guys, getting close to needing the design work for voting dapp worked on, any consensus for a tool to store them in?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-04 07:58</div><div class="msg">Actually guys told me that I was wrong and we can publish a public link to our mobile design library. Here it is: <a href="https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=0%3A1">https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=0%3A1</a>
|
|
|
|
But it doesn?t seem like intersect much with the design of the voting dapp. Meaning anyways you need to build those components for voting dapp from the scratch</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-04 11:56</div><div class="msg">@denis-sharypin set the channel topic: <a href="https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=0%3A1">https://www.figma.com/file/cb4p8AxLtTF3q1L6JYDnKN15/Index?node-id=0%3A1</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-08-07/411838218004_c7eba2c8e4f6b1a5ba77_72.png" /><div class="message"><div class="username">graeme</div><div class="time">2018-10-04 14:18</div><div class="msg">@iuri @andrey@andmironov @barry Aiming to started front end development for voting dapp next week. Any consensus about a tool where we can store the react components? @iuri what are you using for embark?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-02-19/317312541699_2fd60c283b2a9a58bf87_72.jpg" /><div class="message"><div class="username">iuri</div><div class="time">2018-10-04 14:19</div><div class="msg">tool, you mean like storybook?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-08-07/411838218004_c7eba2c8e4f6b1a5ba77_72.png" /><div class="message"><div class="username">graeme</div><div class="time">2018-10-04 14:21</div><div class="msg">yup</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-04 14:27</div><div class="msg">What objections do designers have to using Storybook?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-02-19/317312541699_2fd60c283b2a9a58bf87_72.jpg" /><div class="message"><div class="username">iuri</div><div class="time">2018-10-04 14:31</div><div class="msg">I love storybook</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-02-19/317312541699_2fd60c283b2a9a58bf87_72.jpg" /><div class="message"><div class="username">iuri</div><div class="time">2018-10-04 14:31</div><div class="msg">don't designers like it?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-04 14:41</div><div class="msg">@barry We don't have any at least at this point of developing a Dapp design system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-04 14:42</div><div class="msg">@maciej @denis-sharypin?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-04 14:43</div><div class="msg">Let?s use it guys</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-04 14:43</div><div class="msg">this system is for you, if you are comfortable with it, we will adapt</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 15:01</div><div class="msg">>What objections do designers have to using Storybook?
|
|
@barry can you please describe why are you asking? :slightly_smiling_face:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-08-07/411838218004_c7eba2c8e4f6b1a5ba77_72.png" /><div class="message"><div class="username">graeme</div><div class="time">2018-10-04 15:39</div><div class="msg">:raised_hands:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-04 15:51</div><div class="msg">We need a single source of truth for everybody to reference design components. Right now, when developers receive designs in Figma, Sketch, Invision, Zepplin, they are not made with instantly usable components, which means before those designs can be implemented the components of the designs have to be built, and if your building the components then you are actually building a UI library before even implementing the designs. It doesn't scale if your building a UI library for every single application in terms of speed of development and then maintenance as branding evolves, ie: Our standard button changes, then every single application needs to have the button manually updated.
|
|
|
|
The alternative is to have a UI components library where developers can import components and go directly to implementing the designs in every app. When the branding changes, then an update is made to the component in the UI Library and it will be reflected in every app that uses that component.
|
|
|
|
There are current designs being proposed for dapps on tight deadlines and we want to know if we can immediately start populating Storybook with components so we can get these designs implemented or is there another proposal on the table that we should evaluate before we start using Storybook?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:27</div><div class="msg">Barry, thank you for this, this makes perfect sense. Let me make this clear, having a component library in code is 100% hat we are aiming for. It?s not Figma components vs. Storybook (or any other engine behind a living style-guide in code) . It?s 1 Step. Figma -> 2 Step. Storybook
|
|
|
|
Having the components defined, encapsulated and documented in Figma is the first step, which is currently in progress. It?s not a simple as it may seem. Let?s take a list item as an example. It has text in it of a certain size (let?s say 15px), text-color (#000000), which means that there should be a color palette defined first along with the typography rules. Then there are some variable elements: it might have an avatar or not, the text may have two lines or only one. The may be a `1..99` counter in it, a checkbox, a radio button etc. This means that we should have a set of checkboxes and radio buttons first. For text shortening we should define a unified way (ellipsis in our case)</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:28</div><div class="msg">Even after we have all those components at code level and documented in Storybook, Figma should always be in sync with it and stay the universal source of truth. Because it's the tool we, designers use to build mockups</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:30</div><div class="msg">So in order to define the components, we need to do a whole bunch of work mockup-wise, revisit all the screens, figure out what can be reusable or not, create the rules. If i go back to that list item example, a list item with two lines of text, is it a state of a list item, or there would be two different components: one for a two-lines item and one for a single line one?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:34</div><div class="msg">Should components be able to nest one into another? Should we use <a href="http://bradfrost.com/blog/post/atomic-web-design/">http://bradfrost.com/blog/post/atomic-web-design/</a> methodology or some other one?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:35</div><div class="msg">We are thinking discussing this and are close to finishing the initial work with the most commonly used components.</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-10-04 16:37</div><div class="msg">How about document as source of truth? Like <a href="https://material.io/design/components/">https://material.io/design/components/</a></div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-10-04 16:37</div><div class="msg">Status is available on multiple platform. One implementation as truth is not optimal.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-04 16:39</div><div class="msg">Our designs should account for this and even the library, material-ui as a library actually does a good job of creating components with breakpoints that change them based on the device.</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-10-04 16:39</div><div class="msg">That should be implementation details.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:39</div><div class="msg">Also, you?ve mentioned Dapp design elements. Currently we're working on a component library for the app itself. Dapp components should be different, taking into account the difference in technology. For example, a Dapp can not have a bottom tab bar, because it's basically a website, it has a different UX. This means navigation in a Dapp should be done in another way, yet stay consistent across all Dapps made by Status. And what about third-party Dapps? Should we encourage Dapp developers to use the same color palette as we do? The same typography etc. These questions should also be addressed and as far as i know the answers remain unclear</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-10-04 16:39</div><div class="msg">We have native platforms as first target. Not web</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:40</div><div class="msg">Thanks you for using material design as an example of a design system Julien :slightly_smiling_face: It indeed is a perfect and as far as i know the most huge, thought-through, and well-explained system out there. And the first one of this scale</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-10-04 16:41</div><div class="msg">DApps devs have little incentive to align on status design system.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:44</div><div class="msg">here we should figure out what are we discussing. the MVP of a component library or a perfect design system we're aiming to create in the future. Of course, we would love to have something like material design and for sure a website with everything documented is a perfect source of truth. But first i think we should have it in Figma, as a first step</div></div></div><br/>
|
|
<div><img src="https://secure.gravatar.com/avatar/2674ec9e762bcd011c9542c1b787ce13.jpg?s=72&d=https%3A%2F%2Fa.slack-edge.com%2F66f9%2Fimg%2Favatars%2Fava_0019-72.png" /><div class="message"><div class="username">jeluard</div><div class="time">2018-10-04 16:45</div><div class="msg">I'm fine with figma as source of truth</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:46</div><div class="msg">agreed 100%. and this also adds a level of complexity.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-04 16:48</div><div class="msg">All the constraints you describe above is exactly what we can display in storybook and cutout the extra noise that something like Figma injects when trying to understand a component. See "Knobs" in this example: <a href="https://bit.ly/2E9p2KD">https://bit.ly/2E9p2KD</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:49</div><div class="msg">Also, there?s some work happening which slows down the documentation of components, for instance just recently we decided to move towards eliminating platform-specific differences between IOS and Android. The first step was to use Inter UI typeface instead of San Francisco for IOS and Roboto for Android</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:49</div><div class="msg">This means that we had to change the typeface literally on all screens</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-04 16:50</div><div class="msg">I think Figma is good to tell the whole story of a UI flow, but does not seem to have the level of precision we need at the component level.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:51</div><div class="msg">Also, it's not as easy as it seems, a line of text has a variable width, depending on the typeface. The visual weights of two different typefaces are also not the same. For example, if in Roboto we used 24px for titles, in Inter UI it appeared that it's better looking in 22px</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:56</div><div class="msg">once again, there will be always both, because Figma is the toll we use to create the UI</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:56</div><div class="msg">it's one one vs. another</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:57</div><div class="msg">i am sure it does, there?s no doubt in that, but first we still have to define those in Figma since it's the place where they happen to be at this time. It?s not about how we represent the constrains. it how we discover and define them</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 16:59</div><div class="msg">i am pretty sure you're right! :slightly_smiling_face:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-04 17:10</div><div class="msg">@jeluard Looking at Buttonbar / Double: Pressed, if that was supplied in a design, what is a developer supposed to do with it? That CSS is not usable for any viewport we support and that is probably why Figma only has PNG, JPG, SVG exports.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 17:11</div><div class="msg">Barry, CSS export in a design tool is an extra feature, you don't have to use it, it's up to you to decide. I mean, is it even possible to built a code generator that would fit all needs?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 17:12</div><div class="msg">png, svg and jpg export is also a feature, but it is here for stuff like icons and illustrations, not to export actual buttons</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 17:15</div><div class="msg">what could be more interesting to you is the sizes, margins, paddings, colors etc. ? the actual values of boxes, text, icons. Which Figma displays really good</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-04 17:15</div><div class="msg">if we don't have the css, what do we have?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-04 17:16</div><div class="msg">"the sizes, margins, paddings, colors etc. " is not interesting to me, a want a library so I could not focus on that</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 17:17</div><div class="msg">you take the values and put those in your css/sass/less, who knows what you have there? maybe you have a separate sass file with all the colors there and only use color names like `$lingt-blue` instead of `#0d0fd0` a design tool just gives you the values</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 17:18</div><div class="msg">>want a library so I could not focus on that
|
|
Barry, thank you for letting us know, we're working hard to fulfill your needs, i promise!</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-04 17:20</div><div class="msg">what is native? iphone 6, iPhone X, iPhone 8 plus? They all have different viewports, we have not even touched on Android devices</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-04 17:28</div><div class="msg">@andmironov To bring things back to the pragmatic, if we receive designs today what should we do with them?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 17:31</div><div class="msg">if i understand you correctly, with no component library i place, open it in figma, click on the objects, take the values (text, paddings, margins) look at the layout (alignment, centering, floating, fixed/sticky/static) ask questions if something is unclear or missing (what happens if the text is too long/absent etc. ) and implement</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-04 17:36</div><div class="msg">When we scope out how long that will take and if it will make us miss our OKRs, don't you think the more likely path is the team will just not use the designs and opt to use something like material-ui?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 17:38</div><div class="msg">well, it depends on the goal we're trying to achieve, but now my answer is no, i do not think so</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-05-14/363707704565_2e5e86c7fcaa985eacd9_72.jpg" /><div class="message"><div class="username">barry</div><div class="time">2018-10-04 17:41</div><div class="msg">The other reason for a component library is designs need constraints, if someone went to architect with a budget and materials for a single family house the architect wouldn't give him designs to build the palace of versailles</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-04 18:03</div><div class="msg">Let?s make this clear, the purpose of this project (and this slack channel in particular) is to create a component library, to streamline the development process and provide a consistent experience to our users on all the platforms. This is what we are doing all together</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-01/375000796951_78d872be972af4441b52_72.jpg" /><div class="message"><div class="username">exiledsurfer</div><div class="time">2018-10-04 19:43</div><div class="msg">has joined #design-system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:11</div><div class="msg">@denis-sharypin look , it's like a mushrooms after rain, new gray color in hardwallet screens` (def gray-background "#eceffc")`</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 09:13</div><div class="msg">haha</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 09:13</div><div class="msg">where</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 09:14</div><div class="msg">this is Light Blue, #ECEFFC</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 09:15</div><div class="msg">OBJECTIONS DECLINED</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:25</div><div class="msg">@denis-sharypin
|
|
```(def red-light "#ffe5ea") ;; error tooltip```
|
|
? White, #ffffff ,</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:25</div><div class="msg">are you sure?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 09:26</div><div class="msg">need some shadows</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:26</div><div class="msg">hm kk</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:26</div><div class="msg">(def blue-light "#cad1ed") ;; Text and bottom border color for own quoted messages</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:26</div><div class="msg">new blue</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:26</div><div class="msg">:slightly_smiling_face:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:27</div><div class="msg">it's just 2 weeks , and we have 2 new colours :slightly_smiling_face: 1 colour per week )</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 09:32</div><div class="msg">let me check this (def blue-light ?#cad1ed ?) ;; Text and bottom border color for own quoted messages</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 09:36</div><div class="msg">where is this color is used?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:39</div><div class="msg">if i understand right, it's new functionality</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:39</div><div class="msg">(defn quoted-message-container [outgoing]
|
|
{:margin-bottom 6
|
|
:padding-bottom 6
|
|
:border-bottom-color (if outgoing
|
|
colors/blue-light
|
|
colors/gray-lighter)</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:39</div><div class="msg">quoted messages</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:39</div><div class="msg">let's use light blue</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:39</div><div class="msg">looks similar</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:41</div><div class="msg">ok, thats what i have in result</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:41</div><div class="msg">;; WHITE
|
|
(def white "#ffffff")
|
|
(def white-light-transparent (alpha white 0.1)) ;; Used as icon background color for a dark foreground
|
|
(def white-transparent (alpha white 0.4)) ;; Used as icon color on dark background and input placeholder color
|
|
(def wild-blue-yonder white-transparent) ;; Text color for outgoing messages timestamp
|
|
(def red-light "#ffe5ea") ;; error tooltip TODO (andrey) should be white, but shaddow needed
|
|
(def tooltip-green "#e9f6e6") ;; fading tooltip background color TODO (andrey) should be white, but shaddow needed
|
|
|
|
;; BLACK
|
|
(def black "#000000") ;; Used as the default text color
|
|
(def black-transparent (alpha black 0.1)) ;; Used as background color for rounded button on dark background and as background color for containers like "Backup seed phrase"
|
|
(def gray-light black-transparent) ;; Used as divider color
|
|
|
|
;; DARK GREY
|
|
(def gray "#939ba1") ;; Dark grey, used as a background for a light foreground and as section header and secondary text color
|
|
;; LIGHT GREY
|
|
(def gray-lighter "#eef2f5") ;; Light Grey, used as a background or shadow
|
|
|
|
;; ACCENT BLUE
|
|
(def blue "#4360df") ;; Accent blue, used as main wallet color, and ios home add button
|
|
;; LIGHT BLUE
|
|
(def blue-light "#ECEFFC") ;; Light Blue
|
|
(def gray-background blue-light) ;; TODO (andrey) should be refactored later by Dmitry
|
|
|
|
;; RED
|
|
(def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions
|
|
|
|
;; GREEN
|
|
(def green "#44d058") ;; icon for successful inboud transaction</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:54</div><div class="msg">@denis-sharypin could you take a look at this pls</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 09:54</div><div class="msg">it would be great to have same mapping as for others colours you did</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 10:20</div><div class="msg">:eyes:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 10:20</div><div class="msg">:eyes:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 10:21</div><div class="msg">don't worry i removed them all :slightly_smiling_face: not used</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 10:21</div><div class="msg">that's cool</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 10:23</div><div class="msg">@denis-sharypin last one i hope :slightly_smiling_face: `(def default-chat-color :purpule) ;; legacy`</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 10:23</div><div class="msg">what do you think?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 10:23</div><div class="msg">default chat color is for incoming or outgoing messages?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 10:26</div><div class="msg">i think this is something also not used anymore</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 10:27</div><div class="msg">can't say for sure where this color is used</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 10:29</div><div class="msg">I think looks good, also we have here some small descriptions for what each color is used for. Maybe it could help to write descriptions <a href="https://www.figma.com/file/aVp7AMrSuRBW58serJdaXOrk/Status-Colors?node-id=6%3A3">https://www.figma.com/file/aVp7AMrSuRBW58serJdaXOrk/Status-Colors?node-id=6%3A3</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 14:34</div><div class="msg"><a href="https://github.com/status-im/status-react/pull/6160#issuecomment-427384344">https://github.com/status-im/status-react/pull/6160#issuecomment-427384344</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 14:34</div><div class="msg">@denis-sharypin @maciej could you please check, thanks</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-05 15:26</div><div class="msg">Where to put feedback? Here or in GHI?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-05 15:31</div><div class="msg">GHI, thanks</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-04-16/346978770624_9e34aabb0e7c70909e09_72.jpg" /><div class="message"><div class="username">denis-sharypin</div><div class="time">2018-10-08 07:48</div><div class="msg">Just checked, some small mistakes on the wallet screen. I'll updated the issue with screenshots</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-10-04/251566892466_e37667e6064fe542e7d7_72.jpg" /><div class="message"><div class="username">naghdy</div><div class="time">2018-10-08 10:22</div><div class="msg">Hey folks. What do people think about having a VC some time this week to talk about the Component Library?
|
|
cc @denis-sharypin @ned @andmironov @carl</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-03-28/338213459126_9a2080e57364819a4d87_72.jpg" /><div class="message"><div class="username">andrey</div><div class="time">2018-10-08 10:23</div><div class="msg">thanks on it</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-10-04/251566892466_e37667e6064fe542e7d7_72.jpg" /><div class="message"><div class="username">naghdy</div><div class="time">2018-10-08 13:10</div><div class="msg">Anyone else who should join that is relevant to the discussion? I want to talk about (a) what it is we're building, and (b) who will build it.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-12-12/285244060371_dbc007c8c7963b36a3ee_72.jpg" /><div class="message"><div class="username">hester</div><div class="time">2018-10-08 13:31</div><div class="msg">@barry @andrey @jeluard @maciej </div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-07-05/394232370742_ad7884cfec10fe3457d9_72.jpg" /><div class="message"><div class="username">ned</div><div class="time">2018-10-08 13:44</div><div class="msg">Also maybe @graeme</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-08-07/411838218004_c7eba2c8e4f6b1a5ba77_72.png" /><div class="message"><div class="username">graeme</div><div class="time">2018-10-08 14:21</div><div class="msg">Sure</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-08 14:43</div><div class="msg">we're having a design system call scheduled on friday, just invited @naghdy and @carl</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-10-04/251566892466_e37667e6064fe542e7d7_72.jpg" /><div class="message"><div class="username">naghdy</div><div class="time">2018-10-08 14:49</div><div class="msg">So we should cancel Thursday and add the above people?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-10-04/251566892466_e37667e6064fe542e7d7_72.jpg" /><div class="message"><div class="username">naghdy</div><div class="time">2018-10-08 14:49</div><div class="msg">Or you want to both?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-10-04/251566892466_e37667e6064fe542e7d7_72.jpg" /><div class="message"><div class="username">naghdy</div><div class="time">2018-10-08 14:49</div><div class="msg">Is the design system, brand system, and component library all separate discussions?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-08 14:50</div><div class="msg">well, component library is the first step of a design system</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-08 14:50</div><div class="msg">brand system is something that is connected yet in a different way</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-08 14:51</div><div class="msg">re: call, no worries, i can do both, it's just that we already had a call planned on friday, i just thought it makes sense to add you guys if you're interested</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-08 14:52</div><div class="msg">but if you can't make it on friday, let?s have it on Thursday</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-06-18/383168488562_67e9438427749a78758b_72.png" /><div class="message"><div class="username">maciej</div><div class="time">2018-10-08 14:55</div><div class="msg">@andmironov asking for a friend, what?s a `brand system` ?</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-08 14:56</div><div class="msg">:slightly_smiling_face:</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-12-12/285244060371_dbc007c8c7963b36a3ee_72.jpg" /><div class="message"><div class="username">hester</div><div class="time">2018-10-08 14:59</div><div class="msg">@naghdy slide 4 shows the connection component library design system, as I see it
|
|
|
|
<a href="https://docs.google.com/presentation/d/1FhdfcW7rkkelEU4ARN_M5IUE0zFnbJX7laOHnEkzF5U/edit?usp=drivesdk">https://docs.google.com/presentation/d/1FhdfcW7rkkelEU4ARN_M5IUE0zFnbJX7laOHnEkzF5U/edit?usp=drivesdk</a></div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2016-11-16/104878545009_e6897ef62e65dc08f5b8_72.jpg" /><div class="message"><div class="username">andmironov</div><div class="time">2018-10-08 14:59</div><div class="msg">note to self: we should agree on the vocabulary we're using</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-07-05/394232370742_ad7884cfec10fe3457d9_72.jpg" /><div class="message"><div class="username">ned</div><div class="time">2018-10-08 15:09</div><div class="msg">@andmironov and Friends / Brand Systems could include / exclude elements from specific product design. Such as Mission, Purpose, Tone of voice, Printed Materials, etc / Ideas that help shape a narrative that currently do not exist.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2018-07-05/394232370742_ad7884cfec10fe3457d9_72.jpg" /><div class="message"><div class="username">ned</div><div class="time">2018-10-08 15:18</div><div class="msg">I think the term would be more closely related to 'Brand Guidelines' but I think we can integrate them into the same place.</div></div></div><br/>
|
|
<div><img src="https://avatars.slack-edge.com/2017-10-04/251566892466_e37667e6064fe542e7d7_72.jpg" /><div class="message"><div class="username">naghdy</div><div class="time">2018-10-08 15:26</div><div class="msg">@maciej that kind of snark is not useful</div></div></div><br/>
|
|
</div></body></html> |