Design System for Web for Life Itself Labs (and Life Itself)

[rufuspollock]

What's this about ?

The Life Itself projects are gradually growing, as a result of which it is proving difficult to maintain a standard design structure that co relates with all the new and existing projects. Moreover, we have to rethink from scratch about the core design factors to be used when creating newly related projects. This not only consumes a lot of time and effort on all teams involved, but also applies a restriction of not being in sync with design choices.

In order to solve this problem, we intend to create a design system that could be used and maintained across all our projects.

Job stories

When implementing the labs website or any life itself website I want to quickly create the look and feel without starting from scratch (e.g. just looking up colors and fonts in an existing place) so that it is quick to implement and is consistent with other labs sites (e.g. web3, ecosystem) and consistent with Life Itself overall

• Font (especially free/open google fonts). Usually 1 or two font families (headings and text)
• Font sizings and even spacing/line height
• Colors: fairly sizable palette
  • Primacy color (or two)
  • Accent color
  • Default colors e.g. grays etc
  • Background color
• Tailwind: we use tailwind by default so
  • Instructions on how to configure tailwind (or even off the shelf config settings we can copy and paste)
  • (Nice to have) Use the tailwind default palettes https://tailwindcss.com/docs/customizing-colors#default-color-palette

Questions to answer

• [x] Is this Life itself and labs (or primarily Labs ...) ✅ let's focus on labs and do life itself to extent needed
• [ ] What is a color palette for web design? (Hint: refactoring UI guide ...)
• [ ] What is font guidance for web design?
• [x] Do we need dark and light modes? ✅ likely yes but could start with default which is dark mode. Want light model we want to do e.g. ecosystem soon
• [x] How closely do we follow the initial design on page 6 of https://www.canva.com/design/DAE9v91NVQw/-PlUsECcBQTUOk08Rskccw/edit? ✅ we take inspiration but need not faithfully follow this as need to work for web and with web fonts etc

Acceptance

Markdown page in https://github.com/life-itself/community/tree/main/notes with answers to the following (can also list backups and research)

• [ ] Typography (fonts, sizes, etc..)
  • [ ] Font family chosen for headings
    • Mulish black/900 spacing set to tailwind tracking-tight
  • [ ] Font family chosen for main text
    • Mulish regular/400
  • [ ] Any other special fonts (e.g. subheadings or code)
    • lead text (eg. hero subheadings .. ) Mulish light/300
    • other fonts to be considered: Inter var
• [ ] Colors (palette)
  • [ ] Gray-ish color palette chosen from tailwind text-slate-200/50
  • [ ] Accent / primary color palette text-slate-200 and text-yellow-400 (custom yellow from logo)
  • [ ] Any other special colors
  • [ ] Extra version of these for light mode if we are doing
• [ ] Logo smaller and changed font to mulish see typogrpahy above
• [ ] Icons: a recommended icon pack especially covering social icons etc
  • using hero icons tailwind recommended or reshot

Penpot

Tasks

• [ ] Read through UI guide
• [ ] Gather and share resources (start with typography and colors)
  • for now can use a notion template to organize. see https://khalilali.notion.site/0ae6230d12324f1fa430e4eb85bb0ab1?v=8ab3460221af4befad9e2af21da9322b
• [ ] ...

[rufuspollock]

@khalilcodes can you update here with progress so far?

[rufuspollock]

Next steps

• [ ] Finish evaluation of existing approach e.g. web3 and current labs and current life itself - https://excalidraw.com/#room=11f392d6532ac1bdfee6,2RpAr6rZODEt_7dbePSL_Q
• [ ] do a mockup of labs page in penpot so we can quickly play around with options (a crude version of the front page)

[theo-cox]

Can we have an alignment chat with @nathenf and I around this please? And in general I'd love to be inputting around this stuff at the jump to avoid wasted effort if we pivot

[theo-cox]

As per chat artboard 7 on the penpot (https://design.penpot.app/#/workspace/e9bb3800-c488-11ec-ab9e-75f6b8214121/edc8d100-c488-11ec-ab9e-75f6b8214121?page-id=edc8d101-c488-11ec-ab9e-75f6b8214121) now represents my preferred direction @khalilcodes @rufuspollock

[khalilcodes]

@theo-cox

Backstory (this issue):

In order to be consistent, and gradually extend further to all Life itself sites, @rufuspollock opened this issue to which I have picked upon and have been working along these lines by using web3 and labs as base projects to iterate. Hence, you can see the pattern of my design choices and why they are similar.

More info on what we are trying to achieve currently:

The aim here is to keep a consistent pattern in terms of design. The idea is to give a feeling that the user is within the same boundaries/ecosystem/scope when he/she is transitioning between LifeItself Sites. As of now when going from web3 to labs, the user is taken to a completely different website which looks like it has nothing to do with where they initially were i.e, web3 (even based on the Artboard-7 Penpot)

example of what I mean:

If we look at tailwind branding, etc., going from tailwindcss.com to tailwindui.com I'm in a similar environment/framework (some sort of connection) although they both are two separate offsets in terms of what is being offered i.e, the former is a free tool and the latter a paid package.

Concerns:

• If we completely redesign the Labs website (having no similarities with what is in web3), we might have to end up redesigning a lot of things in web3 also, if we want to follow the above design methodology.
• We are implementing a dark and light theme in web3 and that is going to affect the user's experience from web3 to labs if its a pure color (as in yellow).
• Not much info on what the Labs website is about and what it's trying to achieve. This affects UI/UX implementation.

Suggestions:

• Since web3 has already gained a lot of successful traction, and Labs still being a WIP, I believe we ought to think it the other way round i.e, picking up design snippets from web3 and adding them to Lab3.
• Only change the fonts on web3 (which is Inter at the moment) or maybe vice versa. Same goes for other sites too.

Conclusion:

As we iterate together on Labs, it's best to keep in mind how our design system would affect other parts of the Life Itself sites (lifeitself, web3, ecosystem).

[nathenf]

Definitely still keen for us to lock in a conversation. Everything you are saying is completely valid but my concern is that we are trying to fit two different websites into the same box. The entire purpose of the Web3 website is different to that of Labs - Web3 is a resource whereas Labs is more a portfolio and landing page.

Furthermore, if we are seeking to use Web3 as a basis to expand across other websites the big question is it this even the style that we want? IMO the Web3 website is not.

In general we want to keep a same style across all websites, but also have a differential. For example, we keep the colour scheme, fonts, etc the same but use a different primary background colour for each (Web3: Dark, Labs: Yellow, Mapping: White).

[theo-cox]

Thanks for helpful comments @khalilcodes and @nathenf. Agree on the points re consistency, and acknowledge particularly that you haven't had enough info up until now regarding the purpose of the Labs website, and the Labs brand identity more broadly.

I'm therefore going to put some time in for the 3 of us to discuss how to move forward. Hopefully I can offer the needed info around Labs (with Nathen's helpful input I'm sure), and you can tell us what you need for web/UX design.

More generally, though, I'd have to agree with Nathen: Labs is the overarching banner which other initiatives fall under, and so the brand identity for Labs should be what determines the rest (ie web3 and ecosystem sites). It was just unfortunate coincidence that the web3 site went live first, meaning it was implemented without that brand identity in mind. I'd agree with Nathen that the web3 style as it stands currently isn't suited to what we want for Labs.

Apologies @khalilcodes , as I know conversations like this are likely very frustrating! Especially when you've already done a lot of really great work. Hopefully as part of our call we can also discuss workflow, and how we can better support you in tech implementation going forward.

[theo-cox]

P.s. @khalilcodes see here for WIP brand narrative and useful summary excalidraw re Labs: https://docs.google.com/document/d/1ONPuuaTI24NZhOEuO0Q2b77wNgzTXpcnfVLO2Ghjlz8/edit?usp=sharing

[khalilcodes]

Thanks @nathenf @theo-cox for elaborating on the concerns and explanations and also for the excalidraw. Look forward to our call. 👍

[rufuspollock]

@theo-cox can we close this?

[theo-cox]

Eh yeah why not. We don't yet have a complete design system but I think this is good enough for now.

[theo-cox]

WONTFIX. We've got a website which works well for now. We can loop back to a full design system later.