Styling Guide

[mar-bi]

Styling Guide

I'd like to have a Styling Guide, which I started in Slack, here.

High-Level idea

• sharp rectangular edges for boxes,
• rounded-edges sans-serif font-family,
• outlined buttons with transparent background and slightly rounded corners,
• headings use UPPERCASE,
• white background of pages.

Wireframes

• Main https://wireframe.cc/ugaM3U
• Jobs https://wireframe.cc/7DG4PE
• Learn https://wireframe.cc/7cb4ce
• Events https://wireframe.cc/rDGHuX
• Support https://wireframe.cc/tJJyeA
• Stories https://wireframe.cc/99Xlmi

General Styling Rules

1. Color Palette
   - Palette 4 link

2. Boxes

• rectangular,
• no rounded-edges

3. Font-Families

• Roboto + Open Sans Specimen,
  Roboto for headings, OpenSans for text (<p>)

4. Buttons
   a. icon buttons - SVG icons wrapped in <a>
   b. flat buttons:

   • outlined buttons - just colored borders
   • no background,
   • button text is UPPERCASE,
   • border size : 1px for small button, 2px for big
   • border has slightly rounded corners

5. Headings

   • UPPERCASE
   • h1 - used in Hero only
   • h2 - for headings of the Main
   • h3 - for headings of the Main

6. Icons

• SVG format, more in main-page-icons #53

7. Images

• free images without attribution

8. Form elements

• all except options. More details in Extended Filter Component #55

[spences10]

1. Ok, so from me it was Colour Schema 2 or 4
2. Fonts, was it open sans and roboto?
3. 🤷‍♂️
4. We can make share components for these once agreed on colours I guess?

[mar-bi]

Right.

1. Schema 4 has got 3 votes. It's a leader. So you add it with you global app style #16 .
2. Let's stay with these fonts.
3. together with 4
4. we can discuss them before we start building them. 😄

[mar-bi]

ColorPalette4

Hex Values:

• "red" - #ff8463
• "green" - #8ac3a9
• "yellow" - #fcdeb6
• "light violet" - #755f9f
• "dark violet" - #453463

[spences10]

Beautiful 👌

[mar-bi]

Main Page

[mar-bi]

Jobs Page

[mar-bi]

Learn Page

[mar-bi]

Support Page

[mar-bi]

Story Page

[mar-bi]

Inspired by Material UI

I'm going to add an issue for rounded corners of buttons and square containers:

border-radius: 2px;

and search for such elements through the app 🔍

[spences10]

All teh edges 💯 👌