Decide/develop our own style guide

[NivenPrasad]

Overview

Develop style guide for the overall navigation and visual appearance of the site.

Action Items

• Define a color guide
• Define a typography system
• Create key components

Resources/Instructions

• Figma File: https://www.figma.com/file/zGyhV8Z6sLohatYAnFoxQm/100Automations-Project-Board?node-id=243%3A363
• Reference to Hack for LA Figma

[Olivia-Chiong]

@CamilaArias Bonnie shared this style guide for the hack for LA website and was wondering if we could develop the same for this project. Are you able to take a look and let us know if you are able to work on this?

[NivenPrasad]

Progress: This has been started in Figma: "Tokens and Components" page
Blocks: None
Availability: Available
Eta: 2 weeks

[NivenPrasad]

@CamilaArias is away until January 3, 2021.

[Olivia-Chiong]

@ExperimentsInHonesty will add @CamilaArias to UI/UX board.

@CamilaArias and @mdothman will meet to discuss best practices for style guide.

[Olivia-Chiong]

@CamilaArias and @mdothman are still working together with the team from Hack for LA website and will provide updates next week.

[CamilaArias]

Still very busy with work this week, but I will get back to working on this again this weekend onwards. I will break it up in smaller tasks, components and phases and track it on Figma, will post update then.

[Olivia-Chiong]

@CamilaArias is putting together the list of tasks to do here - https://www.figma.com/file/zGyhV8Z6sLohatYAnFoxQm/100Automations-Project-Board?node-id=243%3A363
and we can convert some into issues.

S - no need to think, quick task that takes 5-10 mins
M - needs a bit of thinking and then working for 45 mins - 60 mins
L - Needs thought process before working on it, could take 1-2 hours
XL - Ambiguious task that requires thinking before start working on it

[henlatourrette]

Close this issue when all the desing issues have been created.

[henlatourrette]

Proposing a working session to create all issues on Sat March 20th, 2021.

[NivenPrasad]

Notes: Design System - too much work - need some more detail from developers. Then do a lean handoff to developers. Design System can come after that. Setting expectations around "design system".

Handoff to include:

1. Autolayout - for all pages Constraints - for all pages
2. Colors for each of mobile and desktop, Typescale for each of mobile and desktop, Layout (Grid for mobile and desktop, navigations of footer and header for mobile and desktop)
3. Components - developer specs
4. Exportable assets (eg. SVGs) - for all pages

[superbunker]

we totally have styles